feat(settings): adds watching settings

Author: dvcol

src/components/AppComponent.vue

@@ -56,7 +56,7 @@ const onBack = () => {
 </script>
 
 <template>
-  <div ref="appRef" class="container">
+  <div ref="appRef">
     <NDialogProvider :to="appRef">
       <header :class="{ open: panel }">
         <RouterView v-slot="{ Component }" name="navbar">
@@ -162,7 +162,7 @@ main {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: calc(100% - #{layout.$header-navbar-height});
+  min-height: calc(100dvh - #{layout.$header-navbar-height});
   margin-top: layout.$header-navbar-height;
 }
 
@@ -173,10 +173,6 @@ footer {
   width: 100%;
 }
 
-.container {
-  height: 100%;
-}
-
 .panel {
   position: relative;
   max-height: calc(100% - #{layout.$header-navbar-height});

src/components/views/settings/SettingsComponent.vue

@@ -10,6 +10,7 @@ import SettingsLinks from '~/components/views/settings/SettingsLinks.vue';
 import SettingsLogs from '~/components/views/settings/SettingsLogs.vue';
 import SettingsMenus from '~/components/views/settings/SettingsMenus.vue';
 import SettingsTabs from '~/components/views/settings/SettingsTabs.vue';
+import SettingsWatching from '~/components/views/settings/SettingsWatching.vue';
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('settings');
@@ -25,9 +26,10 @@ const sections: Section[] = [
   { title: 'menu__tabs', reference: ref(), component: SettingsTabs },
   { title: 'menu__links', reference: ref(), component: SettingsLinks },
   { title: 'menu__menus', reference: ref(), component: SettingsMenus },
+  { title: 'menu__watching', reference: ref(), component: SettingsWatching },
   { title: 'menu__cache', reference: ref(), component: SettingsCache },
-  { title: 'menu__logs', reference: ref(), component: SettingsLogs },
   { title: 'menu__export', reference: ref(), component: SettingsExport },
+  { title: 'menu__logs', reference: ref(), component: SettingsLogs },
 ];
 
 const focus = ref();
@@ -66,7 +68,7 @@ onDeactivated(() => {
       class="menu"
       bordered
       collapse-mode="width"
-      width="5.125rem"
+      width="6rem"
       :collapsed-width="0"
       :native-scrollbar="false"
       show-trigger="bar"
@@ -128,6 +130,10 @@ onDeactivated(() => {
       margin-bottom: 1rem;
     }
 
+    &:hover {
+      z-index: var(--length);
+    }
+
     &.target {
       border-color: var(--n-color-target);
     }
@@ -136,10 +142,12 @@ onDeactivated(() => {
   .menu {
     @include mixin.hover-background;
 
+    height: calc(100dvh - #{layout.$header-navbar-height});
     padding: 0.5rem;
   }
 
   .content {
+    height: 100dvh;
     background: transparent;
   }
 

src/components/views/settings/SettingsWatching.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { NSelect, NSwitch } from 'naive-ui';
+
+import { ref } from 'vue';
+
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
+import { PollingIntervals, useWatchingStoreRefs } from '~/stores/data/watching.store';
+import { useI18n } from '~/utils/i18n.utils';
+
+const i18n = useI18n('settings', 'watching');
+
+const { polling, override } = useWatchingStoreRefs();
+
+const toSnakeCase = (str: string) =>
+  str
+    .replace(/([A-Z])/g, '_$1')
+    .toLowerCase()
+    .slice(1);
+
+const options = Object.entries(PollingIntervals).map(([key, value]) => ({
+  label: i18n(`label_interval_${toSnakeCase(key)}`),
+  value,
+}));
+
+const container = ref();
+</script>
+
+<template>
+  <div ref="container" class="watching-container">
+    <!--  Polling  -->
+    <SettingsFormItem :label="i18n('label_polling_interval')">
+      <NSelect
+        v-model:value="polling"
+        class="form-select"
+        :to="container"
+        :options="options"
+      />
+    </SettingsFormItem>
+
+    <!--  Override  -->
+    <SettingsFormItem :label="i18n('label_override')">
+      <NSwitch v-model:value="override" class="form-switch">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.watching-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-select {
+  min-width: 10rem;
+}
+</style>

src/i18n/en/settings/settings-menu.json

@@ -26,5 +26,9 @@
   "settings__menu__export": {
     "message": "Export",
     "description": "Export trakt data menu item"
+  },
+  "settings__menu__watching": {
+    "message": "Watching",
+    "description": "Watching ui menu item"
   }
 }

src/i18n/en/settings/settings-watching.json

@@ -0,0 +1,46 @@
+{
+  "settings__watching__label_polling_interval": {
+    "message": "Configure polling interval for watching state.",
+    "description": "Label for the polling interval setting."
+  },
+  "settings__watching__label_override": {
+    "message": "Automatically cancel pending checkin request.",
+    "description": "Label for the override setting."
+  },
+  "settings__watching__label_interval_disabled": {
+    "message": "Disabled",
+    "description": "Label for the disabled interval."
+  },
+  "settings__watching__label_interval_second": {
+    "message": "1 second",
+    "description": "Label for the 1 second interval."
+  },
+  "settings__watching__label_interval_five_seconds": {
+    "message": "5 seconds",
+    "description": "Label for the 5 seconds interval."
+  },
+  "settings__watching__label_interval_ten_seconds": {
+    "message": "10 seconds",
+    "description": "Label for the 10 seconds interval."
+  },
+  "settings__watching__label_interval_thirty_seconds": {
+    "message": "30 seconds",
+    "description": "Label for the 30 seconds interval."
+  },
+  "settings__watching__label_interval_one_minute": {
+    "message": "1 minute",
+    "description": "Label for the 1 minute interval."
+  },
+  "settings__watching__label_interval_five_minutes": {
+    "message": "5 minutes",
+    "description": "Label for the 5 minutes interval."
+  },
+  "settings__watching__label_interval_ten_minutes": {
+    "message": "10 minutes",
+    "description": "Label for the 10 minutes interval."
+  },
+  "settings__watching__label_interval_thirty_minutes": {
+    "message": "30 minutes",
+    "description": "Label for the 30 minutes interval."
+  }
+}

src/stores/data/watching.store.ts

@@ -1,6 +1,6 @@
 import { defineStore, storeToRefs } from 'pinia';
 
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 
 import type { TraktCheckinRequest, TraktWatching } from '@dvcol/trakt-http-client/models';
 
@@ -27,8 +27,20 @@ type override = {
   cancel?: boolean;
 };
 
+export const PollingIntervals = {
+  Disabled: 0,
+  Second: 1000,
+  FiveSeconds: 5 * 1000,
+  TenSeconds: 10 * 1000,
+  ThirtySeconds: 30 * 1000,
+  OneMinute: 60 * 1000,
+  FiveMinutes: 5 * 60 * 1000,
+  TenMinutes: 10 * 60 * 1000,
+  ThirtyMinutes: 30 * 60 * 1000,
+} as const;
+
 /** 30 seconds */
-const defaultPolling = 10 * 1000;
+const defaultPolling = PollingIntervals.TenSeconds;
 
 export const useWatchingStore = defineStore(WatchingStoreConstants.Store, () => {
   const loading = reactive<override>({});
@@ -141,8 +153,18 @@ export const useWatchingStore = defineStore(WatchingStoreConstants.Store, () =>
   const initWatchingStore = async () => {
     await restoreState();
     await fetchWatching();
-    if (interval.value) clearInterval(interval.value);
-    interval.value = setInterval(() => fetchWatching(), polling.value);
+    watch(
+      polling,
+      () => {
+        if (interval.value) clearInterval(interval.value);
+        if (!polling.value) return;
+        interval.value = setInterval(() => fetchWatching(), polling.value);
+        logger.debug('Polling interval set to', polling.value);
+      },
+      {
+        immediate: true,
+      },
+    );
   };
 
   return {