feat(web): i18n 快捷鍵提示 + UI 組件優化

- 新增 closeEsc, previous, next 翻譯
- approval-modal, slide-panel 更新

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/messages/en.json

@@ -10,6 +10,9 @@
     "cancel": "Cancel",
     "confirm": "Confirm",
     "close": "Close",
+    "closeEsc": "Close (ESC)",
+    "previous": "Previous (←)",
+    "next": "Next (→)",
     "save": "Save",
     "delete": "Delete",
     "edit": "Edit",

apps/web/messages/zh-TW.json

@@ -10,6 +10,9 @@
     "cancel": "取消",
     "confirm": "確認",
     "close": "關閉",
+    "closeEsc": "關閉 (ESC)",
+    "previous": "上一個 (←)",
+    "next": "下一個 (→)",
     "save": "儲存",
     "delete": "刪除",
     "edit": "編輯",

apps/web/src/components/ui/approval-modal.tsx

@@ -17,6 +17,7 @@
 
 import { useEffect, useCallback, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { useTranslations } from 'next-intl'
 import { cn } from '@/lib/utils'
 import { X, ChevronLeft, ChevronRight, Shield } from 'lucide-react'
 
@@ -37,12 +38,15 @@ export function ApprovalModal({
   open,
   onClose,
   children,
-  title = '審核詳情',
+  title,
   onPrev,
   onNext,
   current,
   total,
 }: ApprovalModalProps) {
+  const t = useTranslations('common')
+  const tApproval = useTranslations('approval')
+  const displayTitle = title ?? tApproval('title')
   // ESC 關閉 + 方向鍵導航
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') onClose()
@@ -98,7 +102,7 @@ export function ApprovalModal({
             </div>
             <div>
               <h2 className="font-heading text-lg font-bold text-nothing-gray-900">
-                {title}
+                {displayTitle}
               </h2>
               <p className="text-xs text-nothing-gray-500 font-mono">
                 Multi-Sig Authorization Required
@@ -119,7 +123,7 @@ export function ApprovalModal({
                       ? 'text-nothing-gray-300 cursor-not-allowed'
                       : 'text-nothing-gray-600 hover:bg-nothing-gray-200'
                   )}
-                  title="上一個 (←)"
+                  title={t('previous')}
                 >
                   <ChevronLeft className="w-4 h-4" />
                 </button>
@@ -135,7 +139,7 @@ export function ApprovalModal({
                       ? 'text-nothing-gray-300 cursor-not-allowed'
                       : 'text-nothing-gray-600 hover:bg-nothing-gray-200'
                   )}
-                  title="下一個 (→)"
+                  title={t('next')}
                 >
                   <ChevronRight className="w-4 h-4" />
                 </button>
@@ -146,7 +150,7 @@ export function ApprovalModal({
             <button
               onClick={onClose}
               className="p-2 rounded-xl hover:bg-nothing-gray-100 transition-colors"
-              title="關閉 (ESC)"
+              title={t('closeEsc')}
             >
               <X className="w-5 h-5 text-nothing-gray-500" />
             </button>

apps/web/src/components/ui/slide-panel.tsx

@@ -13,6 +13,7 @@
  */
 
 import { useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
 import { cn } from '@/lib/utils'
 import { X, ChevronLeft, ChevronRight } from 'lucide-react'
 import { Z_INDEX } from '@/lib/constants/z-index'
@@ -50,6 +51,7 @@ export function SlidePanel({
   total,
   width = 'lg',
 }: SlidePanelProps) {
+  const t = useTranslations('common')
   // ESC 關閉
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') onClose()
@@ -96,7 +98,7 @@ export function SlidePanel({
             <button
               onClick={onClose}
               className="p-1.5 rounded-lg hover:bg-nothing-gray-200 transition-colors"
-              title="關閉 (ESC)"
+              title={t('closeEsc')}
             >
               <X className="w-5 h-5 text-nothing-gray-500" />
             </button>
@@ -123,7 +125,7 @@ export function SlidePanel({
                       ? 'text-nothing-gray-300 cursor-not-allowed'
                       : 'text-nothing-gray-500 hover:bg-nothing-gray-200'
                   )}
-                  title="上一個 (←)"
+                  title={t('previous')}
                 >
                   <ChevronLeft className="w-4 h-4" />
                 </button>
@@ -136,7 +138,7 @@ export function SlidePanel({
                       ? 'text-nothing-gray-300 cursor-not-allowed'
                       : 'text-nothing-gray-500 hover:bg-nothing-gray-200'
                   )}
-                  title="下一個 (→)"
+                  title={t('next')}
                 >
                   <ChevronRight className="w-4 h-4" />
                 </button>