Merge pull request #1185 from Bubobubobubobubo/search-bar

Adding search bar (soundtab.jsx)

website/src/repl/components/panel/SoundsTab.jsx

@@ -1,7 +1,7 @@
 import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
@@ -12,15 +12,20 @@ const getSamples = (samples) =>
 export function SoundsTab() {
   const sounds = useStore(soundMap);
   const { soundsFilter } = useSettings();
+  const [search, setSearch] = useState('');
+
   const soundEntries = useMemo(() => {
-    let filtered = Object.entries(sounds)
-      .filter(([key]) => !key.startsWith('_'))
-      .sort((a, b) => a[0].localeCompare(b[0]));
     if (!sounds) {
       return [];
     }
+
+    let filtered = Object.entries(sounds)
+      .filter(([key]) => !key.startsWith('_'))
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .filter(([name]) => name.toLowerCase().includes(search.toLowerCase()));
+
     if (soundsFilter === 'user') {
-      return filtered.filter(([key, { data }]) => !data.prebake);
+      return filtered.filter(([_, { data }]) => !data.prebake);
     }
     if (soundsFilter === 'drums') {
       return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
@@ -32,9 +37,11 @@ export function SoundsTab() {
       return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
     }
     return filtered;
-  }, [sounds, soundsFilter]);
+  }, [sounds, soundsFilter, search]);
+
   // holds mutable ref to current triggered sound
   const trigRef = useRef();
+
   // stop current sound on mouseup
   useEvent('mouseup', () => {
     const t = trigRef.current;
@@ -43,8 +50,17 @@ export function SoundsTab() {
       ref?.stop(getAudioContext().currentTime + 0.01);
     });
   });
+
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
+      <div className="w-full ml-2 mb-2 top-0 sticky">
+        <input
+          className="w-full p-1 bg-background rounded-md"
+          placeholder="Search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
       <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}