Add group action buttons and renderGroupAction to tree items

Add renderGroupAction to FilterableListItem so group rows can show an
action button (hover-to-reveal). Export header action components from
types-list, differential-equations-list, and parameters-list, then
import them in the entities tree as group actions. Nodes has no action.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kube

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx

@@ -18,7 +18,7 @@ import {
 /**
  * DifferentialEquationsSectionHeaderAction renders the add button for the section header.
  */
-const DifferentialEquationsSectionHeaderAction: React.FC = () => {
+export const DifferentialEquationsSectionHeaderAction: React.FC = () => {
   const {
     petriNetDefinition: { types, differentialEquations },
     addDifferentialEquation,

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx

@@ -15,10 +15,13 @@ import { EditorContext } from "../../../../../state/editor-context";
 import { SDCPNContext } from "../../../../../state/sdcpn-context";
 import type { SelectionItem } from "../../../../../state/selection";
 import { useIsReadOnly } from "../../../../../state/use-is-read-only";
+import { DifferentialEquationsSectionHeaderAction } from "./differential-equations-list";
 import {
   RowMenu,
   createFilterableListSubView,
 } from "./filterable-list-sub-view";
+import { ParametersHeaderAction } from "./parameters-list";
+import { TypesSectionHeaderAction } from "./types-list";
 
 const parameterVarNameStyle = css({
   margin: "0",
@@ -33,6 +36,7 @@ interface EntityTreeItem {
   iconColor?: string;
   children?: EntityTreeItem[];
   emptyGroupMessage?: string;
+  renderGroupAction?: ComponentType;
   selectionItem?: SelectionItem;
   variableName?: string;
 }
@@ -121,6 +125,7 @@ function useEntityTreeItems(): EntityTreeItem[] {
       id: "group-types",
       name: "Token Types",
       emptyGroupMessage: "No token types",
+      renderGroupAction: TypesSectionHeaderAction,
       children: types.map((t) => ({
         id: t.id,
         name: t.name,
@@ -133,6 +138,7 @@ function useEntityTreeItems(): EntityTreeItem[] {
       id: "group-equations",
       name: "Differential Equations",
       emptyGroupMessage: "No differential equations",
+      renderGroupAction: DifferentialEquationsSectionHeaderAction,
       children: differentialEquations.map((eq) => ({
         id: eq.id,
         name: eq.name,
@@ -147,6 +153,7 @@ function useEntityTreeItems(): EntityTreeItem[] {
       id: "group-parameters",
       name: "Parameters",
       emptyGroupMessage: "No parameters",
+      renderGroupAction: ParametersHeaderAction,
       children: parameters.map((p) => ({
         id: p.id,
         name: p.name,

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

@@ -168,6 +168,8 @@ interface FilterableListItem {
   children?: FilterableListItem[];
   /** Message shown when this group is expanded but has no children. */
   emptyGroupMessage?: string;
+  /** Optional action component shown on the right side of a group row (e.g. an add button). */
+  renderGroupAction?: ComponentType;
 }
 
 interface FilterableListSubViewConfig<T extends FilterableListItem> {
@@ -567,6 +569,16 @@ const FilterableListContent = <T extends FilterableListItem>({
                 {renderItem(item, isSelected)}
               </div>
             </div>
+            {isGroup && item.renderGroupAction && (
+              <span
+                role="presentation"
+                data-row-action
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                <item.renderGroupAction />
+              </span>
+            )}
             {!isGroup && RenderRowMenu && <RenderRowMenu item={item} />}
           </div>
         );

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx

@@ -25,7 +25,7 @@ const parameterVarNameStyle = css({
  * Header action component for adding parameters.
  * Shown in the panel header when not in simulation mode.
  */
-const ParametersHeaderAction: React.FC = () => {
+export const ParametersHeaderAction: React.FC = () => {
   const {
     petriNetDefinition: { parameters },
     addParameter,

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx

@@ -60,7 +60,7 @@ function getNextTypeNumber(existingNames: string[]): number {
 /**
  * TypesSectionHeaderAction renders the add button for the types section header.
  */
-const TypesSectionHeaderAction: React.FC = () => {
+export const TypesSectionHeaderAction: React.FC = () => {
   const {
     petriNetDefinition: { types },
     addType,