From 803b5e56fcd6c1326687837e7fb9025853ac1901 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Thu, 16 May 2024 16:49:28 -0400
Subject: [PATCH 1/2] working

---
 website/src/repl/idbutils.mjs                 | 13 +++++++++----
 website/src/repl/panel/ImportSoundsButton.jsx |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/website/src/repl/idbutils.mjs b/website/src/repl/idbutils.mjs
index 40219c9a..959dc7d1 100644
--- a/website/src/repl/idbutils.mjs
+++ b/website/src/repl/idbutils.mjs
@@ -40,8 +40,10 @@ export const registerSamplesFromDB = (config = userSamplesDBConfig, onComplete =
           if (!isAudioFile(title)) {
             return;
           }
-          const splitRelativePath = soundFile.id?.split('/');
-          const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
+          const splitRelativePath = soundFile.id.split('/');
+          const parentDirectory =
+            //fallback to file name before period and seperator if no parent directory
+            splitRelativePath[splitRelativePath.length - 2] ?? soundFile.id.split(/\W+/)[0] ?? 'user';
           const soundPath = soundFile.blob;
           const soundPaths = sounds.get(parentDirectory) ?? new Set();
           soundPaths.add(soundPath);
@@ -114,6 +116,7 @@ const processFilesForIDB = async (files) => {
     Array.from(files)
       .map(async (s) => {
         const title = s.name;
+
         if (!isAudioFile(title)) {
           return;
         }
@@ -121,12 +124,14 @@ const processFilesForIDB = async (files) => {
         const sUrl = URL.createObjectURL(s);
         //fetch the sound and turn it into a buffer array
         const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
-        //create a url blob containing all of the buffer data
+        //create a url base64 containing all of the buffer data
         const base64 = await bufferToDataUrl(buf);
+        const path = s.webkitRelativePath;
+        const id = path?.length ? path : title;
         return {
           title,
           blob: base64,
-          id: s.webkitRelativePath,
+          id,
         };
       })
       .filter(Boolean),
diff --git a/website/src/repl/panel/ImportSoundsButton.jsx b/website/src/repl/panel/ImportSoundsButton.jsx
index 20a1d5e3..7a97b9e0 100644
--- a/website/src/repl/panel/ImportSoundsButton.jsx
+++ b/website/src/repl/panel/ImportSoundsButton.jsx
@@ -10,6 +10,7 @@ export default function ImportSoundsButton({ onComplete }) {
       return;
     }
     setIsUploading(true);
+
     await uploadSamplesToDB(userSamplesDBConfig, fileUploadRef.current.files).then(() => {
       registerSamplesFromDB(userSamplesDBConfig, () => {
         onComplete();
@@ -32,7 +33,7 @@ export default function ImportSoundsButton({ onComplete }) {
         directory=""
         webkitdirectory=""
         multiple
-        accept="audio/*"
+        accept="audio/*, .wav, .mp3, .m4a, .flac"
         onChange={() => {
           onChange();
         }}

From 16ad27406d57073980646a4c5d4a408154261e00 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Thu, 16 May 2024 17:10:41 -0400
Subject: [PATCH 2/2] sort samples in tabs

---
 website/src/repl/panel/SoundsTab.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
index d4b52ee5..9b35d04b 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -13,7 +13,9 @@ export function SoundsTab() {
   const sounds = useStore(soundMap);
   const { soundsFilter } = useSettings();
   const soundEntries = useMemo(() => {
-    let filtered = Object.entries(sounds).filter(([key]) => !key.startsWith('_'));
+    let filtered = Object.entries(sounds)
+      .filter(([key]) => !key.startsWith('_'))
+      .sort((a, b) => a[0].localeCompare(b[0]));
     if (!sounds) {
       return [];
     }
@@ -43,7 +45,7 @@ export function SoundsTab() {
   });
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="pb-2 flex shrink-0 overflow-auto">
+      <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}