morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish listing

Browse Source
This commit is contained in:
wass08
2026-03-04 15:46:18 +01:00
parent 799cf2f56c
commit 47747495e5
1 changed files with 39 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/ui/panels/presets/presets-popover.tsx
+32 -63
View File
@@ -1,10 +1,10 @@
'use client' 'use client'
import { useEffect, useState, useCallback } from 'react' import { useEffect, useState, useCallback } from 'react'
import { BookMarked, Check, Globe, GlobeLock, Pencil, Plus, Save, Trash2, Users, X } from 'lucide-react' import { BookMarked, Check, Globe, GlobeLock, MoreHorizontal, Pencil, Plus, Save, Trash2, Users, X } from 'lucide-react'
import { emitter } from '@pascal-app/core' import { emitter } from '@pascal-app/core'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/primitives/dropdown-menu'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/primitives/popover' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/primitives/popover'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/primitives/tooltip'
import { useAuth } from '@/features/community/lib/auth/hooks' import { useAuth } from '@/features/community/lib/auth/hooks'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@@ -390,7 +390,7 @@ function PresetRow({
return ( return (
<li className="group flex items-center gap-2 px-3 py-2.5 hover:bg-white/5 transition-colors"> <li className="group flex items-center gap-2 px-3 py-2.5 hover:bg-white/5 transition-colors">
{/* Thumbnail */} {/* Thumbnail */}
<div className="h-8 w-8 shrink-0 rounded-md border border-border/40 bg-white/5 overflow-hidden"> <div className="h-12 w-12 shrink-0 rounded-md border border-border/40 bg-white/5 overflow-hidden">
{preset.thumbnail_url ? ( {preset.thumbnail_url ? (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img src={preset.thumbnail_url} alt={preset.name} className="h-full w-full object-cover" /> <img src={preset.thumbnail_url} alt={preset.name} className="h-full w-full object-cover" />
@@ -407,7 +407,8 @@ function PresetRow({
<span className="block truncate text-xs font-medium text-foreground group-hover:text-foreground/90"> <span className="block truncate text-xs font-medium text-foreground group-hover:text-foreground/90">
{preset.name} {preset.name}
</span> </span>
{preset.is_community && ( {/* Only show globe in "My presets" — in community tab it's redundant */}
{isMine && preset.is_community && (
<Globe className="h-2.5 w-2.5 shrink-0 text-muted-foreground/50" /> <Globe className="h-2.5 w-2.5 shrink-0 text-muted-foreground/50" />
)} )}
</span> </span>
@@ -416,73 +417,41 @@ function PresetRow({
</span> </span>
</button> </button>
{/* Actions — only shown on hover for "My presets" */} {/* Actions — 3-dot dropdown, only in "My presets" */}
{isMine && ( {isMine && (
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"> <DropdownMenu>
{/* Save into (overwrite) */} <DropdownMenuTrigger asChild>
<Tooltip>
<TooltipTrigger asChild>
<button <button
onClick={onOverwrite}
className={cn( className={cn(
'flex h-6 w-6 items-center justify-center rounded-md transition-colors', 'flex h-6 w-6 shrink-0 items-center justify-center rounded-md transition-colors opacity-0 group-hover:opacity-100',
justOverwritten justOverwritten
? 'text-green-400 bg-green-500/10' ? 'text-green-400 bg-green-500/10 opacity-100'
: 'text-muted-foreground hover:text-foreground hover:bg-white/10', : 'text-muted-foreground hover:text-foreground hover:bg-white/10',
)} )}
> >
{justOverwritten ? <Check className="h-3 w-3" /> : <Save className="h-3 w-3" />} {justOverwritten ? <Check className="h-3 w-3" /> : <MoreHorizontal className="h-3.5 w-3.5" />}
</button> </button>
</TooltipTrigger> </DropdownMenuTrigger>
<TooltipContent side="top">Save current config here</TooltipContent> <DropdownMenuContent side="left" align="start" className="min-w-44">
</Tooltip> <DropdownMenuItem onClick={onOverwrite}>
<Save className="h-3.5 w-3.5" />
{/* Community toggle */} Update with current
<Tooltip> </DropdownMenuItem>
<TooltipTrigger asChild> <DropdownMenuItem onClick={onToggleCommunity}>
<button {preset.is_community
onClick={onToggleCommunity} ? <><GlobeLock className="h-3.5 w-3.5" />Remove from community</>
className={cn( : <><Globe className="h-3.5 w-3.5" />Share with community</>}
'flex h-6 w-6 items-center justify-center rounded-md transition-colors', </DropdownMenuItem>
preset.is_community <DropdownMenuItem onClick={onStartRename}>
? 'text-blue-400 hover:text-blue-300 hover:bg-blue-500/10' <Pencil className="h-3.5 w-3.5" />
: 'text-muted-foreground hover:text-blue-400 hover:bg-blue-500/10', Rename
)} </DropdownMenuItem>
> <DropdownMenuItem variant="destructive" onClick={onDeleteRequest}>
{preset.is_community ? <Globe className="h-3 w-3" /> : <GlobeLock className="h-3 w-3" />} <Trash2 className="h-3.5 w-3.5" />
</button> Delete
</TooltipTrigger> </DropdownMenuItem>
<TooltipContent side="top"> </DropdownMenuContent>
{preset.is_community ? 'Remove from community' : 'Share with community'} </DropdownMenu>
</TooltipContent>
</Tooltip>
{/* Rename */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onStartRename}
className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
>
<Pencil className="h-3 w-3" />
</button>
</TooltipTrigger>
<TooltipContent side="top">Rename</TooltipContent>
</Tooltip>
{/* Delete */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onDeleteRequest}
className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-red-400 hover:bg-red-500/10 transition-colors"
>
<Trash2 className="h-3 w-3" />
</button>
</TooltipTrigger>
<TooltipContent side="top">Delete</TooltipContent>
</Tooltip>
</div>
)} )}
</li> </li>
) )