Mockup, do not merge: links to missing notes, tag picker, contrast (#448, #449, #450)

kayg commented

2026-10-15 20:29:44 +00:00

Owner

Mockup, do not merge. Replaces #453 (the forge ignores pushes to an open PR). Nothing here goes into the app until kayg approves the mockup on #448, #449 and #450.

One preview page, https://preview.calternal.cloud/links.html, with switchable variants on the Mockup pill and in the URL. It follows kayg's answers (L1–L6, T1–T3, C1–C3).

#448, links to missing notes. A click (or ⌘↵ inside the link) on a note that was never written makes it at the link's path and opens it, with "Made '…' · Undo". A note in the Trash opens a card with Restore and Open (read-only, in place). A note deleted for good opens a card with Create a new note and Remove link (the words stay). A file moved outside the app is found by its id, and its link is quietly updated ("Link updated"). Every link starts with a kind icon (note, day, photo, file). Switches: missing=icondim|icon|fade|dim and trash=replace|beside. No underlines.
#449, tag picker. Typing # gets the same glass picker as [[ / @. It shows prefix matches first, then fuzzy ones, completes one level at a time, and shows counts. Enter and Tab accept, Space keeps typing, Esc closes. Switches: trigger=after1|immediate and tagrow=count|plain.
#450, contrast. Switches: chip=icon-accent|icon-ink|neutral|current (the pill appears only on hover or with the caret inside), handle=ink|white|current (ink sits on #319's dense glass, copied until it lands), and over=paper|photo. scripts/links-contrast.mjs measures every look against what is really behind it and writes the table that the Mockup pill shows.

kayg's approval round (15 Oct). The defaults are approved: missing=icondim, trash=replace, tags after the first letter with counts, chip=icon-accent and handle=ink. Changes:

Links sit in the sentence like words, with no gap before the punctuation.
There is no links summary above a note's title.
Safari's bars no longer change colour on page changes: one theme-color writer that copies the root's edge colour, data-edge on the phone stack, and the app's floor under the page.
Pickers and cards close on navigation, on a click elsewhere and when the caret leaves the trigger.
The Trash card shows the note itself.
Cards, pickers and the ink handle use the shared #319 glass (glass.css, Glass.svelte and its tokens, taken from origin/issue/319-one-glass).

Code: apps/mockup/src/links/ (small files), plus hooks in the mockup's Editor, md reader and route. packages/ui/src/lib/dom.ts now keeps [[Title]] as it was written. Tests: apps/mockup/tests/links.spec.ts, flows and screenshots at 320/360/375/390/900/1440, light and dark, in Chromium and WebKit.

🤖 Generated with Claude Code

https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

**Mockup, do not merge.** Replaces #453 (the forge ignores pushes to an open PR). Nothing here goes into the app until kayg approves the mockup on #448, #449 and #450. One preview page, https://preview.calternal.cloud/links.html, with switchable variants on the Mockup pill and in the URL. It follows kayg's answers (L1–L6, T1–T3, C1–C3). - **#448, links to missing notes.** A click (or ⌘↵ inside the link) on a note that was never written makes it at the link's path and opens it, with "Made '…' · Undo". A note in the Trash opens a card with Restore and Open (read-only, in place). A note deleted for good opens a card with Create a new note and Remove link (the words stay). A file moved outside the app is found by its id, and its link is quietly updated ("Link updated"). Every link starts with a kind icon (note, day, photo, file). Switches: `missing=icondim|icon|fade|dim` and `trash=replace|beside`. No underlines. - **#449, tag picker.** Typing `#` gets the same glass picker as `[[` / `@`. It shows prefix matches first, then fuzzy ones, completes one level at a time, and shows counts. Enter and Tab accept, Space keeps typing, Esc closes. Switches: `trigger=after1|immediate` and `tagrow=count|plain`. - **#450, contrast.** Switches: `chip=icon-accent|icon-ink|neutral|current` (the pill appears only on hover or with the caret inside), `handle=ink|white|current` (ink sits on #319's dense glass, copied until it lands), and `over=paper|photo`. `scripts/links-contrast.mjs` measures every look against what is really behind it and writes the table that the Mockup pill shows. **kayg's approval round (15 Oct).** The defaults are approved: `missing=icondim`, `trash=replace`, tags after the first letter with counts, `chip=icon-accent` and `handle=ink`. Changes: - Links sit in the sentence like words, with no gap before the punctuation. - There is no links summary above a note's title. - Safari's bars no longer change colour on page changes: one theme-color writer that copies the root's edge colour, `data-edge` on the phone stack, and the app's floor under the page. - Pickers and cards close on navigation, on a click elsewhere and when the caret leaves the trigger. - The Trash card shows the note itself. - Cards, pickers and the ink handle use the shared #319 glass (`glass.css`, `Glass.svelte` and its tokens, taken from `origin/issue/319-one-glass`). Code: `apps/mockup/src/links/` (small files), plus hooks in the mockup's Editor, md reader and route. `packages/ui/src/lib/dom.ts` now keeps `[[Title]]` as it was written. Tests: `apps/mockup/tests/links.spec.ts`, flows and screenshots at 320/360/375/390/900/1440, light and dark, in Chromium and WebKit. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

kayg added 3 commits

2026-10-15 20:29:44 +00:00

Mockup links.html: missing notes, tag picker, link and handle contrast (#448 , #449 , #450 ) 16a1ffb9f3

Mockup only, do not merge. One page with switchable variants:
- #448: a link to a never-written note makes it at the link's path and opens it
  (Made "…" · Undo); Trash card (Restore, Open read-only in place); deleted-for-good
  card (Create a new note, Remove link); a file moved outside the app is found by id
  and its link quietly updated; ⌘↵ in a link does what a click does. Every link leads
  with a kind icon (note, day, photo, file); missing=icondim|icon|fade|dim,
  trash=replace|beside. No underlines.
- #449: `#` opens the same glass picker as `[[`/`@`: prefix then fuzzy, one level at a
  time, counts; Enter/Tab accept, Space keeps typing, Esc closes; trigger=after1|immediate,
  tagrow=count|plain.
- #450: chip=icon-accent|icon-ink|neutral|current (pill only on hover or caret),
  handle=ink|white|current on #319's dense glass, over=paper|photo; contrast measured
  by scripts/links-contrast.mjs and shown in the Mockup pill.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

Mockup links.html: picked links get their kind icon; no ring on the note text (#448 , #449 )

CI / server (pull_request) Successful in 59s

Details

CI / rust (pull_request) Successful in 2m30s

Details

CI / web (pull_request) Failing after 47m17s

Details

e51083b921

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

Mockup links.html: kayg's approval round (#448 , #449 , #450 )

CI / server (pull_request) Successful in 24s

Details

CI / rust (pull_request) Successful in 1m53s

Details

CI / web (pull_request) Failing after 47m59s

Details

819dba782f

- Links sit in the sentence like words: no gap before the punctuation after a link
  (the pill's room is cancelled by an equal negative margin, so hover and the caret
  still never move a word).
- No links summary above a note's title; "Linked here" stays at the end of the note.
- Safari's bars no longer change colour on page changes: one theme-color writer that
  copies the root's edge colour, data-edge on the phone stack, and the app's floor
  under the page, so the sky never shows below a note (keyboard, toolbar, slides).
- Pickers and cards close on navigation, on a click elsewhere and when the caret
  leaves the trigger.
- The Trash card shows the note itself (the approved peek); the plain card is a fallback.
- Cards, pickers and the ink handle and pill use the shared floating glass from #319
  (glass.css, Glass.svelte and its tokens, taken from origin/issue/319-one-glass).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

kayg referenced this pull request

2026-10-15 20:29:45 +00:00

Mockup, do not merge: links to missing notes, tag picker, contrast (#448, #449, #450) #453

kayg referenced this pull request

2026-10-15 20:30:29 +00:00

Links to missing notes: click creates; gone notes explain themselves #448

kayg referenced this pull request

2026-10-15 20:30:30 +00:00

Tag autocomplete inline picker while typing # #449

kayg referenced this pull request

2026-10-15 20:30:31 +00:00

Contrast: unfocused link chips, drag handle, block hover pill #450