INSPECTOR in the Tab Bar morph: Space/⌘I, follows selection like Finder, inline editing, + tag pill, linked notes (3/3) #583

Open
opened 2026-10-01 06:31:28 +00:00 by kayg · 1 comment
Owner

Owner decisions (2026-10-01, inspector grill Q1, Q2, Q5, Q18)

The Inspector lives in the Tab Bar morph (reuse the capsule morph that shows the keyboard shortcuts card on ?, with the #236/#291 spring) at every width. The anchored popover, its "Info" header bar and its ✕ go away (no heading bars, #577). It is capped at the window height and scrolls inside. Escape, a click outside or ⌘I again folds it back. Keyboard opening never animates (#527).
Opening:

  • ⌘I / Ctrl+I (presets, #542); Info in the action list (context menu, capsule, phone bar);
  • Space on a folder → the Inspector;
  • Space on a file → Quick Look, and ⓘ inside Quick Look → the same Inspector;
  • Space or ⌘I with nothing selected → the Inspector for the current folder (also "Folder Info" in the top-row ⋯);
  • several items selected → a combined Inspector (count, total size, shared tags).
    Follows the selection like Finder (Q5): while open, moving the selection (arrows, click) swaps the content without animation.
    Inline editing (Q18): no Rename / Add tags buttons. Double-click (or double-tap) an editable value to edit it in place. Return (Apple preset) / F2 (Windows & Linux preset) edits the focused field; Return saves; Escape cancels. On hover, an editable value shows a faint field outline and the warm tooltip "Double-click to edit".
  • Editable fields:
    • Files: name;
    • Events: title, time, location, calendar;
    • Tasks: title, due date, priority, list;
    • Notes: title;
    • Photos: caption, date.
  • Tags: a small + pill next to the Tags heading adds a tag (no "Add tags" link); tags show as TagPills, removable inline.
  • No free-text Comments field (unlike Finder). Instead, Linked notes: the Inspector lists the notes that link to the item and offers an inline free-text field that creates or edits a linked note, with a fullscreen icon that opens the full block editor for that note.
  • Read-only values (kind, size, modified, location path) do not edit.
    Reuse: the shared Inspector/InspectorRow from #465 (merged in round 5), the KeyboardShortcutsCard morph host, the editor for linked notes.
    Tests:
  • an e2e: Space on a folder/file/nothing/multi-selection; ⌘I toggles; ↓ swaps the content without animation; double-click name → edit → Return saves (and the file is renamed on disk); F2 under the Windows & Linux preset; + adds a tag; a linked note is created inline and opens fullscreen;
  • the phone flow via the selection bar Info action.
    Screenshots at 390/820/1440 in both themes, plus frame strips of the morph.
    Order: 3 of 3, after the top-row issue.
## Owner decisions (2026-10-01, inspector grill Q1, Q2, Q5, Q18) **The Inspector lives in the Tab Bar morph** (reuse the capsule morph that shows the keyboard shortcuts card on `?`, with the #236/#291 spring) at every width. The anchored popover, its "Info" header bar and its ✕ go away (no heading bars, #577). It is capped at the window height and scrolls inside. Escape, a click outside or ⌘I again folds it back. Keyboard opening never animates (#527). **Opening:** - ⌘I / Ctrl+I (presets, #542); Info in the action list (context menu, capsule, phone bar); - **Space on a folder** → the Inspector; - **Space on a file** → Quick Look, and ⓘ inside Quick Look → the same Inspector; - **Space or ⌘I with nothing selected** → the Inspector for the current folder (also "Folder Info" in the top-row ⋯); - **several items selected** → a combined Inspector (count, total size, shared tags). **Follows the selection like Finder (Q5):** while open, moving the selection (arrows, click) swaps the content without animation. **Inline editing (Q18): no Rename / Add tags buttons.** Double-click (or double-tap) an editable value to edit it in place. Return (Apple preset) / F2 (Windows & Linux preset) edits the focused field; Return saves; Escape cancels. On hover, an editable value shows a faint field outline and the warm tooltip "Double-click to edit". - **Editable fields:** - Files: name; - Events: title, time, location, calendar; - Tasks: title, due date, priority, list; - Notes: title; - Photos: caption, date. - **Tags:** a small **+ pill next to the Tags heading** adds a tag (no "Add tags" link); tags show as TagPills, removable inline. - **No free-text Comments field** (unlike Finder). Instead, **Linked notes**: the Inspector lists the notes that link to the item and offers an inline free-text field that creates or edits a linked note, with a **fullscreen icon** that opens the full block editor for that note. - Read-only values (kind, size, modified, location path) do not edit. **Reuse:** the shared Inspector/InspectorRow from #465 (merged in round 5), the KeyboardShortcutsCard morph host, the editor for linked notes. **Tests:** - an e2e: Space on a folder/file/nothing/multi-selection; ⌘I toggles; ↓ swaps the content without animation; double-click name → edit → Return saves (and the file is renamed on disk); F2 under the Windows & Linux preset; + adds a tag; a linked note is created inline and opens fullscreen; - the phone flow via the selection bar Info action. Screenshots at 390/820/1440 in both themes, plus frame strips of the morph. **Order:** 3 of 3, after the top-row issue.
Author
Owner

Chrome audit findings

Scope: routes and shared components in apps/web/src/routes and apps/web/src/lib, against CLAUDE.md Chrome rules and DESIGN §34.

Branch: job/chrome-audit; base: 440e19dce23040ac8ebaae88f0469b6535b1afcb (origin/dev).

Finding 1 — Inspector still opens as a popover (#583)

Evidence

  • packages/ui/src/components/Inspector.svelte:52-86 renders the Inspector through PopoverSurface. It adds a title and a Close button.
  • packages/ui/src/components/TabBar.svelte:3-10,67-71 has only the Tabs, contextual selection bar and shortcuts card states. It has no Inspector state.
  • apps/web/src/lib/files/FilesBrowser.svelte:1524-1526 uses this shared Inspector for file details.
  • packages/ui/src/components/viewer/QuickLook.svelte:263-267 uses the same Inspector for Quick Look details.

Rule: DESIGN §34 and issue #583 say the Inspector lives in the Tab Bar morph at every width. It has no heading bar or close button. It follows the current selection and closes with Escape, outside click or Cmd+I/Ctrl+I.

Expected behaviour: Move the shared Inspector presentation into a Tab Bar morph state. Keep Files, Calendar and Quick Look details in that state. Remove the popover heading and close button.

Test idea: Open the Inspector from a selected File, Calendar item and Quick Look at 390, 820 and 1440 px. Check the Tab Bar morph, selection following, Escape/outside/Cmd+I closing, keyboard focus and reduced motion.

Existing issue: kayg/calternal#583. I added these code references there.

# Chrome audit findings Scope: routes and shared components in `apps/web/src/routes` and `apps/web/src/lib`, against CLAUDE.md Chrome rules and DESIGN §34. Branch: `job/chrome-audit`; base: `440e19dce23040ac8ebaae88f0469b6535b1afcb` (`origin/dev`). ## Finding 1 — Inspector still opens as a popover (#583) **Evidence** - `packages/ui/src/components/Inspector.svelte:52-86` renders the Inspector through `PopoverSurface`. It adds a title and a Close button. - `packages/ui/src/components/TabBar.svelte:3-10,67-71` has only the Tabs, contextual selection bar and shortcuts card states. It has no Inspector state. - `apps/web/src/lib/files/FilesBrowser.svelte:1524-1526` uses this shared Inspector for file details. - `packages/ui/src/components/viewer/QuickLook.svelte:263-267` uses the same Inspector for Quick Look details. **Rule**: DESIGN §34 and issue #583 say the Inspector lives in the Tab Bar morph at every width. It has no heading bar or close button. It follows the current selection and closes with Escape, outside click or Cmd+I/Ctrl+I. **Expected behaviour**: Move the shared Inspector presentation into a Tab Bar morph state. Keep Files, Calendar and Quick Look details in that state. Remove the popover heading and close button. **Test idea**: Open the Inspector from a selected File, Calendar item and Quick Look at 390, 820 and 1440 px. Check the Tab Bar morph, selection following, Escape/outside/Cmd+I closing, keyboard focus and reduced motion. **Existing issue**: kayg/calternal#583. I added these code references there.
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#583
No description provided.