Skip to content

Show chevron on hover in VerticalSubViewsContainer Header#8532

Draft
kube wants to merge 22 commits intocf/h-5655-refactor-selection-logicfrom
cf/fe-512-create-filterablelistsubview-component
Draft

Show chevron on hover in VerticalSubViewsContainer Header#8532
kube wants to merge 22 commits intocf/h-5655-refactor-selection-logicfrom
cf/fe-512-create-filterablelistsubview-component

Conversation

@kube
Copy link
Collaborator

@kube kube commented Mar 12, 2026

🌟 What is the purpose of this PR?

🔗 Related links

  • ...

🚫 Blocked by

  • ...

🔍 What does this change?

  • ...

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing
  • modifies an npm-publishable library and I have added a changeset file(s)
  • modifies a Cargo-publishable library and I have amended the version
  • modifies a Cargo-publishable library, but it is not yet ready to publish
  • modifies a block that will need publishing via GitHub action once merged
  • I am unsure / need advice

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change
  • are in a state where docs changes are not yet required but will be
  • require changes to docs which are made as part of this PR
  • require changes to docs which are not made in this PR
    • Provide more detail here
  • I am unsure / need advice

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • do not affect the execution graph
  • affected the execution graph, and the turbo.json's have been updated to reflect this
  • I am unsure / need advice

⚠️ Known issues

🐾 Next steps

🛡 What tests cover this?

❓ How to test this?

  1. Checkout the branch / view the deployment
  2. Try X
  3. Confirm that Y

📹 Demo

kube and others added 22 commits March 12, 2026 01:22
@kube
Show chevron on hover in VerticalSubViewsContainer Header
ef1fff3
@kube @claude
Add FilterableListSubView and refactor subviews to use it
f120769 
Extract common filterable list pattern into createFilterableListSubView factory.
Refactor nodes-list, types-list, parameters-list, and differential-equations-list
to use the shared component, reducing duplication of selection handling, row styles,
and empty state rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Style list items to match Figma design and replace delete with ellips…
49e8f22 
…is menu

- Update list item styles: 32px height, 8px border radius, 14px font,
  semantic color tokens, neutral hover/selected backgrounds
- Replace inline delete button with horizontal ellipsis (TbDots) that
  opens a Menu with a destructive "Delete" action
- Ellipsis button fades in on row hover with subtle icon slide animation,
  stays visible while menu is open via data-state selector
- Add text overflow ellipsis to all list item names
- Update nodes-list font size and colors to match design tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube
Update InfoIconTooltip
1cf1557
@kube
Update tooltip border-radius
9d831d3
@kube @claude
Move row menu to FilterableListSubView and add filter/sort/search but…
7972435 
…tons

- Add getMenuItems config param so the container owns Menu rendering
- Extract RowMenu component that skips rendering when items array is empty
- Move menu item definitions from renderItem to getMenuItems in all subviews
- Replace TbFilter with LuListFilter, add LuArrowDownWideNarrow (sort) and
  LuSearch (search) icon buttons in the header (no-ops for now)
- Place filter/sort/search buttons before subview-specific actions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube
Tweak colors and paddings
0b3e8bf
@kube @claude
Fix row interaction: stopPropagation on menu trigger, highlight row w…
2f08f71 
…hen menu open

- Use stopPropagation on ellipsis button instead of DOM query guard
- Show hover background on row when its menu is open via :has selector

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Improve header hover behavior, item layout, and icon handling
87a60cf 
- Scope chevron hover to toggle section only, not full header row
- Show header actions and info tooltip only on hover/focus-within with opacity animation
- Add outlined variant to InfoIconTooltip, used in subview headers
- Move item icons to FilterableListItem.icon prop with consistent rendering
- Wrap list items in content/name containers in filterable-list-sub-view
- Remove redundant wrapper styles from individual subview lists
- Add alwaysShowHeaderAction option to SubView, used by visualizer
- Align row menu to bottom-end

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Add icon support and styled main headers to PropertiesPanel SubViews
d87290f 
Add optional `icon` prop to SubView type and update VerticalSubViewsContainer
to render distinct main vs collapsible header styles matching the Figma design.
Main headers now show an outline icon + subtle text with a bottom border.
All PropertiesPanel main SubViews (Place, Transition, Arc, Parameter, Type,
Differential Equation) now include Lucide outline icons and use
alwaysShowHeaderAction where applicable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Centralize entity icons and standardize list item icon rendering
78647cf 
Create constants/entity-icons.tsx as the single source of truth for all
Petri net entity icons (outline and filled variants). Update
FilterableListSubView to control icon size and default color centrally,
with an iconColor override used by TokenTypes for per-type coloring.
All list subviews now show their entity icon consistently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Move listItemNameStyle into FilterableListSubView and reorder sidebar…
cbed921 
… subviews

Internalize listItemNameStyle within FilterableListSubView so renderItem
returns plain text/nodes wrapped automatically. Simplify all list subview
renderItem callbacks to return strings instead of styled spans. Reorder
LEFT_SIDEBAR_SUBVIEWS to show Nodes first.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Make SubView icon size controlled by VerticalSubViewsContainer
b4b2ec0 
Change SubView.icon from ReactNode to ComponentType<{ size: number }> so
the container controls the icon size (HEADER_ICON_SIZE = 16). All SubView
consumers now pass icon components directly instead of rendered elements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Clear selection when clicking empty area in filterable list and updat…
1b22686 
…e entity icons

Clicking in the list container but not on an item now calls clearSelection
to deselect all. Also update Parameter/TokenType/DifferentialEquation icons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube
Fix bottom border + top padding on content in VerticalSubViewsContainer
572c70d
@kube
Update shadow on ScrollableContent
914b41c
@kube @claude
Adjust content padding: px:4 default, px:3 for filterable lists
53117e5 
Increase default panel content horizontal padding to 4 and use negative
margin on FilterableListSubView to reduce its effective padding to 3.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Add keyboard navigation, range selection, and focus highlights to fil…
07bd5c6 
…terable list and menu

- Add Arrow Up/Down keyboard navigation with focused item tracking
- Support Shift+Click and Shift+Arrow range selection via selectRange helper
- Ctrl/Cmd+Click toggles multi-selection with anchor tracking
- Escape clears selection and resets focus state
- Clamp focus/anchor indices when item list shrinks
- Auto-scroll focused items into view
- Add ARIA listbox/option roles for accessibility
- Suppress default browser focus outline on list container
- Add _highlighted styles to Menu items and submenu triggers for keyboard focus

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Hide header bottom border when sub-view is collapsed
16d2c04 
Convert headerRowStyle to cva with isCollapsed variant that sets
borderBottomColor to transparent, avoiding visual double-borders
between collapsed sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Use token-based height for sub-view header rows
16f4693 
Replace raw [44px] with token value for consistent sizing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Reset focused/anchor state when filterable list loses focus
f47abac 
Clear focusedIndex and anchorIndex on blur when focus moves outside
the list container, so stale keyboard state doesn't persist.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kube @claude
Make TopBar title input fill available space
39823b5 
Replace fixed minWidth with flex: 1 so the title input expands
to use all remaining space in the left section.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions github-actions bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Mar 12, 2026
@vercel
Copy link

vercel bot commented Mar 12, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview, Comment Mar 12, 2026 1:14am
petrinaut Ready Ready Preview Mar 12, 2026 1:14am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
hashdotdesign Ignored Ignored Preview Mar 12, 2026 1:14am
hashdotdesign-tokens Ignored Ignored Preview Mar 12, 2026 1:14am

@kube kube mentioned this pull request Mar 12, 2026
Merged
3 tasks
@kube Graphite App
Copy link
Collaborator Author

kube commented Mar 12, 2026 •
edited
Loading

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

This was referenced Mar 12, 2026
Open
Open
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@kube