feat(panel): move panel state to app store & support dirty state

Author: dvcol

src/components/AppComponent.vue

@@ -17,14 +17,15 @@ import NavbarComponent from '~/components/common/navbar/NavbarComponent.vue';
 import IconChevronLeft from '~/components/icons/IconChevronLeft.vue';
 import IconClose from '~/components/icons/IconClose.vue';
 import CheckinComponent from '~/components/views/checkin/CheckinComponent.vue';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 
 const { isAuthenticated } = useAuthSettingsStoreRefs();
 const { currentRoute, push, back } = useRouter();
 
-const panel = ref(false);
+const { footerOpen, panelOpen, panelDirty } = useAppStateStoreRefs();
+
 const base = ref();
-const footer = ref(false);
 
 const appRef = ref();
 const mainRef = ref();
@@ -33,20 +34,25 @@ const footerRef = ref();
 watch(
   currentRoute,
   (_next, _prev) => {
-    panel.value = !!_next.meta?.panel;
+    panelOpen.value = !!_next.meta?.panel;
     base.value = _next.meta?.base;
   },
   {
     immediate: true,
   },
 );
+
 const onAfterLeave = () => {
   if (!base.value) return;
   push({ name: base.value });
 };
 
+const onAfterEnter = () => {
+  panelDirty.value = false;
+};
+
 const onClose = () => {
-  panel.value = false;
+  panelOpen.value = false;
 };
 
 const onBack = () => {
@@ -58,9 +64,9 @@ const onBack = () => {
 <template>
   <div ref="appRef">
     <NDialogProvider :to="appRef">
-      <header :class="{ open: panel }">
+      <header :class="{ open: panelOpen }">
         <RouterView v-slot="{ Component }" name="navbar">
-          <NavbarComponent v-if="isAuthenticated" :disabled="panel">
+          <NavbarComponent v-if="isAuthenticated" :disabled="panelOpen">
             <template v-if="Component" #drawer="{ parentElement }">
               <Transition name="scale" mode="out-in">
                 <KeepAlive>
@@ -76,20 +82,25 @@ const onBack = () => {
           <GridBackground v-if="!Component" :size="20" />
           <Transition name="scale" mode="out-in">
             <KeepAlive>
-              <component :is="Component ?? PageLoading" :panel="panel" :footer="footer" />
+              <component
+                :is="Component ?? PageLoading"
+                :panel="panelOpen"
+                :footer="footerOpen"
+              />
             </KeepAlive>
           </Transition>
         </main>
         <aside>
           <RouterView v-slot="{ Component: PanelComponent }">
             <NDrawer
-              v-model:show="panel"
+              v-model:show="panelOpen"
               :to="mainRef"
               width="100%"
               class="panel"
               close-on-esc
               auto-focus
               :on-after-leave="onAfterLeave"
+              :on-after-enter="onAfterEnter"
             >
               <NDrawerContent :native-scrollbar="false">
                 <!--  Header  -->
@@ -118,7 +129,11 @@ const onBack = () => {
             </NDrawer>
           </RouterView>
         </aside>
-        <footer ref="footerRef" @mouseenter="footer = true" @mouseleave="footer = false">
+        <footer
+          ref="footerRef"
+          @mouseenter="footerOpen = true"
+          @mouseleave="footerOpen = false"
+        >
           <CheckinComponent :parent-element="footerRef" />
         </footer>
         <DebugProvider />

src/components/common/list/use-list-scroll.ts

@@ -212,7 +212,7 @@ export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D exten
       };
 
       if (_item.type === 'episode' || _item.type === 'season') {
-        _item.meta.number = {
+        _item.meta!.number = {
           season: item.episode?.season ?? item.season?.number,
           episode: item.episode?.number,
         };

src/components/views/calendar/CalendarComponent.vue

@@ -6,20 +6,16 @@ import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useListScroll } from '~/components/common/list/use-list-scroll';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
 
-defineProps({
-  footer: {
-    type: Boolean,
-    required: false,
-  },
-});
-
 const i18n = useI18n('calendar');
 
+const { footerOpen } = useAppStateStoreRefs();
+
 const { loading, center, filteredCalendar } = useCalendarStoreRefs();
 const { fetchCalendar, clearState } = useCalendarStore();
 
@@ -71,7 +67,7 @@ const { onItemClick } = usePanelItem();
       </template>
     </ListScroll>
     <FloatingButton
-      :show="!footer && scrolledOut"
+      :show="!footerOpen && scrolledOut"
       :width="centerIsToday ? '2.5rem' : '3.5rem'"
       :icon="recenterIcon"
       @on-click="onClick"

src/components/views/history/HistoryComponent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, toRefs, watch } from 'vue';
+import { onMounted, watch } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
@@ -10,22 +10,12 @@ import {
   useListScrollEvents,
 } from '~/components/common/list/use-list-scroll';
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
 
-const props = defineProps({
-  panel: {
-    type: Boolean,
-    required: false,
-  },
-  footer: {
-    type: Boolean,
-    required: false,
-  },
-});
-
-const { panel } = toRefs(props);
+const { footerOpen, panelOpen, panelDirty } = useAppStateStoreRefs();
 
 const { filteredHistory, pagination, loading, pageSize, belowThreshold, searchHistory } =
   useHistoryStoreRefs();
@@ -39,8 +29,8 @@ watchUserChange({
 });
 
 onMounted(() => {
-  watch(panel, async value => {
-    if (!value) await fetchHistory();
+  watch(panelOpen, async value => {
+    if (!value && panelDirty.value) await fetchHistory();
   });
 });
 
@@ -79,7 +69,7 @@ const { onItemClick } = usePanelItem();
         <!-- TODO buttons here-->
       </template>
     </ListScroll>
-    <FloatingButton :show="!footer && scrolled" @on-click="onClick">
+    <FloatingButton :show="!footerOpen && scrolled" @on-click="onClick">
       {{ i18n('back_to_top', 'common', 'button') }}
     </FloatingButton>
   </div>

src/components/views/panel/MoviePanel.vue

@@ -15,6 +15,7 @@ import {
 } from '~/components/views/panel/use-panel-buttons';
 import { NotificationService } from '~/services/notification.service';
 import { ResolveExternalLinks } from '~/settings/external.links';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import {
   DefaultListId,
   DefaultLists,
@@ -147,6 +148,8 @@ const onListUpdate = async (value: ListEntity['id'], remove: boolean) => {
 
 const releaseDate = computed(() => movie.value?.released);
 
+const { panelDirty } = useAppStateStoreRefs();
+
 const onCollectionUpdate = async (
   value: PanelButtonsOptions,
   date?: string | number | Date,
@@ -156,6 +159,7 @@ const onCollectionUpdate = async (
     date = releaseDate.value;
   }
 
+  panelDirty.value = true;
   await addToOrRemoveFromList({
     list: DefaultLists.ShowCollection,
     itemType: 'movie',
@@ -178,6 +182,7 @@ const onWatchedUpdate = async (
     date = releaseDate.value;
   }
 
+  panelDirty.value = true;
   await addToOrRemoveFromList({
     list: {
       id: DefaultListId.History,
@@ -232,7 +237,10 @@ const onCheckin = async (cancel: boolean) => {
       i18n('checkin_failed', 'watching'),
       new Error('No movie id'),
     );
-  } else await checkin({ movie: { ids: movie.value.ids } });
+  } else {
+    panelDirty.value = true;
+    await checkin({ movie: { ids: movie.value.ids } });
+  }
 
   await fetchMovieWatched(true);
 };

src/components/views/panel/ShowPanel.vue

@@ -16,6 +16,7 @@ import {
 } from '~/components/views/panel/use-panel-buttons';
 import { NotificationService } from '~/services/notification.service';
 import { ResolveExternalLinks } from '~/settings/external.links';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import {
   DefaultListId,
   DefaultLists,
@@ -249,11 +250,14 @@ const titleUrl = computed(() => {
 
 const releaseDate = computed(() => activeItem.value?.first_aired);
 
+const { panelDirty } = useAppStateStoreRefs();
+
 const onListUpdate = async (value: ListEntity['id'], remove: boolean) => {
   if (!panelType.value || !activeItem.value?.ids) return;
   const _list = myLists.value.find(list => list.id === value);
   if (!_list) return;
 
+  panelDirty.value = true;
   await addToOrRemoveFromList({
     list: _list,
     itemType: panelType.value,
@@ -271,15 +275,19 @@ const onCollectionUpdate = async (
     date = releaseDate.value;
   }
 
-  await addToOrRemoveFromList({
-    list: DefaultLists.ShowCollection,
-    itemType: panelType.value,
-    itemIds: activeItem.value.ids,
-    date,
-    remove: value === PanelButtonsOption.Remove,
-  });
-  if (!showId.value) return;
-  await fetchShowCollectionProgress(showId.value, { force: true });
+  try {
+    await addToOrRemoveFromList({
+      list: DefaultLists.ShowCollection,
+      itemType: panelType.value,
+      itemIds: activeItem.value.ids,
+      date,
+      remove: value === PanelButtonsOption.Remove,
+    });
+    if (!showId.value) return;
+    await fetchShowCollectionProgress(showId.value, { force: true });
+  } finally {
+    panelDirty.value = true;
+  }
 };
 
 const onWatchedUpdate = async (
@@ -291,6 +299,7 @@ const onWatchedUpdate = async (
     date = releaseDate.value;
   }
 
+  panelDirty.value = true;
   await addToOrRemoveFromList({
     list: {
       id: DefaultListId.History,
@@ -328,7 +337,10 @@ const onCheckin = async (cancel: boolean) => {
       i18n('checkin_failed', 'watching'),
       new Error('No episode id'),
     );
-  } else await checkin({ episode: { ids: episode.value.ids } });
+  } else {
+    panelDirty.value = true;
+    await checkin({ episode: { ids: episode.value.ids } });
+  }
 
   if (!showId.value) return;
   await fetchShowProgress(showId.value, { force: true });

src/components/views/progress/ProgressComponent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NFlex } from 'naive-ui';
-import { onMounted, toRefs, Transition, watch } from 'vue';
+import { onMounted, Transition, watch } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
@@ -9,25 +9,15 @@ import ListScroll from '~/components/common/list/ListScroll.vue';
 import LoginCard from '~/components/views/login/LoginCard.vue';
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
 import { ExternaLinks } from '~/settings/external.links';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
 
-const props = defineProps({
-  panel: {
-    type: Boolean,
-    required: false,
-  },
-  footer: {
-    type: Boolean,
-    required: false,
-  },
-});
-
-const { panel } = toRefs(props);
-
 const i18n = useI18n('progress');
 
+const { footerOpen, panelOpen, panelDirty } = useAppStateStoreRefs();
+
 const { progress, loading, loggedOut } = useProgressStoreRefs();
 const { fetchProgress, clearState } = useProgressStore();
 
@@ -37,8 +27,8 @@ watchUserChange({
 });
 
 onMounted(() => {
-  watch(panel, async value => {
-    if (!value) await fetchProgress();
+  watch(panelOpen, async value => {
+    if (!value && panelDirty.value) await fetchProgress();
   });
 });
 
@@ -79,7 +69,7 @@ const { onItemClick } = usePanelItem();
       </ListScroll>
     </Transition>
 
-    <FloatingButton :show="!footer && scrolled" @on-click="onClick">
+    <FloatingButton :show="!footerOpen && scrolled" @on-click="onClick">
       {{ i18n('back_to_top', 'common', 'button') }}
     </FloatingButton>
   </div>

src/components/views/releases/ReleasesComponent.vue

@@ -10,20 +10,16 @@ import { useListScroll } from '~/components/common/list/use-list-scroll';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
 import { TraktService } from '~/services/trakt.service';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useReleasesStore, useReleasesStoreRefs } from '~/stores/data/releases.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
 
-defineProps({
-  footer: {
-    type: Boolean,
-    required: false,
-  },
-});
-
 const i18n = useI18n('releases');
 
+const { footerOpen } = useAppStateStoreRefs();
+
 const { releases, loading, center } = useReleasesStoreRefs();
 const { fetchReleases, clearState } = useReleasesStore();
 
@@ -86,7 +82,7 @@ const onMovieClick = async ({ item }: { item: ListScrollItem }) => {
       </template>
     </ListScroll>
     <FloatingButton
-      :show="!footer && scrolledOut"
+      :show="!footerOpen && scrolledOut"
       :width="centerIsToday ? '2.5rem' : '3.5rem'"
       :icon="recenterIcon"
       @on-click="onClick"