Adds first version of the app. Local storage only.

src/components/common/CategorySelect.tsx

@@ -0,0 +1,93 @@
+import { useMemo, useState } from 'react'
+import { allDeviceCategories } from '../../domain/project'
+import { useProjectStore } from '../../state/projectStore'
+
+const NEW_CATEGORY_VALUE = '__new__'
+
+/** A device-category <select> with a built-in "+ New category…" option that
+ *  switches to a small inline text field, creates the category, and selects
+ *  it — so adding a category never requires leaving the form you're in. */
+export default function CategorySelect({
+  value,
+  onChange,
+  className = 'mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm',
+}: {
+  value: string
+  onChange: (categoryId: string) => void
+  className?: string
+}) {
+  const project = useProjectStore((s) => s.project)
+  const addCustomDeviceCategory = useProjectStore((s) => s.addCustomDeviceCategory)
+  const [creating, setCreating] = useState(false)
+  const [draftName, setDraftName] = useState('')
+
+  const categories = useMemo(
+    () => [...allDeviceCategories(project)].sort((a, b) => a.name.localeCompare(b.name)),
+    [project],
+  )
+
+  const commitNewCategory = () => {
+    const trimmed = draftName.trim()
+    if (trimmed) {
+      onChange(addCustomDeviceCategory(trimmed))
+    }
+    setCreating(false)
+    setDraftName('')
+  }
+
+  if (creating) {
+    return (
+      <div className="mt-1 flex gap-1.5">
+        <input
+          autoFocus
+          value={draftName}
+          onChange={(e) => setDraftName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              commitNewCategory()
+            } else if (e.key === 'Escape') {
+              setCreating(false)
+              setDraftName('')
+            }
+          }}
+          placeholder="New category name"
+          className="w-full min-w-0 flex-1 rounded border border-slate-300 px-2 py-1 text-sm"
+        />
+        <button
+          onClick={commitNewCategory}
+          className="shrink-0 rounded bg-indigo-600 px-2 text-xs font-medium text-white hover:bg-indigo-500"
+        >
+          Add
+        </button>
+        <button
+          onClick={() => {
+            setCreating(false)
+            setDraftName('')
+          }}
+          className="shrink-0 rounded px-2 text-xs text-slate-500 hover:bg-slate-100"
+        >
+          Cancel
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <select
+      value={value}
+      onChange={(e) => {
+        if (e.target.value === NEW_CATEGORY_VALUE) setCreating(true)
+        else onChange(e.target.value)
+      }}
+      className={className}
+    >
+      {categories.map((c) => (
+        <option key={c.id} value={c.id}>
+          {c.name}
+        </option>
+      ))}
+      <option value={NEW_CATEGORY_VALUE}>+ New category…</option>
+    </select>
+  )
+}

src/components/common/Modal.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+
+export default function Modal({
+  title,
+  onClose,
+  children,
+  width = 'max-w-lg',
+}: {
+  title: string
+  onClose: () => void
+  children: ReactNode
+  width?: string
+}) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4">
+      <div className={`flex max-h-[85vh] w-full ${width} flex-col rounded-lg bg-white shadow-xl`}>
+        <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+          <h3 className="text-sm font-semibold text-slate-800">{title}</h3>
+          <button onClick={onClose} className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600">
+            ✕
+          </button>
+        </div>
+        <div className="overflow-y-auto px-4 py-3">{children}</div>
+      </div>
+    </div>
+  )
+}