FE-512: Create FilterableListSubView with keyboard navigation and search (#8532)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: kube

libs/@hashintel/petrinaut/package.json

@@ -44,6 +44,7 @@
     "@xyflow/react": "12.10.1",
     "d3-scale": "4.0.2",
     "elkjs": "0.11.0",
+    "fuzzysort": "3.1.0",
     "monaco-editor": "0.55.1",
     "react-icons": "5.5.0",
     "react-resizable-panels": "4.6.5",

libs/@hashintel/petrinaut/src/components/menu.tsx

@@ -95,14 +95,20 @@ const itemStyle = cva({
     color: "neutral.s120",
     cursor: "pointer",
     _hover: {
-      backgroundColor: "neutral.s10",
+      backgroundColor: "neutral.s25",
+    },
+    _highlighted: {
+      backgroundColor: "neutral.bg.subtle.hover",
     },
     _disabled: {
       opacity: "[0.4]",
       cursor: "not-allowed",
       _hover: {
         backgroundColor: "[transparent]",
       },
+      _highlighted: {
+        backgroundColor: "[transparent]",
+      },
     },
   },
   variants: {
@@ -117,7 +123,7 @@ const itemStyle = cva({
     },
     destructive: {
       true: {
-        color: "red.s60",
+        color: "red.s100",
       },
     },
   },
@@ -172,7 +178,10 @@ const triggerItemStyle = css({
   cursor: "pointer",
   justifyContent: "space-between",
   _hover: {
-    backgroundColor: "neutral.s10",
+    backgroundColor: "neutral.s25",
+  },
+  _highlighted: {
+    backgroundColor: "neutral.bg.subtle.hover",
   },
 });
 

libs/@hashintel/petrinaut/src/components/section.tsx

@@ -15,7 +15,9 @@ const sectionListStyle = css({
   flex: "[1]",
   minHeight: "[0]",
   "& > *:not(:last-child)": {
-    borderBottom: "[1px solid rgba(0, 0, 0, 0.06)]",
+    borderBottomWidth: "[1px]",
+    borderBottomStyle: "solid",
+    borderBottomColor: "neutral.a20",
   },
 });
 

libs/@hashintel/petrinaut/src/components/sub-view/types.ts

@@ -26,6 +26,8 @@ export interface SubView {
   title: string;
   /** Optional tooltip shown when hovering over the title/tab */
   tooltip?: string;
+  /** Optional icon component displayed before the title in the header. Size is controlled by the container. */
+  icon?: ComponentType<{ size: number }>;
   /** The component to render for this subview */
   component: ComponentType;
   /**
@@ -38,18 +40,18 @@ export interface SubView {
    * Only affects vertical layout. Defaults to false.
    */
   flexGrow?: boolean;
-  /**
-   * Minimum height for this section in the proportional layout (in pixels).
-   * Defaults to 100px.
-   */
-  minHeight?: number;
   /**
    * Whether this is the main (primary) subview.
    * When true, shows a non-collapsible header with a larger title style.
    * The title and `renderHeaderAction` are displayed in the fixed header,
    * and the content should not include its own title/actions.
    */
   main?: boolean;
+  /**
+   * Optional custom render for the title area of a main subview header.
+   * When provided, replaces the static title text. Only used when `main` is true.
+   */
+  renderTitle?: () => ReactNode;
   /**
    * Whether the section can be collapsed by clicking the header.
    * Defaults to true. Forced to false when `main` is true.
@@ -60,6 +62,11 @@ export interface SubView {
    * Defaults to false (expanded). Ignored when `main` is true.
    */
   defaultCollapsed?: boolean;
+  /**
+   * When true, the header action is always visible instead of only on hover/focus.
+   * Defaults to false.
+   */
+  alwaysShowHeaderAction?: boolean;
   /**
    * Configuration for making the subview resizable when expanded.
    * Only affects vertical layout. When set, the section can be resized by dragging its bottom edge.