Update headers for search categories

.storybook/preview-head.html

@@ -1,3 +1,9 @@
 <script>
   window.global = window;
 </script>
+
+<style>
+  :root {
+    font-family: sans-serif;
+  }
+</style>

src/renderer/src/stories/Search.js

@@ -3,7 +3,7 @@ import { LitElement, html, css } from "lit";
 import tippy from "tippy.js";
 
 export class Search extends LitElement {
-    constructor({ options, showAllWhenEmpty, disabledLabel } = {}) {
+    constructor({ options, showAllWhenEmpty = true, disabledLabel } = {}) {
         super();
         this.options = options;
         this.showAllWhenEmpty = showAllWhenEmpty;
@@ -56,7 +56,10 @@ export class Search extends LitElement {
 
             .category {
                 padding: 10px 25px;
-                background: #f2f2f2;
+                background: gainsboro;
+                border-top: 1px solid gray;
+                border-bottom: 1px solid gray;
+                font-size: 90%;
                 font-weight: bold;
                 position: sticky;
                 top: 0;
@@ -217,7 +220,7 @@ export class Search extends LitElement {
                         return;
                     }
 
-                    return el;
+                    return li;
                 })
                 .filter((el) => el);
 

src/renderer/src/stories/Search.stories.js

@@ -2,7 +2,7 @@ import { Search } from "./Search";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 export default {
-    title: "Example/Search",
+    title: "Components/Search",
     // tags: ['autodocs'],
 };
 
@@ -22,3 +22,25 @@ Default.args = {
         },
     ],
 };
+
+export const Categories = Template.bind({});
+Categories.args = {
+    disabledLabel: "Interface not supported",
+    options: [
+        {
+            label: "SpikeGLXConverter",
+            category: "Converter",
+            keywords: ["extracellular electrophysiology", "voltage", "recording", "neuropixels"],
+        },
+        {
+            label: "SpikeGLXRecording",
+            category: "Interface",
+            keywords: ["extracellular electrophysiology", "voltage", "recording", "neuropixels"],
+        },
+        {
+            label: "DeepLabCut",
+            category: "Interface",
+            keywords: ["DLC", "tracking", "pose estimation"],
+        },
+    ],
+};

src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js

@@ -45,7 +45,6 @@ export class GuidedStructurePage extends Page {
     };
 
     search = new Search({
-        showAllWhenEmpty: true,
         disabledLabel: "Not supported",
     });