From 50c3a53d6e7ddef00a2de0ffde3b1e7c8014cd7d Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 31 Mar 2026 13:58:03 +0800
Subject: [PATCH] add more tooltips

---
 next-ui/src/components/LocaleSelector.vue     |  7 +++++++
 next-ui/src/components/PageSizeSelector.vue   | 18 ++++++++++-------
 next-ui/src/components/PagingSelector.vue     | 14 +++++++++++++
 next-ui/src/components/PosterSizeSlider.vue   |  7 +++++++
 next-ui/src/components/TempDrawer.vue         | 12 +++++++++++
 next-ui/src/components/ThemeSelector.vue      |  7 +++++++
 .../src/components/apikey/GenerateDialog.vue  |  7 +++++++
 next-ui/src/components/layout/app/Bar.vue     | 20 ++++++++++++++++++-
 .../layout/app/drawer/ReorderLibraries.vue    | 17 +++++++++-------
 .../layout/app/drawer/menu/Libraries.vue      |  7 +++++++
 next-ui/src/pages/libraries/[id]/series.vue   |  7 +++++++
 11 files changed, 108 insertions(+), 15 deletions(-)

diff --git a/next-ui/src/components/LocaleSelector.vue b/next-ui/src/components/LocaleSelector.vue
index 9716fb43..9268213f 100644
--- a/next-ui/src/components/LocaleSelector.vue
+++ b/next-ui/src/components/LocaleSelector.vue
@@ -2,6 +2,13 @@
   <v-menu>
     <template #activator="{ props }">
       <v-icon-btn
+        v-tooltip:bottom="
+          $formatMessage({
+            description: 'Locale selector button: tooltip',
+            defaultMessage: 'Language',
+            id: 'XR+P68',
+          })
+        "
         v-bind="props"
         icon="i-mdi:translate"
         :aria-label="
diff --git a/next-ui/src/components/PageSizeSelector.vue b/next-ui/src/components/PageSizeSelector.vue
index 3f9b8897..996d6ec1 100644
--- a/next-ui/src/components/PageSizeSelector.vue
+++ b/next-ui/src/components/PageSizeSelector.vue
@@ -2,15 +2,10 @@
   <v-menu>
     <template #activator="{ props }">
       <v-icon-btn
+        v-tooltip:bottom="message"
         v-bind="props"
         icon="i-mdi:view-grid-plus"
-        :aria-label="
-          $formatMessage({
-            description: 'Page size selector button: aria-label',
-            defaultMessage: 'page size selector',
-            id: '2EMvSm',
-          })
-        "
+        :aria-label="message"
       />
     </template>
 
@@ -44,6 +39,9 @@
 
 <script setup lang="ts">
 import type { PageSize } from '@/types/page'
+import { useIntl } from 'vue-intl'
+
+const intl = useIntl()
 
 const pageSize = defineModel<PageSize>({ required: true })
 
@@ -51,6 +49,12 @@ const { sizes = [20, 50, 100, 200, 500], allowUnpaged = false } = defineProps<{
   sizes?: number[]
   allowUnpaged?: boolean
 }>()
+
+const message = intl.formatMessage({
+  description: 'Page size selector button',
+  defaultMessage: 'Page size',
+  id: 'XXr6pI',
+})
 </script>
 
 <script lang="ts"></script>
diff --git a/next-ui/src/components/PagingSelector.vue b/next-ui/src/components/PagingSelector.vue
index f2505c63..b0e23bfe 100644
--- a/next-ui/src/components/PagingSelector.vue
+++ b/next-ui/src/components/PagingSelector.vue
@@ -7,10 +7,24 @@
     color="primary"
   >
     <v-btn
+      v-tooltip:bottom="
+        $formatMessage({
+          description: 'View mode scroll button tooltip',
+          defaultMessage: 'Scroll',
+          id: '3DBPuv',
+        })
+      "
       icon="i-mdi:infinity"
       value="scroll"
     />
     <v-btn
+      v-tooltip:bottom="
+        $formatMessage({
+          description: 'View mode paginated button tooltip',
+          defaultMessage: 'Paginated',
+          id: 'bCFD9B',
+        })
+      "
       icon="i-mdi:view-grid"
       value="paged"
     />
diff --git a/next-ui/src/components/PosterSizeSlider.vue b/next-ui/src/components/PosterSizeSlider.vue
index 1c8a3b78..5921fd68 100644
--- a/next-ui/src/components/PosterSizeSlider.vue
+++ b/next-ui/src/components/PosterSizeSlider.vue
@@ -2,6 +2,13 @@
   <v-slider
     v-if="display.smAndUp.value"
     v-model="appStore.gridCardWidth"
+    v-tooltip:bottom="
+      $formatMessage({
+        description: 'Poster size slider tooltip',
+        defaultMessage: 'Poster size',
+        id: 'O9hZBS',
+      })
+    "
     :min="130"
     :max="200"
     color="surface-darken"
diff --git a/next-ui/src/components/TempDrawer.vue b/next-ui/src/components/TempDrawer.vue
index f8382047..15cbd5e9 100644
--- a/next-ui/src/components/TempDrawer.vue
+++ b/next-ui/src/components/TempDrawer.vue
@@ -11,7 +11,9 @@
       disable-route-watcher
     >
       <v-icon-btn
+        v-tooltip:bottom="closeMessage"
         icon="i-mdi:close"
+        :aria-label="closeMessage"
         variant="text"
         class="position-absolute top-0 right-0 me-2 mt-1"
         style="z-index: 2"
@@ -23,8 +25,18 @@
 </template>
 
 <script setup lang="ts">
+import { useIntl } from 'vue-intl'
+
+const intl = useIntl()
+
 const model = defineModel<boolean>({ default: false })
 const { location = 'end' } = defineProps<{
   location?: 'top' | 'end' | 'bottom' | 'start' | 'left' | 'right'
 }>()
+
+const closeMessage = intl.formatMessage({
+  description: 'Temp drawer: close button',
+  defaultMessage: 'Close',
+  id: '/mhcNO',
+})
 </script>
diff --git a/next-ui/src/components/ThemeSelector.vue b/next-ui/src/components/ThemeSelector.vue
index f033e054..deb5dea9 100644
--- a/next-ui/src/components/ThemeSelector.vue
+++ b/next-ui/src/components/ThemeSelector.vue
@@ -1,5 +1,12 @@
 <template>
   <v-icon-btn
+    v-tooltip:bottom="
+      $formatMessage({
+        description: 'Theme selector button: tooltip',
+        defaultMessage: 'Theme',
+        id: 'e8DJzj',
+      })
+    "
     :icon="themeIcon"
     :aria-label="
       $formatMessage({
diff --git a/next-ui/src/components/apikey/GenerateDialog.vue b/next-ui/src/components/apikey/GenerateDialog.vue
index 2673e004..b0a41e46 100644
--- a/next-ui/src/components/apikey/GenerateDialog.vue
+++ b/next-ui/src/components/apikey/GenerateDialog.vue
@@ -93,6 +93,13 @@
                         />
                         <v-icon
                           v-else
+                          v-tooltip:bottom="
+                            $formatMessage({
+                              description: 'Generate API key dialog: copy button tooltip',
+                              defaultMessage: 'Copy to clipboard',
+                              id: 'oOtDhj',
+                            })
+                          "
                           icon="i-mdi:content-copy"
                           @click="copy(createdKey.key)"
                         />
diff --git a/next-ui/src/components/layout/app/Bar.vue b/next-ui/src/components/layout/app/Bar.vue
index 2d454e00..1231d744 100644
--- a/next-ui/src/components/layout/app/Bar.vue
+++ b/next-ui/src/components/layout/app/Bar.vue
@@ -1,7 +1,10 @@
 <template>
   <v-app-bar elevation="1">
     <template #prepend>
-      <v-app-bar-nav-icon @click="appStore.drawer = !appStore.drawer">
+      <v-app-bar-nav-icon
+        v-tooltip:bottom="tooltipMessage"
+        @click="appStore.drawer = !appStore.drawer"
+      >
         <template #default>
           <v-badge
             :model-value="unreadCount > 0 && !appStore.drawer"
@@ -34,9 +37,24 @@
 <script setup lang="ts">
 import { useAppStore } from '@/stores/app'
 import { useAnnouncements } from '@/colada/announcements'
+import { useIntl } from 'vue-intl'
+
+const intl = useIntl()
 
 const appStore = useAppStore()
 const { unreadCount } = useAnnouncements()
+
+const expandMessage = intl.formatMessage({
+  description: 'Locale selector button: tooltip expand',
+  defaultMessage: 'Expand menu',
+  id: 'wGVZsf',
+})
+const collapseMessage = intl.formatMessage({
+  description: 'Locale selector button: tooltip collapse',
+  defaultMessage: 'Collapse menu',
+  id: 'UgQ5iO',
+})
+const tooltipMessage = computed(() => (appStore.drawer ? collapseMessage : expandMessage))
 </script>
 
 <script lang="ts"></script>
diff --git a/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue b/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
index cb5abeb8..032b27d2 100644
--- a/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
+++ b/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
@@ -10,15 +10,10 @@
       }}</v-list-item-title>
       <template #append>
         <v-icon-btn
+          v-tooltip:bottom="closeMessage"
           icon="i-mdi:close"
           variant="text"
-          :aria-label="
-            $formatMessage({
-              description: 'Reorder library drawer: aria label',
-              defaultMessage: 'close',
-              id: 'Ept33T',
-            })
-          "
+          :aria-label="closeMessage"
           @click="appStore.reorderLibraries = false"
         />
       </template>
@@ -107,7 +102,9 @@ import type { components } from '@/generated/openapi/komga'
 import { CLIENT_SETTING_USER, type ClientSettingUserLibrary } from '@/types/ClientSettingsUser'
 import { useUpdateClientSettingsUser } from '@/colada/client-settings'
 import { useAppStore } from '@/stores/app'
+import { useIntl } from 'vue-intl'
 
+const intl = useIntl()
 const appStore = useAppStore()
 
 const { unpinned, pinned, refresh } = useLibraries()
@@ -139,6 +136,12 @@ const draggableConfig = {
   chosenClass: 'chosen',
   animation: 150,
 }
+
+const closeMessage = intl.formatMessage({
+  description: 'Reorder library drawer: close button',
+  defaultMessage: 'Close',
+  id: 'lPZ5hy',
+})
 </script>
 
 <style lang="scss">
diff --git a/next-ui/src/components/layout/app/drawer/menu/Libraries.vue b/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
index a46cae88..cdadb914 100644
--- a/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
+++ b/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
@@ -13,6 +13,13 @@
     <template #append>
       <v-icon-btn
         v-if="isAdmin"
+        v-tooltip:bottom="
+          $formatMessage({
+            description: 'Add library button: tooltip',
+            defaultMessage: 'Create library',
+            id: '70/wK4',
+          })
+        "
         icon="i-mdi:plus"
         variant="text"
         :aria-label="
diff --git a/next-ui/src/pages/libraries/[id]/series.vue b/next-ui/src/pages/libraries/[id]/series.vue
index 7e28918b..af5b79c8 100644
--- a/next-ui/src/pages/libraries/[id]/series.vue
+++ b/next-ui/src/pages/libraries/[id]/series.vue
@@ -34,6 +34,13 @@
       offset-y="7"
     >
       <v-icon-btn
+        v-tooltip:bottom="
+          $formatMessage({
+            description: 'Filter button: tooltip',
+            defaultMessage: 'Show filters',
+            id: 'kFQatO',
+          })
+        "
         icon="i-mdi:filter-variant"
         @click="filterDrawer = true"
       />