use db.js for storage/lookup

src/lib/db.js

@@ -1,6 +1,11 @@
-import Dexie from 'dexie';
+import Dexie from 'dexie'
+import { writable } from 'svelte/store'
 
-export const db = new Dexie('webbase')
+const db = new Dexie('webbase')
+
+const darkMode = writable(false)
+const playSnap = writable(false)
+const analysisEnterAction = writable("flag")
 
 db.version(1).stores({
     load: 'projectID',
@@ -16,18 +21,59 @@ db.on('populate', () => {
     })
 })
 
-export async function setDarkMode(enable) {
-    try {
-        await db.preference.update(1, { darkMode: enable })
-
-        // Update the document's class
-        const html = document.documentElement
-        if (enable) {
-            html.classList.add('dark')
-        } else {
-            html.classList.remove('dark')
-        }
-    } catch (error) {
-        console.error('Failed to set dark mode:', error)
-    }
-}
+db.on('ready', async () => {
+    //fetch preferences for svelte components
+    await db.preference.get(1).then(pref => {
+        darkMode.set(pref.darkMode)
+        playSnap.set(pref.playSnap)
+        analysisEnterAction.set(pref.analysisEnterAction)
+    }).catch(() => {
+        console.log("error loading preferences! might be missing. trying to create it...")
+
+        //worse case scenario if db is very old
+        db.preference.add({
+            darkMode: false, 
+            playSnap: true, 
+            analysisEnterAction: "flag"
+        }).then(() => {
+            console.log("sucessfully created preference db")
+        }).catch(() => {
+            console.log("could not create preference db!!!! SECOND FAIL")
+        })
+    })
+
+    //subscribe to stores to save back to db
+    darkMode.subscribe((bool) => {
+        console.log("updating preference db")
+
+        db.preference.update(1, { darkMode: bool }).then(() => {
+            // Update the document's class
+            const html = document.documentElement
+            if (bool) {
+                html.classList.add('dark')
+            } else {
+                html.classList.remove('dark')
+            }
+        }).catch((error) => {
+            console.error('Failed to set dark mode:', error)
+        })
+    })
+
+    playSnap.subscribe((bool) => {
+        console.log("updating preference db")
+
+        db.preference.update(1, { playSnap: bool }).catch((error) => {
+            console.error('Failed to set play snap:', error)
+        })
+    })
+
+    analysisEnterAction.subscribe((str) => {
+        console.log("updating preference db")
+
+        db.preference.update(1, { analysisEnterAction: str }).catch((error) => {
+            console.error('Failed to set analysis enter action:', error)
+        })
+    })
+})
+
+export { db, darkMode, playSnap, analysisEnterAction }

src/routes/+layout.svelte

@@ -1,7 +1,4 @@
 <script>
-	import { db } from "$lib/db.js"
-    import { onMount } from "svelte";
-
 	import { injectAnalytics } from '@vercel/analytics/sveltekit'
 	//import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
 
@@ -12,30 +9,6 @@
 	
 	injectAnalytics()
 	//injectSpeedInsights()
-
-	onMount(() => {
-		db.preference.get(1).then(pref => {
-			console.log("loaded preference db sucessfully")
-
-            if (pref.darkMode) {
-                const html = document.documentElement
-                html.classList.add('dark')
-            }
-        }).catch(() => {
-            console.log("error loading preferences! might be missing. trying to create it...")
-			
-			//worse case scenario if db is very old
-            db.preference.add({
-                darkMode: false, 
-	    	    playSnap: true, 
-	    	    analysisEnterAction: "flag"
-            }).then(() => {
-                console.log("sucessfully created preference db")
-            }).catch(() => {
-                console.log("could not create preference db!!!! SECOND FAIL")
-            })
-        })
-	})
 </script>
 
 {@render children()}

src/routes/Footer.svelte

@@ -1,27 +1,15 @@
 <script>
 	import { faMoon } from "@fortawesome/free-solid-svg-icons";
-	import { onMount } from "svelte";
-    import { db } from "$lib/db.js"
-    import { setDarkMode } from "$lib/db"
+    import { darkMode } from "$lib/db"
 	import Fa from "svelte-fa";
 
-    let darkMode = false
-
     function open() {
         window.open("https://github.com/udu3324/mp3mark", "_blank")
     }
 
     function toggleDarkMode() {        
-        darkMode = !darkMode
-
-        setDarkMode(darkMode)
+        darkMode.set(!$darkMode)
     }
-
-    onMount(() => {
-        db.preference.get(1).then(pref => {
-            darkMode = pref.darkMode
-        })
-    })
 </script>
 
 <div class="fixed bottom-0 w-screen h-6 z-20 bg-slate-900 text-white text-center select-none">

src/routes/editor/+page.svelte

@@ -25,8 +25,6 @@
     let volume
     let volumeSet = false
     let enterAction
-
-    let centerPlayhead
     
     //for loader
     let dataTable
@@ -151,8 +149,8 @@
     </div>
 
     <TopBar bind:title={title} editorData={editorData} bind:projectID={projectID} bind:enterAction={enterAction} />
-    <Tracks bind:this={tracksObj} id="track-div" bind:loading={loading} bind:tracks={tracks} bind:bpm={bpm} bind:length={durration} bind:timeSigBeat={timeSignatureBeat} bind:centerPlayhead={centerPlayhead} bind:enterAction={enterAction}/>
-    <BottomBar bind:playing={playing} bind:volume={volume} bind:centerPlayhead={centerPlayhead}/>
+    <Tracks bind:this={tracksObj} id="track-div" bind:loading={loading} bind:tracks={tracks} bind:bpm={bpm} bind:length={durration} bind:timeSigBeat={timeSignatureBeat} bind:enterAction={enterAction}/>
+    <BottomBar bind:playing={playing} bind:volume={volume}/>
     <Playhead />
 </div>
 

src/routes/editor/BottomBar.svelte

@@ -1,13 +1,10 @@
 <script>
     import { currentTime, resolution } from "$lib/editor"
-    import { setDarkMode } from "$lib/db"
+    import { darkMode, playSnap } from "$lib/db"
 	import { faDownLeftAndUpRightToCenter, faMoon, faPlay, faSquare, faVolumeHigh, faVolumeLow, faVolumeMute } from "@fortawesome/free-solid-svg-icons";
     import { wavesurfer } from "$lib/editor.js"
-	import Fa from "svelte-fa";
-	import { onMount } from "svelte";
-    import { db } from "$lib/db.js"
+	import Fa from "svelte-fa"
 
-    export let centerPlayhead = true
     export let playing = false
     export let volume
 
@@ -16,7 +13,7 @@
     let centerHeadColor = "bg-white"
 
     let scrollX = 0
-    let scrollY = 0
+    // biome-ignore lint/style/useConst: <explanation>
     let innerWidth = 0
 
     $: {
@@ -125,7 +122,7 @@
             return
         }
 
-        if (!centerPlayhead) {
+        if (!$playSnap) {
             return
         }
 
@@ -147,45 +144,29 @@
             })
         }
     })
-
-    $: {
-        if (centerPlayhead) {
+    
+    playSnap.subscribe((bool) => {
+        if (bool) {
             centerHeadColor = "bg-yellow-600 dark:bg-slate-900"
         } else {
             centerHeadColor = "bg-white dark:bg-slate-700"
         }
-    }
+    })
 
     function toggleCenterPlayhead() {
-        centerPlayhead = !centerPlayhead
-
-        db.preference.update(1, { playSnap: centerPlayhead }).then(() => {
-            console.log("sucessfully wrote to preferences db")
-        })
+        playSnap.set(!$playSnap)
     }
 
-    let toggledDark = false
-    function darkMode() {
-        //console.log("clicked with ", toggledDark)
-        toggledDark = !toggledDark
-
-        setDarkMode(toggledDark)
+    function toggleDark() {
+        darkMode.set(!$darkMode)
     }
-
-    onMount(() => {
-        db.preference.get(1).then(pref => {
-            centerPlayhead = pref.playSnap
-
-            toggledDark = pref.darkMode
-        })
-    })
 </script>
 
-<svelte:window on:keydown={onKeyDown} bind:scrollX={scrollX} bind:scrollY={scrollY}/>
+<svelte:window on:keydown={onKeyDown} bind:scrollX={scrollX}/>
 
 <div bind:clientWidth={innerWidth} class="fixed flex bottom-0 w-screen h-16 z-40 p-2 bg-yellow-500 dark:bg-slate-600 dark:text-slate-500">
     <div class="flex flex-col">
-        <button on:click={darkMode} class="controls-small bg-white dark:bg-slate-700" title="Toggle Dark Mode">
+        <button on:click={toggleDark} class="controls-small bg-white dark:bg-slate-700" title="Toggle Dark Mode">
             <Fa icon={faMoon}/>
         </button>
         <button on:click={toggleCenterPlayhead} class="controls-small mt-2 {centerHeadColor}" title="(s) Center Playhead">
@@ -227,7 +208,7 @@
     }
 
     .dynamic-pause:active {
-        @apply bg-red-400 dark:bg-red-700 text-red-600;
+        @apply bg-red-400 dark:bg-red-700 dark:text-red-600;
     }
 
     .button-icon {

src/routes/editor/TopBar.svelte

@@ -1,6 +1,5 @@
 <script>
-   import { db } from "$lib/db.js"
-   import { onMount } from "svelte"
+   import { db, analysisEnterAction } from "$lib/db.js"
    import { currentTime } from "$lib/editor"
    import { goto } from '$app/navigation'
 	import Fa from "svelte-fa";
@@ -12,8 +11,6 @@
    export let editorData
    export let projectID
 
-   export let enterAction
-
    // biome-ignore lint/style/useConst: <explanation>
    let innerWidth = 0
    let branding = "mp3mark - "
@@ -167,7 +164,7 @@
 
       configLabel = "Default Enter Action"
       configDescription = "Set this between \"flag\" or \"mark\". This changes the action of pressing enter when creating an analysis object."
-      configValue = enterAction
+      configValue = $analysisEnterAction
    }
 
    function cancelConfig() {
@@ -238,9 +235,7 @@
                return
             }
 
-            enterAction = configValue
-
-            await db.preference.update(1, { analysisEnterAction: enterAction })
+            analysisEnterAction.set(configValue)
 
             //alert("Sucessfully set default enter action!")
             cancelConfig()
@@ -378,12 +373,6 @@
          closeAll()
       }
    }
-
-   onMount(() => {
-      db.preference.get(1).then(pref => {
-         enterAction = pref.analysisEnterAction
-      })
-   })
 </script>
 
 <svelte:window on:keydown={onKeyDown} on:mousedown={onMouseDown}/>

src/routes/editor/TrackContextMenu.svelte

@@ -1,24 +1,27 @@
 <script>
+    import { analysisEnterAction } from "$lib/db.js"
 	import { faFlag, faMarker, faXmark } from "@fortawesome/free-solid-svg-icons";
 	import Fa from "svelte-fa";
 
     export let tracks
-    export let enterAction
-
     export let note = ""
-    
-    // biome-ignore lint/style/useConst: its assigned multiple times
-    export let mouseX = 0
-    // biome-ignore lint/style/useConst: ~
-    export let mouseY = 0
-
     export let trackMenuHidden = "hidden"
 
     let menuLeftPX = 0
     let menuTopPX = 0
 
     let noteInput
 
+    //track mouse position 
+    let mouseX
+    let mouseY
+
+	function handleMousemove(event) {
+		mouseX = event.clientX;
+		mouseY = event.clientY;
+        //console.log("m", mouseX, mouseY)
+	}
+
     export function showContext(trackIndex, i) {
         //console.log("showing mark menu for track", trackIndex, i)
         //console.log("mouseX", mouseX)
@@ -85,8 +88,7 @@
 
     function onKeyDown(e) {
         if (e.keyCode === 13) {
-            //console.log("enterAction", enterAction)
-            if (enterAction === "flag") {
+            if ($analysisEnterAction === "flag") {
                 createFlag()
             } else {
                 createMark()
@@ -95,6 +97,8 @@
     }
 </script>
 
+<svelte:window on:mousemove={handleMousemove}/>
+
 <div style="--menu-left: {menuLeftPX}px; --menu-top: {menuTopPX}px;" class="track-menu {trackMenuHidden}">
     <div class="flex flex-row mb-1">
         <button on:click={closeContext} class="button-icon text-3xl mr-1"><Fa icon={faXmark}/></button>