Working on processors a tiny bit

src/lib/components/ProcessorPopup.svelte

@@ -1,28 +1,59 @@
 <script lang="ts">
   import { getAllProcessors } from "../audio/processors/registry";
-  import type { AudioProcessor } from "../audio/processors/AudioProcessor";
+  import type { AudioProcessor, ProcessorCategory } from "../audio/processors/AudioProcessor";
 
   interface Props {
     onselect: (processor: AudioProcessor) => void;
+    enabledCategories: Set<ProcessorCategory>;
+    ontogglecategory: (category: ProcessorCategory) => void;
   }
 
-  let { onselect }: Props = $props();
+  let { onselect, enabledCategories, ontogglecategory }: Props = $props();
 
-  const allProcessors = getAllProcessors().sort((a, b) =>
-    a.getName().localeCompare(b.getName())
+  const allProcessors = getAllProcessors();
+
+  const allCategories: ProcessorCategory[] = [
+    'Amplitude',
+    'Filter',
+    'Time',
+    'Space',
+    'Pitch',
+    'Modulation',
+    'Distortion',
+    'Spectral',
+    'Utility'
+  ];
+
+  const filteredProcessors = $derived(
+    allProcessors
+      .filter(p => enabledCategories.has(p.getCategory()))
+      .sort((a, b) => a.getName().localeCompare(b.getName()))
   );
 </script>
 
 <div class="processor-popup">
-  {#each allProcessors as processor}
-    <button
-      class="processor-tile"
-      data-description={processor.getDescription()}
-      onclick={() => onselect(processor)}
-    >
-      {processor.getName()}
-    </button>
-  {/each}
+  <div class="popup-sidebar">
+    {#each allCategories as category}
+      <button
+        class="category-filter"
+        class:active={enabledCategories.has(category)}
+        onclick={() => ontogglecategory(category)}
+      >
+        {category}
+      </button>
+    {/each}
+  </div>
+  <div class="processors-grid">
+    {#each filteredProcessors as processor}
+      <button
+        class="processor-tile"
+        data-description={processor.getDescription()}
+        onclick={() => onselect(processor)}
+      >
+        {processor.getName()}
+      </button>
+    {/each}
+  </div>
 </div>
 
 <style>
@@ -31,18 +62,74 @@
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
-    background-color: #000;
+    background-color: #0a0a0a;
     border: 2px solid #fff;
-    padding: 0.5rem;
     z-index: 1000;
+    width: 90vw;
+    max-width: 500px;
+    margin-bottom: 0.5rem;
+    max-height: 60vh;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  .popup-sidebar {
+    display: flex;
+    flex-direction: column;
+    background-color: #1a1a1a;
+    border-right: 1px solid #333;
+    min-width: 80px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #444 transparent;
+  }
+
+  .popup-sidebar::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  .popup-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .popup-sidebar::-webkit-scrollbar-thumb {
+    background: #444;
+  }
+
+  .category-filter {
+    font-size: 0.65rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    padding: 0.5rem 0.4rem;
+    background-color: #1a1a1a;
+    border: none;
+    border-bottom: 1px solid #2a2a2a;
+    color: #888;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+    white-space: nowrap;
+  }
+
+  .category-filter:hover {
+    background-color: #222;
+    color: #aaa;
+  }
+
+  .category-filter.active {
+    background-color: #0a0a0a;
+    color: #fff;
+  }
+
+  .processors-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0.4rem;
-    width: 90vw;
-    max-width: 400px;
-    margin-bottom: 0.5rem;
-    max-height: 60vh;
+    padding: 0.5rem;
     overflow-y: auto;
+    flex: 1;
   }
 
   .processor-tile {
@@ -90,11 +177,23 @@
 
   @media (min-width: 768px) {
     .processor-popup {
+      width: 550px;
+      max-width: 550px;
+    }
+
+    .popup-sidebar {
+      min-width: 100px;
+    }
+
+    .category-filter {
+      font-size: 0.7rem;
+      padding: 0.5rem 0.6rem;
+    }
+
+    .processors-grid {
       grid-template-columns: repeat(3, 1fr);
-      width: 500px;
-      max-width: 500px;
-      padding: 0.6rem;
       gap: 0.5rem;
+      padding: 0.6rem;
     }
 
     .processor-tile {
@@ -114,9 +213,16 @@
 
   @media (min-width: 1024px) {
     .processor-popup {
+      width: 650px;
+      max-width: 650px;
+    }
+
+    .popup-sidebar {
+      min-width: 110px;
+    }
+
+    .processors-grid {
       grid-template-columns: repeat(4, 1fr);
-      width: 600px;
-      max-width: 600px;
       padding: 0.75rem;
     }