Mockup, do not merge: phone chrome and row gestures (#469, #470) #474

Closed
kayg wants to merge 16 commits from issue/469-chrome-mockup into dev
Owner

Mockup, do not merge. Phone chrome (#469) and row gestures (#470) as a new mockup page, chrome.html, at https://preview.calternal.cloud/chrome.html. Nothing in the app changes; the other mockup pages are untouched.

Preview links, simulator screenshots, the iPhone checklist and open questions are in the comments on #469 and #470.

Refs #469, #470.

🤖 Generated with Claude Code

https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

**Mockup, do not merge.** Phone chrome (#469) and row gestures (#470) as a new mockup page, `chrome.html`, at https://preview.calternal.cloud/chrome.html. Nothing in the app changes; the other mockup pages are untouched. Preview links, simulator screenshots, the iPhone checklist and open questions are in the comments on #469 and #470. Refs #469, #470. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b
kayg added 16 commits 2026-10-16 06:31:58 +00:00
Mockup search, round 3: glass pills, one lighter material, pull to search (#275, #320, #321)
Some checks failed
CI / server (pull_request) Successful in 23s
CI / web (pull_request) Failing after 25s
CI / rust (pull_request) Successful in 1m57s
e8233d6db9
kayg on round 2: the band behind the filter buttons "looks bad", and search should be "more
transparent and less blurry so more content can be seen", on one material shared with the bar,
sheets and menus (#319).

- The bottom progressive-blur band is gone. Date, Tag, Sort, Trash and Clear are glass pills on
  the shared floating tokens (--glass-float, --glass-float-filter, --glass-float-edge), floating
  straight over the list. On a phone, unset filters show just their icon (with a tooltip and a
  name that says the setting) so the row fits; Clear becomes an icon pill.
- The panel and the phone sheet use only the floating tokens (no more one-off 72 px blur).
- styles/glass.css tries the lighter material on those shared tokens, mockup-wide: tint 0.30 /
  0.36 (light / dark) and blur 20 px, down from 0.40 / 0.42 and 44 px. Proposed for tokens.css
  on #319; production is unchanged.
- Pull to search (#320): a small gesture plugin (search/pull.svelte.ts) plus its hint pill.
  A downward pull from the top third of any phone screen follows the finger with resistance,
  arms at 72 px ("Let go to search"), opens the sheet coming down from the top, and springs back
  if let go early. It starts only when what's under the finger is at its top (or on a header),
  never from the left edge, never with words selected or inside text being edited, and cancels
  touch moves only once the pull is its own, so iOS overscroll can't fight it.
- Search now floats over Settings too, so the pull works on every screen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Search list clears its pills; the selector capsule never animates from the keyboard (#275)
Some checks failed
CI / server (pull_request) Successful in 24s
CI / web (pull_request) Failing after 25s
CI / rust (pull_request) Successful in 1m45s
8abd41a897
- Search: the results list ends a pill, its gap to the edge (with the home indicator on a
  phone) and 24 px of air further down, so the last row always scrolls fully out from under the
  floating filter pills. One measure (--clear-of-pills) sets both the padding and the keyboard's
  scroll padding. Checked at 1440, 390 and 390 with a 34 px home indicator, Chromium and WebKit.
- Selector (packages/ui): the capsule no longer fades in on first appearance, and changes from
  the keyboard (arrows, Enter, Space) or from outside (a link, another control) jump without
  any fade or slide, reduced motion included. Only a pointer's click glides or fades. Two new
  e2e checks: nothing runs on first appearance or after keyboard choices, and a pointer's first
  choice does fade in.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Search: the tab bar steps aside, one pill size, rows never rest under the pills (#350)
Some checks failed
CI / web (pull_request) Failing after 24s
CI / server (pull_request) Successful in 23s
CI / rust (pull_request) Successful in 2m0s
4ec278eacb
- While search is open, the app's bottom bar (tabs and note tools) and the phone's + button are
  hidden at every width, so nothing shows under the sheet's filter pills (it did at 320).
- The filter pills are one size: --f tall (36 px with a 44 px hit area on touch), and square
  when they show only their icon, the Trash included.
- The results list now stops above the pill row instead of running under it, so no row rests
  or scrolls under the pills at any scroll position; its last 14 px fade instead of ending on a
  hard edge. The pills keep their own glass. Checked at the top, mid-list and the end, at 320,
  390, 900 and 1440, light and dark, Chromium and WebKit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
- packages/ui/src/search/words.ts: a small pure parser for English filter words
  (kinds, before/after/on/in/since/until/between dates with ISO or relative days,
  #tags, pinned, in trash, newest/oldest), with unit tests run by CI.
- The search field shows recognised words as tokens; a tap turns one back into
  words, and they stay words. Words become tokens when a space, paste or
  suggestion finishes them; deleting never makes one.
- The bottom pills (Date, Tag, Sort, Trash) and the kind row are gone on every
  width. Best match by default; "newest" or "oldest" reorders.
- An empty field shows recent things plus three examples to try; they step
  aside after a few filter words.
- Phone: the panel hangs from the top and ends above the keyboard and Safari's
  bar (visualViewport), and springs back when the keyboard goes down.
  Scrolling the results puts the keyboard away.
- Rows: a held row never starts the system drag, callout or selection.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Search r4: the token line fades at its edge when scrolled (#399)
Some checks failed
CI / server (pull_request) Successful in 30s
CI / rust (pull_request) Successful in 3m0s
CI / web (pull_request) Failing after 43m31s
9e73419bc9
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
- hug.ts: the panel is laid out once at full height and shows only as much
  as its content and the keyboard allow, by a clip on the glass and the words
  and a scale on the shadow layer, moved by springs (no re-layout per frame).
  Results coming and going use a soft spring; keyboard moves use a quicker
  one with no overshoot, tuned to the keyboard.
- viewport.svelte.ts: the panel doesn't wait for Safari's late viewport
  report (WebKit 265578, 226689). A blur means the keyboard is leaving (the
  whole page, at once); a focus means it's coming (last time's height, at
  once). Safari's numbers then correct it on the same spring.
- While the keyboard is up, the list pads its end so every row can scroll
  above it.
- "Search everything" on phones; a link opens search without selecting the
  words; compact word-only tokens under 360 px (S18).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
- lib/fit/hug.ts and lib/fit/viewport.svelte.ts: the hug and keyboard logic
  as a shared module any mockup panel can use (Views, #312).
- The mockup gets the app's edge treatment (#105, #226, #396): the backdrop
  publishes --sky-edge, the phone's list screens set data-edge with the
  glass's colour and melt into it at the top and bottom, and the Home Screen
  app is sized by the real screen. glass-edge.ts and home-screen.ts move to
  packages/ui so the app and the mockup share them (the app re-exports).
- While search is open the app behind is inert (a modal dialog), which also
  leaves iOS's form bar arrows nowhere to go. On a phone a tap below a short
  panel closes search.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Rows swipe in the note list, the sidebar (places and tags), search results and the Trash. Every
route to a row's actions reads one registry (rows/row-actions.ts): the swipe buttons, the ⋯ and
right-click menu, the long-press card, the shortcuts on a focused row and aria-actions.

- rows/swipe-row.ts: the gesture. Follows the finger 1:1, rubber-bands past the buttons (×0.55),
  a long swipe grows the outer button into the gap on a spring detent, release keeps the finger's
  speed (springTo). Never from the left 24 px; claims at ≥10 px sideways, >2× vertical, within
  300 ms of the touch; a still hold is a long press. Non-passive touch listeners (WebKit 232545).
  Transforms only; one width read per touch.
- rows/RowActions.svelte, RowCard.svelte: the tray, the ⋯ on hover/focus, the long-press card
  (preview with every action under it).
- rows/plugins: note, search, sidebar and Trash actions. Archive and Hide as kayg decided them
  (W13, W17–W19): an Archive place once anything is archived, Unarchive on its long swipe; "archived"
  and "hidden" in search, and "Show hidden items" in a result's ⋯.
- Still open, as mockup switches: W14 search's left → right order, W15 Pin, W16 Open as a button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Swipe rows: labels wrap only between words, ⋯ steps aside while a row moves (#400)
Some checks failed
CI / server (pull_request) Successful in 1m6s
CI / rust (pull_request) Successful in 2m39s
CI / web (pull_request) Failing after 44m13s
56313bd51f
"Unarchive" broke mid-word in its 56 px tile; labels now wrap between words only. The ⋯ hid the
tray during a mouse swipe; it now steps aside while the row is moved.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Search r5: measure the hug as soon as results change, not on the next frame (#399)
Some checks failed
CI / server (pull_request) Successful in 1m1s
CI / rust (pull_request) Successful in 2m15s
CI / web (pull_request) Failing after 35m57s
dc064b4b1a
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Mockup: URL states, Settings edge, tests for both engines (#469, #470)
Some checks failed
CI / server (pull_request) Successful in 28s
CI / rust (pull_request) Successful in 2m2s
CI / web (pull_request) Failing after 48m45s
c6748b3dff
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Author
Owner

Closed: replaced by #500 (new branch issue/469-chrome-mockup-2). Mockup, do not merge.

Closed: replaced by #500 (new branch issue/469-chrome-mockup-2). Mockup, do not merge.
kayg closed this pull request 2026-10-16 13:15:26 +00:00
Some checks failed
CI / server (pull_request) Successful in 28s
CI / rust (pull_request) Successful in 2m2s
CI / web (pull_request) Failing after 48m45s

Pull request closed

Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal!474
No description provided.