feat: integrate Radix UI toggle components and replace custom toast implementation with Sonner
- Added @radix-ui/react-toggle and @radix-ui/react-toggle-group to package dependencies. - Implemented ToggleGroup and Toggle components for improved UI interaction. - Replaced custom toast notifications with Sonner for better user feedback. - Updated CanvasPage and ProjectsPage to utilize new toast notifications. - Removed obsolete toast context and provider. - Enhanced ProjectsPage with a toggle view for project display (cards/table).
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Projects list page: table with search, sort, pagination, actions.
|
||||
* Projects list page: table or cards view with search, sort, pagination, actions.
|
||||
* Sort by last edited (default), name, or created; configurable page size; export toast; undo delete.
|
||||
*/
|
||||
|
||||
@@ -30,6 +30,7 @@ import {
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import {
|
||||
ChevronLeft,
|
||||
@@ -43,6 +44,9 @@ import {
|
||||
FolderOpen,
|
||||
Search,
|
||||
Plus,
|
||||
LayoutGrid,
|
||||
List,
|
||||
Network,
|
||||
} from 'lucide-react'
|
||||
import { usePlatform } from './platformContext'
|
||||
import { getProjectIcon } from './icon-map'
|
||||
@@ -52,7 +56,7 @@ import {
|
||||
PROJECT_FILE_EXT,
|
||||
PROJECT_VERSION,
|
||||
} from './projectGraphStorage'
|
||||
import { useToast } from '@/components/ui/toast'
|
||||
import { toast } from 'sonner'
|
||||
import { NewProjectDialog } from './NewProjectDialog'
|
||||
import type { Project } from './types'
|
||||
|
||||
@@ -94,10 +98,99 @@ function getGraphCounts(projectId: string): { nodes: number; edges: number } {
|
||||
}
|
||||
}
|
||||
|
||||
type NodeLike = { id: string; position?: { x: number; y: number } }
|
||||
type EdgeLike = { id?: string; source: string; target: string }
|
||||
|
||||
/** Renders a minimal SVG preview of the graph from storage, or a placeholder. */
|
||||
function GraphThumbnail({ projectId, className }: { projectId: string; className?: string }) {
|
||||
const stored = loadGraphFromStorage(projectId)
|
||||
const nodes = (stored?.nodes ?? []) as NodeLike[]
|
||||
const edges = (stored?.edges ?? []) as EdgeLike[]
|
||||
const withPos = nodes.filter((n) => n.position && typeof n.position.x === 'number' && typeof n.position.y === 'number')
|
||||
|
||||
const dotGridPatternId = `dotgrid-${projectId.replace(/\W/g, '-')}`
|
||||
|
||||
if (withPos.length === 0) {
|
||||
return (
|
||||
<div
|
||||
className={`flex h-full w-full flex-col items-center justify-center gap-1 text-muted-foreground ${className ?? ''}`}
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
|
||||
backgroundSize: '8px 8px',
|
||||
backgroundColor: 'hsl(var(--muted) / 0.5)',
|
||||
}}
|
||||
aria-hidden
|
||||
>
|
||||
<Network className="size-8" />
|
||||
<span className="text-[10px]">No graph</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const padding = 12
|
||||
const xs = withPos.map((n) => n.position!.x)
|
||||
const ys = withPos.map((n) => n.position!.y)
|
||||
const minX = Math.min(...xs)
|
||||
const maxX = Math.max(...xs)
|
||||
const minY = Math.min(...ys)
|
||||
const maxY = Math.max(...ys)
|
||||
const w = Math.max(maxX - minX, 1)
|
||||
const h = Math.max(maxY - minY, 1)
|
||||
const scale = Math.min((200 - padding * 2) / w, (120 - padding * 2) / h, 8)
|
||||
const ox = padding - minX * scale
|
||||
const oy = padding - minY * scale
|
||||
|
||||
const nodeById = new Map(withPos.map((n) => [n.id, n]))
|
||||
const validEdges = edges.filter((e) => nodeById.has(e.source) && nodeById.has(e.target))
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={`h-full w-full ${className ?? ''}`}
|
||||
viewBox="0 0 200 120"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
aria-hidden
|
||||
>
|
||||
<defs>
|
||||
<pattern id={dotGridPatternId} width={8} height={8} patternUnits="userSpaceOnUse">
|
||||
<circle cx={1} cy={1} r={0.6} fill="hsl(var(--muted-foreground) / 0.2)" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width={200} height={120} fill="hsl(var(--muted) / 0.4)" />
|
||||
<rect width={200} height={120} fill={`url(#${dotGridPatternId})`} />
|
||||
{validEdges.slice(0, 50).map((e, i) => {
|
||||
const a = nodeById.get(e.source)!.position!
|
||||
const b = nodeById.get(e.target)!.position!
|
||||
return (
|
||||
<line
|
||||
key={e.id ?? `e-${i}`}
|
||||
x1={ox + a.x * scale}
|
||||
y1={oy + a.y * scale}
|
||||
x2={ox + b.x * scale}
|
||||
y2={oy + b.y * scale}
|
||||
stroke="hsl(var(--muted-foreground) / 0.4)"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{withPos.slice(0, 80).map((n) => (
|
||||
<circle
|
||||
key={n.id}
|
||||
cx={ox + n.position!.x * scale}
|
||||
cy={oy + n.position!.y * scale}
|
||||
r={3}
|
||||
fill="hsl(var(--primary))"
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export type ViewMode = 'table' | 'cards'
|
||||
|
||||
export function ProjectsPage() {
|
||||
const { orderedProjects, deleteProject, renameProject, createProject, restoreProject } = usePlatform()
|
||||
const navigate = useNavigate()
|
||||
const { addToast } = useToast()
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('cards')
|
||||
const [search, setSearch] = useState('')
|
||||
const [pageSize, setPageSize] = useState<number>(10)
|
||||
const [page, setPage] = useState(0)
|
||||
@@ -185,11 +278,14 @@ export function ProjectsPage() {
|
||||
deleteProject(project.id)
|
||||
setDeleteTarget(null)
|
||||
navigate('/projects', { replace: true })
|
||||
addToast(`"${project.name}" deleted`, {
|
||||
undo: () => restoreProject(project, snapshot),
|
||||
toast(`"${project.name}" deleted`, {
|
||||
action: {
|
||||
label: 'Undo',
|
||||
onClick: () => restoreProject(project, snapshot),
|
||||
},
|
||||
duration: 8000,
|
||||
})
|
||||
}, [deleteTarget, deleteProject, navigate, addToast, restoreProject])
|
||||
}, [deleteTarget, deleteProject, navigate, restoreProject])
|
||||
|
||||
const handleExport = useCallback(
|
||||
(project: Project) => {
|
||||
@@ -205,9 +301,9 @@ export function ProjectsPage() {
|
||||
a.download = filename
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
addToast(`Exported as ${filename}`)
|
||||
toast.success(`Exported as ${filename}`)
|
||||
},
|
||||
[addToast]
|
||||
[]
|
||||
)
|
||||
|
||||
const handleCreateProject = useCallback(
|
||||
@@ -221,23 +317,47 @@ export function ProjectsPage() {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
||||
<TooltipProvider>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<h1 className="p-3 scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
|
||||
Hi, David
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h2 className="text-lg font-semibold">Projects</h2>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="relative flex-1 sm:w-48">
|
||||
<Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search projects"
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value)
|
||||
setPage(0)
|
||||
}}
|
||||
className="pl-8"
|
||||
aria-label="Search projects by name"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3 sm:items-center">
|
||||
<div className="relative w-64 shrink-0 sm:justify-self-start">
|
||||
<Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
placeholder="Search projects"
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value)
|
||||
setPage(0)
|
||||
}}
|
||||
className="h-9 w-full pl-8"
|
||||
aria-label="Search projects by name"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-self-start sm:justify-self-center">
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={viewMode}
|
||||
onValueChange={(v) => v && setViewMode(v as ViewMode)}
|
||||
aria-label="View mode"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-0 rounded-md p-0.5 [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:not(:first-child)]:border-l-0"
|
||||
>
|
||||
<ToggleGroupItem value="cards" aria-label="Cards view" className="gap-1.5 px-2.5">
|
||||
<LayoutGrid className="size-3.5" />
|
||||
Cards
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="table" aria-label="Table view" className="gap-1.5 px-2.5">
|
||||
<List className="size-3.5" />
|
||||
Table
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div className="flex h-9 items-center gap-2 sm:justify-self-end">
|
||||
<Select
|
||||
value={pageSize === -1 ? 'all' : String(pageSize)}
|
||||
onValueChange={(v) => {
|
||||
@@ -245,7 +365,7 @@ export function ProjectsPage() {
|
||||
setPage(0)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[100px]">
|
||||
<SelectTrigger className="h-9 w-[120px]">
|
||||
<SelectValue placeholder="Page size" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -261,30 +381,43 @@ export function ProjectsPage() {
|
||||
</div>
|
||||
|
||||
{sorted.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed bg-muted/20 py-12">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{search.trim() ? 'No projects match your search.' : 'No projects yet. Create one to get started.'}
|
||||
</p>
|
||||
{!search.trim() && (
|
||||
<NewProjectDialog
|
||||
onCreate={handleCreateProject}
|
||||
existingNames={orderedProjects.map((p) => p.name)}
|
||||
trigger={
|
||||
<Button>
|
||||
<Plus className="size-4" />
|
||||
New project
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<NewProjectDialog
|
||||
onCreate={handleCreateProject}
|
||||
existingNames={orderedProjects.map((p) => p.name)}
|
||||
trigger={
|
||||
<div
|
||||
className="flex cursor-pointer flex-col overflow-hidden rounded-lg border border-dashed border-muted-foreground/30 bg-muted/20 shadow-sm transition-colors hover:border-muted-foreground/50 hover:bg-muted/30"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
;(e.currentTarget as HTMLElement).click()
|
||||
}
|
||||
}}
|
||||
aria-label="Create new project"
|
||||
>
|
||||
<div className="flex aspect-video w-full shrink-0 items-center justify-center bg-muted/30">
|
||||
<Plus className="size-12 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col gap-1 p-3">
|
||||
<span className="font-medium text-muted-foreground">New project</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{search.trim() ? 'No projects match your search.' : 'Create a new project'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
) : viewMode === 'table' ? (
|
||||
<>
|
||||
<div className="overflow-auto">
|
||||
<Table>
|
||||
<Table className="table-fixed">
|
||||
<TableHeader className="sticky top-0 z-10 bg-card">
|
||||
<TableRow className="hover:bg-transparent border-b">
|
||||
<TableHead>
|
||||
<TableRow className="hover:bg-transparent border-b h-8">
|
||||
<TableHead className="w-[35%] min-w-[100px] h-8 px-2 py-1.5 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center font-medium hover:underline"
|
||||
@@ -295,7 +428,7 @@ export function ProjectsPage() {
|
||||
{sortKey === 'name' && (sortDir === 'asc' ? ' ↑' : ' ↓')}
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="hidden sm:table-cell w-[100px]">
|
||||
<TableHead className="hidden sm:table-cell w-[120px] min-w-[100px] h-8 px-2 py-1.5 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className="font-medium hover:underline"
|
||||
@@ -306,8 +439,8 @@ export function ProjectsPage() {
|
||||
{sortKey === 'created' && (sortDir === 'asc' ? ' ↑' : ' ↓')}
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="hidden md:table-cell w-[90px]">Size</TableHead>
|
||||
<TableHead className="w-[140px]">
|
||||
<TableHead className="hidden md:table-cell w-[100px] min-w-[80px] h-8 px-2 py-1.5 text-xs">Size</TableHead>
|
||||
<TableHead className="w-[115px] min-w-[90px] h-8 px-2 py-1.5 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className="font-medium hover:underline"
|
||||
@@ -318,10 +451,10 @@ export function ProjectsPage() {
|
||||
{sortKey === 'lastEdited' && (sortDir === 'asc' ? ' ↑' : ' ↓')}
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="sticky right-0 z-10 w-[70px] bg-card" />
|
||||
<TableHead className="sticky right-0 z-10 w-[52px] min-w-[52px] bg-card h-8 px-1 py-1.5 text-xs" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableBody className="text-xs">
|
||||
{pageItems.map((project) => {
|
||||
const Icon = getProjectIcon(project.iconId)
|
||||
const counts = getGraphCounts(project.id)
|
||||
@@ -329,7 +462,7 @@ export function ProjectsPage() {
|
||||
return (
|
||||
<TableRow
|
||||
key={project.id}
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
className="cursor-pointer hover:bg-muted/50 h-8"
|
||||
onClick={() => handleOpen(project.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
@@ -341,28 +474,30 @@ export function ProjectsPage() {
|
||||
role="button"
|
||||
aria-label={`Open ${project.name}`}
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="font-medium">{project.name}</span>
|
||||
<TableCell className="px-2 py-1.5 min-w-0">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<Icon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="font-medium truncate">{project.name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="hidden sm:table-cell text-muted-foreground">
|
||||
{formatDate(project.createdAt)}
|
||||
<TableCell className="hidden sm:table-cell text-muted-foreground px-2 py-1.5 w-[120px] min-w-[100px]">
|
||||
<span className="truncate block" title={formatDate(project.createdAt)}>
|
||||
{formatDate(project.createdAt)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="hidden md:table-cell text-muted-foreground">
|
||||
{counts.nodes} nodes, {counts.edges} edges
|
||||
<TableCell className="hidden md:table-cell text-muted-foreground px-2 py-1.5 w-[100px] min-w-[80px]" title={`${counts.nodes} nodes, ${counts.edges} edges`}>
|
||||
{counts.nodes}n, {counts.edges}e
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<TableCell className="text-muted-foreground px-2 py-1.5 w-[115px] min-w-[90px]">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span>{getRelativeTime(lastEdited)}</span>
|
||||
<span className="truncate block">{getRelativeTime(lastEdited)}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{formatDate(lastEdited)}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="sticky right-0 bg-card"
|
||||
className="sticky right-0 bg-card w-[52px] min-w-[52px] px-1 py-1.5"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DropdownMenu>
|
||||
@@ -370,7 +505,7 @@ export function ProjectsPage() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8"
|
||||
className="size-7"
|
||||
aria-label={`Actions for ${project.name}`}
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
@@ -406,6 +541,158 @@ export function ProjectsPage() {
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t pt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Page {page + 1} of {totalPages}
|
||||
{pageSize !== -1 && ` · ${sorted.length} projects`}
|
||||
</p>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage(0)}
|
||||
disabled={page === 0}
|
||||
aria-label="First page"
|
||||
>
|
||||
<ChevronsLeft className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page === 0}
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
disabled={page >= totalPages - 1}
|
||||
aria-label="Next page"
|
||||
>
|
||||
<ChevronRight className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage(totalPages - 1)}
|
||||
disabled={page >= totalPages - 1}
|
||||
aria-label="Last page"
|
||||
>
|
||||
<ChevronsRight className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<NewProjectDialog
|
||||
onCreate={handleCreateProject}
|
||||
existingNames={orderedProjects.map((p) => p.name)}
|
||||
trigger={
|
||||
<div
|
||||
className="flex cursor-pointer flex-col overflow-hidden rounded-lg border border-dashed border-muted-foreground/30 bg-muted/20 shadow-sm transition-colors hover:border-muted-foreground/50 hover:bg-muted/30"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
; (e.currentTarget as HTMLElement).click()
|
||||
}
|
||||
}}
|
||||
aria-label="Create new project"
|
||||
>
|
||||
<div className="flex aspect-video w-full shrink-0 items-center justify-center bg-muted/30">
|
||||
<Plus className="size-12 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col gap-1 p-3">
|
||||
<span className="font-medium text-muted-foreground">New project</span>
|
||||
<span className="text-xs text-muted-foreground">Create a new project</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
{pageItems.map((project) => {
|
||||
const Icon = getProjectIcon(project.iconId)
|
||||
const lastEdited = project.lastEditedAt ?? project.createdAt
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className="group flex cursor-pointer flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md"
|
||||
onClick={() => handleOpen(project.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
handleOpen(project.id)
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Open ${project.name}`}
|
||||
>
|
||||
<div className="relative aspect-video w-full shrink-0 overflow-hidden bg-muted">
|
||||
<GraphThumbnail projectId={project.id} className="h-full w-full object-cover" />
|
||||
<div
|
||||
className="absolute right-1.5 top-1.5 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
className="size-7 rounded-full shadow-sm"
|
||||
aria-label={`Actions for ${project.name}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleOpen(project.id)}>
|
||||
<FolderOpen className="size-4" />
|
||||
Open
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleRenameOpen(project)}>
|
||||
<Pencil className="size-4" />
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleExport(project)}>
|
||||
<Download className="size-4" />
|
||||
Export
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => handleDeleteOpen(project)}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col gap-1 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate font-medium">{project.name}</span>
|
||||
</div>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="text-xs text-muted-foreground">{getRelativeTime(lastEdited)}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{formatDate(lastEdited)}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{totalPages > 1 && (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t pt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
Reference in New Issue
Block a user