feat(subtitles): use the subtitles-AI icon and add an AI transcription tooltip (#2106)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

.changeset/ai-subtitles-icon-tooltip.md

@@ -0,0 +1,5 @@
+---
+"@read-frog/extension": patch
+---
+
+feat(subtitles): use the subtitles-AI icon and explain AI transcription in a tooltip

src/entrypoints/subtitles.content/ui/subtitles-settings-panel/components/request-ai-subtitles-item.tsx

@@ -1,9 +1,11 @@
-import { IconLoader2, IconSparkles } from "@tabler/icons-react"
+import { IconExclamationCircle, IconLoader2, IconSubtitlesAi } from "@tabler/icons-react"
 import { useAtomValue } from "jotai"
-import { useState } from "react"
+import { use, useState } from "react"
 import { Button } from "@/components/ui/base-ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/base-ui/tooltip"
 import { SUBTITLES_SOURCE } from "@/utils/constants/subtitles"
 import { i18n } from "@/utils/i18n"
+import { ShadowWrapperContext } from "@/utils/react-shadow-host/create-shadow-host"
 import { cn } from "@/utils/styles/utils"
 import { ensureAiSubtitlesAccess } from "@/utils/subtitles/ai/access-guard"
 import { setAiSubtitlesToastAnchor } from "@/utils/subtitles/toast"
@@ -14,6 +16,7 @@ import { SubtitlesSettingsItem } from "./subtitles-settings-item"
 export function RequestAiSubtitlesItem() {
   const [pending, setPending] = useState(false)
   const { requestAiSubtitles, supportsAiSubtitles } = useSubtitlesUI()
+  const shadowWrapper = use(ShadowWrapperContext)
   const source = useAtomValue(subtitlesSourceAtom, { store: subtitlesStore })
   const isVisible = useAtomValue(subtitlesVisibleAtom, { store: subtitlesStore })
   const buttonId = "read-frog-request-ai-subtitles"
@@ -42,8 +45,23 @@ export function RequestAiSubtitlesItem() {
 
   return (
     <SubtitlesSettingsItem
-      icon={<IconSparkles className={cn("size-4", usingAi && "text-primary")} />}
-      label={label}
+      icon={<IconSubtitlesAi className={cn("size-4", usingAi && "text-primary")} />}
+      label={
+        <span className="inline-flex items-center gap-1.5">
+          <span className="truncate">{label}</span>
+          <Tooltip>
+            <TooltipTrigger render={<span className="inline-flex shrink-0 items-center" />}>
+              <IconExclamationCircle className="size-3.5 text-muted-foreground" />
+            </TooltipTrigger>
+            <TooltipContent
+              container={shadowWrapper}
+              className="max-w-64 border border-border bg-popover text-popover-foreground"
+            >
+              {i18n.t("subtitles.aiSubtitlesHint")}
+            </TooltipContent>
+          </Tooltip>
+        </span>
+      }
       labelFor={buttonId}
     >
       <Button
@@ -57,11 +75,7 @@ export function RequestAiSubtitlesItem() {
         onClick={handleRequest}
         disabled={pending || usingAi || !supportsAiSubtitles}
       >
-        {pending ? (
-          <IconLoader2 className="size-3.5 animate-spin" />
-        ) : (
-          <IconSparkles className={cn("size-3.5", usingAi && "text-primary")} />
-        )}
+        {pending && <IconLoader2 className="size-3.5 animate-spin" />}
       </Button>
     </SubtitlesSettingsItem>
   )

src/entrypoints/subtitles.content/ui/subtitles-ui-context.tsx

@@ -2,6 +2,7 @@ import type { ControlsConfig } from "@/entrypoints/subtitles.content/platforms"
 import type { SubtitlesProvidersAdapter } from "@/entrypoints/subtitles.content/universal-adapter"
 import { Provider as JotaiProvider } from "jotai"
 import { createContext, use, useMemo } from "react"
+import { TooltipProvider } from "@/components/ui/base-ui/tooltip"
 import { subtitlesStore } from "../atoms"
 
 interface SubtitlesUIContextValue {
@@ -52,7 +53,9 @@ export function SubtitlesProviders({
 
   return (
     <JotaiProvider store={subtitlesStore}>
-      <SubtitlesUIContext value={contextValue}>{children}</SubtitlesUIContext>
+      <SubtitlesUIContext value={contextValue}>
+        <TooltipProvider>{children}</TooltipProvider>
+      </SubtitlesUIContext>
     </JotaiProvider>
   )
 }

src/locales/en.yml

@@ -1249,6 +1249,7 @@ shortcutKeySelector:
   placeholder: Please enter the shortcut
 subtitles:
   loadingAiSubtitles: Loading AI subtitles… (estimated 3 min)
+  aiSubtitlesHint: Accurate subtitles generated by advanced AI speech recognition — available even when no official subtitles exist.
   requestAiSubtitles: Request AI subtitles
   usingAiSubtitles: Using AI subtitles
   toggle:

src/locales/es.yml

@@ -1249,6 +1249,7 @@ shortcutKeySelector:
   placeholder: Introduce el atajo
 subtitles:
   loadingAiSubtitles: Cargando subtítulos con IA… (estimado 3 min)
+  aiSubtitlesHint: Subtítulos precisos generados por reconocimiento de voz con IA avanzada, disponibles incluso sin subtítulos oficiales.
   requestAiSubtitles: Solicitar subtítulos con IA
   usingAiSubtitles: Usando subtítulos con IA
   toggle:

src/locales/ja.yml

@@ -1133,6 +1133,7 @@ shortcutKeySelector:
   placeholder: ショートカットを入力してください
 subtitles:
   loadingAiSubtitles: AI字幕を読み込み中…（推定3分）
+  aiSubtitlesHint: 先進的なAI音声認識により正確な字幕を生成。公式字幕がない動画でも利用できます。
   requestAiSubtitles: AI字幕をリクエスト
   usingAiSubtitles: AI字幕を使用中
   toggle:

src/locales/ko.yml

@@ -1133,6 +1133,7 @@ shortcutKeySelector:
   placeholder: 단축키를 입력해 주세요
 subtitles:
   loadingAiSubtitles: AI 자막 불러오는 중… (예상 3분)
+  aiSubtitlesHint: 첨단 AI 음성 인식으로 정확한 자막을 생성하며, 공식 자막이 없어도 사용할 수 있습니다.
   requestAiSubtitles: AI 자막 요청
   usingAiSubtitles: AI 자막 사용 중
   toggle:

src/locales/ru.yml

@@ -1133,6 +1133,7 @@ shortcutKeySelector:
   placeholder: Пожалуйста, введите горячую клавишу
 subtitles:
   loadingAiSubtitles: Загрузка ИИ-субтитров… (ожидается 3 мин)
+  aiSubtitlesHint: Точные субтитры создаются с помощью передового ИИ-распознавания речи и доступны даже без официальных субтитров.
   requestAiSubtitles: Запросить ИИ-субтитры
   usingAiSubtitles: Используются ИИ-субтитры
   toggle:

src/locales/tr.yml

@@ -1133,6 +1133,7 @@ shortcutKeySelector:
   placeholder: Lütfen kısayolu girin
 subtitles:
   loadingAiSubtitles: Yapay zeka altyazıları yükleniyor… (tahmini 3 dk)
+  aiSubtitlesHint: Gelişmiş yapay zeka ses tanıma ile doğru altyazılar oluşturulur; resmi altyazı olmadığında da kullanılabilir.
   requestAiSubtitles: Yapay zeka altyazısı iste
   usingAiSubtitles: Yapay zeka altyazısı kullanılıyor
   toggle:

src/locales/vi.yml

@@ -1133,6 +1133,7 @@ shortcutKeySelector:
   placeholder: Vui lòng nhập phím tắt
 subtitles:
   loadingAiSubtitles: Đang tải phụ đề AI… (dự kiến 3 phút)
+  aiSubtitlesHint: Phụ đề chính xác được tạo bằng công nghệ nhận dạng giọng nói AI tiên tiến, dùng được ngay cả khi không có phụ đề chính thức.
   requestAiSubtitles: Yêu cầu phụ đề AI
   usingAiSubtitles: Đang dùng phụ đề AI
   toggle:

src/locales/zh-CN.yml

@@ -1249,6 +1249,7 @@ shortcutKeySelector:
   placeholder: 请输入快捷键
 subtitles:
   loadingAiSubtitles: 正在加载 AI 字幕中（预计 3 分钟）
+  aiSubtitlesHint: 通过先进 AI 识别语音生成准确字幕，无官方字幕时依然可用。
   requestAiSubtitles: 请求 AI 字幕
   usingAiSubtitles: 正在使用 AI 字幕中
   toggle:

src/locales/zh-TW.yml

@@ -1249,6 +1249,7 @@ shortcutKeySelector:
   placeholder: 請輸入快速鍵
 subtitles:
   loadingAiSubtitles: 正在載入 AI 字幕（預計 3 分鐘）
+  aiSubtitlesHint: 透過先進 AI 辨識語音生成準確字幕，無官方字幕時依然可用。
   requestAiSubtitles: 請求 AI 字幕
   usingAiSubtitles: 正在使用 AI 字幕
   toggle: