Search palette: floating action pill (icons on touch), no footer band #218

Closed
opened 2026-09-27 07:50:27 +00:00 by kayg · 6 comments
Owner

Owner 2026-09-27 on the merged #178 phone screenshot (search-palette-many-390-tokyo-night): the bottom-right action pill shows text ('Open See all Actions') and sits on a thick opaque footer rectangle.

  • Remove the footer band entirely. The action pill FLOATS over the results, bottom-right, on the shared overlay glass (#157), like Raycast/Tinycast. Results scroll underneath it; the list gets bottom padding so the last row can scroll clear of the pill.
  • Touch (coarse pointer): icons only (Open ↵-style icon, See all, Actions ⋯ last), 44pt targets, labels on touch-and-hold via the shared touch tooltip (#191 rule: hold ~450ms shows the label, release after it = no action, slide to scan).
  • Desktop: the floating pill keeps label + shortcut ('Open ↵ · See all ⌘↩ · Actions ⌘K') with platform keys from the #159 registry; no band.
  • No border highlights (DESIGN §34 rule): the pill and its items use fills, not outlines.
    Screenshots: few and many results, light and dark, 1440 and 390, plus the list scrolled to the end.
Owner 2026-09-27 on the merged #178 phone screenshot (search-palette-many-390-tokyo-night): the bottom-right action pill shows text ('Open See all Actions') and sits on a thick opaque footer rectangle. - Remove the footer band entirely. The action pill FLOATS over the results, bottom-right, on the shared overlay glass (#157), like Raycast/Tinycast. Results scroll underneath it; the list gets bottom padding so the last row can scroll clear of the pill. - Touch (coarse pointer): icons only (Open ↵-style icon, See all, Actions ⋯ last), 44pt targets, labels on touch-and-hold via the shared touch tooltip (#191 rule: hold ~450ms shows the label, release after it = no action, slide to scan). - Desktop: the floating pill keeps label + shortcut ('Open ↵ · See all ⌘↩ · Actions ⌘K') with platform keys from the #159 registry; no band. - No border highlights (DESIGN §34 rule): the pill and its items use fills, not outlines. Screenshots: few and many results, light and dark, 1440 and 390, plus the list scrolled to the end.
Author
Owner

Started on job/search-pill, based on dev at c82549b9a6271c504e42bfde07b42e9e1c96c4ad.

Started on `job/search-pill`, based on `dev` at `c82549b9a6271c504e42bfde07b42e9e1c96c4ad`.
Author
Owner

Finding: dev has no shared touch-and-hold tooltip hook yet (rg finds only the unrelated vendored drag-and-drop touchHoldElapsed state). This change will use icon-only 44px touch controls with aria-label and title fallbacks. Follow up by wiring the shared hold/slide tooltip from #191 when it reaches dev; do not fork a second tooltip.

Finding: `dev` has no shared touch-and-hold tooltip hook yet (`rg` finds only the unrelated vendored drag-and-drop `touchHoldElapsed` state). This change will use icon-only 44px touch controls with `aria-label` and `title` fallbacks. Follow up by wiring the shared hold/slide tooltip from #191 when it reaches `dev`; do not fork a second tooltip.
Author
Owner

Finding from bun e2e/search.mjs: the touch action hit-target checks passed, but the pinned-action assertion failed. Scrolling the result list moved the pill from y=731 to y=472 (259px). The pill was an absolutely positioned child of the overflow scroller, so the scroller moved it with its contents. I am moving it to a positioned results-column wrapper outside the scroller.

Finding from `bun e2e/search.mjs`: the touch action hit-target checks passed, but the pinned-action assertion failed. Scrolling the result list moved the pill from y=731 to y=472 (259px). The pill was an absolutely positioned child of the overflow scroller, so the scroller moved it with its contents. I am moving it to a positioned results-column wrapper outside the scroller.
Author
Owner

Finding: two full bun e2e/search.mjs runs pass the new action-pill checks, scroll pinning, touch targets, and screenshot capture. Both then time out at the existing expanded photo-grid check (apps/web/e2e/search.mjs:752) waiting for a thumbnail <img> after 20 seconds; the photo tiles themselves render. This is outside the pill change and remains a known gap for the owner to triage.

Finding: two full `bun e2e/search.mjs` runs pass the new action-pill checks, scroll pinning, touch targets, and screenshot capture. Both then time out at the existing expanded photo-grid check (`apps/web/e2e/search.mjs:752`) waiting for a thumbnail `<img>` after 20 seconds; the photo tiles themselves render. This is outside the pill change and remains a known gap for the owner to triage.
Author
Owner

Implemented and completed #218.

Head: 5331642b45e1c963d75b20dc46efd7694685fcb8 (Merge branch 'dev' into job/search-pill).

The search action controls now float over the results, with no footer band. The pill stays pinned while results scroll, reserves clearance for the last row, and keeps all three 44px actions available at narrow widths. Desktop controls show labels and shortcut registry values. Coarse-pointer controls use icons with accessible names and title fallbacks.

Changed files:

  • apps/web/src/lib/components/search-dialog.svelte
  • apps/web/e2e/search.mjs
  • apps/web/e2e/layout-sweep.mjs

Production-build screenshots from a real local server are in artifacts/search-pill/ (12 PNGs): few and many results at 1440px and 390px, scrolled-to-end at 390px, light and dark themes, plus autocomplete screenshots.

Decisions and follow-up:

  • The shared touch-and-hold tooltip from #191 is not on dev. This pill uses aria-label and title fallbacks for now. Connect the #191 hook when it lands.
  • The search E2E checks and requested screenshots pass. The same run later times out in the existing photo-grid check while waiting for .grid .tile img at apps/web/e2e/search.mjs:752; this is outside the pill flow and was reported with its evidence.
  • The first full Rust test run hit a shared-host timing failure in continuous_typing_is_saved_within_the_maximum_wait; the isolated retry passed in 4.22s and the subsequent full workspace run passed.

Final gate output:

$ cargo fmt --check
(no output; exit 0)

$ cargo clippy --all-targets -- -D warnings
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 11m 23s

$ cargo test
    Finished `test` profile [unoptimized + debuginfo] target(s) in 1m 38s
The command exited 0. Final test output:
test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s

$ bun run check
$ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/search-pill/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

$ bun run test
 Test Files  71 passed (71)
      Tests  545 passed (545)
   Start at  11:10:57
   Duration  40.55s (transform 68%, import 12%, environment 11%, tests 6%, setup 2%)
Implemented and completed #218. Head: `5331642b45e1c963d75b20dc46efd7694685fcb8` (`Merge branch 'dev' into job/search-pill`). The search action controls now float over the results, with no footer band. The pill stays pinned while results scroll, reserves clearance for the last row, and keeps all three 44px actions available at narrow widths. Desktop controls show labels and shortcut registry values. Coarse-pointer controls use icons with accessible names and title fallbacks. Changed files: - `apps/web/src/lib/components/search-dialog.svelte` - `apps/web/e2e/search.mjs` - `apps/web/e2e/layout-sweep.mjs` Production-build screenshots from a real local server are in `artifacts/search-pill/` (12 PNGs): few and many results at 1440px and 390px, scrolled-to-end at 390px, light and dark themes, plus autocomplete screenshots. Decisions and follow-up: - The shared touch-and-hold tooltip from #191 is not on `dev`. This pill uses `aria-label` and `title` fallbacks for now. Connect the #191 hook when it lands. - The search E2E checks and requested screenshots pass. The same run later times out in the existing photo-grid check while waiting for `.grid .tile img` at `apps/web/e2e/search.mjs:752`; this is outside the pill flow and was reported with its evidence. - The first full Rust test run hit a shared-host timing failure in `continuous_typing_is_saved_within_the_maximum_wait`; the isolated retry passed in 4.22s and the subsequent full workspace run passed. Final gate output: ```text $ cargo fmt --check (no output; exit 0) $ cargo clippy --all-targets -- -D warnings Finished `dev` profile [unoptimized + debuginfo] target(s) in 11m 23s $ cargo test Finished `test` profile [unoptimized + debuginfo] target(s) in 1m 38s The command exited 0. Final test output: test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s $ bun run check $ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/search-pill/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings $ bun run test Test Files 71 passed (71) Tests 545 passed (545) Start at 11:10:57 Duration 40.55s (transform 68%, import 12%, environment 11%, tests 6%, setup 2%) ```
Author
Owner

Merged into dev at 65265f87 after Claude's review (floating pill, icon-only on touch, no footer band). Deploy status on #203.

Merged into dev at 65265f87 after Claude's review (floating pill, icon-only on touch, no footer band). Deploy status on #203.
kayg referenced this issue from a commit 2026-09-27 09:16:15 +00:00
kayg closed this issue 2026-09-27 09:16:16 +00:00
Sign in to join this conversation.
No labels
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#218
No description provided.