fix: close drawer on page change

aminnausin · aminnausin · commit 61fd10f0b78a · 2025-12-25T00:15:17.000-05:00
diff --git a/resources/js/App.vue b/resources/js/App.vue
@@ -16,19 +16,7 @@ import GlobalModal from '@/components/modals/GlobalModal.vue';
 
 const toastPosition = ref<ToastPostion>();
 
-const {
-    toggleDarkMode,
-    initDarkMode,
-    initAmbientMode,
-    initPlaybackHeatmap,
-    initIsPlaylist,
-    initPlayerModernUI,
-    setAmbientMode,
-    setPlaybackHeatmap,
-    setIsPlaylist,
-    setPlayerModernUI,
-} = useAppStore();
-const { lightMode, ambientMode, playbackHeatmap, contextMenuItems, contextMenuStyle, contextMenuItemStyle, isPlaylist, usingPlayerModernUI } = storeToRefs(useAppStore());
+const { contextMenuItems, contextMenuStyle, contextMenuItemStyle } = storeToRefs(useAppStore());
 const { isFullscreen } = useFullscreen();
 
 async function loadUser() {
@@ -37,11 +25,7 @@ async function loadUser() {
 }
 
 onMounted(async () => {
-    initDarkMode();
-    initAmbientMode();
-    initPlaybackHeatmap();
-    initIsPlaylist();
-    initPlayerModernUI();
+    useAppStore().initBrowserState();
 
     toastPosition.value = getScreenSize() === 'default' ? 'top-center' : 'bottom-left';
     loadUser();
@@ -52,12 +36,6 @@ onMounted(async () => {
 onUnmounted(() => {
     window.removeEventListener('focus', loadUser);
 });
-
-watch(ambientMode, setAmbientMode, { immediate: false });
-watch(lightMode, toggleDarkMode, { immediate: false });
-watch(playbackHeatmap, setPlaybackHeatmap, { immediate: false });
-watch(isPlaylist, setIsPlaylist, { immediate: false });
-watch(usingPlayerModernUI, setPlayerModernUI, { immediate: false });
 </script>
 
 <template>
diff --git a/resources/js/components/drawers/VideoSidebarDrawer.vue b/resources/js/components/drawers/VideoSidebarDrawer.vue
@@ -1,7 +1,18 @@
 <script setup lang="ts">
 import { BaseDrawer } from '@/components/cedar-ui/drawer';
+import { useDrawer } from '@aminnausin/cedar-ui';
+import { useRoute } from 'vue-router';
+import { watch } from 'vue';
 
 import VideoSidebar from '@/components/panels/VideoSidebar.vue';
+
+const drawer = useDrawer();
+const route = useRoute();
+
+watch(
+    () => route.fullPath,
+    () => drawer.close('programmatic'),
+);
 </script>
 
 <template>
diff --git a/resources/js/components/panels/VideoSidebar.vue b/resources/js/components/panels/VideoSidebar.vue
@@ -2,8 +2,8 @@
 import { useAppStore } from '@/stores/AppStore';
 import { storeToRefs } from 'pinia';
 
-import FolderSidebar from '@/components/panels/FolderSidebar.vue';
 import HistorySidebar from '@/components/panels/HistorySidebar.vue';
+import FolderSidebar from '@/components/panels/FolderSidebar.vue';
 
 const { selectedSideBar } = storeToRefs(useAppStore());
 </script>
diff --git a/resources/js/stores/AppStore.ts b/resources/js/stores/AppStore.ts
@@ -160,6 +160,14 @@ export const useAppStore = defineStore('App', () => {
         }
     };
 
+    const initBrowserState = () => {
+        initDarkMode();
+        initAmbientMode();
+        initPlaybackHeatmap();
+        initIsPlaylist();
+        initPlayerModernUI();
+    };
+
     watch(rawAppManifest, (v: any) => {
         appManifest.value = v ?? { version: 'Unversioned', commit: 'unknown' };
     });
@@ -168,38 +176,48 @@ export const useAppStore = defineStore('App', () => {
         taskWaitTimes.value = v ?? prev;
     });
 
+    watch(ambientMode, setAmbientMode, { immediate: false });
+    watch(lightMode, toggleDarkMode, { immediate: false });
+    watch(playbackHeatmap, setPlaybackHeatmap, { immediate: false });
+    watch(isPlaylist, setIsPlaylist, { immediate: false });
+    watch(usingPlayerModernUI, setPlayerModernUI, { immediate: false });
+
     return {
-        usingPlayerModernUI,
-        initPlayerModernUI,
-        setPlayerModernUI,
-        initDarkMode,
-        toggleDarkMode,
-        lightMode,
-        initAmbientMode,
-        setAmbientMode,
+        // Browser State
         ambientMode,
-        initPlaybackHeatmap,
-        setPlaybackHeatmap,
+        lightMode,
         playbackHeatmap,
-        initIsPlaylist,
-        setIsPlaylist,
         isPlaylist,
+        usingPlayerModernUI,
+        initBrowserState,
+
+        // Local State
+        isAutoPlay,
+
+        // Nav State
         cycleSideBar,
         selectedSideBar,
         sideBarTarget,
         pageTitle,
+
+        // Scroll Lock
         scrollLock,
         setScrollLock,
+
+        // Context Menu State
         contextMenuItems,
         contextMenuStyle,
         contextMenuItemStyle,
         contextMenuEvent,
         setContextMenu,
+
+        // Ws State
         createEcho,
         disconnectEcho,
-        isAutoPlay,
-        appManifest,
         ws,
+
+        // Cached Info
+        appManifest,
         isLoadingWaitTimes,
         taskWaitTimes,
     };
