refactor: dynamic usage of t for vue-i18n-extract to work better

frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue

@@ -22,7 +22,7 @@
             <VListItem
               v-for="task in UITaskList"
               :key="`${task.id}`"
-              :title="$t(task.textKey, { ...task.textParams })">
+              :title="task.text">
               <template #append>
                 <VProgressCircular
                   v-if="task.progress !== 100"
@@ -48,13 +48,13 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { taskManagerStore } from '@/store';
 import { TaskType } from '@/store/taskManager';
 
 interface TaskInfo {
   progress: undefined | number;
-  textKey: string;
-  textParams?: Record<string, string>;
+  text: string;
   id: string;
 }
 
@@ -63,25 +63,25 @@ defineProps<{ fab?: boolean }>();
 const menu = ref(false);
 const taskManager = taskManagerStore();
 const completedTaskList = ref<TaskInfo[]>([]);
+const { t } = useI18n();
 
 const mappedTaskList = computed<TaskInfo[]>(() => {
-  return taskManager.tasks.map((t) => {
-    switch (t.type) {
+  return taskManager.tasks.map((tsk) => {
+    switch (tsk.type) {
       case TaskType.ConfigSync: {
         return {
-          progress: t.progress,
-          textKey: 'appbar.tasks.configSync',
-          id: t.id
+          progress: tsk.progress,
+          text: t('appbar.tasks.configSync'),
+          id: tsk.id
         };
       }
       case TaskType.LibraryRefresh: {
         return {
-          progress: t.progress,
-          textKey: 'appbar.tasks.scanningItem',
-          textParams: {
-            item: t.data ?? ''
-          },
-          id: t.id
+          progress: tsk.progress,
+          text: t('appbar.tasks.scanningItem', {
+            library: tsk.data ?? ''
+          }),
+          id: tsk.id
         };
       }
     }

frontend/src/components/Layout/HomeSection.vue

@@ -1,10 +1,6 @@
 <template>
   <SwiperSection
-    :title="
-      section.libraryName === undefined
-        ? $t(section.name)
-        : $t(section.name, { libraryName: section.libraryName })
-    "
+    :title="section.title"
     :items="items"
     :shape="section.shape" />
 </template>

frontend/src/pages/index.vue

@@ -67,7 +67,7 @@ const homeSections = computed<HomeSection[]>(() => {
     switch (homeSection) {
       case 'librarytiles': {
         homeSections.push({
-          name: 'libraries',
+          title: t('libraries'),
           libraryId: '',
           shape: CardShapes.Thumb,
           type: 'libraries'
@@ -94,8 +94,7 @@ const homeSections = computed<HomeSection[]>(() => {
             }
 
             latestMediaSections.push({
-              name: 'latestLibrary',
-              libraryName: userView.Name,
+              title: t('latestLibrary', { libraryName: userView.Name }),
               libraryId: userView.Id ?? '',
               shape: getShapeFromCollectionType(userView.CollectionType),
               type: 'latestmedia'
@@ -109,7 +108,7 @@ const homeSections = computed<HomeSection[]>(() => {
       }
       case 'resume': {
         homeSections.push({
-          name: 'continueWatching',
+          title: t('continueWatching'),
           libraryId: '',
           shape: CardShapes.Thumb,
           type: 'resume'
@@ -118,7 +117,7 @@ const homeSections = computed<HomeSection[]>(() => {
       }
       case 'resumeaudio': {
         homeSections.push({
-          name: 'continueListening',
+          title: t('continueListening'),
           libraryId: '',
           shape: CardShapes.Square,
           type: 'resumeaudio'
@@ -127,7 +126,7 @@ const homeSections = computed<HomeSection[]>(() => {
       }
       case 'upnext': {
         homeSections.push({
-          name: 'nextUp',
+          title: t('nextUp'),
           libraryId: '',
           shape: CardShapes.Thumb,
           type: 'upnext'

frontend/src/store/userLibraries.ts

@@ -21,8 +21,7 @@ interface LatestMedia {
 }
 
 export interface HomeSection {
-  name: string;
-  libraryName?: string | null;
+  title: string;
   libraryId: string;
   shape: CardShapes;
   type: string;