From 1f58005109ab5b8a1cf6d9575246e24a105cc3a8 Mon Sep 17 00:00:00 2001
From: Larsluph <22910497+Larsluph@users.noreply.github.com>
Date: Sun, 5 Nov 2023 21:36:52 +0100
Subject: [PATCH] feat(title): Ability to set custom browser tab title

---
 .../Settings/VueTorrent/General.vue           | 38 +++++++------------
 src/constants/vuetorrent/TitleOptions.ts      | 11 ++----
 src/constants/vuetorrent/index.ts             |  4 +-
 src/locales/en.json                           |  7 ++++
 src/stores/vuetorrent.ts                      | 11 ++++--
 5 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/components/Settings/VueTorrent/General.vue b/src/components/Settings/VueTorrent/General.vue
index a108067a..26e36ae3 100644
--- a/src/components/Settings/VueTorrent/General.vue
+++ b/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-btn @click="registerMagnetHandler">{{ t('settings.vuetorrent.general.registerMagnet') }}</v-btn>
+        <v-col cols="12" 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-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-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-btn color="red" @click="resetSettings">{{ t('settings.vuetorrent.general.resetSettings') }}</v-btn>
         </v-col>
       </v-row>
     </v-list-item>
diff --git a/src/constants/vuetorrent/TitleOptions.ts b/src/constants/vuetorrent/TitleOptions.ts
index 4e38271a..6eca5bab 100644
--- a/src/constants/vuetorrent/TitleOptions.ts
+++ b/src/constants/vuetorrent/TitleOptions.ts
@@ -1,11 +1,6 @@
 export enum TitleOptions {
   DEFAULT,
   GLOBAL_SPEED,
-  FIRST_TORRENT_STATUS
-}
-
-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 }
-]
+  FIRST_TORRENT_STATUS,
+  CUSTOM
+}
\ No newline at end of file
diff --git a/src/constants/vuetorrent/index.ts b/src/constants/vuetorrent/index.ts
index a878ff61..2edb2e36 100644
--- a/src/constants/vuetorrent/index.ts
+++ b/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 }
diff --git a/src/locales/en.json b/src/locales/en.json
index abd82de5..10d797ee 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/stores/vuetorrent.ts b/src/stores/vuetorrent.ts
index ceed88d5..405ce242 100644
--- a/src/stores/vuetorrent.ts
+++ b/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,