better studio layout
This commit is contained in:
parent
63cbeaa0fc
commit
c6b766cda4
@ -228,74 +228,106 @@ export default function StudioPage() {
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
{/* Search */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={t('searchPrompts')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-muted/30 rounded-xl p-4 mb-6">
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
{/* Search */}
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={t('searchPrompts')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 bg-background border-border/50 focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tag Filter */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={selectedTag}
|
||||
onChange={(e) => setSelectedTag(e.target.value)}
|
||||
className="appearance-none bg-background border border-input rounded-md px-3 py-2 pr-8 min-w-[120px] focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">{t('allTags')}</option>
|
||||
{allTags.map(tag => (
|
||||
<option key={tag} value={tag}>{tag}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
{/* Filters Row */}
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
{/* Tag Filter */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={selectedTag}
|
||||
onChange={(e) => setSelectedTag(e.target.value)}
|
||||
className="appearance-none bg-background border border-border/50 rounded-lg px-3 py-2 pr-8 min-w-[130px] focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors text-sm"
|
||||
>
|
||||
<option value="">{t('allTags')}</option>
|
||||
{allTags.map(tag => (
|
||||
<option key={tag} value={tag}>{tag}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* Sort */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={`${sortField}-${sortOrder}`}
|
||||
onChange={(e) => {
|
||||
const [field, order] = e.target.value.split('-')
|
||||
setSortField(field as SortField)
|
||||
setSortOrder(order as SortOrder)
|
||||
}}
|
||||
className="appearance-none bg-background border border-input rounded-md px-3 py-2 pr-8 min-w-[140px] focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="updatedAt-desc">{t('sortByUpdated')} ({t('descending')})</option>
|
||||
<option value="updatedAt-asc">{t('sortByUpdated')} ({t('ascending')})</option>
|
||||
<option value="createdAt-desc">{t('sortByDate')} ({t('descending')})</option>
|
||||
<option value="createdAt-asc">{t('sortByDate')} ({t('ascending')})</option>
|
||||
<option value="name-asc">{t('sortByName')} ({t('ascending')})</option>
|
||||
<option value="name-desc">{t('sortByName')} ({t('descending')})</option>
|
||||
<option value="lastUsed-desc">{t('lastUsed')} ({t('descending')})</option>
|
||||
<option value="lastUsed-asc">{t('lastUsed')} ({t('ascending')})</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
{/* Sort */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={`${sortField}-${sortOrder}`}
|
||||
onChange={(e) => {
|
||||
const [field, order] = e.target.value.split('-')
|
||||
setSortField(field as SortField)
|
||||
setSortOrder(order as SortOrder)
|
||||
}}
|
||||
className="appearance-none bg-background border border-border/50 rounded-lg px-3 py-2 pr-8 min-w-[150px] focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors text-sm"
|
||||
>
|
||||
<option value="updatedAt-desc">{t('sortByUpdated')} ({t('descending')})</option>
|
||||
<option value="updatedAt-asc">{t('sortByUpdated')} ({t('ascending')})</option>
|
||||
<option value="createdAt-desc">{t('sortByDate')} ({t('descending')})</option>
|
||||
<option value="createdAt-asc">{t('sortByDate')} ({t('ascending')})</option>
|
||||
<option value="name-asc">{t('sortByName')} ({t('ascending')})</option>
|
||||
<option value="name-desc">{t('sortByName')} ({t('descending')})</option>
|
||||
<option value="lastUsed-desc">{t('lastUsed')} ({t('descending')})</option>
|
||||
<option value="lastUsed-asc">{t('lastUsed')} ({t('ascending')})</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* View Mode Toggle */}
|
||||
<div className="flex items-center border border-input rounded-md">
|
||||
<Button
|
||||
variant={viewMode === 'grid' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('grid')}
|
||||
className="rounded-r-none"
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'list' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('list')}
|
||||
className="rounded-l-none"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* View Mode Toggle */}
|
||||
<div className="flex items-center bg-background border border-border/50 rounded-lg overflow-hidden">
|
||||
<Button
|
||||
variant={viewMode === 'grid' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('grid')}
|
||||
className="rounded-none border-r border-border/20 h-9"
|
||||
title="Grid View"
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'list' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('list')}
|
||||
className="rounded-none h-9"
|
||||
title="List View"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="flex items-center justify-between mt-4 pt-3 border-t border-border/30">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{filteredPrompts.length > 0 ? (
|
||||
<span>
|
||||
Showing <span className="font-medium text-foreground">{filteredPrompts.length}</span> of <span className="font-medium text-foreground">{pagination.total}</span> prompts
|
||||
</span>
|
||||
) : (
|
||||
<span>No prompts found</span>
|
||||
)}
|
||||
</div>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Clear search
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -303,11 +335,13 @@ export default function StudioPage() {
|
||||
|
||||
{/* Content */}
|
||||
{filteredPrompts.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">{t('noPrompts')}</h3>
|
||||
<p className="text-muted-foreground mb-4">{t('createFirstPrompt')}</p>
|
||||
<Button onClick={handleCreatePrompt}>
|
||||
<div className="text-center py-16">
|
||||
<div className="bg-muted/30 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
|
||||
<FileText className="h-12 w-12 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-3">{t('noPrompts')}</h3>
|
||||
<p className="text-muted-foreground mb-6 max-w-md mx-auto leading-relaxed">{t('createFirstPrompt')}</p>
|
||||
<Button onClick={handleCreatePrompt} size="lg" className="font-medium">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t('createPrompt')}
|
||||
</Button>
|
||||
@ -316,145 +350,238 @@ export default function StudioPage() {
|
||||
<>
|
||||
{/* Prompts Grid/List */}
|
||||
{viewMode === 'grid' ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-6 mb-8">
|
||||
{currentPrompts.map((prompt) => (
|
||||
<div
|
||||
key={prompt.id}
|
||||
className="bg-card rounded-lg border border-border p-4 hover:shadow-md transition-shadow cursor-pointer"
|
||||
className="group bg-card rounded-xl border border-border hover:border-primary/20 hover:shadow-lg transition-all duration-200 cursor-pointer overflow-hidden flex flex-col h-full"
|
||||
onClick={() => handleShowDetails(prompt)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-foreground truncate mb-1">
|
||||
{prompt.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{prompt.description}
|
||||
</p>
|
||||
{/* Card Header */}
|
||||
<div className="p-4 pb-3 flex-1">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1 min-w-0 pr-2">
|
||||
<h3 className="font-semibold text-foreground text-sm leading-tight mb-2 group-hover:text-primary transition-colors">
|
||||
<span className="line-clamp-2 break-words" title={prompt.name}>
|
||||
{prompt.name}
|
||||
</span>
|
||||
</h3>
|
||||
<div className="h-10 overflow-hidden">
|
||||
<p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
|
||||
{prompt.description || 'No description available'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-primary/10 hover:text-primary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleQuickEdit(prompt)
|
||||
}}
|
||||
title="Quick Edit"
|
||||
>
|
||||
<Edit className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative ml-2">
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-1 mb-3 min-h-[20px]">
|
||||
{prompt.tags?.slice(0, 2).map((tag: string | { name: string }) => {
|
||||
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
|
||||
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"
|
||||
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>
|
||||
|
||||
{/* Card Footer */}
|
||||
<div className="px-4 pb-4">
|
||||
{/* Metadata */}
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground mb-3 pt-2 border-t border-border/50">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<span>{formatDate(prompt.updatedAt)}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
{prompt.currentVersion && (
|
||||
<span className="bg-muted px-1.5 py-0.5 rounded text-xs font-medium">
|
||||
v{prompt.currentVersion}
|
||||
</span>
|
||||
)}
|
||||
{prompt.usage !== undefined && (
|
||||
<span className="text-muted-foreground/70">
|
||||
{prompt.usage} uses
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDebugPrompt(prompt.id)
|
||||
}}
|
||||
className="flex-1 h-8 text-xs font-medium hover:bg-primary hover:text-primary-foreground transition-colors"
|
||||
>
|
||||
<Play className="h-3 w-3 mr-1" />
|
||||
Open Studio
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleQuickEdit(prompt)
|
||||
}}
|
||||
className="h-8 w-8 p-0 hover:bg-muted transition-colors"
|
||||
title="Quick Edit"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{prompt.tags?.slice(0, 3).map((tag: string | { name: string }) => {
|
||||
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
|
||||
return (
|
||||
<span
|
||||
key={tagName}
|
||||
className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
|
||||
>
|
||||
{tagName}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{prompt.tags && prompt.tags.length > 3 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
+{prompt.tags.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="text-xs text-muted-foreground space-y-1">
|
||||
<div className="flex items-center">
|
||||
<Calendar className="h-3 w-3 mr-1" />
|
||||
<span className="hidden sm:inline">{t('updatedAt')}: </span>
|
||||
{formatDate(prompt.updatedAt)}
|
||||
</div>
|
||||
{prompt.lastUsed && (
|
||||
<div>
|
||||
<span className="hidden sm:inline">{t('lastUsed')}: </span>
|
||||
<span className="sm:hidden">Used: </span>
|
||||
{formatDate(prompt.lastUsed)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center justify-end mt-4 pt-3 border-t border-border">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDebugPrompt(prompt.id)
|
||||
}}
|
||||
className="flex items-center space-x-1"
|
||||
>
|
||||
<Play className="h-3 w-3" />
|
||||
<span className="text-xs">{t('debugPrompt')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="space-y-3 mb-8">
|
||||
{/* List Header */}
|
||||
<div className="flex items-center p-3 bg-muted rounded-lg text-sm font-medium text-muted-foreground">
|
||||
<div className="flex-1">{t('promptName')}</div>
|
||||
<div className="w-32">{t('updatedAt')}</div>
|
||||
<div className="w-32">{t('lastUsed')}</div>
|
||||
<div className="w-20">{t('tags')}</div>
|
||||
<div className="w-16"></div>
|
||||
<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-20 text-center">Actions</div>
|
||||
</div>
|
||||
|
||||
{/* List Items */}
|
||||
{currentPrompts.map((prompt) => (
|
||||
<div
|
||||
key={prompt.id}
|
||||
className="flex items-center p-3 bg-card rounded-lg border border-border hover:shadow-sm transition-shadow cursor-pointer"
|
||||
className="group flex flex-col md:flex-row md:items-center p-4 bg-card rounded-xl border border-border hover:border-primary/20 hover:shadow-md transition-all duration-200 cursor-pointer"
|
||||
onClick={() => handleShowDetails(prompt)}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-foreground">{prompt.name}</div>
|
||||
<div className="text-sm text-muted-foreground truncate">
|
||||
{prompt.description}
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 min-w-0 mb-3 md:mb-0">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="font-semibold text-foreground text-sm leading-tight group-hover:text-primary transition-colors pr-2">
|
||||
<span className="line-clamp-1 break-words" title={prompt.name}>
|
||||
{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'}
|
||||
</p>
|
||||
|
||||
{/* 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>
|
||||
{prompt.currentVersion && (
|
||||
<span className="bg-muted px-2 py-1 rounded text-xs font-medium">
|
||||
v{prompt.currentVersion}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile tags */}
|
||||
<div className="flex flex-wrap gap-1 mt-2 md:hidden">
|
||||
{prompt.tags?.slice(0, 3).map((tag: string | { name: string }) => {
|
||||
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
|
||||
const displayTag = tagName.length > 15 ? tagName.slice(0, 15) + '...' : 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"
|
||||
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}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-32 text-sm text-muted-foreground">
|
||||
{formatDate(prompt.updatedAt)}
|
||||
|
||||
{/* Desktop metadata */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<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>
|
||||
</div>
|
||||
<div className="w-32 text-sm text-muted-foreground">
|
||||
{prompt.lastUsed ? formatDate(prompt.lastUsed) : t('never')}
|
||||
</div>
|
||||
<div className="w-20">
|
||||
<span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full">
|
||||
{prompt.tags.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-16 flex items-center justify-end space-x-1">
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end space-x-2 mt-3 md:mt-0 md:w-20 pt-3 md:pt-0 border-t border-border/50 md:border-t-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleQuickEdit(prompt)}
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleQuickEdit(prompt)
|
||||
}}
|
||||
className="h-8 px-3 md:w-8 md:px-0 text-xs font-medium hover:bg-primary/10 hover:text-primary transition-colors"
|
||||
title="Quick Edit"
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
<Edit className="h-3 w-3 md:mr-0 mr-1" />
|
||||
<span className="md:hidden">Edit</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditPrompt(prompt.id)}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Full Edit"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDebugPrompt(prompt.id)
|
||||
}}
|
||||
className="h-8 px-3 text-xs font-medium hover:bg-primary hover:text-primary-foreground transition-colors md:hidden"
|
||||
>
|
||||
<MoreHorizontal className="h-3 w-3" />
|
||||
<Play className="h-3 w-3 mr-1" />
|
||||
Open
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user