Skip to content

feat(ui): adopt CoachTip across command-backed chrome + register sidebar toggles (RIG-2704) - #618

Merged
mattwilkinsonn merged 3 commits into
mainfrom
compass-ux/rig-2704-coaching-sweep
Aug 26, 2026
Merged

feat(ui): adopt CoachTip across command-backed chrome + register sidebar toggles (RIG-2704)#618
mattwilkinsonn merged 3 commits into
mainfrom
compass-ux/rig-2704-coaching-sweep

Conversation

@rigel-mintaka

@rigel-mintaka rigel-mintaka commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

This PR is part of a stack containing 4 PRs:

  1. main
  2. feat(keyboard): sequence-grammar chord helpers for leader chords (RIG-2707) #612
  3. feat(ui): CoachTip coaching tooltip component (RIG-2703) #615
  4. "feat(ui): adopt CoachTip across command-backed chrome + register sidebar toggles (RIG-2704)" (this PR)
  5. docs(ui): document the shipped CoachTip consumer + retarget the ShortcutChip note (RIG-2705) #620

The coaching-tooltip adoption sweep (T2 of the coaching-tooltips design):
convert every command-backed title= in the shell chrome to a CoachTip,
and register the two sidebar-toggle commands so their coached chord actually
dispatches.

  • spine.ts / store.ts: register sidebar.toggleLeft/sidebar.toggleRight
    (global scope, no hand-authored shortcut — the chord derives from the keymap,
    D4) beside their existing store behavior. The chords Mod+Shift+\ /Mod+\
    were declared in the keymap but registered nowhere (dead) — registering them
    next to the behavior they already drive is DL-229-compliant. The toggleLeft/
    toggleRight closures move above createKeyboardSpine so they can be threaded
    into its deps; the click path is unchanged.
  • App.tsx: convert the topbar Bridge tab (view.bridge) and the two glyph-only
    sidebar toggles. Drop native title=, keep aria-keyshortcuts, and add
    aria-label to the two glyph toggles (§A5 — a bare block glyph is not an
    accessible name).
  • LeftSidebar.tsx: convert the four view buttons (Bridge/Backlog/Done/Settings).
    Drop native title=, keep aria-keyshortcuts. Backlog/Done have no keymap
    row yet, so their CoachTip is label-only.
  • Keep-native boundary (§A4) held: new-folder, pin/unpin, disabled subscribe/
    join, role/status/truncation titles keep their native title= (no registered
    command → nothing to coach).
  • Chord is never hand-authored: CoachTipContent resolves it via
    shortcutFor(command, platform); the now-unused bridgeChord/chord helpers
    and shortcutFor imports are removed from both files.

Tests (43 pass across spine/App/LeftSidebar/e2e): tooltip-reveal-on-focus with
keymap-derived chord, title-dropped + aria-keyshortcuts-kept guard,
glyph-toggle accessible-name via aria-label, keep-native new-folder boundary,
the two new registrations (metadata + run), and live coached-chord dispatch of
both sidebar toggles (registry resolution + real keydown). Also updates the
pre-existing RIG-2483 Palette test that asserted the LeftSidebar buttons' native
title chord — that display chord now rides a CoachTip, so the test asserts the
title is absent (a native title would double-tooltip) while aria-keyshortcuts
is unchanged.

Ledger-impact: none (decisions landed with the design PR #569; DL-245..247).

RIG-2704

@linear-code

linear-code Bot commented Aug 25, 2026

Copy link
Copy Markdown

RIG-2704

@github-actions

github-actions Bot commented Aug 25, 2026

Copy link
Copy Markdown

Compass engineering docs preview: https://compass-ux-rig-2704-coaching.compass-eng-docs.pages.dev

Deployed from compass-ux/rig-2704-coaching-sweep at a881232.

rigel-mintaka and others added 3 commits August 25, 2026 23:26
…-2707)

Adds three pure, table-independent helpers to `keymap.ts` for the leader/mnemonic-chord grammar frozen in `docs/designs/product/compass-leader-chords/design.md` (T1):

- `chordSegments(chord)` — split a chord on its single space; a plain chord yields a one-element array, a sequence like `"G B"` yields `["G", "B"]`. Space is a collision-free separator because the literal Space key normalizes to the `"Space"` token in the dispatcher.
- `leaderPrefixes(keymap, platform)` — the resolved first segment of every multi-segment row, derived from the table so the dispatcher never hard-codes a leader key.
- `formatChordForDisplay(chord, platform)` — a single chord resolves through `resolveChord` (`"Mod+B"` → `"Cmd+B"`); a sequence joins resolved segments with `" then "` (`"G B"` → `"G then B"`). The single formatter behind every display surface.

Extends the `KeymapEntry` doc block with the sequence grammar and its three authoring rules (exactly two segments; every segment modifier-less; the leader prefix never doubles as a complete chord).

Pure additions: no production caller and no shipped-helper change (`shortcutFor`/`shortcutForAria` hardening and the `DEFAULT_KEYMAP` sequence rows are T2). `formatChordForDisplay` is the shared root — RIG-2484 T2/T3 and RIG-2530's CoachTip (RIG-2703) both consume it.

Tests extend `keymap.test.ts` over a fixture keymap (the real table carries no sequence rows until T2): segment splitting, leader-prefix derivation, and single-vs-sequence display formatting on both platforms.

Ledger-impact: none. DL-248..DL-252 for this record landed with the design PR (#544); this impl slice ratifies no new decision.

Refs RIG-2707

Co-authored-by: Matt Wilkinson <matt@rigel.build>
Adds the reusable coaching Tooltip from the frozen coaching-tooltips design (`docs/designs/product/compass-coaching-tooltips/design.md`, T1 / §A1-A3, A5, D5): a label + keymap-resolved chord that reveals on hover AND focus, in the shipped `.cx-tooltip` box. This is the component only; the adoption sweep across command-backed chrome is T2 (RIG-2704).

- `apps/ui/src/components/CoachTip.tsx` — three exports mirroring Kobalte's own anatomy: `COACH_TIP_DELAY_MS = 400` (mirrors the `--cx-tooltip-delay` token, `tokens.css:227`); `CoachTip`, the Kobalte v2-alpha `Tooltip` root with `openDelay` defaulted to that constant and hover+focus reveal (Kobalte's default, `triggerOnFocusOnly` unset); `CoachTipTrigger`, the re-exported polymorphic `Tooltip.Trigger` so call sites author their own element; and `CoachTipContent`, the `Tooltip.Portal` + `Tooltip.Content(class="cx-tooltip")` rendering the label and, right of it, the chord.
- Chord is always the keymap-resolved display string — `props.chord ?? shortcutFor(props.command, detectPlatform())`, never hand-authored (DL-234's single-derivation rule). `undefined` → label-only; a `" then "` leader sequence → plain text in the chip's typographic style; any other chord → `<ShortcutChip>`. Because the component only reads `shortcutFor`'s output, it shows `Ctrl+B`/`Cmd+B` today and `G then B` automatically once the leader-chord rows land — no merge-order dependency. Props are never destructured (Solid v2 reactivity).
- `apps/ui/src/design/components/tooltip.css` — the box (`.cx-tooltip`, whose first consumer this is) becomes a flex row and gains a `.cx-tooltip-label` sub-part, so the label takes free space and the reused `.cx-palette-shortcut` chord chip right-aligns via its own `margin-left: auto`.

Tests (`CoachTip.test.tsx`, `@solidjs/testing-library`): label + chord derived from `shortcutFor` (never a hand-authored expectation); the ARIA wiring Kobalte owns (`role="tooltip"` + `aria-describedby`); focus reveal with no pointer event; the label-only path for a command with no keymap row; and the sequence-aware branch, whose `"G then B"` fixture is derived from `formatChordForDisplay("G B", "other")` so a change to the shared format contract surfaces here as a failing test rather than a giant `<kbd>`.

Stacked on RIG-2707 (the `formatChordForDisplay` sequence-grammar root the sequence branch keys off).

Ledger-impact: none. DL-245..247 for this record landed with the design PR (#569); this impl slice ratifies no new decision.

Refs RIG-2703

Co-authored-by: Matt Wilkinson <matt@rigel.build>
…bar toggles (RIG-2704)

The coaching-tooltip adoption sweep (T2 of the coaching-tooltips design):
convert every command-backed `title=` in the shell chrome to a `CoachTip`,
and register the two sidebar-toggle commands so their coached chord actually
dispatches.

- spine.ts / store.ts: register `sidebar.toggleLeft`/`sidebar.toggleRight`
  (global scope, no hand-authored shortcut — the chord derives from the keymap,
  D4) beside their existing store behavior. The chords `Mod+Shift+\` /`Mod+\`
  were declared in the keymap but registered nowhere (dead) — registering them
  next to the behavior they already drive is DL-229-compliant. The `toggleLeft`/
  `toggleRight` closures move above `createKeyboardSpine` so they can be threaded
  into its deps; the click path is unchanged.
- App.tsx: convert the topbar Bridge tab (view.bridge) and the two glyph-only
  sidebar toggles. Drop native `title=`, keep `aria-keyshortcuts`, and add
  `aria-label` to the two glyph toggles (§A5 — a bare block glyph is not an
  accessible name).
- LeftSidebar.tsx: convert the four view buttons (Bridge/Backlog/Done/Settings).
  Drop native `title=`, keep `aria-keyshortcuts`. Backlog/Done have no keymap
  row yet, so their CoachTip is label-only.
- Keep-native boundary (§A4) held: new-folder, pin/unpin, disabled subscribe/
  join, role/status/truncation titles keep their native `title=` (no registered
  command → nothing to coach).
- Chord is never hand-authored: `CoachTipContent` resolves it via
  `shortcutFor(command, platform)`; the now-unused `bridgeChord`/`chord` helpers
  and `shortcutFor` imports are removed from both files.

Tests (43 pass across spine/App/LeftSidebar/e2e): tooltip-reveal-on-focus with
keymap-derived chord, `title`-dropped + `aria-keyshortcuts`-kept guard,
glyph-toggle accessible-name via aria-label, keep-native new-folder boundary,
the two new registrations (metadata + run), and live coached-chord dispatch of
both sidebar toggles (registry resolution + real keydown). Also updates the
pre-existing RIG-2483 Palette test that asserted the LeftSidebar buttons' native
`title` chord — that display chord now rides a CoachTip, so the test asserts the
`title` is absent (a native title would double-tooltip) while `aria-keyshortcuts`
is unchanged.

Ledger-impact: none (decisions landed with the design PR #569; DL-245..247).

RIG-2704
@rigel-mintaka
rigel-mintaka force-pushed the compass-ux/rig-2703-coachtip-component branch from f28db7f to c91633f Compare August 26, 2026 03:33
@rigel-mintaka
rigel-mintaka force-pushed the compass-ux/rig-2704-coaching-sweep branch from 5b97d7c to a881232 Compare August 26, 2026 03:33
Base automatically changed from compass-ux/rig-2703-coachtip-component to main August 26, 2026 04:27
@mattwilkinsonn
mattwilkinsonn merged commit f9cd5bd into main Aug 26, 2026
34 checks passed
@mattwilkinsonn
mattwilkinsonn deleted the compass-ux/rig-2704-coaching-sweep branch August 26, 2026 04:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants