feat(settings): adds navbar position setting

Author: dvcol

src/components/views/about/AboutComponent.vue

@@ -140,6 +140,10 @@ const openRelease = (url?: string) => {
     padding-top: layout.$floating-navbar-height;
   }
 
+  &.reverse {
+    padding-bottom: layout.$header-navbar-height;
+  }
+
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
   }

src/components/views/progress/ProgressComponent.vue

@@ -32,6 +32,8 @@ const { isWatching } = useWatchingStoreRefs();
 const { scrolled, listRef, onClick } = useBackToTop();
 const { onItemClick } = usePanelItem();
 
+const { reverse } = useAppStateStoreRefs();
+
 onMounted(() => {
   watch(panelOpen, async value => {
     if (!value && panelDirty.value) await fetchProgress();
@@ -103,6 +105,7 @@ useActiveAndDocumentVisible({
         ref="listRef"
         :loading="loading"
         :items="progress"
+        :list-options="reverse ? { paddingBottom: 44 } : {}"
         backdrop
         hide-date
         show-progress

src/components/views/settings/SettingsTabs.vue

@@ -17,6 +17,7 @@ import IconPencil from '~/components/icons/IconPencil.vue';
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { type ListEntity, ListType } from '~/models/list.model';
 import { loadingHysteresisOptions } from '~/models/loading-hysteresis.model';
+import { NavbarPosition } from '~/models/navbar-position.model';
 import { pageSizeOptions, pageSizeOptionsWithZero } from '~/models/page-size.model';
 import { ProgressType } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
@@ -51,6 +52,7 @@ const {
   enableRatings,
   backgroundColor,
   loadingHysteresis,
+  navbarPosition,
 } = useExtensionSettingsStoreRefs();
 
 const { getIcon, fetchLists } = useListsStore();
@@ -73,6 +75,13 @@ const listOptions = computed<ListOption[]>(() =>
   })),
 );
 
+const navbarOptions = computed<SelectOption[]>(() =>
+  Object.values(NavbarPosition).map(value => ({
+    label: i18n(value, 'common', 'navbar_position'),
+    value,
+  })),
+);
+
 const loadingOption = computed(() =>
   loadingHysteresisOptions.map(({ label, value }) => ({
     label:
@@ -145,6 +154,16 @@ const onColor = () => {
 
 <template>
   <div ref="container" class="tabs-container">
+    <!--  Navbar Positon  -->
+    <SettingsFormItem :label="i18n('label_navbar_position')">
+      <NSelect
+        v-model:value="navbarPosition"
+        class="navbar-position"
+        :to="container"
+        :options="navbarOptions"
+      />
+    </SettingsFormItem>
+
     <!--  Default tab  -->
     <SettingsFormItem :label="i18n('label_default_tab')">
       <NSelect
@@ -429,6 +448,7 @@ const onColor = () => {
   }
 }
 
+.navbar-position,
 .default-tab,
 .list-select {
   width: 12.5rem;

src/i18n/en/common/navbar-position.json

@@ -0,0 +1,18 @@
+{
+  "common__navbar_position__top": {
+    "message": "Top",
+    "description": "Top of the screen"
+  },
+  "common__navbar_position__bottom": {
+    "message": "Bottom",
+    "description": "Bottom of the screen"
+  },
+  "common__navbar_position__floating": {
+    "message": "Floating",
+    "description": "Floating on the screen"
+  },
+  "common__navbar_position__auto": {
+    "message": "Auto",
+    "description": "Automatically position the navbar"
+  }
+}

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

@@ -11,6 +11,10 @@
     "message": "Default tab",
     "description": "Label for the 'Default tab' setting"
   },
+  "settings__tabs__label_navbar_position": {
+    "message": "Navbar Position",
+    "description": "Label for the 'Navbar Position' setting"
+  },
   "settings__tabs__label_restore_tab": {
     "message": "Restore active tab on startup",
     "description": "Label for the 'Restore active tab on startup' setting"

src/models/navbar-position.model.ts

@@ -0,0 +1,8 @@
+export const NavbarPosition = {
+  Top: 'top',
+  Bottom: 'bottom',
+  Floating: 'floating',
+  Auto: 'auto',
+} as const;
+
+export type NavbarPositions = (typeof NavbarPosition)[keyof typeof NavbarPosition];

src/stores/app-state.store.ts

@@ -3,6 +3,7 @@ import { defineStore, storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
 import { MessageType } from '~/models/message/message-type.model';
+import { NavbarPosition } from '~/models/navbar-position.model';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { sendMessage } from '~/utils/browser/browser-message.utils';
 import { useWaitReady } from '~/utils/store.utils';
@@ -61,17 +62,17 @@ export const useAppStateStore = defineStore('app.state', () => {
     isWeb,
     root,
     reverse: computed(() => {
+      if (navbarPosition.value === NavbarPosition.Bottom) return true;
       if (!isWeb.value) return false;
-      if (navbarPosition.value === 'bottom') return true;
       // web and small screen only
-      return navbarPosition.value === 'auto' && mobile.width;
+      return navbarPosition.value === NavbarPosition.Auto && mobile.width;
     }),
     floating: computed(() => {
-      if (!isWeb.value) return false;
       // if (panelOpen.value) return false;
-      if (navbarPosition.value === 'floating') return true;
+      if (navbarPosition.value === NavbarPosition.Floating) return true;
+      if (!isWeb.value) return false;
       // web & big screen only
-      return navbarPosition.value === 'auto' && tablet.width === false;
+      return navbarPosition.value === NavbarPosition.Auto && tablet.width === false;
     }),
   };
 });

src/stores/settings/extension.store.ts

@@ -5,6 +5,8 @@ import { computed, reactive, ref, toRaw } from 'vue';
 
 import type { ListEntity } from '~/models/list.model';
 
+import { NavbarPosition, type NavbarPositions } from '~/models/navbar-position.model';
+
 import { PageSize } from '~/models/page-size.model';
 import { ProgressType, type ProgressTypes } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
@@ -38,8 +40,6 @@ const DefaultRoutes: RouteDictionary = {
   [Route.Search]: true,
 };
 
-type NavbarPosition = 'top' | 'bottom' | 'floating' | 'auto';
-
 type ExtensionSettings = {
   cacheRetention: CacheRetentionState;
   enabledRoutes: RouteDictionary;
@@ -51,7 +51,7 @@ type ExtensionSettings = {
   enableRatings: boolean;
   backgroundColor: string;
   loadingHysteresis: number;
-  navbarPosition: NavbarPosition;
+  navbarPosition: NavbarPositions;
 };
 
 const ExtensionSettingsConstants = {
@@ -72,7 +72,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const enableRatings = ref(false);
   const backgroundColor = ref('transparent');
   const loadingHysteresis = ref(-1);
-  const navbarPosition = ref<NavbarPosition>('auto');
+  const navbarPosition = ref<NavbarPositions>(NavbarPosition.Auto);
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
@@ -250,7 +250,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
     }),
     navbarPosition: computed({
       get: () => navbarPosition.value,
-      set: (value: NavbarPosition) => {
+      set: (value: NavbarPositions) => {
         navbarPosition.value = value;
         saveState().catch(err => Logger.error('Failed to save navbar position extension settings', { value, err }));
       },