From 482decb511ab5a2cb18a15a1c4c6835d5e03080d Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 24 Oct 2025 12:11:22 +0800
Subject: [PATCH] fix dialog title

---
 next-ui/src/components/apikey/GenerateDialog.vue |  8 ++++----
 next-ui/src/components/dialog/BookPicker.vue     | 10 +++++-----
 next-ui/src/components/dialog/FileNamePicker.vue | 10 +++++-----
 next-ui/src/components/dialog/SeriesPicker.vue   | 12 +++++++-----
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/next-ui/src/components/apikey/GenerateDialog.vue b/next-ui/src/components/apikey/GenerateDialog.vue
index ceb0d6814..18724f261 100644
--- a/next-ui/src/components/apikey/GenerateDialog.vue
+++ b/next-ui/src/components/apikey/GenerateDialog.vue
@@ -5,7 +5,7 @@
     :fullscreen="fullscreen"
     :transition="fullscreen ? 'dialog-bottom-transition' : undefined"
     max-width="600px"
-    :aria-label="$formatMessage(titleMessage)"
+    :aria-label="dialogTitle"
     @after-leave="reset()"
   >
     <template #default="{ isActive }">
@@ -14,7 +14,7 @@
         @submit.prevent="generateApiKey()"
       >
         <v-card
-          :title="$formatMessage(titleMessage)"
+          :title="dialogTitle"
           :loading="isLoading"
         >
           <v-card-text>
@@ -188,9 +188,9 @@ function reset() {
   creationError.value = ''
 }
 
-const titleMessage = {
+const dialogTitle = intl.formatMessage({
   description: 'Generate API key dialog: title',
   defaultMessage: 'Generate new API key',
   id: 'ycrpqO',
-}
+})
 </script>
diff --git a/next-ui/src/components/dialog/BookPicker.vue b/next-ui/src/components/dialog/BookPicker.vue
index 15e19cfa0..652bb02fe 100644
--- a/next-ui/src/components/dialog/BookPicker.vue
+++ b/next-ui/src/components/dialog/BookPicker.vue
@@ -6,11 +6,11 @@
     :transition="fullscreen ? 'dialog-bottom-transition' : undefined"
     max-width="600px"
     scrollable
-    :aria-label="$formatMessage(titleMessage)"
+    :aria-label="dialogTitle"
     @after-leave="reset()"
   >
     <template #default="{ isActive }">
-      <v-card :title="$formatMessage(titleMessage)">
+      <v-card :title="dialogTitle">
         <template #append>
           <v-icon
             icon="i-mdi:close"
@@ -133,11 +133,11 @@ function reset() {
   filterRef.value = filter
 }
 
-const titleMessage = {
+const dialogTitle = intl.formatMessage({
   description: 'Book picker dialog: title',
   defaultMessage: 'Select book',
-  id: 'ycrpqO',
-}
+  id: 'SZHxy4',
+})
 
 function filterFn(
   value: string,
diff --git a/next-ui/src/components/dialog/FileNamePicker.vue b/next-ui/src/components/dialog/FileNamePicker.vue
index bfedaaf6b..e6bbafdc1 100644
--- a/next-ui/src/components/dialog/FileNamePicker.vue
+++ b/next-ui/src/components/dialog/FileNamePicker.vue
@@ -6,11 +6,11 @@
     scrollable
     :transition="fullscreen ? 'dialog-bottom-transition' : undefined"
     max-width="600px"
-    :aria-label="$formatMessage(titleMessage)"
+    :aria-label="dialogTitle"
     @after-leave="reset()"
   >
     <template #default="{ isActive }">
-      <v-card :title="$formatMessage(titleMessage)">
+      <v-card :title="dialogTitle">
         <template #append>
           <v-icon
             icon="i-mdi:close"
@@ -165,11 +165,11 @@ function reset() {
   newName.value = existingName
 }
 
-const titleMessage = {
+const dialogTitle = intl.formatMessage({
   description: 'Filename picker dialog: title',
   defaultMessage: 'Destination filename',
-  id: 'ycrpqO',
-}
+  id: '3Pm2PO',
+})
 
 const bookTableHeaders = [
   {
diff --git a/next-ui/src/components/dialog/SeriesPicker.vue b/next-ui/src/components/dialog/SeriesPicker.vue
index e66ebc7fe..7e815b172 100644
--- a/next-ui/src/components/dialog/SeriesPicker.vue
+++ b/next-ui/src/components/dialog/SeriesPicker.vue
@@ -5,11 +5,11 @@
     :fullscreen="fullscreen"
     :transition="fullscreen ? 'dialog-bottom-transition' : undefined"
     max-width="600px"
-    :aria-label="$formatMessage(titleMessage)"
+    :aria-label="dialogTitle"
     @after-leave="reset()"
   >
     <template #default="{ isActive }">
-      <v-card :title="$formatMessage(titleMessage)">
+      <v-card :title="dialogTitle">
         <template #append>
           <v-icon
             icon="i-mdi:close"
@@ -113,8 +113,10 @@ import { seriesThumbnailUrl } from '@/api/images'
 import { refDebounced } from '@vueuse/core'
 import { useLibraries } from '@/colada/libraries'
 import { PageRequest } from '@/types/PageRequest'
+import { useIntl } from 'vue-intl'
 
 const showDialog = defineModel<boolean>('dialog', { required: false })
+const intl = useIntl()
 
 const {
   includeOneShots = true,
@@ -173,10 +175,10 @@ function reset() {
   searchStringRef.value = searchString
 }
 
-const titleMessage = {
+const dialogTitle = intl.formatMessage({
   description: 'Series picker dialog: title',
   defaultMessage: 'Select series',
-  id: 'ycrpqO',
-}
+  id: 'SIfmpC',
+})
 </script>
 <script setup lang="ts"></script>