From 172ff04653d8416411be1c75c2cf5bf43d018100 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Tue, 31 Mar 2026 19:18:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E7=B0=BD=E6=A0=B8=E5=A4=B1?=
 =?UTF-8?q?=E6=95=97=E8=A6=96=E8=A6=BA=E5=9B=9E=E9=A5=8B=20(Phase=2022=20P?=
 =?UTF-8?q?0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

問題: 簽核失敗時沒有任何提示，用戶不知道發生了什麼

修復:
- 新增 toast.error() 當簽核失敗時
- 新增 Error Overlay (紅色背景 + critical 狀態球)

這與前一個 commit 的 CSRF 修復配合，讓用戶能清楚知道：
1. CSRF 載入中 → 按鈕 disabled
2. CSRF 失敗 → 顯示警告訊息
3. 簽核失敗 → Error Overlay + Toast

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/approval/live-approval-panel.tsx    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/web/src/components/approval/live-approval-panel.tsx b/apps/web/src/components/approval/live-approval-panel.tsx
index f3c06af7d..8cce5a6b9 100644
--- a/apps/web/src/components/approval/live-approval-panel.tsx
+++ b/apps/web/src/components/approval/live-approval-panel.tsx
@@ -188,6 +188,8 @@ export function LiveApprovalPanel({
       }
     } else {
       setSigningStates((prev) => ({ ...prev, [id]: 'error' }))
+      // 🔴 Phase 22 P0: 新增錯誤 Toast 提示
+      toast.error('簽核失敗，請檢查網路連線或重新整理頁面')
       setTimeout(() => {
         setSigningStates((prev) => {
           const next = { ...prev }
@@ -360,6 +362,18 @@ export function LiveApprovalPanel({
                 </div>
               </div>
             )}
+
+            {/* 🔴 Phase 22 P0: Error Overlay */}
+            {signingStates[approval.id] === 'error' && (
+              <div className="absolute inset-0 flex items-center justify-center bg-status-critical/20 rounded-xl">
+                <div className="text-center">
+                  <StatusOrb status="critical" size="lg" glow />
+                  <p className="mt-2 text-status-critical font-mono font-semibold">
+                    {tCommon('error')}
+                  </p>
+                </div>
+              </div>
+            )}
           </div>
         )})}