feat: Private notes frontend (Quick-Jot toggle + lock icon + API key)

forgejo_admin commented

2026-03-15 01:53:30 +00:00

Owner

Lineage

plan-pal-e-docs → Phase F6 (Private Notes Enforcement) — frontend half

Repo

forgejo_admin/pal-e-app

User Story

As an authenticated pal-e-app user
I want to create private notes and see which notes are private
So that I can use the "private thought" pattern from the browser

Context

The backend (pal-e-docs) is adding is_public filtering with X-PaleDocs-Token header auth. The frontend needs to: (1) pass the API key in all server-side fetches so authenticated browsing sees private notes, (2) add a Private toggle to Quick-Jot so users can create private notes, (3) show a lock icon on private notes in lists/search.

File Targets

Files to modify:

src/lib/api.ts — add X-PaleDocs-Token header to apiFetch() using env.PAL_E_DOCS_API_KEY; add is_public field to Note, SearchResult interfaces
src/lib/components/QuickJot.svelte — add Private toggle (checkbox or switch) that sets is_public: false in payload
src/routes/notes/+page.svelte — show lock icon next to private note titles
src/routes/search/+page.svelte — show lock icon next to private search results

Files NOT to touch:

src/auth.ts — Keycloak config is separate from API key auth
src/routes/api/ — API proxies don't need the API key (they call browser-side)

Acceptance Criteria

When server-side fetches are made, X-PaleDocs-Token header is included with env var value
When I open Quick-Jot, there is a Private toggle that defaults to off (public)
When I create a note with Private toggled on, the note is created with is_public=false
When I view the notes list while authenticated, private notes show a lock icon
When I search while authenticated, private results show a lock icon

Test Expectations

Visual verification: lock icon renders on private notes
Functional verification: Quick-Jot Private toggle sends is_public=false
Run command: cd ~/pal-e-app && npm run build

Constraints

Match existing dark theme (bg-[#0a0a14], border-[#1a1a2e], accent #e94560)
Lock icon should be subtle — small, gray, inline with other badges
PAL_E_DOCS_API_KEY env var read via $env/dynamic/private (already imported in api.ts)
Don't add new npm dependencies for the lock icon — use a simple SVG or Unicode character

Checklist

PR opened
Tests pass
No unrelated changes

pal-e-docs — project this affects
pal-e-docs backend issue (is_public filtering) is the prerequisite

### Lineage `plan-pal-e-docs` → Phase F6 (Private Notes Enforcement) — frontend half ### Repo `forgejo_admin/pal-e-app` ### User Story As an authenticated pal-e-app user I want to create private notes and see which notes are private So that I can use the "private thought" pattern from the browser ### Context The backend (pal-e-docs) is adding is_public filtering with X-PaleDocs-Token header auth. The frontend needs to: (1) pass the API key in all server-side fetches so authenticated browsing sees private notes, (2) add a Private toggle to Quick-Jot so users can create private notes, (3) show a lock icon on private notes in lists/search. ### File Targets Files to modify: - `src/lib/api.ts` — add X-PaleDocs-Token header to apiFetch() using env.PAL_E_DOCS_API_KEY; add `is_public` field to Note, SearchResult interfaces - `src/lib/components/QuickJot.svelte` — add Private toggle (checkbox or switch) that sets `is_public: false` in payload - `src/routes/notes/+page.svelte` — show lock icon next to private note titles - `src/routes/search/+page.svelte` — show lock icon next to private search results Files NOT to touch: - `src/auth.ts` — Keycloak config is separate from API key auth - `src/routes/api/` — API proxies don't need the API key (they call browser-side) ### Acceptance Criteria - [ ] When server-side fetches are made, X-PaleDocs-Token header is included with env var value - [ ] When I open Quick-Jot, there is a Private toggle that defaults to off (public) - [ ] When I create a note with Private toggled on, the note is created with is_public=false - [ ] When I view the notes list while authenticated, private notes show a lock icon - [ ] When I search while authenticated, private results show a lock icon ### Test Expectations - [ ] Visual verification: lock icon renders on private notes - [ ] Functional verification: Quick-Jot Private toggle sends is_public=false - Run command: `cd ~/pal-e-app && npm run build` ### Constraints - Match existing dark theme (bg-[#0a0a14], border-[#1a1a2e], accent #e94560) - Lock icon should be subtle — small, gray, inline with other badges - PAL_E_DOCS_API_KEY env var read via `$env/dynamic/private` (already imported in api.ts) - Don't add new npm dependencies for the lock icon — use a simple SVG or Unicode character ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `pal-e-docs` — project this affects - pal-e-docs backend issue (is_public filtering) is the prerequisite