Editor's right panel has no 'selected paths' summary when 2+ paths are selected — user with 3 paths selected sees the same right panel as 1 path, no '3 paths selected' indicator or bulk operations summary #382

New issue

Closed

opened 2026-10-04 04:00:40 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 04:00:40 +00:00

Owner

Finding"

grep -rn 'selectedPathsSummary\|multiSelectSummary' src/components/editor/EditorRightPanel.tsx returns 0. The right panel doesn't have a multi-select summary.

When 1 path is selected, the Path Properties section shows that path's details. When 2+ paths are selected (per #188), the section should show a summary:

"3 paths selected"
A bulk color picker
A bulk stitch type picker
A bulk density picker
The "Apply to N paths" button (per #212)

grep -rn 'selectedPathIds.length' src/components/editor/EditorRightPanel.tsx returns matches but let me check the multi-select summary specifically.

A user with 3 paths selected:

Right panel shows... the first selected path's properties? Or nothing?
Doesn't know they can bulk-change
Has to change one at a time

The fix is a clear "3 paths selected" indicator with bulk operations.

Where

Path Properties: src/components/editor/EditorRightPanel.tsx
The multi-select state: selectedPathIds: string[] (per #188)
The bulk operations: per #212

Suggested fix shape

UI: in the Path Properties section header, when 2+ paths are selected:

{selectedPathIds.length >= 2 && (
  <div className="p-2 rounded" style={{ backgroundColor: '#FEF3C7' }}>
    <span className="text-[12px] font-semibold">
      {selectedPathIds.length} paths selected
    </span>
    <div className="flex items-center gap-1 mt-1">
      <button onClick={() => onBulkChangeColor()}>
        <Palette size={12} /> Change color
      </button>
      <button onClick={() => onBulkChangeStitchType()}>
        <Spline size={12} /> Change stitch type
      </button>
      <button onClick={() => onBulkChangeDensity()}>
        <Sliders size={12} /> Change density
      </button>
    </div>
  </div>
)}

Bulk color picker: a small color picker that applies to all selected paths.
Bulk stitch type: a dropdown that applies to all selected paths.
Bulk density: a slider that applies to all selected paths.
Per #188: the multi-select is in place. The summary is the polish.

Severity**

Medium. The user can do the operations one at a time, but bulk is the standard.

Discovered by

Gap analysis (2026-10-02) of editor multi-select.

#188 (open) — Multi-select. The selection is in place; the summary is the surface.
#212 (open) — Apply to N paths. The bulk action; the summary is the indicator.
#249 (open) — Apply Defaults to All. Same family.
Figma/Illustrator have multi-select summaries. Standard.

## Finding" `grep -rn 'selectedPathsSummary\|multiSelectSummary' src/components/editor/EditorRightPanel.tsx` returns 0. The right panel doesn't have a multi-select summary. When 1 path is selected, the Path Properties section shows that path's details. When 2+ paths are selected (per #188), the section should show a summary: - "3 paths selected" - A bulk color picker - A bulk stitch type picker - A bulk density picker - The "Apply to N paths" button (per #212) `grep -rn 'selectedPathIds.length' src/components/editor/EditorRightPanel.tsx` returns matches but let me check the multi-select summary specifically. A user with 3 paths selected: - Right panel shows... the first selected path's properties? Or nothing? - Doesn't know they can bulk-change - Has to change one at a time The fix is a clear "3 paths selected" indicator with bulk operations. ## Where - Path Properties: `src/components/editor/EditorRightPanel.tsx` - The multi-select state: `selectedPathIds: string[]` (per #188) - The bulk operations: per #212 ## Suggested fix shape 1. **UI**: in the Path Properties section header, when 2+ paths are selected: ```tsx {selectedPathIds.length >= 2 && ( <div className="p-2 rounded" style={{ backgroundColor: '#FEF3C7' }}> <span className="text-[12px] font-semibold"> {selectedPathIds.length} paths selected </span> <div className="flex items-center gap-1 mt-1"> <button onClick={() => onBulkChangeColor()}> <Palette size={12} /> Change color </button> <button onClick={() => onBulkChangeStitchType()}> <Spline size={12} /> Change stitch type </button> <button onClick={() => onBulkChangeDensity()}> <Sliders size={12} /> Change density </button> </div> </div> )} ``` 2. **Bulk color picker**: a small color picker that applies to all selected paths. 3. **Bulk stitch type**: a dropdown that applies to all selected paths. 4. **Bulk density**: a slider that applies to all selected paths. 5. **Per #188**: the multi-select is in place. The summary is the polish. ## Severity** Medium. The user can do the operations one at a time, but bulk is the standard. ## Discovered by Gap analysis (2026-10-02) of editor multi-select. ## Related** - #188 (open) — Multi-select. The selection is in place; the summary is the surface. - #212 (open) — Apply to N paths. The bulk action; the summary is the indicator. - #249 (open) — Apply Defaults to All. Same family. - Figma/Illustrator have multi-select summaries. Standard.

Mark added the

feature-request

triage-approved

labels

2026-10-04 04:00:40 +00:00

Mark referenced this issue from a commit

2026-10-05 18:19:47 +00:00

feat(#382): multi-select summary banner in Path Properties — 'N paths selected' with quick actions

Mark commented

2026-10-05 18:19:56 +00:00

Author

Owner

Implemented in commit 7a371be (feat(#382)).

A prominent amber banner now appears at the top of the Path Properties body whenever 2+ paths are selected. The banner shows the selection count (N paths selected) with a Layers icon and three quick-action buttons:

Change color — opens the color picker (sets colorPickerOpen=true) and scrolls it into view
Change stitch type — scrolls the existing stitch-type select into view
Change density — scrolls the existing density slider into view

The buttons are navigation, not new mutation surface: the existing per-property controls already fan out to every id in selectedPathIds via the #188 / #212 wiring (handleUpdateSelectedPathColor / handleUpdateSelectedPathStitchType / handleUpdateSelectedPathDensity in Editor.tsx), so the banner points users at the same inputs the single-path UI uses — one set of inputs, single source of truth.

Render conditions:

Hidden when 0 or 1 path is selected (no "multi" summary to surface).
Sibling of the existing path-properties-multiselect-summary (Paths list counter at line ~1734) and path-properties-mult-selected (Merge/Show/Hide/Delete block at line ~6778) — three surfaces, distinct purposes.

6 new tests in EditorRightPanel.test.tsx:

renders the summary banner when 2 or more paths are selected
hides the summary banner when exactly 1 path is selected
hides the summary banner when no path is selected
renders all three quick-action buttons
opens the color picker when 'Change color' is clicked
renders the banner above the Path Properties controls in document order

All 221 EditorRightPanel tests pass; tsc --noEmit clean; eslint clean. Closing this issue.

Implemented in commit [7a371be](https://forgejo.tail018ac4.ts.net/Mark/Kimi_Agent_Brother_10_Digitizing_App/commits/main) (feat(#382)). A prominent amber banner now appears at the top of the Path Properties body whenever 2+ paths are selected. The banner shows the selection count (`N paths selected`) with a Layers icon and three quick-action buttons: - **Change color** — opens the color picker (sets `colorPickerOpen=true`) and scrolls it into view - **Change stitch type** — scrolls the existing stitch-type select into view - **Change density** — scrolls the existing density slider into view The buttons are navigation, not new mutation surface: the existing per-property controls already fan out to every id in `selectedPathIds` via the #188 / #212 wiring (`handleUpdateSelectedPathColor` / `handleUpdateSelectedPathStitchType` / `handleUpdateSelectedPathDensity` in `Editor.tsx`), so the banner points users at the same inputs the single-path UI uses — one set of inputs, single source of truth. Render conditions: - Hidden when 0 or 1 path is selected (no "multi" summary to surface). - Sibling of the existing `path-properties-multiselect-summary` (Paths list counter at line ~1734) and `path-properties-mult-selected` (Merge/Show/Hide/Delete block at line ~6778) — three surfaces, distinct purposes. 6 new tests in `EditorRightPanel.test.tsx`: - `renders the summary banner when 2 or more paths are selected` - `hides the summary banner when exactly 1 path is selected` - `hides the summary banner when no path is selected` - `renders all three quick-action buttons` - `opens the color picker when 'Change color' is clicked` - `renders the banner above the Path Properties controls in document order` All 221 EditorRightPanel tests pass; `tsc --noEmit` clean; eslint clean. Closing this issue.

Mark closed this issue

2026-10-05 18:19:56 +00:00