feat(app): sidebar display preferences, a shared menu engine, and a colour pass
Sidebar polish round. Menus. `dropdown-menu` and `context-menu` were two copies of one engine that differed only in how the trigger fires — identical from `computePosition` down — and neither could nest. Both are now thin wrappers over `components/ui/menu/`, which owns anchoring, a pure page-stack navigation model, and one presentation fork: flyout on pointer, pushed pages in a sheet on compact. All 31 call sites are unchanged. Items got a rounded inset fill, a visible separator, and `selected` (a check) split from `active` (a fill). Sidebar display preferences. The flat wall of four sections becomes one row per decision with its value, and per-feature toggles over what a workspace row shows: host, pull request, checks, scripts. Each is independent — a ticked toggle that draws nothing is a lie. `display-preferences/` hides that grouping lives in zustand while title source and row items are app settings. Timestamps. "Last activity" now ticks itself. The label rounds to the minute and never shows seconds; past a week it becomes a date. The timer lives in the leaf `<Text>`, at most one per resolution tier shared by every row, and a tick only re-renders when the string actually changed — so a memoized row that legitimately never re-renders still stays current. Colour. Full status tier regenerated at 90% of gamut max (was 85), same rule as the muted tier, lightness and hue untouched. File icons are pulled toward neutral in OKLab behind `getFileIconSvg` — material-icon-theme picks its palette for a tree where the icon is the only colour on the row, and ours is not. New/deleted files use the forge square-plus/square-minus glyphs at muted weight instead of tinted pills. Project icons round a little more; uploaded icons never do. The project status badge is a knockout again: it fills with the colour of the row behind it, so the ring reads as a gap in the icon rather than a white halo. File rows. The always-visible kebab is gone from the file explorer and diff tree in favour of right-click, which also reclaims the reserved action slot.
This commit is contained in:
Mohamed Boudra
+24
-12
@@ -2,20 +2,32 @@
|
||||
|
||||
The file explorer uses colored SVG icons from [`material-icon-theme`](https://github.com/material-extensions/vscode-material-icon-theme) (installed as a dev dependency in `packages/app`).
|
||||
|
||||
Icons are inlined as SVG strings in:
|
||||
|
||||
```
|
||||
packages/app/src/components/material-file-icons.ts
|
||||
```
|
||||
|
||||
This file is auto-generated. Do not edit it by hand.
|
||||
|
||||
## How it works
|
||||
|
||||
- `SVG_ICONS` maps icon names (e.g. `"typescript"`) to raw SVG strings
|
||||
- `EXTENSION_TO_ICON` maps file extensions (e.g. `"ts"`) to icon names
|
||||
- `getFileIconSvg(fileName)` returns the SVG string for a given filename, falling back to a generic file icon
|
||||
- `packages/app/src/components/file-explorer-pane.tsx` is the only consumer; it renders the SVG with `SvgXml` from `react-native-svg`
|
||||
Two files:
|
||||
|
||||
- `packages/app/src/components/material-file-icons.ts` — the vendor table. `SVG_ICONS` maps icon
|
||||
names to SVG strings copied verbatim from the theme, `EXTENSION_TO_ICON` maps extensions to icon
|
||||
names, and `getRawFileIconSvg(fileName)` looks one up with a generic fallback. Keep it a faithful
|
||||
copy so re-copying an icon stays a mechanical edit.
|
||||
- `packages/app/src/components/file-icon-svg.ts` — `getFileIconSvg(fileName)`, the only thing
|
||||
anyone should import. It desaturates the vendor colours and caches the result.
|
||||
|
||||
Render with `<MaterialFileIcon fileName size />` rather than reaching for `SvgXml` yourself.
|
||||
|
||||
## Why the colours are toned down
|
||||
|
||||
material-icon-theme picks its palette for VS Code's file tree, where the icon is the only colour on
|
||||
the row. Ours share rows with status dots, diff stats, and check badges, and a column of them at
|
||||
full chroma is the loudest thing in the panel.
|
||||
|
||||
Every hex in the SVG is pulled toward neutral at the same perceived lightness (`desaturateHexColor`
|
||||
in `packages/app/src/utils/color.ts`, OKLab — scaling HSL saturation instead would darken the
|
||||
yellows and barely touch the blues). Hue survives, which is the only part of an icon's colour that
|
||||
carries meaning at 16pt.
|
||||
|
||||
`ICON_CHROMA` in `file-icon-svg.ts` is the single knob. Move it; do not add per-icon overrides, or
|
||||
we are back to hand-picking 53 colours.
|
||||
|
||||
## Adding a new icon
|
||||
|
||||
|
||||
@@ -258,3 +258,6 @@ Before you write a new one, ask:
|
||||
bounded**. Verify before you commit.
|
||||
|
||||
Then copy the closest canonical file and trim.
|
||||
|
||||
Building a **menu** rather than a bare panel? Don't. Use the menu engine — it already solves
|
||||
everything above, plus submenus, sheets, and hover intent. See [menus.md](menus.md).
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
|
||||
- **Agent** — See **Agent session**. UI still says "Agent" / "New Agent" in places, but moving toward **Agent session** as the canonical term. Code: `AgentSnapshotPayload` (`packages/protocol/src/messages.ts:608`). Forbidden: "Task", "Job", "Run".
|
||||
- **Daemon** — Local Paseo server process; identified by `serverId`. UI: "Daemon" (system contexts only). Code: `serverId` in `ServerInfoStatusPayloadSchema` (`packages/protocol/src/messages.ts:1936`), `DaemonClient` (`packages/client/src/daemon-client.ts`).
|
||||
- **Host** — Client-side connection profile pointing at a daemon; bundles one or more `HostConnection`s. UI: "Host" / "Add host" / "Switch host". Code: `HostProfile` (`packages/app/src/types/host-connection.ts:37`). Forbidden: "Connection" (means `HostConnection`, not host).
|
||||
- **Host badge** — The sidebar pill naming which host a workspace lives on. Only drawn once the visible sidebar spans more than one host. Its name, color, and display mode (**Name** / **Icon only** / **Hidden**) are per-host, per-device, and live client-side on `HostProfile.appearance`; nothing about it reaches the daemon. UI: the "Appearance" group on a host's settings page. Code: `HostBadge` (`packages/app/src/components/sidebar/host-badge.tsx`), `selectHostBadges` (`packages/app/src/hosts/appearance.ts`). Don't confuse with **Status pill**, which reports state rather than identity.
|
||||
- **Host badge** — The item on a sidebar workspace row's meta row naming which host that workspace lives on. Three things gate it, and they compose as a lattice rather than competing: the sidebar must span more than one host (automatic), **Show → Host** in the sidebar's display preferences must be on (global, all hosts at once), and then that host's own display mode decides _how_ it draws — **Name** / **Icon only** / **Hidden**. Name, color, and display mode are per-host, per-device, and live client-side on `HostProfile.appearance`; nothing about it reaches the daemon. Never add a fourth way to hide it. UI: the "Appearance" group on a host's settings page, and the "Show" submenu in the sidebar's display preferences. Code: `selectHostBadges` (`packages/app/src/hosts/appearance.ts`) takes the first two as its `enabled` input; `WorkspaceMetaRow` (`packages/app/src/components/sidebar/workspace-meta-row/index.tsx`) draws it. Don't confuse with **Status pill**, which reports state rather than identity.
|
||||
- **Project host entry** — One row in a project for a single (project, daemon) pair, aggregating that daemon's workspaces in the project. Internal. Code: `ProjectHostEntry` (`packages/app/src/utils/projects.ts:11`). Don't introduce "Checkout" as a synonym.
|
||||
- **Placement** — One workspace's stable foreign-key relationship to its project plus its git checkout snapshot. Internal. An explicit creation `projectId` is authoritative when active.
|
||||
- **Branch** — Plain git branch. UI: "Switch branch". Code: `currentBranch` in `WorkspaceGitRuntimePayloadSchema` (`packages/protocol/src/messages.ts:2136`); `BranchSwitcher` (`packages/app/src/components/branch-switcher.tsx`).
|
||||
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
# Menus
|
||||
|
||||
One engine, in `packages/app/src/components/ui/menu/`. `dropdown-menu.tsx` and `context-menu.tsx`
|
||||
are wrappers over it and differ only in what opens them — a press, or a long press / right click.
|
||||
Import the `DropdownMenu*` or `ContextMenu*` names as before; reach for `@/components/ui/menu`
|
||||
directly only when you are building a third trigger shape.
|
||||
|
||||
Do not add a third menu implementation. The two that existed were byte-identical from
|
||||
`computePosition` down, and the copies drifted: only one of them ever grew a sheet.
|
||||
|
||||
## Two presentations
|
||||
|
||||
`MenuRoot` picks one from form factor, never from platform — a tablet in a narrow split view
|
||||
sheets the same way a phone does.
|
||||
|
||||
| Screen | Surface | Submenus |
|
||||
| ------------------------------ | ------------------------------- | -------------------------------------------------- |
|
||||
| Wide | Popover anchored to the trigger | Flyout overlapping the row, opened by hover intent |
|
||||
| Compact, `compactMode="sheet"` | Bottom sheet | The page is replaced in place, with a back header |
|
||||
| Compact, default | Popover | Same as wide |
|
||||
|
||||
`compactMode` defaults to `"popover"`, so adopting the sheet is per-menu. That is deliberate:
|
||||
flipping every menu in the app to sheets at once is not a change anyone can review. Opt a menu in
|
||||
when you have actually looked at it on a phone.
|
||||
|
||||
## Pages
|
||||
|
||||
A submenu is a page, declared as data on the surface and reached by a `MenuSubTrigger` whose `id`
|
||||
matches:
|
||||
|
||||
```tsx
|
||||
<MenuSurface pages={pages} sheetTitle="Display">
|
||||
<MenuSubTrigger id="grouping" value="Project">
|
||||
Grouping
|
||||
</MenuSubTrigger>
|
||||
</MenuSurface>
|
||||
```
|
||||
|
||||
Pages are data rather than nested children because the popover renders them as _siblings_ of the
|
||||
root surface — a flyout nested inside the root's box would be clipped by its `overflow: hidden`.
|
||||
Declaring them separately is what lets one model drive both presentations.
|
||||
|
||||
`menu-navigation.ts` holds that model, and it is pure: the open flyout chain and the mobile push
|
||||
stack are the same path, so the popover renders every entry in it and the sheet renders only the
|
||||
last. Nothing else differs between the two.
|
||||
|
||||
Opening a submenu truncates the path to the depth of the trigger that opened it. Without that,
|
||||
sliding the pointer across a row of triggers would stack up every flyout it passed instead of
|
||||
swapping between them.
|
||||
|
||||
## Hover intent
|
||||
|
||||
A flyout **overlaps its parent by 5pt** rather than sitting beside it. With a gap there is a strip
|
||||
of backdrop between the two that belongs to neither surface, and every pixel of it is a chance to
|
||||
dismiss the menu you are reaching for. Overlapping deletes the strip; don't reintroduce the gap
|
||||
and try to cover it with a longer timer.
|
||||
|
||||
On top of that, a flyout opens after the pointer rests ~90ms, closes ~260ms after it leaves, and
|
||||
cancels its own pending close while the pointer is inside it. The grace still matters because the
|
||||
pointer crosses sibling rows on the way down into the flyout.
|
||||
|
||||
Hover lives on a plain `View`, never on a `Pressable` — see [hover.md](hover.md), which owns that
|
||||
rule. Hover only fires on web, which is exactly where flyouts exist; everywhere else the page
|
||||
opens on press.
|
||||
|
||||
## Item states
|
||||
|
||||
`selected` and `active` are different questions and must not be merged.
|
||||
|
||||
| Prop | Means | Draws |
|
||||
| ---------- | -------------------------- | ------------------------- |
|
||||
| `selected` | This is the chosen value | A check, and nothing else |
|
||||
| `active` | This row's submenu is open | The fill, and no check |
|
||||
|
||||
A selected row does **not** get a background. A check and a fill are two separate claims about the
|
||||
same state, and showing both makes a chosen row compete with the row the pointer is actually on.
|
||||
`showSelectedCheck` moves the check to a reserved leading column when a group needs to stay
|
||||
aligned whether ticked or not; otherwise it sits at the trailing edge and the leading slot is free
|
||||
for the option's icon.
|
||||
|
||||
Give options icons; leave the root rows without them. The root is labels and their current values,
|
||||
and a column of icons there is decoration competing with the values you actually came to read.
|
||||
|
||||
## Surface details
|
||||
|
||||
- The hover fill is **inset by the same amount on every side and rounded** — a chip inside the
|
||||
menu, not a band across it. The inset is taken _out of_ the row, never added to it: horizontally
|
||||
padding gives up what margin takes so labels don't move, and vertically the fill is shorter by
|
||||
the same amount so the row pitch is unchanged. Insetting by growing the row is how the menu ends
|
||||
up taller than it started.
|
||||
- The fill's height only holds because the label's `lineHeight` is pinned. Leave it to the platform
|
||||
and content outgrows `minHeight`, which then does nothing.
|
||||
- **The item's inset is the menu's only spacing.** Rows sit apart because each holds itself in, and
|
||||
a separator gets clearance from its neighbours for free. Don't give the separator a margin of its
|
||||
own — that is two numbers controlling one gap, and they will disagree.
|
||||
- Separators use `borderAccent`, the same colour the surface outlines itself with. `border` sits
|
||||
between `surface1` and `surface2`, which put it within a hair of the hover fill and made
|
||||
separators disappear against a hovered row.
|
||||
|
||||
## When a decision earns a submenu
|
||||
|
||||
Put a decision behind a submenu when its options are not the point — the current _value_ is. The
|
||||
root row then reads as the answer (`Grouping Project ›`) and costs one line instead of one line
|
||||
per option. A menu whose every option is on screen at once does not survive its third decision.
|
||||
|
||||
Independent toggles stay on their page as a checkmark list. A pick-one group can share that page
|
||||
below a `MenuSeparator`; make selecting the checked row clear it, so "none" doesn't need a row of
|
||||
its own.
|
||||
|
||||
## Gotchas
|
||||
|
||||
- **Released height.** Reanimated's web entering animation leaves an inline height snapshot on
|
||||
the surface. `AnchoredSurface` clears it, and a `revision` prop re-clears it when content
|
||||
identity changes — a pushed page taller than the one it replaced is clipped without that.
|
||||
- **Sheets size to content.** `enableDynamicSizing`, not fixed snap points. A pushed page is
|
||||
rarely the height of the page before it.
|
||||
- **One overlay per menu.** Submenus render inside their parent's layer and paint no second
|
||||
backdrop, so there is exactly one `Modal` on native no matter how deep the menu goes.
|
||||
- Anchoring, flipping, and edge clamping live in `menu-anchor.ts` and are unit-tested. Fix
|
||||
positioning bugs there, not at a call site.
|
||||
- Everything else about floating surfaces on Android — Portal/Modal escape, lifecycle gates,
|
||||
status-bar offset, the open flash — is in [floating-panels.md](floating-panels.md).
|
||||
Reference in New Issue
Block a user