refactor(i18n): migrate clipboard widgets to useTranslations

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/components/ClipboardApp/CachedIdActionButton.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useMessages } from "@/components/providers/TranslationProvider";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import Tooltip from "@/components/Tooltip";
 import { getCachedId, setCachedId } from "@/lib/roomIdCache";
@@ -80,7 +80,7 @@ export default function CachedIdActionButton({
   onUseCached,
   disabled = false,
 }: Props) {
-  const messages = useMessages();
+  const t = useTranslations("text.ClipboardApp");
   const [hasCachedId, setHasCachedId] = useState<boolean>(false);
   const [showSaveOverride, setShowSaveOverride] = useState<boolean>(false);
   const clickCountRef = useRef(0);
@@ -119,7 +119,7 @@ export default function CachedIdActionButton({
           clearTimeout(saveTimerRef.current);
           saveTimerRef.current = null;
         }
-        putMessageInMs(messages.text.ClipboardApp.saveIdSuccessMessage, isShareEnd);
+        putMessageInMs(t("saveIdSuccessMessage"), isShareEnd);
       }
       return;
     }
@@ -164,7 +164,7 @@ export default function CachedIdActionButton({
     getInputValue,
     setInputValue,
     putMessageInMs,
-    messages.text.ClipboardApp.saveIdSuccessMessage,
+    t,
     isShareEnd,
     dblClickWindowMs,
     saveModeDurationMs,
@@ -175,8 +175,8 @@ export default function CachedIdActionButton({
     <Tooltip
       content={
         isSaveMode
-          ? messages.text.ClipboardApp.html.saveIdTip
-          : messages.text.ClipboardApp.html.useCachedIdTip
+          ? t("html.saveIdTip")
+          : t("html.useCachedIdTip")
       }
     >
       <span className="inline-block">
@@ -190,8 +190,8 @@ export default function CachedIdActionButton({
           }
         >
           {isSaveMode
-            ? messages.text.ClipboardApp.html.saveIdLabel
-            : messages.text.ClipboardApp.html.useCachedIdLabel}
+            ? t("html.saveIdLabel")
+            : t("html.useCachedIdLabel")}
         </Button>
       </span>
     </Tooltip>

frontend/components/ClipboardApp/FileTransferButton.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useMessages } from "@/components/providers/TranslationProvider";
+import React from "react";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Download } from "lucide-react";
 import {
@@ -26,7 +26,7 @@ const FileTransferButton = ({
   isSavedToDisk,
   isPendingSave = false,
 }: FileTransferButtonProps) => {
-  const messages = useMessages();
+  const t = useTranslations("text.FileTransferButton");
   // Button status judgment - 待保存状态时按钮应该可点击
   const isDisabled =
     isCurrentFileTransferring ||
@@ -35,15 +35,11 @@ const FileTransferButton = ({
 
   // Display different tooltips based on status
   const getTooltipContent = () => {
-    if (isSavedToDisk)
-      return messages!.text.FileTransferButton.savedToDiskTip;
-    if (isCurrentFileTransferring)
-      return messages!.text.FileTransferButton.currentFileTransferringTip;
-    if (isPendingSave)
-      return messages!.text.FileTransferButton.pendingSaveTip;
-    if (isOtherFileTransferring)
-      return messages!.text.FileTransferButton.otherFileTransferringTip;
-    return messages!.text.FileTransferButton.downloadTip;
+    if (isSavedToDisk) return t("savedToDiskTip");
+    if (isCurrentFileTransferring) return t("currentFileTransferringTip");
+    if (isPendingSave) return t("pendingSaveTip");
+    if (isOtherFileTransferring) return t("otherFileTransferringTip");
+    return t("downloadTip");
   };
 
   // Set different button styles and class names based on status
@@ -97,12 +93,12 @@ const FileTransferButton = ({
                 }`}
               />
               {isSavedToDisk
-                ? messages.text.FileTransferButton.savedLabel
+                ? t("savedLabel")
                 : isPendingSave
-                ? messages.text.FileTransferButton.saveLabel
+                ? t("saveLabel")
                 : isOtherFileTransferring
-                ? messages.text.FileTransferButton.waitingLabel
-                : messages.text.FileTransferButton.downloadLabel}
+                ? t("waitingLabel")
+                : t("downloadLabel")}
             </Button>
           </span>
         </TooltipTrigger>

frontend/components/ClipboardApp/FullScreenDropZone.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMessages } from "@/components/providers/TranslationProvider";
+import { useTranslations } from "next-intl";
 import { Upload } from "lucide-react";
 
 interface FullScreenDropZoneProps {
@@ -7,16 +7,14 @@ interface FullScreenDropZoneProps {
 }
 
 const FullScreenDropZone: React.FC<FullScreenDropZoneProps> = ({ isDragging }) => {
-  const messages = useMessages();
+  const t = useTranslations("text.fileUploadHandler");
 
   if (!isDragging) return null;
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-70 backdrop-blur-sm">
       <Upload className="h-24 w-24 text-white animate-bounce" />
-      <p className="mt-6 text-2xl font-bold text-white">
-        {messages.text.fileUploadHandler.dragTip}
-      </p>
+      <p className="mt-6 text-2xl font-bold text-white">{t("dragTip")}</p>
     </div>
   );
 };

frontend/components/ClipboardApp/ShareCard.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import dynamic from "next/dynamic";
-import { useMessages } from "@/components/providers/TranslationProvider";
+import { useTranslations } from "next-intl";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Copy, Download, Check } from "lucide-react";
@@ -19,7 +19,7 @@ const QRCodeSVG = dynamic(
   }
 );
 const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
-  const messages = useMessages();
+  const t = useTranslations("text.RetrieveMethod");
   const qrRef = useRef<HTMLDivElement>(null);
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
@@ -109,7 +109,7 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
   return (
     <div className="bg-primary/10 p-2 sm:p-4 rounded-lg border border-primary/20">
       <p className="text-primary mb-3 sm:mb-4 text-sm sm:text-base">
-        {messages.text.RetrieveMethod.introMessage}
+        {t("introMessage")}
       </p>
 
       {/* Mobile-first responsive layout */}
@@ -118,14 +118,14 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
         <div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
           <div className="space-y-2">
             <p className="text-sm font-medium text-foreground">
-              {messages.text.RetrieveMethod.roomIdTip}
+              {t("roomIdTip")}
             </p>
             <div className="flex flex-col sm:flex-row sm:items-center gap-2">
               <code className="flex-1 bg-muted px-2 py-1 rounded text-sm font-mono break-all">
                 {RoomID}
               </code>
               <WriteClipboardButton
-                title={messages.text.RetrieveMethod.copyRoomIdTip}
+                title={t("copyRoomIdTip")}
                 textToCopy={RoomID}
               />
             </div>
@@ -136,14 +136,14 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
         <div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
           <div className="space-y-2">
             <p className="text-sm font-medium text-foreground">
-              {messages.text.RetrieveMethod.urlTip}
+              {t("urlTip")}
             </p>
             <div className="bg-muted px-2 py-2 rounded text-xs sm:text-sm break-all font-mono">
               {shareLink}
             </div>
             <div className="flex justify-start">
               <WriteClipboardButton
-                title={messages.text.RetrieveMethod.copyUrlTip}
+                title={t("copyUrlTip")}
                 textToCopy={shareLink}
               />
             </div>
@@ -154,7 +154,7 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
         <div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
           <div className="space-y-3">
             <p className="text-sm font-medium text-foreground">
-              {messages.text.RetrieveMethod.scanQrTip}
+              {t("scanQrTip")}
             </p>
 
             {/* QR Code display area - moved up for better mobile UX */}
@@ -181,12 +181,12 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
                 {isCopied ? (
                   <>
                     <Check className="w-4 h-4 mr-2" />
-                    {messages.text.RetrieveMethod.copiedLabel}
+                    {t("copiedLabel")}
                   </>
                 ) : (
                   <>
                     <Copy className="mr-2 h-4 w-4" />
-                    {messages.text.RetrieveMethod.copyQrLabel}
+                    {t("copyQrLabel")}
                   </>
                 )}
               </Button>
@@ -197,7 +197,7 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
                 className="w-full"
               >
                 <Download className="mr-2 h-4 w-4" />
-                {messages.text.RetrieveMethod.downloadQrLabel}
+                {t("downloadQrLabel")}
               </Button>
             </div>
           </div>