feat: improve dock tooltip and add i18n translation

src/_locales/cmn-CN.yml

@@ -125,6 +125,14 @@ topbar:
     sticker: 贴纸
     video: 视频
     manager: 投稿
+dock:
+  search: 搜索
+  home: 首页
+  anime: 番剧
+  history: 观看历史
+  dark_mode: 暗色模式
+  light_mode: 亮色模式
+  settings: 设置
 home:
   not_interested_in: 对哪方面不感兴趣？
   video_removed: 视频已移除

src/_locales/cmn-TW.yml

@@ -120,6 +120,14 @@ topbar:
     sticker: 上傳貼圖
     video: 上傳影片
     manager: 內容管理
+dock:
+  search: 搜尋
+  home: 首頁
+  anime: 動畫
+  history: 觀看記錄
+  dark_mode: 深色模式
+  light_mode: 淺色模式
+  settings: 設定
 home:
   not_interested_in: 對哪方面不感興趣？
   video_removed: 影片已移除

src/_locales/en.yml

@@ -126,6 +126,14 @@ topbar:
     sticker: Sticker
     video: Video
     manager: Manager
+dock:
+  search: Search
+  home: Home
+  anime: Anime
+  history: History
+  dark_mode: Dark Mode
+  light_mode: Light Mode
+  settings: Settings
 home:
   not_interested_in: Not interested in...
   video_removed: Video removed

src/_locales/jyut.yml

@@ -39,8 +39,8 @@ settings:
   dock_position: Dock 放位
   dock_position_desc: 放喺螢幕邊度
   dock_position_opt:
-    left: 左側
-    right: 右側
+    left: 左邊
+    right: 右邊
     bottom: 下低
   theme_color: 佈景色
   follow_bilibili_evolved_color: 跟返 Bilibili Evolved 佈景色
@@ -125,6 +125,14 @@ topbar:
     sticker: 出貼圖
     video: Po 片
     manager: 內容管理
+dock:
+  search: 搵嘢
+  home: 主頁
+  anime: 動畫
+  history: 收睇記錄
+  dark_mode: 深色模式
+  light_mode: 淺色模式
+  settings: 校做
 home:
   not_interested_in: 對邊方面冇癮？
   video_removed: 經已鏟咗條片

src/components/Select.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { getCurrentInstance } from 'vue'
-
 const props = defineProps<{
   options: OptionType[]
   modelValue: string
@@ -9,8 +6,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
-const { locale } = useI18n()
-
 interface OptionType {
   value: string
   label: string

src/components/Tooltip.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+defineProps<{
+  content: string
+  placement: 'left' | 'right' | 'top'
+}>()
+</script>
+
+<template>
+  <span class="tooltip-wrapper">
+    <div
+      class="tooltip"
+      :class="placement"
+    >
+      {{ content }}
+    </div>
+    <slot />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.tooltip-wrapper {
+  --at-apply: flex items-center relative;
+
+  .tooltip {
+    --at-apply: absolute px-2 py-1 rounded-8
+      bg-black dark:bg-white
+      pointer-events-none
+      text-sm text-white dark:text-black
+      opacity-0 duration-300;
+      white-space: nowrap;
+
+    &.right {
+      --at-apply: left-[calc(100%+1em)];
+    }
+
+    &.left{
+      --at-apply: right-[calc(100%+1em)];
+    }
+
+    &.top {
+      --at-apply: top--3em left-1/2;
+      transform: translateX(-50%);
+    }
+  }
+
+  &:hover .tooltip {
+    --at-apply: opacity-100;
+  }
+}
+</style>

src/contentScripts/index.ts

@@ -2,7 +2,7 @@ import { onMessage } from 'webext-bridge'
 import { createApp } from 'vue'
 import App from './views/App.vue'
 import { setupApp } from '~/logic/common-setup'
-import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
+import { SVG_ICONS, i18n } from '~/utils'
 
 // Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
 (() => {

src/contentScripts/views/App.vue

@@ -34,6 +34,16 @@ const pages = { Home, Search, Anime, History, Favorites, Video }
 const isVideoPage = ref<boolean>(false)
 const mainApp = ref<HTMLElement>()
 
+const tooltipPlacement = computed(() => {
+  if (settings.value.dockPosition === 'left')
+    return 'right'
+  else if (settings.value.dockPosition === 'right')
+    return 'left'
+  else if (settings.value.dockPosition === 'bottom')
+    return 'top'
+  return 'right'
+})
+
 watch(
   () => activatedPage.value,
   (newValue, oldValue) => {
@@ -133,85 +143,50 @@ function setAppAppearance() {
         >
           <div
             class="dock-content"
-            p-2
-            m-2
-            bg="$bew-content-1"
-            flex="~ col gap-2 shrink-0"
+            p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
             rounded="$bew-radius"
             shadow="$bew-shadow-2"
             style="backdrop-filter: var(--bew-filter-glass)"
           >
-            <div
-              class="dock-item"
-              :class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
-              @click="changeActivatePage(AppPage.Search)"
-            >
+            <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
               <div
-                class="tooltip"
-                :class="{
-                  left: settings.dockPosition === 'left',
-                  right: settings.dockPosition === 'right',
-                  bottom: settings.dockPosition === 'bottom',
-                }"
+                class="dock-item"
+                :class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
+                @click="changeActivatePage(AppPage.Search)"
               >
-                Search
+                <tabler:search />
               </div>
-              <tabler:search />
-            </div>
+            </Tooltip>
 
-            <div
-              class="dock-item"
-              :class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
-              @click="changeActivatePage(AppPage.Home)"
-            >
+            <Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
               <div
-                class="tooltip"
-                :class="{
-                  left: settings.dockPosition === 'left',
-                  right: settings.dockPosition === 'right',
-                  bottom: settings.dockPosition === 'bottom',
-                }"
+                class="dock-item"
+                :class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
+                @click="changeActivatePage(AppPage.Home)"
               >
-                Home
+                <tabler:home />
               </div>
-              <tabler:home />
-            </div>
+            </Tooltip>
 
-            <div
-              class="dock-item"
-              :class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
-              @click="changeActivatePage(AppPage.Anime)"
-            >
+            <Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
               <div
-                class="tooltip"
-                :class="{
-                  left: settings.dockPosition === 'left',
-                  right: settings.dockPosition === 'right',
-                  bottom: settings.dockPosition === 'bottom',
-                }"
+                class="dock-item"
+                :class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
+                @click="changeActivatePage(AppPage.Anime)"
               >
-                Anime
+                <tabler:device-tv />
               </div>
-              <tabler:device-tv />
-            </div>
+            </Tooltip>
 
-            <div
-              class="dock-item"
-              :class="{ active: activatedPage === AppPage.History && !isVideoPage }"
-              @click="changeActivatePage(AppPage.History)"
-            >
+            <Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
               <div
-                class="tooltip"
-                :class="{
-                  left: settings.dockPosition === 'left',
-                  right: settings.dockPosition === 'right',
-                  bottom: settings.dockPosition === 'bottom',
-                }"
+                class="dock-item"
+                :class="{ active: activatedPage === AppPage.History && !isVideoPage }"
+                @click="changeActivatePage(AppPage.History)"
               >
-                History
+                <tabler:clock />
               </div>
-              <tabler:clock />
-            </div>
+            </Tooltip>
 
             <!-- <div
             class="dock-item"
@@ -234,35 +209,18 @@ function setAppAppearance() {
             <!-- dividing line -->
             <div class="divider" />
 
-            <div class="dock-item" @click="toggleDark()">
-              <div
-                class="tooltip"
-                :class="{
-                  left: settings.dockPosition === 'left',
-                  right: settings.dockPosition === 'right',
-                  bottom: settings.dockPosition === 'bottom',
-                }"
-              >
-                <span v-if="isDark">Light mode</span>
-                <span v-else>Dark mode</span>
+            <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
+              <div class="dock-item" @click="toggleDark()">
+                <tabler:moon-stars v-if="isDark" />
+                <tabler:sun v-else />
               </div>
-              <tabler:moon-stars v-if="isDark" />
-              <tabler:sun v-else />
-            </div>
+            </Tooltip>
 
-            <div class="dock-item" @click="toggle()">
-              <div
-                class="tooltip"
-                :class="{
-                  left: settings.dockPosition === 'left',
-                  right: settings.dockPosition === 'right',
-                  bottom: settings.dockPosition === 'bottom',
-                }"
-              >
-                Settings
+            <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
+              <div class="dock-item" @click="toggle()">
+                <tabler:settings />
               </div>
-              <tabler:settings />
-            </div>
+            </Tooltip>
           </div>
         </aside>
 
@@ -353,31 +311,6 @@ function setAppAppearance() {
       --at-apply: bg-$bew-warning-color text-black;
     }
 
-    .tooltip {
-      --at-apply: absolute px-2 py-1 rounded-8
-        bg-black dark:bg-white
-        pointer-events-none
-        text-sm text-white dark:text-black
-        opacity-0 duration-300;
-        white-space: nowrap;
-
-      &.left {
-        --at-apply: left-[calc(45px+1em)];
-      }
-
-      &.right{
-        --at-apply: right-[calc(45px+1em)];
-      }
-
-      &.bottom {
-        --at-apply: top--3em left-1/2;
-        transform: translateX(-50%);
-      }
-    }
-
-    &:hover .tooltip {
-      --at-apply: opacity-100;
-    }
   }
 }
 </style>