Merge pull request #1 from Tann2019/tann2019/local-storage

src/app.css

@@ -97,3 +97,33 @@
   color: var(--text-color);
   text-shadow: var(--text-shadow);
 }
+
+@layer utilities {
+  @-moz-document url-prefix() {
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: var(--glass-border) transparent;
+    }
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--glass-border);
+    border-radius: 20px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--thicker-glass-border);
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-button {
+    width: 0px;
+  }
+}

src/lib/components/app/bg-dropdown.svelte

@@ -7,6 +7,8 @@
   let selectedBackgroundId = $state(appState.currentBackgroundId!.toString());
   $effect(() => {
     appState.currentBackgroundId = selectedBackgroundId;
+    window.localStorage.setItem('backgroundId', selectedBackgroundId);
+    console.log('background changed to:', selectedBackgroundId);
   })
 </script>
 
@@ -15,7 +17,7 @@
     <Image />
   </DropdownMenu.Trigger>
   <DropdownMenu.Content
-    class="max-h-[50vh] overflow-y-auto"
+    class="max-h-[50vh] overflow-y-auto custom-scrollbar"
   >
     <DropdownMenu.Group>
       <DropdownMenu.GroupHeading>Select background</DropdownMenu.GroupHeading>

src/lib/components/app/bg-image.svelte

@@ -2,6 +2,13 @@
   import { state as appState } from '@/state.svelte';
 
   let video: HTMLVideoElement | null = null;
+  
+  $effect(() => {
+    if (video) {
+      appState.backgroundElement = video;
+    }
+  });
+
   $effect(() => {
     const backgroundId = appState.currentBackgroundId;
     if (backgroundId && video) {

src/lib/components/app/daemon.svelte

@@ -12,6 +12,14 @@
   function togglePlayback(play: boolean) {
     if (!audioElement) return;
 
+    if (appState.backgroundElement) {
+      if (play) {
+        appState.backgroundElement.play().catch(e => console.error('Error playing background video:', e));
+      } else {
+        appState.backgroundElement.pause();
+      }
+    }
+
     if (play && appState.hasInteracted) {
       audioElement.currentTime = appState.currentTime;
       audioElement.play().catch(() => {
@@ -98,12 +106,23 @@
       appState.volume = parseFloat(storedVolume);
     }
 
-    if (data.stations.length > 0 && appState.currentStation === null) {
-      appState.currentStation = data.stations[0].id;
+    if (data.stations.length > 0) {
+      const storedStationId = window.localStorage.getItem('stationId');
+      if (storedStationId && data.stations.some(station => station.id.toString() === storedStationId)) {
+        appState.currentStation = parseInt(storedStationId, 10);
+      } else {
+        appState.currentStation = data.stations[0].id;
+      }
+      console.log('current station ID:', appState.currentStation);
     }
-    if (appState.backgrounds.length > 0 && appState.currentBackgroundId === null) {
-      appState.currentBackgroundId = appState.backgrounds[0].id;
-      console.log('asdf', appState.currentBackgroundId);
+    if (appState.backgrounds.length > 0) {
+      const storedBackgroundId = window.localStorage.getItem('backgroundId');
+      if (storedBackgroundId && appState.backgrounds.some(bg => bg.id === storedBackgroundId)) {
+        appState.currentBackgroundId = storedBackgroundId;
+      } else {
+        appState.currentBackgroundId = appState.backgrounds[0].id;
+      }
+      console.log('current background ID:', appState.currentBackgroundId);
     } else {
       appState.error = 'Failed to load initial data (empty response).';
     }

src/lib/components/app/station-dropdown.svelte

@@ -8,6 +8,8 @@
   $effect(() => {
     if (selectedStationId) {
       appState.currentStation = parseInt(selectedStationId);
+      window.localStorage.setItem('stationId', selectedStationId);
+      console.log('Station changed to:', selectedStationId);
     }
   });
 </script>

src/lib/state.svelte.ts

@@ -9,6 +9,7 @@ export const state = $state({
   volume: 0.5,
   isMuted: false,
   currentBackgroundId: null as string | null,
+  backgroundElement: null as HTMLVideoElement | null,
   activeAtmospheres: {} as Record<string, number>, // { atmosphereId: volume (0-100) }
   isLoading: true,
   error: null as string | null,