better list
This commit is contained in:
parent
44e90059b3
commit
a4f92b2da8
@ -457,8 +457,7 @@ export default function StudioPage() {
|
||||
<div className="hidden md:flex items-center px-4 py-3 bg-muted/50 rounded-lg text-sm font-semibold text-muted-foreground border border-border/50">
|
||||
<div className="flex-1 min-w-0">{t('promptName')}</div>
|
||||
<div className="w-28 text-center hidden lg:block">{t('updatedAt')}</div>
|
||||
<div className="w-24 text-center hidden xl:block">{t('lastUsed')}</div>
|
||||
<div className="w-16 text-center">{t('tags')}</div>
|
||||
<div className="w-32 text-center">{t('tags')}</div>
|
||||
<div className="w-20 text-center">Actions</div>
|
||||
</div>
|
||||
|
||||
@ -477,11 +476,6 @@ export default function StudioPage() {
|
||||
{prompt.name}
|
||||
</span>
|
||||
</h3>
|
||||
<div className="flex items-center space-x-1 md:hidden">
|
||||
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full">
|
||||
{prompt.tags?.length || 0} tags
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed mb-2">
|
||||
{prompt.description || 'No description available'}
|
||||
@ -489,12 +483,7 @@ export default function StudioPage() {
|
||||
|
||||
{/* Mobile metadata */}
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground md:hidden">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span>Updated {formatDate(prompt.updatedAt)}</span>
|
||||
{prompt.lastUsed && (
|
||||
<span>Used {formatDate(prompt.lastUsed)}</span>
|
||||
)}
|
||||
</div>
|
||||
<span>Updated {formatDate(prompt.updatedAt)}</span>
|
||||
{prompt.currentVersion && (
|
||||
<span className="bg-muted px-2 py-1 rounded text-xs font-medium">
|
||||
v{prompt.currentVersion}
|
||||
@ -504,24 +493,27 @@ export default function StudioPage() {
|
||||
|
||||
{/* Mobile tags */}
|
||||
<div className="flex flex-wrap gap-1 mt-2 md:hidden">
|
||||
{prompt.tags?.slice(0, 3).map((tag: string | { name: string }) => {
|
||||
{prompt.tags?.slice(0, 4).map((tag: string | { name: string }) => {
|
||||
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
|
||||
const displayTag = tagName.length > 15 ? tagName.slice(0, 15) + '...' : tagName;
|
||||
const displayTag = tagName.length > 12 ? tagName.slice(0, 12) + '...' : tagName;
|
||||
return (
|
||||
<span
|
||||
key={tagName}
|
||||
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-primary/5 text-primary/80 rounded-full border border-primary/10"
|
||||
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full border border-primary/20"
|
||||
title={tagName}
|
||||
>
|
||||
{displayTag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{prompt.tags && prompt.tags.length > 3 && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full">
|
||||
+{prompt.tags.length - 3}
|
||||
{prompt.tags && prompt.tags.length > 4 && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full" title={`${prompt.tags.length - 4} more tags`}>
|
||||
+{prompt.tags.length - 4}
|
||||
</span>
|
||||
)}
|
||||
{(!prompt.tags || prompt.tags.length === 0) && (
|
||||
<span className="text-xs text-muted-foreground/50 italic">No tags</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -530,13 +522,30 @@ export default function StudioPage() {
|
||||
<div className="w-28 text-sm text-muted-foreground text-center hidden lg:block">
|
||||
{formatDate(prompt.updatedAt)}
|
||||
</div>
|
||||
<div className="w-24 text-sm text-muted-foreground text-center hidden xl:block">
|
||||
{prompt.lastUsed ? formatDate(prompt.lastUsed) : t('never')}
|
||||
</div>
|
||||
<div className="w-16 flex justify-center">
|
||||
<span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full border border-primary/20">
|
||||
{prompt.tags?.length || 0}
|
||||
</span>
|
||||
<div className="w-32 flex justify-center">
|
||||
<div className="flex flex-wrap gap-1 items-center justify-center">
|
||||
{prompt.tags?.slice(0, 2).map((tag: string | { name: string }) => {
|
||||
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
|
||||
const displayTag = tagName.length > 8 ? tagName.slice(0, 8) + '...' : tagName;
|
||||
return (
|
||||
<span
|
||||
key={tagName}
|
||||
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full border border-primary/20"
|
||||
title={tagName}
|
||||
>
|
||||
{displayTag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{prompt.tags && prompt.tags.length > 2 && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full" title={`${prompt.tags.length - 2} more tags`}>
|
||||
+{prompt.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
{(!prompt.tags || prompt.tags.length === 0) && (
|
||||
<span className="text-xs text-muted-foreground/50 italic">No tags</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user