feat(title): Ability to set custom browser tab title

src/components/Settings/VueTorrent/General.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { titleOptionsList } from '@/constants/vuetorrent'
+import { TitleOptions } from '@/constants/vuetorrent'
 import { LOCALES } from '@/locales/locales'
 import { useAppStore } from '@/stores/app'
 import { useVueTorrentStore } from '@/stores/vuetorrent'
@@ -11,6 +11,13 @@ const { t } = useI18n()
 const appStore = useAppStore()
 const vueTorrentStore = useVueTorrentStore()
 
+const titleOptionsList = [
+  { title: t('constants.titleOptions.default'), value: TitleOptions.DEFAULT },
+  { title: t('constants.titleOptions.global_speed'), value: TitleOptions.GLOBAL_SPEED },
+  { title: t('constants.titleOptions.first_torrent_speed'), value: TitleOptions.FIRST_TORRENT_STATUS },
+  { title: t('constants.titleOptions.custom'), value: TitleOptions.CUSTOM }
+]
+
 const paginationSizes = ref([
   { title: t('settings.vuetorrent.general.paginationSize.infinite_scroll'), value: -1 },
   5,
@@ -18,7 +25,6 @@ const paginationSizes = ref([
   30,
   50
 ])
-const settingsField = ref('')
 
 const isProduction = computed(() => process.env.NODE_ENV === 'production')
 const isDevelopment = computed(() => process.env.NODE_ENV === 'development')
@@ -54,14 +60,6 @@ const vueTorrentVersion = computed(() => {
   return null
 })
 
-const importSettings = () => {
-  //TODO
-}
-
-const exportSettings = () => {
-  //TODO
-}
-
 const resetSettings = () => {
   window.localStorage.clear()
   window.sessionStorage.clear()
@@ -161,10 +159,10 @@ onBeforeMount(() => {
           <v-select v-model="vueTorrentStore.paginationSize" flat hide-details :items="paginationSizes" :label="t('settings.vuetorrent.general.paginationSize.label')" />
         </v-col>
         <v-col cols="12" sm="6" md="3">
-          <v-select v-model="vueTorrentStore.title" flat hide-details :items="titleOptionsList" :label="t('settings.vuetorrent.general.vueTorrentTitle')" />
+          <v-select v-model="vueTorrentStore.uiTitleType" flat hide-details :items="titleOptionsList" :label="t('settings.vuetorrent.general.vueTorrentTitle')" />
         </v-col>
         <v-col cols="12" sm="6" md="3">
-          <v-text-field v-model="vueTorrentStore.dateFormat" placeholder="DD/MM/YYYY, HH:mm:ss" hint="using Dayjs" :label="t('settings.vuetorrent.general.dateFormat')" />
+          <v-text-field :disabled="vueTorrentStore.uiTitleType !== TitleOptions.CUSTOM" v-model="vueTorrentStore.uiTitleCustom" :label="t('settings.vuetorrent.general.customTitle')" />
         </v-col>
       </v-row>
     </v-list-item>
@@ -191,28 +189,20 @@ onBeforeMount(() => {
           <v-select v-model="theme" :items="themeOptions" :label="t('settings.vuetorrent.general.theme')" />
         </v-col>
 
-        <v-col cols="12" md="3" class="d-flex align-center justify-center">
+        <v-col cols="12" md="3">
-          <v-btn @click="registerMagnetHandler">{{ t('settings.vuetorrent.general.registerMagnet') }}</v-btn>
+          <v-text-field v-model="vueTorrentStore.dateFormat" placeholder="DD/MM/YYYY, HH:mm:ss" hint="using Dayjs" :label="t('settings.vuetorrent.general.dateFormat')" />
         </v-col>
       </v-row>
     </v-list-item>
 
-    <v-list-item>
-      <v-textarea v-model="settingsField" />
-    </v-list-item>
-
     <v-list-item>
       <v-row>
         <v-col cols="12" sm="6" class="d-flex align-center justify-center">
-          <v-btn @click="importSettings">{{ t('settings.vuetorrent.general.importSettings') }}</v-btn>
+          <v-btn color="primary" @click="registerMagnetHandler">{{ t('settings.vuetorrent.general.registerMagnet') }}</v-btn>
         </v-col>
 
         <v-col cols="12" sm="6" class="d-flex align-center justify-center">
-          <v-btn @click="exportSettings">{{ t('settings.vuetorrent.general.exportSettings') }}</v-btn>
+          <v-btn color="red" @click="resetSettings">{{ t('settings.vuetorrent.general.resetSettings') }}</v-btn>
-        </v-col>
-
-        <v-col cols="12" class="d-flex align-center justify-center">
-          <v-btn dark color="red" @click="resetSettings">{{ t('settings.vuetorrent.general.resetSettings') }}</v-btn>
         </v-col>
       </v-row>
     </v-list-item>

src/constants/vuetorrent/TitleOptions.ts

@@ -1,11 +1,6 @@
 export enum TitleOptions {
   DEFAULT,
   GLOBAL_SPEED,
-  FIRST_TORRENT_STATUS
+  FIRST_TORRENT_STATUS,
-}
+  CUSTOM
-
+}
-export const titleOptionsList = [
-  { title: 'Static Title', value: TitleOptions.DEFAULT },
-  { title: 'Global Speed', value: TitleOptions.GLOBAL_SPEED },
-  { title: 'First Torrent Speed', value: TitleOptions.FIRST_TORRENT_STATUS }
-]

src/constants/vuetorrent/index.ts

@@ -2,6 +2,6 @@ import { propsData, propsMetadata } from './DashboardDefaults'
 import { DashboardProperty } from './DashboardProperty'
 import { DashboardPropertyType } from './DashboardPropertyType'
 import { typesMap, getFileIcon } from './FileIcon'
-import { TitleOptions, titleOptionsList } from './TitleOptions'
+import { TitleOptions } from './TitleOptions'
 
-export { propsData, propsMetadata, DashboardProperty, DashboardPropertyType, typesMap, getFileIcon, TitleOptions, titleOptionsList }
+export { propsData, propsMetadata, DashboardProperty, DashboardPropertyType, typesMap, getFileIcon, TitleOptions }

src/locales/en.json

@@ -598,6 +598,7 @@
           "infinite_scroll": "Infinite scroll"
         },
         "vueTorrentTitle": "VueTorrent title",
+        "customTitle": "Custom title",
         "dateFormat": "Date Format",
         "openSideBarOnStart": "Open Side Bar on launch",
         "isShutdownButtonVisible": "Show shutdown button",
@@ -977,6 +978,12 @@
     }
   },
   "constants": {
+    "titleOptions": {
+      "default": "Default",
+      "global_speed": "Global Speed",
+      "first_torrent_speed": "First Torrent Speed",
+      "custom": "Custom"
+    },
     "contentLayout": {
       "title": "Torrent content layout",
       "original": "Original",

src/stores/vuetorrent.ts

@@ -24,7 +24,8 @@ export const useVueTorrentStore = defineStore(
     const showTrackerFilter = ref(false)
     const showSpeedInTitle = ref(false)
     const deleteWithFiles = ref(false)
-    const title = ref(TitleOptions.DEFAULT)
+    const uiTitleType = ref(TitleOptions.DEFAULT)
+    const uiTitleCustom = ref('')
     const isDrawerRight = ref(false)
     const isPaginationOnTop = ref(false)
     const paginationSize = ref(15)
@@ -111,7 +112,7 @@ export const useVueTorrentStore = defineStore(
     }
 
     function updateTitle() {
-      const mode = title.value
+      const mode = uiTitleType.value
       switch (mode) {
         case TitleOptions.GLOBAL_SPEED:
           document.title =
@@ -133,6 +134,9 @@ export const useVueTorrentStore = defineStore(
             document.title = '[N/A] VueTorrent'
           }
           break
+        case TitleOptions.CUSTOM:
+          document.title = uiTitleCustom.value
+          break
         case TitleOptions.DEFAULT:
         default:
           document.title = 'VueTorrent'
@@ -182,7 +186,8 @@ export const useVueTorrentStore = defineStore(
       showSpeedGraph,
       showSpeedInTitle,
       showTrackerFilter,
-      title,
+      uiTitleType,
+      uiTitleCustom,
       useBinarySize,
       useBitSpeed,
       _busyProperties,