feat: refactor names

2026-03-11 17:24:32 +01:00
parent 6471cee05f
commit fc58dcdaa2
16 changed files with 35 additions and 35 deletions
--- a/frontend/src/app/kosmos/NewProjectDialog.tsx
+++ b/frontend/src/app/kosmos/NewProjectDialog.tsx
@@ -0,0 +1,118 @@
+/**
+ * Dialog to create a new project: name + icon.
+ */
+
+import React, { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Plus } from 'lucide-react'
+import { PROJECT_ICON_IDS, type Project, type ProjectIconId } from './types'
+import { getProjectIcon } from '../../lib/iconMap'
+
+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, 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()
+    if (!trimmed) return
+    const project: Project = {
+      id: `proj_${Date.now()}`,
+      name: trimmed,
+      iconId,
+      createdAt: Date.now(),
+    }
+    onCreate(project)
+    setName('')
+    setIconId('cat')
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" size="sm" className="w-full justify-start gap-2">
+            <Plus className="size-4" />
+            New project
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>New project</DialogTitle>
+            <DialogDescription>Create a project to start editing a graph canvas.</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <label htmlFor="project-name" className="text-sm font-medium">
+                Name
+              </label>
+              <Input
+                id="project-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                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>
+              <Select value={iconId} onValueChange={(v) => setIconId(v as ProjectIconId)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PROJECT_ICON_IDS.map((id) => {
+                    const Icon = getProjectIcon(id)
+                    return (
+                      <SelectItem key={id} value={id}>
+                        <span className="flex items-center gap-2">
+                          <Icon className="size-4" />
+                          {id}
+                        </span>
+                      </SelectItem>
+                    )
+                  })}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!name.trim()}>
+              Create
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}