Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor has no 'next/previous path' arrow navigation in the right panel's path list — only single-click selection works, and Tab/Shift+Tab cycle nodes within a path #201

New issue

Closed

opened 2026-10-03 23:51:18 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 23:51:18 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's "Path List" section (line 142-180) renders one row per path. Each row has:

Path name
Path color swatch
Visibility toggle (eye icon)
Fit-to-view button (maximize icon)
onClick handler that selects the path

There are no "next/previous" navigation buttons or arrow-key handlers. The user with 5 paths in a design:

Clicks path 1
Wants to navigate to path 2
Clicks path 2 in the list

grep -n 'nextPath\|prevPath\|arrow.*path\|cyclePath' src/components/editor/EditorRightPanel.tsx returns 0 hits.

The keyboard shortcut Alt+] / Alt+[ (per #194) would address this, but the right panel UI itself has no visible affordance either. Power users will discover the keyboard; new users won't.

Where

Path list: src/components/editor/EditorRightPanel.tsx:142-180
No cycle UI: grep -n 'cyclePath\|nextPath' src/components/editor/EditorRightPanel.tsx returns 0
No arrow handler: src/components/editor/useKeyboardShortcuts.ts (no path cycle binding)

Suggested fix shape

Two changes:

Right panel UI: add an "up/down" arrow pair to the top of the Path List section, OR change the list itself to use arrow keys when focused.

<div className="flex items-center gap-1">
  <button onClick={() => cyclePath(-1)} title="Previous path"><ChevronUp size={12} /></button>
  <button onClick={() => cyclePath(1)} title="Next path"><ChevronDown size={12} /></button>
</div>

Keyboard shortcut: add Alt+] / Alt+[ to useKeyboardShortcuts.ts (per #194).

cyclePath(delta: 1 | -1) finds the current path's index in paths, advances by delta (modulo length), and dispatches setSelectedPathId.

Severity

Low. The user can click in the list. Power users with many paths feel the friction.

Discovered by

Gap analysis (2026-10-02) of editor path navigation.

#194 (open) — Editor path cycle. This issue is the UI half; #194 is the keyboard half.
#188 (open) — Editor multi-path selection. The cycle is a competing model.

## Finding `src/components/editor/EditorRightPanel.tsx`'s "Path List" section (line 142-180) renders one row per path. Each row has: - Path name - Path color swatch - Visibility toggle (eye icon) - Fit-to-view button (maximize icon) - onClick handler that selects the path There are no "next/previous" navigation buttons or arrow-key handlers. The user with 5 paths in a design: - Clicks path 1 - Wants to navigate to path 2 - Clicks path 2 in the list `grep -n 'nextPath\|prevPath\|arrow.*path\|cyclePath' src/components/editor/EditorRightPanel.tsx` returns 0 hits. The keyboard shortcut `Alt+]` / `Alt+[` (per #194) would address this, but the right panel UI itself has no visible affordance either. Power users will discover the keyboard; new users won't. ## Where - Path list: `src/components/editor/EditorRightPanel.tsx:142-180` - No cycle UI: `grep -n 'cyclePath\|nextPath' src/components/editor/EditorRightPanel.tsx` returns 0 - No arrow handler: `src/components/editor/useKeyboardShortcuts.ts` (no path cycle binding) ## Suggested fix shape Two changes: 1. **Right panel UI**: add an "up/down" arrow pair to the top of the Path List section, OR change the list itself to use arrow keys when focused. ```tsx <div className="flex items-center gap-1"> <button onClick={() => cyclePath(-1)} title="Previous path"><ChevronUp size={12} /></button> <button onClick={() => cyclePath(1)} title="Next path"><ChevronDown size={12} /></button> </div> ``` 2. **Keyboard shortcut**: add `Alt+]` / `Alt+[` to `useKeyboardShortcuts.ts` (per #194). `cyclePath(delta: 1 | -1)` finds the current path's index in `paths`, advances by `delta` (modulo length), and dispatches `setSelectedPathId`. ## Severity Low. The user can click in the list. Power users with many paths feel the friction. ## Discovered by Gap analysis (2026-10-02) of editor path navigation. ## Related - #194 (open) — Editor path cycle. This issue is the UI half; #194 is the keyboard half. - #188 (open) — Editor multi-path selection. The cycle is a competing model.

Mark added the

feature-request

triage-approved

labels

2026-10-03 23:51:18 +00:00

Mark referenced this issue

2026-10-03 23:59:32 +00:00

Editor has no path split/merge operations — scissors tool cuts a path at one segment but you can't split into two separate paths or merge two selected paths into one #204

Mark referenced this issue

2026-10-04 00:00:48 +00:00

Editor has no 'show all paths' / 'hide all paths' buttons — user must toggle each path's visibility icon one at a time in the right panel #208

Mark referenced this issue

2026-10-04 00:05:07 +00:00

Editor has no 'jump to first node' or 'jump to last node' keyboard shortcut — Tab cycles one at a time, no way to jump to the ends of a long path #220

Mark referenced this issue from a commit

2026-10-04 01:28:28 +00:00

fix(#201): add up/down path-cycle buttons in editor right panel

Mark commented

2026-10-04 01:29:00 +00:00

Author

Owner

Shipped in 2b8f640 on origin/main.

Companion UI for #194 (Alt+]/Alt+[ keyboard cycle).

Changes:

src/components/editor/EditorRightPanel.tsx: added optional onCyclePath prop + a paths-cycle-toolbar row with Prev/Next buttons (ChevronUp/ChevronDown) at the top of the Paths section. Wired to Editor.handleCyclePath so the buttons and keyboard stay in lockstep.
src/pages/Editor.tsx: passes handleCyclePath into the panel.
Buttons disabled when no path is selected (mirrors #194's currentIndex === -1 -> no-op contract). Hidden when there are no paths or when the parent doesn't wire the prop (backwards-compatible).
src/components/editor/EditorRightPanel.test.tsx: +6 tests covering render, click-prev, click-next, disabled state, hide-on-empty-paths, hide-on-unwired-prop.

Verification: 47/47 panel tests pass, full suite 894/894 pass, tsc -b clean, ESLint clean, vite build succeeds.

Shipped in 2b8f640 on origin/main. **Companion UI for #194** (Alt+]/Alt+[ keyboard cycle). Changes: - `src/components/editor/EditorRightPanel.tsx`: added optional `onCyclePath` prop + a `paths-cycle-toolbar` row with Prev/Next buttons (ChevronUp/ChevronDown) at the top of the Paths section. Wired to `Editor.handleCyclePath` so the buttons and keyboard stay in lockstep. - `src/pages/Editor.tsx`: passes `handleCyclePath` into the panel. - Buttons disabled when no path is selected (mirrors #194's `currentIndex === -1` -> no-op contract). Hidden when there are no paths or when the parent doesn't wire the prop (backwards-compatible). - `src/components/editor/EditorRightPanel.test.tsx`: +6 tests covering render, click-prev, click-next, disabled state, hide-on-empty-paths, hide-on-unwired-prop. Verification: 47/47 panel tests pass, full suite 894/894 pass, `tsc -b` clean, ESLint clean, `vite build` succeeds.

Mark closed this issue

2026-10-04 01:29:10 +00:00

Mark referenced this issue from a commit

2026-10-04 03:15:19 +00:00

fix(#208): Editor right-panel Show all / Hide all paths toolbar