Add create note dialog with type selector (M5 Task 1)

2026-02-14 21:14:16 +01:00
parent 2c981a0a30
commit 7b9d52d970
8 changed files with 405 additions and 17 deletions
--- a/src/components/CreateNoteDialog.tsx
+++ b/src/components/CreateNoteDialog.tsx
@@ -0,0 +1,100 @@
+import { useState, useRef, useEffect } from 'react'
+import './CreateNoteDialog.css'
+
+const NOTE_TYPES = [
+  'Note',
+  'Project',
+  'Experiment',
+  'Responsibility',
+  'Procedure',
+  'Person',
+  'Event',
+  'Topic',
+] as const
+
+export type NoteType = (typeof NOTE_TYPES)[number]
+
+interface CreateNoteDialogProps {
+  open: boolean
+  onClose: () => void
+  onCreate: (title: string, type: NoteType) => void
+}
+
+export function CreateNoteDialog({ open, onClose, onCreate }: CreateNoteDialogProps) {
+  const [title, setTitle] = useState('')
+  const [type, setType] = useState<NoteType>('Note')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open) {
+      setTitle('')
+      setType('Note')
+      // Focus input after render
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', handleKey)
+    return () => window.removeEventListener('keydown', handleKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const trimmed = title.trim()
+    if (!trimmed) return
+    onCreate(trimmed, type)
+    onClose()
+  }
+
+  return (
+    <div className="create-dialog__overlay" onClick={onClose}>
+      <div className="create-dialog" onClick={(e) => e.stopPropagation()}>
+        <h3 className="create-dialog__title">Create New Note</h3>
+        <form onSubmit={handleSubmit}>
+          <div className="create-dialog__field">
+            <label className="create-dialog__label">Title</label>
+            <input
+              ref={inputRef}
+              className="create-dialog__input"
+              type="text"
+              placeholder="Enter note title..."
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+          <div className="create-dialog__field">
+            <label className="create-dialog__label">Type</label>
+            <div className="create-dialog__types">
+              {NOTE_TYPES.map((t) => (
+                <button
+                  key={t}
+                  type="button"
+                  className={`create-dialog__type-btn${type === t ? ' create-dialog__type-btn--active' : ''}`}
+                  onClick={() => setType(t)}
+                >
+                  {t}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="create-dialog__actions">
+            <button type="button" className="create-dialog__btn create-dialog__btn--cancel" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="create-dialog__btn create-dialog__btn--create" disabled={!title.trim()}>
+              Create
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}