feat: quick-jot note creation modal

forgejo_admin commented

2026-03-14 23:14:18 +00:00

Owner

Lineage

plan-pal-e-docs → Phase F3 (phase-pal-e-docs-quick-jot)

Repo

forgejo_admin/pal-e-app

User Story

As a platform operator
I want to quickly capture a thought or TODO from the browser
So that I can triage it later without switching to MCP tools or a terminal

Context

The pal-e-docs frontend can now search (PR #16) and filter boards (PR #17), but it still can't create anything. This is the first write capability — a minimal quick-jot modal for capturing notes fast.

The backend POST /notes endpoint already exists and accepts:

{
  "title": "My Note",        // required
  "slug": "my-note",         // required (auto-generate from title)
  "html_content": "<p>...</p>", // optional
  "project_slug": "pal-e-docs", // optional
  "note_type": "todo",       // optional, defaults to "todo"
  "status": "open",          // optional
  "tags": ["todo", "open"]   // optional
}

The frontend needs a new SvelteKit API proxy route (POST /api/notes) since all API calls must be server-side. The existing pattern is src/routes/api/boards/[slug]/items/[id]/+server.ts.

File Targets

Files to create:

src/routes/api/notes/+server.ts — POST proxy to backend POST /notes
src/lib/components/QuickJot.svelte — modal component

Files to modify:

src/routes/+layout.svelte — add FAB button + keyboard shortcut to open modal
src/lib/api.ts — add createNote() function and listProjects() types if needed

Files NOT to touch:

src/routes/search/ — search pages are separate scope
src/routes/boards/ — board pages are separate scope
src/lib/components/blocks/ — block renderers are unrelated

Acceptance Criteria

A floating action button (bottom-right, accent color #e94560) opens the quick-jot modal
Keyboard shortcut n (when not in an input) opens the quick-jot modal
Modal has: title field (required), body textarea (optional), project dropdown (optional, populated from listProjects), note_type selector (defaults to "todo")
Slug is auto-generated from title (lowercase, spaces→hyphens, strip special chars)
On submit, note is created via POST /api/notes → backend POST /notes
Success: modal closes, toast/notification shows "Note created" with link to /notes/{slug}
Error: form shows error message (e.g., duplicate slug → "Note with this slug already exists")
Pressing Escape closes the modal without submitting
Modal backdrop click closes without submitting
Created note with a project_slug will appear on that project's board after next sync

Test Expectations

Manual test: open modal via FAB, create a "test-quick-jot" note, verify it appears at /notes/test-quick-jot
Manual test: open modal via n key, verify it works
Manual test: try duplicate slug, verify error message
Manual test: create with project set, verify it will land on board after sync

Constraints

Dark theme modal: semi-transparent backdrop, #0e0e18 modal bg, #1a1a2e borders
FAB: #e94560 background, white + icon, positioned bottom-right with z-50
Slug generation: title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
All API calls through server-side proxy (match existing pattern in /api/boards/)
Form validation: title required, slug must be non-empty after generation
Modal should trap focus (accessibility)
note_type options: todo (default), doc, reference, journal — the types that make sense for quick capture

Checklist

PR opened with Closes #16
No unrelated changes
Dark theme consistent
Keyboard shortcuts don't conflict (n, Escape)
FAB doesn't overlap board drag-drop areas

phase-pal-e-docs-quick-jot — plan phase in pal-e-docs
plan-pal-e-docs — parent plan

### Lineage `plan-pal-e-docs` → Phase F3 (`phase-pal-e-docs-quick-jot`) ### Repo `forgejo_admin/pal-e-app` ### User Story As a platform operator I want to quickly capture a thought or TODO from the browser So that I can triage it later without switching to MCP tools or a terminal ### Context The pal-e-docs frontend can now search (PR #16) and filter boards (PR #17), but it still can't create anything. This is the first write capability — a minimal quick-jot modal for capturing notes fast. The backend `POST /notes` endpoint already exists and accepts: ```json { "title": "My Note", // required "slug": "my-note", // required (auto-generate from title) "html_content": "<p>...</p>", // optional "project_slug": "pal-e-docs", // optional "note_type": "todo", // optional, defaults to "todo" "status": "open", // optional "tags": ["todo", "open"] // optional } ``` The frontend needs a new SvelteKit API proxy route (`POST /api/notes`) since all API calls must be server-side. The existing pattern is `src/routes/api/boards/[slug]/items/[id]/+server.ts`. ### File Targets Files to create: - `src/routes/api/notes/+server.ts` — POST proxy to backend `POST /notes` - `src/lib/components/QuickJot.svelte` — modal component Files to modify: - `src/routes/+layout.svelte` — add FAB button + keyboard shortcut to open modal - `src/lib/api.ts` — add `createNote()` function and `listProjects()` types if needed Files NOT to touch: - `src/routes/search/` — search pages are separate scope - `src/routes/boards/` — board pages are separate scope - `src/lib/components/blocks/` — block renderers are unrelated ### Acceptance Criteria - [ ] A floating action button (bottom-right, accent color #e94560) opens the quick-jot modal - [ ] Keyboard shortcut `n` (when not in an input) opens the quick-jot modal - [ ] Modal has: title field (required), body textarea (optional), project dropdown (optional, populated from listProjects), note_type selector (defaults to "todo") - [ ] Slug is auto-generated from title (lowercase, spaces→hyphens, strip special chars) - [ ] On submit, note is created via POST /api/notes → backend POST /notes - [ ] Success: modal closes, toast/notification shows "Note created" with link to `/notes/{slug}` - [ ] Error: form shows error message (e.g., duplicate slug → "Note with this slug already exists") - [ ] Pressing Escape closes the modal without submitting - [ ] Modal backdrop click closes without submitting - [ ] Created note with a project_slug will appear on that project's board after next sync ### Test Expectations - [ ] Manual test: open modal via FAB, create a "test-quick-jot" note, verify it appears at `/notes/test-quick-jot` - [ ] Manual test: open modal via `n` key, verify it works - [ ] Manual test: try duplicate slug, verify error message - [ ] Manual test: create with project set, verify it will land on board after sync ### Constraints - Dark theme modal: semi-transparent backdrop, `#0e0e18` modal bg, `#1a1a2e` borders - FAB: `#e94560` background, white `+` icon, positioned bottom-right with `z-50` - Slug generation: `title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')` - All API calls through server-side proxy (match existing pattern in `/api/boards/`) - Form validation: title required, slug must be non-empty after generation - Modal should trap focus (accessibility) - `note_type` options: todo (default), doc, reference, journal — the types that make sense for quick capture ### Checklist - [ ] PR opened with `Closes #16` - [ ] No unrelated changes - [ ] Dark theme consistent - [ ] Keyboard shortcuts don't conflict (n, Escape) - [ ] FAB doesn't overlap board drag-drop areas ### Related - `phase-pal-e-docs-quick-jot` — plan phase in pal-e-docs - `plan-pal-e-docs` — parent plan