## Summary

Slice 09 of the #440 visual rewrite. Closes #303.

- Row outer shell rebuilt to L35: 32px tall, 10px horizontal padding, radius-sm, flex-centered (no leading-[1.4]). Active title now picks up `font-medium`.
- Right-slot status reduced to the 4-state model: `asking` (comment icon, brand orange) → `busy` (spinner) → `error` (circle-x, red) → `time` (sans 12, fg-weaker). Old 6px colored dots and the pinned-icon state are gone — pin status is signaled by the row's presence in the Pinned section.
- Action overlay three-dot iconbtn scoped to `--radius-md` and `--row-active-overlay` (0.06) hover so it reads as its own target on top of the 0.04 row hover. The IconButton base contract stays at `--radius-sm` + `--hover-overlay`; the slice 09 override is scoped to `[data-component="pawwork-session-row"] [data-action="session-row-menu"]` only. Status fades to opacity 0 (no `display:none`).
- 4-item menu: Pin / Rename / Export… / (sep) / Delete, each with a leading icon. Keyboard shortcut affordances (the `↵` / `⌘` / `⌫` hint glyphs and a real `<kbd>` element) are deferred to slice 14 (L46) — slice 09 ships the icon-leading layout only.
- Sort: replaced the icon-only filter toggle with a Kobalte DropdownMenu trigger (still icon-only `IconButton icon="sort"` to fit the 32px row beside the All label) offering 按时间 / 按项目 (By time / By project), with active-mode check icon and `data-mode` for testability.
- Layout shape: existing segments now carry `pawwork-side-top` / `pawwork-side-scroll` / `pawwork-side-foot` markers so L37's shell shape is testable. The traffic / collapse-control segment (`pawwork-side-traffic`) is intentionally deferred to slice 17 — the OS chrome already renders the macOS traffic-lights today, and adding a 32px placeholder now would double the empty space at the top. Slice 17 hides the OS chrome and moves the controls into the sidebar; that's when the placeholder lands.
- Footer: settings button keeps its `TooltipKeybind` wrapper for the keybind affordance; the visible row matches the L35 nav cluster (32 high, 10 horizontal padding) alongside the other two sidebar nav buttons.
- Removed dead `ProjectIcon` export from `sidebar-items.tsx` (no callers).
- Sidebar geometry uses literal pixels (`h-[32px]`, `size-[20px]`, `size-[16px]`) because PawWork's 13px root font size scales Tailwind rem-based sizing — `h-8` would render at 26px, not 32.
- Project group collapse (#50): project headers in the project sort mode are now toggle buttons with a folder icon and a hover-revealed chevron. Collapsed state animates via grid-template-rows 0fr↔1fr (motion-reduce friendly), is keyed by project label, and persists across reloads via `pawworkProjectCollapsed` on `layout-page-store`. Items stay mounted while collapsed (focus / scroll preserved) and `inert` removes them from the tab order.
- Settings overlay close-on-nav: clicking a sidebar session (or "new session") while the settings overlay is open closes the overlay before navigating, wired through `closeSettingsSurface` in `createShellNavigation`. The global `setNavigate` hook is also wrapped so notification clicks and other non-shell deep-link routes close the overlay before routing.
- Spinner: the shared `Spinner` now accepts an optional `aria-label` prop (default `"Loading"`) so localized callers can pass `language.t("common.loading")`; the keyframe is gated behind `prefers-reduced-motion: reduce`.
- Command palette redesign (search header geometry, fixed body height, item rules) — full content / feature redesign tracked as follow-up #501.
- Project rename / delete actions tracked as follow-up #502 (out of slice 09 scope).

## Boundary check (no out-of-scope paths)

Touched only:
- `packages/app/src/pages/layout/{sidebar-items.tsx, pawwork-sidebar.tsx, sidebar.css, layout.tsx, layout-page-store.ts, shell-navigation.ts, session-menu-actions.{ts,test.ts}, sidebar-status-kind.{ts,test.ts}}`
- `packages/app/src/i18n/{zh.ts, en.ts}` (sort + settings keys; `app.name.desktop` shortened to `PawWork`)
- `packages/app/src/components/{prompt-input.tsx, prompt-input/workspace-chip.tsx, dialog-select-file.tsx}` (font-weight unification + magnifying-glass restoration on the file dialog)
- `packages/ui/src/components/{command-palette.css, menu.css, icon-button.css, spinner.{tsx,css}}` (palette geometry, unified context+dropdown menu styling, row-overlay scoping, shared spinner)
- `packages/app/e2e/sidebar/{sidebar-slice-09.spec.ts (new), sidebar-project-collapse.spec.ts (new), sidebar-session-organization.spec.ts (selector), sidebar-leading-slot.spec.ts (drop obsolete pin-button assertion)}`
- `packages/app/e2e/settings/settings-close-on-nav.spec.ts (new)`

No changes to `sidebar-workspace.tsx`, titlebar, composer, message-flow, settings page content, or `packages/opencode`.

## Departures

- **Sub-session indentation** kept at `padding-left = 10 + level * 16`. The L35 anatomy locks the flat row; nested sessions need visual hierarchy. Annotated inline in `sidebar-items.tsx`.
- **Right-slot `error` state** is wired to the existing `notification.session.unseenHasError` signal (unread tool-output errors). Without a session-level error field in the data layer today, unseen-error is the available proxy.
- **Row left padding base 8 → 10** to match L35 row padding 0 10 (was `8 + level*16`, now `10 + level*16`).
- **`NewSessionItem` leading icon goes 14 → 16** (the standard chrome size after slice 08). The previous 14px override in `sidebar.css` was a deliberate departure from slice 08 with no L35/L37 backing — dropped.
- **Sort trigger stays icon-only.** L35 row geometry only fits a 20px icon button beside the "All" label; a text + chevron trigger would force the All header to two lines or push the action out of the row. The DropdownMenu still exposes the two options with check + `data-mode`, and the `pawwork-sort-trigger` selector is stable for E2E.
- **`pawwork-side-traffic` placeholder deferred to slice 17.** The OS already paints macOS traffic-lights on the window chrome; reserving a 32px band on top of that would render 64px of empty space at the sidebar head. Slice 17 hides the OS chrome and moves the cluster into the sidebar — that's when the placeholder lands without doubling the void. The deferral is annotated inline in `pawwork-sidebar.tsx`.
- **Menu shortcut hints deferred to slice 14.** An earlier draft of this slice rendered placeholder span hints next to each menu label; that was rolled back in favor of leading icons (commit `bf2f1d6`). Real `<kbd>` and the canonical hint affordance ship with slice 14 (L46).
- **Settings footer keeps `TooltipKeybind`.** The inline ⌘ glyph belongs with the broader keybind hint affordance in slice 14; until then, the tooltip surface remains the source of truth for the shortcut.

## Test plan

- [x] `bun turbo typecheck --filter=@opencode-ai/app --filter=@opencode-ai/ui` (5/5 packages)
- [x] `bun test --preload ./happydom.ts src/pages/layout` (101 pass, 0 fail)
- [x] `bun test:e2e -- sidebar/sidebar-slice-09.spec.ts` (3/3 pass)
- [x] `bun test:e2e -- sidebar/sidebar-project-collapse.spec.ts settings/settings-close-on-nav.spec.ts` (3/3 pass)
- [x] `bun test:e2e -- sidebar/sidebar-session-organization.spec.ts sidebar/sidebar-leading-slot.spec.ts` (3/3 pass)
- [x] Manual `bun run dev:desktop` Electron walkthrough — verified sidebar rows (hover/active/focus), three-dot menu and right-click menu parity, Pin/Rename/Export/Delete, sort popover toggle, status states (asking/busy/error/time), project collapse persistence across reload, settings close-on-nav for sidebar sessions, command palette geometry, light + dark themes.

## Crosscheck

Plan was reviewed by Claude (opus) + Codex prior to implementation. P0 candidates were investigated and dropped (`comment` icon exists; `STANDARDS.md` is a real local-only spec source). All P1/P2 findings were folded back into the plan and applied in commits.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Added sidebar sort functionality with time and project options
  * Added project group collapse with persisted state across reloads
  * Added keyboard shortcut indicators in UI elements

* **UI/UX Improvements**
  * Standardized component heights across the interface (28px → 32px)
  * Redesigned spinner animation using CSS-based approach
  * Enhanced dropdown menu styling and hover behavior (unified with right-click menu)
  * Added icons to session menu actions
  * Settings overlay now closes when navigating away via the sidebar

* **Localization**
  * Added English translations for release notes UI and sorting controls
  * Added Chinese translations for sidebar sorting features

<!-- end of auto-generated comment: release notes by coderabbit.ai -->