working

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

@@ -12,8 +12,8 @@ import { useMemo } from 'react';
 import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
-import { ButtonGroup } from './Forms.jsx';
-import { settingsMap, useSettings } from '../../../settings.mjs';
+import { useSettings } from '../../../settings.mjs';
+import { ActionButton } from '../button/action-button.jsx';
 import { Pagination } from '../pagination/Pagination.jsx';
 import { useState } from 'react';
 import { useDebounce } from '../usedebounce.jsx';
@@ -75,15 +75,6 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
   );
 }
 
-function ActionButton({ children, onClick, label, labelIsHidden }) {
-  return (
-    <button className="hover:opacity-50 text-nowrap" onClick={onClick} title={label}>
-      {labelIsHidden !== true && label}
-      {children}
-    </button>
-  );
-}
-
 const updateCodeWindow = (context, patternData, reset = false) => {
   context.handleUpdate(patternData, reset);
 };

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

@@ -2,16 +2,21 @@ import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
 import { useMemo, useRef, useState } from 'react';
-import { settingsMap, useSettings } from '../../../settings.mjs';
+import { settingsMap, soundFilterType, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
 import { Textbox } from '../textbox/Textbox.jsx';
+import { ActionButton } from '../button/action-button.jsx';
+import { confirmDialog } from '@src/repl/util.mjs';
+import { clearIDB, userSamplesDBConfig } from '@src/repl/idbutils.mjs';
+import { prebake } from '@src/repl/prebake.mjs';
 
 const getSamples = (samples) =>
   Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
 
 export function SoundsTab() {
   const sounds = useStore(soundMap);
+
   const { soundsFilter } = useSettings();
   const [search, setSearch] = useState('');
   const { BASE_URL } = import.meta.env;
@@ -27,18 +32,19 @@ export function SoundsTab() {
       .sort((a, b) => a[0].localeCompare(b[0]))
       .filter(([name]) => name.toLowerCase().includes(search.toLowerCase()));
 
-    if (soundsFilter === 'user') {
+    if (soundsFilter === soundFilterType.USER) {
       return filtered.filter(([_, { data }]) => !data.prebake);
     }
-    if (soundsFilter === 'drums') {
+    if (soundsFilter === soundFilterType.DRUMS) {
       return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
     }
-    if (soundsFilter === 'samples') {
+    if (soundsFilter === soundFilterType.SAMPLES) {
       return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
     }
-    if (soundsFilter === 'synths') {
+    if (soundsFilter === soundFilterType.SYNTHS) {
       return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
     }
+    //TODO: tidy this up, it does not need to be saved in settings
     if (soundsFilter === 'importSounds') {
       return [];
     }
@@ -57,10 +63,10 @@ export function SoundsTab() {
     });
   });
   return (
-    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground">
+    <div id="sounds-tab" className="px-4 flex gap-2 flex-col w-full h-full text-foreground">
       <Textbox placeholder="Search" value={search} onChange={(v) => setSearch(v)} />
 
-      <div className="pb-2 flex shrink-0 flex-wrap">
+      <div className=" flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -73,6 +79,23 @@ export function SoundsTab() {
           }}
         ></ButtonGroup>
       </div>
+      {
+        <ActionButton
+          label="delete-all"
+          onClick={async () => {
+            try {
+              const confirmed = await confirmDialog('Delete all imported user samples?');
+              if (confirmed) {
+                clearIDB(userSamplesDBConfig.dbName);
+                soundMap.set({});
+                await prebake();
+              }
+            } catch (e) {
+              console.error(e);
+            }
+          }}
+        />
+      }
 
       <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal pb-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
@@ -151,9 +174,7 @@ export function SoundsTab() {
         ) : (
           ''
         )}
-        {!soundEntries.length && soundsFilter !== 'importSounds'
-          ? 'No custom sounds loaded in this pattern (yet).'
-          : ''}
+        {!soundEntries.length && soundsFilter !== 'importSounds' ? 'No custom sounds loaded (yet).' : ''}
       </div>
     </div>
   );