feat: enhance project management with duplicate name checks and toast notifications
- Added duplicate name check in NewProjectDialog to warn users of existing project names. - Integrated toast notifications for actions like project deletion and export in ProjectsPage. - Implemented project ordering and restoration functionality in platform context. - Updated ProjectsPage to include search, sorting, and pagination features. - Created a new Toast component for displaying notifications with optional undo actions. - Refactored main application entry to include ToastProvider for global toast management.
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
/**
|
||||
* Platform sidebar (sidebar-07 style): projects list, create, delete, collapse to icons.
|
||||
* Uses platform context and router for navigation.
|
||||
* Platform sidebar: projects list (ordered, draggable), create, rename, delete.
|
||||
* "Projects" link to list; empty state when no projects.
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import {
|
||||
Sidebar,
|
||||
@@ -25,31 +25,99 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { MoreHorizontal, Plus, Trash2 } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { MoreHorizontal, Plus, Trash2, Pencil, FolderOpen, ListTodo } from 'lucide-react'
|
||||
import { useSidebar } from '@/components/ui/sidebar'
|
||||
import { usePlatform } from './platformContext'
|
||||
import { getProjectIcon } from './icon-map'
|
||||
import { NewProjectDialog } from './NewProjectDialog'
|
||||
import type { Project } from './types'
|
||||
|
||||
export function AppSidebar() {
|
||||
const { isMobile } = useSidebar()
|
||||
const { projects, createProject, deleteProject } = usePlatform()
|
||||
const { orderedProjects, createProject, deleteProject, renameProject, reorderProjects, projectOrder } = usePlatform()
|
||||
const navigate = useNavigate()
|
||||
const { projectId: selectedProjectId } = useParams<{ projectId: string }>()
|
||||
const dragRef = useRef(false)
|
||||
const [renameTarget, setRenameTarget] = useState<Project | null>(null)
|
||||
const [renameValue, setRenameValue] = useState('')
|
||||
|
||||
const handleSelectProject = (id: string) => {
|
||||
const handleSelectProject = useCallback(
|
||||
(id: string) => {
|
||||
if (dragRef.current) return
|
||||
navigate(`/projects/${id}`)
|
||||
}
|
||||
},
|
||||
[navigate]
|
||||
)
|
||||
|
||||
const handleCreateProject = (project: Parameters<typeof createProject>[0]) => {
|
||||
const handleCreateProject = useCallback(
|
||||
(project: Parameters<typeof createProject>[0]) => {
|
||||
createProject(project)
|
||||
navigate(`/projects/${project.id}`)
|
||||
}
|
||||
},
|
||||
[createProject, navigate]
|
||||
)
|
||||
|
||||
const handleDeleteProject = (id: string) => {
|
||||
const handleDeleteProject = useCallback(
|
||||
(id: string) => {
|
||||
deleteProject(id)
|
||||
if (selectedProjectId === id) navigate('/projects', { replace: true })
|
||||
},
|
||||
[deleteProject, selectedProjectId, navigate]
|
||||
)
|
||||
|
||||
const handleRenameOpen = useCallback((project: Project) => {
|
||||
setRenameTarget(project)
|
||||
setRenameValue(project.name)
|
||||
}, [])
|
||||
|
||||
const handleRenameSubmit = useCallback(() => {
|
||||
if (renameTarget && renameValue.trim()) {
|
||||
renameProject(renameTarget.id, renameValue.trim())
|
||||
setRenameTarget(null)
|
||||
setRenameValue('')
|
||||
}
|
||||
}, [renameTarget, renameValue, renameProject])
|
||||
|
||||
const handleDragStart = useCallback((e: React.DragEvent, projectId: string) => {
|
||||
dragRef.current = true
|
||||
e.dataTransfer.setData('text/plain', projectId)
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
}, [])
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
dragRef.current = false
|
||||
}, [])
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'move'
|
||||
}, [])
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent, dropTargetId: string) => {
|
||||
e.preventDefault()
|
||||
const draggedId = e.dataTransfer.getData('text/plain')
|
||||
if (!draggedId || draggedId === dropTargetId) return
|
||||
const dropIdx = projectOrder.indexOf(dropTargetId)
|
||||
if (dropIdx === -1) return
|
||||
const next = projectOrder.filter((id) => id !== draggedId)
|
||||
const insertIdx = next.indexOf(dropTargetId)
|
||||
next.splice(insertIdx >= 0 ? insertIdx : next.length, 0, draggedId)
|
||||
reorderProjects(next)
|
||||
dragRef.current = false
|
||||
},
|
||||
[projectOrder, reorderProjects]
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -86,11 +154,43 @@ export function AppSidebar() {
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">Projects</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
{projects.map((project) => {
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild tooltip="All projects" isActive={!selectedProjectId}>
|
||||
<Link to="/projects">
|
||||
<ListTodo className="size-4" />
|
||||
<span>All projects</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
{orderedProjects.length === 0 ? (
|
||||
<SidebarMenuItem>
|
||||
<NewProjectDialog
|
||||
onCreate={handleCreateProject}
|
||||
existingNames={orderedProjects.map((p) => p.name)}
|
||||
trigger={
|
||||
<SidebarMenuButton className="text-sidebar-foreground/70 w-full cursor-pointer">
|
||||
<Plus className="size-4" />
|
||||
<span>Create your first project</span>
|
||||
</SidebarMenuButton>
|
||||
}
|
||||
/>
|
||||
</SidebarMenuItem>
|
||||
) : (
|
||||
<>
|
||||
{orderedProjects.map((project) => {
|
||||
const Icon = getProjectIcon(project.iconId)
|
||||
const isActive = selectedProjectId === project.id
|
||||
return (
|
||||
<SidebarMenuItem key={project.id}>
|
||||
<SidebarMenuItem
|
||||
key={project.id}
|
||||
data-project-id={project.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, project.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, project.id)}
|
||||
className="cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<SidebarMenuButton
|
||||
tooltip={project.name}
|
||||
isActive={isActive}
|
||||
@@ -103,7 +203,7 @@ export function AppSidebar() {
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuAction showOnHover>
|
||||
<MoreHorizontal />
|
||||
<span className="sr-only">More</span>
|
||||
<span className="sr-only">Actions for {project.name}</span>
|
||||
</SidebarMenuAction>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
@@ -111,6 +211,16 @@ export function AppSidebar() {
|
||||
side={isMobile ? 'bottom' : 'right'}
|
||||
align={isMobile ? 'end' : 'start'}
|
||||
>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to={`/projects/${project.id}`}>
|
||||
<FolderOpen className="size-4" />
|
||||
Open
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleRenameOpen(project)}>
|
||||
<Pencil className="size-4" />
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => handleDeleteProject(project.id)}
|
||||
@@ -126,6 +236,7 @@ export function AppSidebar() {
|
||||
<SidebarMenuItem>
|
||||
<NewProjectDialog
|
||||
onCreate={handleCreateProject}
|
||||
existingNames={orderedProjects.map((p) => p.name)}
|
||||
trigger={
|
||||
<SidebarMenuButton className="text-sidebar-foreground/70 w-full cursor-pointer">
|
||||
<Plus className="size-4" />
|
||||
@@ -134,12 +245,43 @@ export function AppSidebar() {
|
||||
}
|
||||
/>
|
||||
</SidebarMenuItem>
|
||||
</>
|
||||
)}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<SidebarFooter />
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
|
||||
<Dialog open={!!renameTarget} onOpenChange={(open) => !open && setRenameTarget(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Rename project</DialogTitle>
|
||||
<DialogDescription>Enter a new name for this project.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleRenameSubmit()
|
||||
if (e.key === 'Escape') setRenameTarget(null)
|
||||
}}
|
||||
placeholder="Project name"
|
||||
/>
|
||||
{renameTarget && renameValue.trim() && orderedProjects.some((p) => p.id !== renameTarget.id && p.name.toLowerCase() === renameValue.trim().toLowerCase()) && (
|
||||
<p className="text-xs text-amber-600 dark:text-amber-500">A project with this name already exists.</p>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setRenameTarget(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleRenameSubmit} disabled={!renameValue.trim()}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -22,16 +22,20 @@ import { getProjectIcon } from './icon-map'
|
||||
type NewProjectDialogProps = {
|
||||
onCreate: (project: Project) => void
|
||||
trigger?: React.ReactNode
|
||||
/** Other project names to check for duplicates (case-insensitive warning only) */
|
||||
existingNames?: string[]
|
||||
}
|
||||
|
||||
export function NewProjectDialog({ onCreate, trigger }: NewProjectDialogProps) {
|
||||
export function NewProjectDialog({ onCreate, trigger, existingNames = [] }: NewProjectDialogProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [name, setName] = useState('')
|
||||
const [iconId, setIconId] = useState<ProjectIconId>('cat')
|
||||
|
||||
const trimmed = name.trim()
|
||||
const isDuplicate = trimmed.length > 0 && existingNames.some((n) => n.toLowerCase() === trimmed.toLowerCase())
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const trimmed = name.trim()
|
||||
if (!trimmed) return
|
||||
const project: Project = {
|
||||
id: `proj_${Date.now()}`,
|
||||
@@ -73,6 +77,9 @@ export function NewProjectDialog({ onCreate, trigger }: NewProjectDialogProps) {
|
||||
placeholder="My project"
|
||||
autoFocus
|
||||
/>
|
||||
{isDuplicate && (
|
||||
<p className="text-xs text-amber-600 dark:text-amber-500">A project with this name already exists.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Icon</label>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/**
|
||||
* Projects list page: table of all projects with metadata, sorted by last edited.
|
||||
* Actions: open, rename, export, delete. Pagination.
|
||||
* Projects list page: table with search, sort, pagination, actions.
|
||||
* Sort by last edited (default), name, or created; configurable page size; export toast; undo delete.
|
||||
*/
|
||||
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Table,
|
||||
@@ -29,7 +29,21 @@ import {
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal, Pencil, Trash2, Download, FolderOpen } from 'lucide-react'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
MoreHorizontal,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Download,
|
||||
FolderOpen,
|
||||
Search,
|
||||
Plus,
|
||||
} from 'lucide-react'
|
||||
import { usePlatform } from './platformContext'
|
||||
import { getProjectIcon } from './icon-map'
|
||||
import {
|
||||
@@ -38,9 +52,13 @@ import {
|
||||
PROJECT_FILE_EXT,
|
||||
PROJECT_VERSION,
|
||||
} from './projectGraphStorage'
|
||||
import { useToast } from '@/components/ui/toast'
|
||||
import { NewProjectDialog } from './NewProjectDialog'
|
||||
import type { Project } from './types'
|
||||
|
||||
const PAGE_SIZE = 10
|
||||
const PAGE_SIZE_OPTIONS = [10, 25, 50] as const
|
||||
type SortKey = 'lastEdited' | 'name' | 'created'
|
||||
type SortDir = 'asc' | 'desc'
|
||||
|
||||
function formatDate(ts: number) {
|
||||
return new Date(ts).toLocaleString(undefined, {
|
||||
@@ -52,53 +70,129 @@ function formatDate(ts: number) {
|
||||
})
|
||||
}
|
||||
|
||||
function getRelativeTime(ts: number): string {
|
||||
const d = new Date(ts)
|
||||
const now = Date.now()
|
||||
const diff = now - d.getTime()
|
||||
const sec = Math.floor(diff / 1000)
|
||||
const min = Math.floor(sec / 60)
|
||||
const hour = Math.floor(min / 60)
|
||||
const day = Math.floor(hour / 24)
|
||||
if (day > 7) return formatDate(ts)
|
||||
if (day >= 1) return `${day} day${day === 1 ? '' : 's'} ago`
|
||||
if (hour >= 1) return `${hour} hour${hour === 1 ? '' : 's'} ago`
|
||||
if (min >= 1) return `${min} min ago`
|
||||
return 'Just now'
|
||||
}
|
||||
|
||||
function getGraphCounts(projectId: string): { nodes: number; edges: number } {
|
||||
const stored = loadGraphFromStorage(projectId)
|
||||
if (!stored) return { nodes: 0, edges: 0 }
|
||||
return {
|
||||
nodes: Array.isArray(stored.nodes) ? stored.nodes.length : 0,
|
||||
edges: Array.isArray(stored.edges) ? stored.edges.length : 0,
|
||||
}
|
||||
}
|
||||
|
||||
export function ProjectsPage() {
|
||||
const { projects, deleteProject, renameProject } = usePlatform()
|
||||
const { orderedProjects, deleteProject, renameProject, createProject, restoreProject } = usePlatform()
|
||||
const navigate = useNavigate()
|
||||
const { addToast } = useToast()
|
||||
const [search, setSearch] = useState('')
|
||||
const [pageSize, setPageSize] = useState<number>(10)
|
||||
const [page, setPage] = useState(0)
|
||||
const [sortKey, setSortKey] = useState<SortKey>('lastEdited')
|
||||
const [sortDir, setSortDir] = useState<SortDir>('desc')
|
||||
const [renameTarget, setRenameTarget] = useState<Project | null>(null)
|
||||
const [renameValue, setRenameValue] = useState('')
|
||||
const renameInputRef = React.useRef<HTMLInputElement>(null)
|
||||
const [deleteTarget, setDeleteTarget] = useState<Project | null>(null)
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase()
|
||||
if (!q) return orderedProjects
|
||||
return orderedProjects.filter((p) => p.name.toLowerCase().includes(q))
|
||||
}, [orderedProjects, search])
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
return [...projects].sort((a, b) => (b.lastEditedAt ?? b.createdAt) - (a.lastEditedAt ?? a.createdAt))
|
||||
}, [projects])
|
||||
const arr = [...filtered]
|
||||
const mult = sortDir === 'asc' ? 1 : -1
|
||||
arr.sort((a, b) => {
|
||||
if (sortKey === 'name') {
|
||||
return mult * a.name.localeCompare(b.name)
|
||||
}
|
||||
if (sortKey === 'created') {
|
||||
return mult * (a.createdAt - b.createdAt)
|
||||
}
|
||||
return mult * ((a.lastEditedAt ?? a.createdAt) - (b.lastEditedAt ?? b.createdAt))
|
||||
})
|
||||
return arr
|
||||
}, [filtered, sortKey, sortDir])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE))
|
||||
const start = page * PAGE_SIZE
|
||||
const pageItems = sorted.slice(start, start + PAGE_SIZE)
|
||||
const totalPages = Math.max(1, pageSize === -1 ? 1 : Math.ceil(sorted.length / pageSize))
|
||||
const start = pageSize === -1 ? 0 : page * pageSize
|
||||
const pageItems = pageSize === -1 ? sorted : sorted.slice(start, start + pageSize)
|
||||
|
||||
const handleOpen = (projectId: string) => {
|
||||
navigate(`/projects/${projectId}`)
|
||||
const handleSort = (key: SortKey) => {
|
||||
if (sortKey === key) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
|
||||
else {
|
||||
setSortKey(key)
|
||||
setSortDir(key === 'name' ? 'asc' : 'desc')
|
||||
}
|
||||
setPage(0)
|
||||
}
|
||||
|
||||
const handleRenameOpen = (project: Project) => {
|
||||
const handleOpen = useCallback(
|
||||
(projectId: string) => {
|
||||
navigate(`/projects/${projectId}`)
|
||||
},
|
||||
[navigate]
|
||||
)
|
||||
|
||||
const handleRenameOpen = useCallback((project: Project) => {
|
||||
setRenameTarget(project)
|
||||
setRenameValue(project.name)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleRenameSubmit = () => {
|
||||
React.useEffect(() => {
|
||||
if (renameTarget) {
|
||||
const t = setTimeout(() => renameInputRef.current?.focus(), 0)
|
||||
return () => clearTimeout(t)
|
||||
}
|
||||
}, [renameTarget])
|
||||
|
||||
const handleRenameSubmit = useCallback(() => {
|
||||
if (renameTarget && renameValue.trim()) {
|
||||
renameProject(renameTarget.id, renameValue.trim())
|
||||
setRenameTarget(null)
|
||||
setRenameValue('')
|
||||
}
|
||||
}
|
||||
}, [renameTarget, renameValue, renameProject])
|
||||
|
||||
const handleDeleteOpen = (project: Project) => {
|
||||
const handleDeleteOpen = useCallback((project: Project) => {
|
||||
setDeleteTarget(project)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleDeleteConfirm = () => {
|
||||
if (deleteTarget) {
|
||||
removeGraphFromStorage(deleteTarget.id)
|
||||
deleteProject(deleteTarget.id)
|
||||
const handleDeleteConfirm = useCallback(() => {
|
||||
if (!deleteTarget) return
|
||||
const project = deleteTarget
|
||||
const graphSnapshot = loadGraphFromStorage(project.id)
|
||||
const snapshot =
|
||||
graphSnapshot && (graphSnapshot.nodes.length > 0 || graphSnapshot.edges.length > 0)
|
||||
? { nodes: graphSnapshot.nodes, edges: graphSnapshot.edges }
|
||||
: null
|
||||
removeGraphFromStorage(project.id)
|
||||
deleteProject(project.id)
|
||||
setDeleteTarget(null)
|
||||
navigate('/projects', { replace: true })
|
||||
}
|
||||
}
|
||||
addToast(`"${project.name}" deleted`, {
|
||||
undo: () => restoreProject(project, snapshot),
|
||||
duration: 8000,
|
||||
})
|
||||
}, [deleteTarget, deleteProject, navigate, addToast, restoreProject])
|
||||
|
||||
const handleExport = (project: Project) => {
|
||||
const handleExport = useCallback(
|
||||
(project: Project) => {
|
||||
const stored = loadGraphFromStorage(project.id)
|
||||
const state = stored
|
||||
? { version: PROJECT_VERSION, nodes: stored.nodes, edges: stored.edges }
|
||||
@@ -106,39 +200,146 @@ export function ProjectsPage() {
|
||||
const blob = new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
const filename = `${project.name.replace(/[^\w.-]/g, '_')}${PROJECT_FILE_EXT}`
|
||||
a.href = url
|
||||
a.download = `${project.name.replace(/[^\w.-]/g, '_')}${PROJECT_FILE_EXT}`
|
||||
a.download = filename
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
addToast(`Exported as ${filename}`)
|
||||
},
|
||||
[addToast]
|
||||
)
|
||||
|
||||
const handleCreateProject = useCallback(
|
||||
(project: Project) => {
|
||||
createProject(project)
|
||||
navigate(`/projects/${project.id}`)
|
||||
},
|
||||
[createProject, navigate]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
||||
<TooltipProvider>
|
||||
<div className="flex flex-col gap-4 rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<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>
|
||||
<Select
|
||||
value={pageSize === -1 ? 'all' : String(pageSize)}
|
||||
onValueChange={(v) => {
|
||||
setPageSize(v === 'all' ? -1 : Number(v))
|
||||
setPage(0)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[100px]">
|
||||
<SelectValue placeholder="Page size" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAGE_SIZE_OPTIONS.map((n) => (
|
||||
<SelectItem key={n} value={String(n)}>
|
||||
{n} per page
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sorted.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No projects yet. Create one from the sidebar.</p>
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead className="hidden sm:table-cell">Created</TableHead>
|
||||
<TableHead>Last edited</TableHead>
|
||||
<TableHead className="w-[70px]" />
|
||||
<TableHeader className="sticky top-0 z-10 bg-card">
|
||||
<TableRow className="hover:bg-transparent border-b">
|
||||
<TableHead>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center font-medium hover:underline"
|
||||
onClick={() => handleSort('name')}
|
||||
aria-sort={sortKey === 'name' ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}
|
||||
>
|
||||
Name
|
||||
{sortKey === 'name' && (sortDir === 'asc' ? ' ↑' : ' ↓')}
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="hidden sm:table-cell w-[100px]">
|
||||
<button
|
||||
type="button"
|
||||
className="font-medium hover:underline"
|
||||
onClick={() => handleSort('created')}
|
||||
aria-sort={sortKey === 'created' ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}
|
||||
>
|
||||
Created
|
||||
{sortKey === 'created' && (sortDir === 'asc' ? ' ↑' : ' ↓')}
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="hidden md:table-cell w-[90px]">Size</TableHead>
|
||||
<TableHead className="w-[140px]">
|
||||
<button
|
||||
type="button"
|
||||
className="font-medium hover:underline"
|
||||
onClick={() => handleSort('lastEdited')}
|
||||
aria-sort={sortKey === 'lastEdited' ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}
|
||||
>
|
||||
Last edited
|
||||
{sortKey === 'lastEdited' && (sortDir === 'asc' ? ' ↑' : ' ↓')}
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="sticky right-0 z-10 w-[70px] bg-card" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pageItems.map((project) => {
|
||||
const Icon = getProjectIcon(project.iconId)
|
||||
const counts = getGraphCounts(project.id)
|
||||
const lastEdited = project.lastEditedAt ?? project.createdAt
|
||||
return (
|
||||
<TableRow
|
||||
key={project.id}
|
||||
className="cursor-pointer"
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleOpen(project.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
handleOpen(project.id)
|
||||
}
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={`Open ${project.name}`}
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -149,15 +350,30 @@ export function ProjectsPage() {
|
||||
<TableCell className="hidden sm:table-cell text-muted-foreground">
|
||||
{formatDate(project.createdAt)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{formatDate(project.lastEditedAt ?? project.createdAt)}
|
||||
<TableCell className="hidden md:table-cell text-muted-foreground">
|
||||
{counts.nodes} nodes, {counts.edges} edges
|
||||
</TableCell>
|
||||
<TableCell onClick={(e) => e.stopPropagation()}>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span>{getRelativeTime(lastEdited)}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{formatDate(lastEdited)}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="sticky right-0 bg-card"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="size-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8"
|
||||
aria-label={`Actions for ${project.name}`}
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
<span className="sr-only">Actions</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
@@ -188,30 +404,51 @@ export function ProjectsPage() {
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between border-t pt-4">
|
||||
<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-2">
|
||||
<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" />
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
disabled={page >= totalPages - 1}
|
||||
aria-label="Next page"
|
||||
>
|
||||
Next
|
||||
<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>
|
||||
)}
|
||||
@@ -221,17 +458,25 @@ export function ProjectsPage() {
|
||||
|
||||
{/* Rename dialog */}
|
||||
<Dialog open={!!renameTarget} onOpenChange={(open) => !open && setRenameTarget(null)}>
|
||||
<DialogContent>
|
||||
<DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Rename project</DialogTitle>
|
||||
<DialogDescription>Enter a new name for this project.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input
|
||||
ref={renameInputRef}
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRenameSubmit()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleRenameSubmit()
|
||||
if (e.key === 'Escape') setRenameTarget(null)
|
||||
}}
|
||||
placeholder="Project name"
|
||||
aria-label="Project name"
|
||||
/>
|
||||
{renameTarget && renameValue.trim() && sorted.some((p) => p.id !== renameTarget.id && p.name.toLowerCase() === renameValue.trim().toLowerCase()) && (
|
||||
<p className="text-xs text-amber-600 dark:text-amber-500">A project with this name already exists.</p>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setRenameTarget(null)}>
|
||||
Cancel
|
||||
@@ -250,7 +495,7 @@ export function ProjectsPage() {
|
||||
<DialogTitle>Delete project</DialogTitle>
|
||||
<DialogDescription>
|
||||
{deleteTarget
|
||||
? `Are you sure you want to delete "${deleteTarget.name}"? This cannot be undone.`
|
||||
? `Are you sure you want to delete "${deleteTarget.name}"? You can undo this from the notification.`
|
||||
: ''}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
@@ -264,6 +509,7 @@ export function ProjectsPage() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,12 +1,30 @@
|
||||
/**
|
||||
* Platform context: projects list and handlers for create/delete/rename/updateLastEdited.
|
||||
* Platform context: projects list and handlers for create/delete/rename/updateLastEdited/reorder/restore.
|
||||
* Used by AppSidebar, ProjectsTablePage, and canvas route.
|
||||
*/
|
||||
|
||||
import React, { createContext, useCallback, useContext, useState } from 'react'
|
||||
import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
|
||||
import type { Project } from './types'
|
||||
import { saveGraphToStorage } from './projectGraphStorage'
|
||||
import { PROJECT_VERSION } from './projectGraphStorage'
|
||||
|
||||
const STORAGE_KEY = 'zui_platform_projects'
|
||||
const ORDER_STORAGE_KEY = 'zui_platform_project_order'
|
||||
|
||||
function loadOrder(): string[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(ORDER_STORAGE_KEY)
|
||||
if (!raw) return []
|
||||
const parsed = JSON.parse(raw) as unknown
|
||||
return Array.isArray(parsed) ? parsed.filter((id): id is string => typeof id === 'string') : []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function saveOrder(ids: string[]) {
|
||||
localStorage.setItem(ORDER_STORAGE_KEY, JSON.stringify(ids))
|
||||
}
|
||||
|
||||
function loadProjects(): Project[] {
|
||||
try {
|
||||
@@ -37,19 +55,45 @@ function saveProjects(projects: Project[]) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(projects))
|
||||
}
|
||||
|
||||
export type GraphSnapshot = { nodes: unknown[]; edges: unknown[] }
|
||||
|
||||
/** Projects sorted by projectOrder, then by lastEditedAt desc for any not in order */
|
||||
export function sortProjectsByOrder(projects: Project[], order: string[]): Project[] {
|
||||
const byId = new Map(projects.map((p) => [p.id, p]))
|
||||
const ordered: Project[] = []
|
||||
const seen = new Set<string>()
|
||||
for (const id of order) {
|
||||
const p = byId.get(id)
|
||||
if (p) {
|
||||
ordered.push(p)
|
||||
seen.add(id)
|
||||
}
|
||||
}
|
||||
const rest = projects
|
||||
.filter((p) => !seen.has(p.id))
|
||||
.sort((a, b) => (b.lastEditedAt ?? b.createdAt) - (a.lastEditedAt ?? a.createdAt))
|
||||
return [...ordered, ...rest]
|
||||
}
|
||||
|
||||
export type PlatformContextValue = {
|
||||
projects: Project[]
|
||||
projectOrder: string[]
|
||||
/** Projects in display order (sidebar order, then lastEditedAt) */
|
||||
orderedProjects: Project[]
|
||||
persist: (next: Project[]) => void
|
||||
createProject: (project: Project) => void
|
||||
deleteProject: (id: string) => void
|
||||
renameProject: (id: string, name: string) => void
|
||||
updateLastEdited: (id: string) => void
|
||||
reorderProjects: (orderedIds: string[]) => void
|
||||
restoreProject: (project: Project, graphSnapshot: GraphSnapshot | null) => void
|
||||
}
|
||||
|
||||
const PlatformContext = createContext<PlatformContextValue | null>(null)
|
||||
|
||||
export function PlatformProvider({ children }: { children: React.ReactNode }) {
|
||||
const [projects, setProjects] = useState<Project[]>(loadProjects)
|
||||
const [projectOrder, setProjectOrder] = useState<string[]>(loadOrder)
|
||||
|
||||
const persist = useCallback((next: Project[]) => {
|
||||
setProjects(next)
|
||||
@@ -60,6 +104,11 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) {
|
||||
(project: Project) => {
|
||||
const withEdited = { ...project, lastEditedAt: project.createdAt }
|
||||
persist([...projects, withEdited])
|
||||
setProjectOrder((prev) => {
|
||||
const next = prev.includes(project.id) ? prev : [project.id, ...prev]
|
||||
saveOrder(next)
|
||||
return next
|
||||
})
|
||||
},
|
||||
[projects, persist]
|
||||
)
|
||||
@@ -68,6 +117,11 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) {
|
||||
(id: string) => {
|
||||
const next = projects.filter((p) => p.id !== id)
|
||||
persist(next)
|
||||
setProjectOrder((prev) => {
|
||||
const nextOrder = prev.filter((oid) => oid !== id)
|
||||
saveOrder(nextOrder)
|
||||
return nextOrder
|
||||
})
|
||||
},
|
||||
[projects, persist]
|
||||
)
|
||||
@@ -89,14 +143,61 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) {
|
||||
[projects, persist]
|
||||
)
|
||||
|
||||
const value: PlatformContextValue = {
|
||||
const reorderProjects = useCallback((orderedIds: string[]) => {
|
||||
setProjectOrder(orderedIds)
|
||||
saveOrder(orderedIds)
|
||||
}, [])
|
||||
|
||||
const restoreProject = useCallback(
|
||||
(project: Project, graphSnapshot: GraphSnapshot | null) => {
|
||||
persist([...projects, project])
|
||||
setProjectOrder((prev) => {
|
||||
const next = prev.includes(project.id) ? prev : [project.id, ...prev]
|
||||
saveOrder(next)
|
||||
return next
|
||||
})
|
||||
if (graphSnapshot) {
|
||||
saveGraphToStorage(project.id, {
|
||||
version: PROJECT_VERSION,
|
||||
nodes: graphSnapshot.nodes,
|
||||
edges: graphSnapshot.edges,
|
||||
})
|
||||
}
|
||||
},
|
||||
[projects, persist]
|
||||
)
|
||||
|
||||
const orderedProjects = useMemo(
|
||||
() => sortProjectsByOrder(projects, projectOrder),
|
||||
[projects, projectOrder]
|
||||
)
|
||||
|
||||
const value: PlatformContextValue = useMemo(
|
||||
() => ({
|
||||
projects,
|
||||
projectOrder,
|
||||
orderedProjects,
|
||||
persist,
|
||||
createProject,
|
||||
deleteProject,
|
||||
renameProject,
|
||||
updateLastEdited,
|
||||
}
|
||||
reorderProjects,
|
||||
restoreProject,
|
||||
}),
|
||||
[
|
||||
projects,
|
||||
projectOrder,
|
||||
orderedProjects,
|
||||
persist,
|
||||
createProject,
|
||||
deleteProject,
|
||||
renameProject,
|
||||
updateLastEdited,
|
||||
reorderProjects,
|
||||
restoreProject,
|
||||
]
|
||||
)
|
||||
|
||||
return <PlatformContext.Provider value={value}>{children}</PlatformContext.Provider>
|
||||
}
|
||||
|
||||
111
frontend/src/components/ui/toast.tsx
Normal file
111
frontend/src/components/ui/toast.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Simple toast: message + optional Undo action. Auto-dismisses after a delay.
|
||||
*/
|
||||
|
||||
import React, { createContext, useCallback, useContext, useState } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export type ToastItem = {
|
||||
id: string
|
||||
message: string
|
||||
undo?: () => void
|
||||
}
|
||||
|
||||
type ToastContextValue = {
|
||||
toasts: ToastItem[]
|
||||
addToast: (message: string, options?: { undo?: () => void; duration?: number }) => void
|
||||
removeToast: (id: string) => void
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextValue | null>(null)
|
||||
|
||||
const TOAST_DURATION = 5000
|
||||
|
||||
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
const [toasts, setToasts] = useState<ToastItem[]>([])
|
||||
const timersRef = React.useRef<Record<string, ReturnType<typeof setTimeout>>>({})
|
||||
|
||||
const removeToast = useCallback((id: string) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id))
|
||||
const t = timersRef.current[id]
|
||||
if (t) {
|
||||
clearTimeout(t)
|
||||
delete timersRef.current[id]
|
||||
}
|
||||
}, [])
|
||||
|
||||
const addToast = useCallback(
|
||||
(message: string, options?: { undo?: () => void; duration?: number }) => {
|
||||
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`
|
||||
const duration = options?.duration ?? TOAST_DURATION
|
||||
setToasts((prev) => [...prev, { id, message, undo: options?.undo }])
|
||||
const timer = setTimeout(() => removeToast(id), duration)
|
||||
timersRef.current[id] = timer
|
||||
},
|
||||
[removeToast]
|
||||
)
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toasts, addToast, removeToast }}>
|
||||
{children}
|
||||
<ToastViewport toasts={toasts} removeToast={removeToast} />
|
||||
</ToastContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function ToastViewport({
|
||||
toasts,
|
||||
removeToast,
|
||||
}: {
|
||||
toasts: ToastItem[]
|
||||
removeToast: (id: string) => void
|
||||
}) {
|
||||
if (toasts.length === 0) return null
|
||||
return (
|
||||
<div
|
||||
className="fixed bottom-4 right-4 z-[100] flex max-w-[420px] flex-col gap-2"
|
||||
role="region"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
{toasts.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={cn(
|
||||
'flex items-center justify-between gap-3 rounded-lg border bg-background px-4 py-3 text-sm shadow-lg',
|
||||
'animate-in slide-in-from-bottom-2 fade-in-0'
|
||||
)}
|
||||
>
|
||||
<span className="flex-1">{t.message}</span>
|
||||
<div className="flex shrink-0 gap-2">
|
||||
{t.undo && (
|
||||
<button
|
||||
type="button"
|
||||
className="font-medium text-primary underline-offset-4 hover:underline"
|
||||
onClick={() => {
|
||||
t.undo?.()
|
||||
removeToast(t.id)
|
||||
}}
|
||||
>
|
||||
Undo
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
onClick={() => removeToast(t.id)}
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
const ctx = useContext(ToastContext)
|
||||
if (!ctx) throw new Error('useToast must be used within ToastProvider')
|
||||
return ctx
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { ThemeProvider } from './lib/themeContext'
|
||||
import { ToastProvider } from './components/ui/toast'
|
||||
import { registerBuiltinNodes } from './lib/registerBuiltinNodes'
|
||||
import { PlatformPage } from './app/platform/PlatformPage'
|
||||
import { ProjectsPage } from './app/platform/ProjectsPage'
|
||||
@@ -14,6 +15,7 @@ registerBuiltinNodes()
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider>
|
||||
<ToastProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<PlatformPage />}>
|
||||
@@ -23,6 +25,7 @@ createRoot(document.getElementById('root')!).render(
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ToastProvider>
|
||||
</ThemeProvider>
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user