Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's Path Properties has 'Color' but the color picker is a simple grid — user with 60+ catalog colors has to scroll the picker to find a specific one (no virtualized scrolling) #386

New issue

Closed

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

Mark commented

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

Owner

Finding"

grep -rn 'colorPicker.*scroll\|virtualizedColorPicker' src/components/editor/ returns 0. The color picker is a fixed grid, not virtualized.

A user with 60+ catalog colors (Robison-Anton full set + custom):

The picker renders all 60+ swatches at once
5-column grid → 12+ rows
Scrolling through 12 rows to find a specific color is slow

The fix is virtualized scrolling (or a more compact picker).

Where

Color picker: src/components/editor/EditorRightPanel.tsx (the 5-column grid)
No virtualization: grep -rn 'virtualized' src/components/editor/ returns 0

Suggested fix shape

UI: a virtualized list (e.g., using react-window or react-virtual):

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={300}
  itemCount={catalog.length / 5}
  itemSize={32}
  width="100%"
>
  {({ index, style }) => (
    <div style={style} className="flex items-center gap-1">
      {catalog.slice(index * 5, index * 5 + 5).map((c) => (
        <ColorSwatch key={c.id} color={c} />
      ))}
    </div>
  )}
</FixedSizeList>

OR: a more compact picker (2-3 columns instead of 5):

3-column grid: 20 rows for 60 colors, but smaller per swatch
The user can see more at once

OR: a "Recently used" section at the top:

The last 5 colors the user picked
Above the main grid

Use cases:

Power users with large catalogs
The custom color addition (per #233) makes the catalog grow

Severity**

Low. The user can scroll. Power users notice.

Discovered by

Gap analysis (2026-10-02) of editor color picker.

#256 (open) — Thread color search. The search is the lookup; virtualization is the scroll.
#233 (open) — Custom color addition. The catalog grows; virtualization helps.
Figma/Illustrator have virtualized color pickers. Standard.

## Finding" `grep -rn 'colorPicker.*scroll\|virtualizedColorPicker' src/components/editor/` returns 0. The color picker is a fixed grid, not virtualized. A user with 60+ catalog colors (Robison-Anton full set + custom): - The picker renders all 60+ swatches at once - 5-column grid → 12+ rows - Scrolling through 12 rows to find a specific color is slow The fix is virtualized scrolling (or a more compact picker). ## Where - Color picker: `src/components/editor/EditorRightPanel.tsx` (the 5-column grid) - No virtualization: `grep -rn 'virtualized' src/components/editor/` returns 0 ## Suggested fix shape 1. **UI**: a virtualized list (e.g., using `react-window` or `react-virtual`): ```tsx import { FixedSizeList } from 'react-window'; <FixedSizeList height={300} itemCount={catalog.length / 5} itemSize={32} width="100%" > {({ index, style }) => ( <div style={style} className="flex items-center gap-1"> {catalog.slice(index * 5, index * 5 + 5).map((c) => ( <ColorSwatch key={c.id} color={c} /> ))} </div> )} </FixedSizeList> ``` 2. **OR**: a more compact picker (2-3 columns instead of 5): - 3-column grid: 20 rows for 60 colors, but smaller per swatch - The user can see more at once 3. **OR**: a "Recently used" section at the top: - The last 5 colors the user picked - Above the main grid 4. **Use cases**: - Power users with large catalogs - The custom color addition (per #233) makes the catalog grow ## Severity** Low. The user can scroll. Power users notice. ## Discovered by Gap analysis (2026-10-02) of editor color picker. ## Related** - #256 (open) — Thread color search. The search is the lookup; virtualization is the scroll. - #233 (open) — Custom color addition. The catalog grows; virtualization helps. - Figma/Illustrator have virtualized color pickers. Standard.

Mark added the

feature-request

triage-approved

labels

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

Mark added the

in-progress

label

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

Mark added

blocked:needs-attention

and removed

feature-request

in-progress

triage-approved

labels

2026-10-05 20:04:17 +00:00

Mark referenced this issue from a commit

2026-10-05 20:09:38 +00:00

feat(#386): virtualized color picker grid

Mark referenced this issue from a commit

2026-10-05 20:09:38 +00:00

fix(#386): underscore unused destructure props to satisfy no-unused-vars

Mark commented

2026-10-05 20:09:49 +00:00

Author

Owner

Shipped in commits 278948e + 6cae8ea on main, pushed to origin/main at 13:11. Virtualized color picker grid replaces the static 5-column layout with an inline VirtualColorGrid component using a ResizeObserver-driven row window. All data-testid and data-attribute contracts preserved. Test gate: 7/7 issue-386, 221/221 EditorRightPanel, 10/10 issue-341 — eslint + tsc clean. Closing as shipped.

Shipped in commits 278948e + 6cae8ea on main, pushed to origin/main at 13:11. Virtualized color picker grid replaces the static 5-column layout with an inline VirtualColorGrid component using a ResizeObserver-driven row window. All data-testid and data-attribute contracts preserved. Test gate: 7/7 issue-386, 221/221 EditorRightPanel, 10/10 issue-341 — eslint + tsc clean. Closing as shipped.

Mark

2026-10-05 20:09:51 +00:00