Editor's Path Properties has 'Path Properties' but the right panel section header doesn't have a 'visible' toggle — user has to use the row's eye icon (small, easy to miss), no section-level visibility control #363

New issue

Closed

opened 2026-10-04 03:57:49 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:57:49 +00:00

Owner

Finding

The path list rows have an eye icon (per the snippet) for visibility. The right panel's "Path Properties" section header doesn't have a visibility toggle.

grep -rn 'Path Properties.*visible\|sectionHeader.*visibility' src/components/editor/ returns 0.

A user with a path selected:

The path is visible
Wants to hide it to focus on other paths
Has to find the eye icon in the row (small)
The section header is more visible

The fix is a section-header visibility toggle.

Where

Path Properties section: src/components/editor/EditorRightPanel.tsx
The section header: SectionHeader (per the snippet)
No section-level visibility: grep -rn 'sectionHeader.*visibility' src/components/editor/ returns 0

Suggested fix shape

UI: in the section header, a small eye icon:

<SectionHeader
  title="Path Properties"
  isOpen={openSections.properties}
  onToggle={() => toggleSection('properties')}
>
  <button onClick={() => onToggleVisibility(selectedPathId)}>
    <Eye size={12} />
  </button>
  {/* existing body */}
</SectionHeader>

Behavior: clicking the eye toggles the selected path's visibility.
Visual: the eye icon is open (visible) or closed (hidden), matching the path's actual state.
Use cases:

Quick visibility toggle for the selected path
Larger target than the row's eye icon (better for accessibility)

Severity

Low. The user has the row's eye icon. New users notice the discoverability gap.

Discovered by

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

The path list row's eye icon is the primary; the section header's is the secondary.
The visibility toggle is the same action in two places.
Figma has multiple affordances for the same action. Standard.

## Finding The path list rows have an eye icon (per the snippet) for visibility. The right panel's "Path Properties" section header doesn't have a visibility toggle. `grep -rn 'Path Properties.*visible\|sectionHeader.*visibility' src/components/editor/` returns 0. A user with a path selected: - The path is visible - Wants to hide it to focus on other paths - Has to find the eye icon in the row (small) - The section header is more visible The fix is a section-header visibility toggle. ## Where - Path Properties section: `src/components/editor/EditorRightPanel.tsx` - The section header: `SectionHeader` (per the snippet) - No section-level visibility: `grep -rn 'sectionHeader.*visibility' src/components/editor/` returns 0 ## Suggested fix shape 1. **UI**: in the section header, a small eye icon: ```tsx <SectionHeader title="Path Properties" isOpen={openSections.properties} onToggle={() => toggleSection('properties')} > <button onClick={() => onToggleVisibility(selectedPathId)}> <Eye size={12} /> </button> {/* existing body */} </SectionHeader> ``` 2. **Behavior**: clicking the eye toggles the selected path's visibility. 3. **Visual**: the eye icon is open (visible) or closed (hidden), matching the path's actual state. 4. **Use cases**: - Quick visibility toggle for the selected path - Larger target than the row's eye icon (better for accessibility) ## Severity Low. The user has the row's eye icon. New users notice the discoverability gap. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - The path list row's eye icon is the primary; the section header's is the secondary. - The visibility toggle is the same action in two places. - Figma has multiple affordances for the same action. Standard.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:57:49 +00:00

Mark referenced this issue from a commit

2026-10-05 14:14:30 +00:00

feat(#363): section-header visibility toggle in Path Properties

Mark commented

2026-10-05 14:14:48 +00:00

Author

Owner

Fixed in 4319291 on main.

The Path Properties section header now has an eye icon (mirrors the row's existing eye icon — bigger target, sits next to the title). Clicking it toggles the selected path's visibility via the existing onTogglePathVisibility handler.

Behavior:

Open eye when path is visible, closed eye (red #DC2626) when hidden
Hidden when no path is selected or when more than one path is selected (multi-select uses the bulk toolbar above the path list)
Sits to the left of the existing Reset to initial button (#299)

6 new tests in src/components/editor/issue-363.test.tsx pin presence, aria-label flipping, handler dispatch, and the no-selection / multi-select hiding rules. All 6 pass; typecheck clean.

Fixed in 4319291 on main. The Path Properties section header now has an eye icon (mirrors the row's existing eye icon — bigger target, sits next to the title). Clicking it toggles the selected path's visibility via the existing onTogglePathVisibility handler. Behavior: - Open eye when path is visible, closed eye (red #DC2626) when hidden - Hidden when no path is selected or when more than one path is selected (multi-select uses the bulk toolbar above the path list) - Sits to the left of the existing Reset to initial button (#299) 6 new tests in src/components/editor/issue-363.test.tsx pin presence, aria-label flipping, handler dispatch, and the no-selection / multi-select hiding rules. All 6 pass; typecheck clean.

Mark closed this issue

2026-10-05 14:14:52 +00:00