From a1245b6b4132ab7d20f9fb6b7c8b3ab9529e4e6a Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Tue, 16 Jun 2026 18:25:38 +0000
Subject: [PATCH] =?UTF-8?q?feat(approvals):=20=D7=A8=D7=A2=D7=A0=D7=95?=
 =?UTF-8?q?=D7=9F=20=D7=9E=D7=A8=D7=9B=D7=96-=D7=90=D7=99=D7=A9=D7=95?=
 =?UTF-8?q?=D7=A8=D7=99=D7=9D=20=E2=80=94=20=D7=A4=D7=A1-=D7=97=D7=95?=
 =?UTF-8?q?=D7=9E=D7=A8=D7=94=20=D7=91=D7=9E=D7=A7=D7=95=D7=9D=20=D7=A4?=
 =?UTF-8?q?=D7=99=D7=9C,=20=D7=AA=D7=95=D7=A8-=D7=A0=D7=A7=D7=99=20=D7=9E?=
 =?UTF-8?q?=D7=A2=D7=95=D7=9E=D7=A2=D7=9D=20(#2/#3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

עיצוב-מחדש בכיוון "כרטיסים מרועננים" (מאושר ע"י חיים, Claude Design 01-approvals):
- פס-חומרה דק (3px) בקצה-התחלה של כל כרטיס (border-s לפי severity) במקום
  תג-מספר קטן. הספירה הראשית (המספר הגדול) נשמרת.
- כרטיס תור-נקי מעומעם: רקע parchment, ללא צל, מספר ב-ink-muted, שבב "✓ תור נקי".
- מבנה 2×2 והלוגיקה (usePendingApprovals, samples, CTA) ללא שינוי.

מאושר דרך שער-העיצוב.

Invariant: INV-IA1 — מרכז-אישורים נשאר השער-האנושי-היחיד; שינוי ויזואלי בלבד.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-ui/src/app/approvals/page.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/web-ui/src/app/approvals/page.tsx b/web-ui/src/app/approvals/page.tsx
index 25dee49..646bac5 100644
--- a/web-ui/src/app/approvals/page.tsx
+++ b/web-ui/src/app/approvals/page.tsx
@@ -26,6 +26,15 @@ const SEVERITY_DOT: Record<ApprovalSeverity, string> = {
   ok: "bg-success",
 };
 
+// #2 refresh — a thin severity rail on the card's inline-start edge replaces the
+// old small count-pill; the big count number stays. high=danger…ok=success.
+const SEVERITY_RAIL: Record<ApprovalSeverity, string> = {
+  high: "border-s-danger",
+  medium: "border-s-warn",
+  low: "border-s-info",
+  ok: "border-s-success",
+};
+
 function formatDate(iso?: string | null): string {
   if (!iso) return "";
   try {
@@ -42,7 +51,11 @@ function formatDate(iso?: string | null): string {
 function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
   const cleared = cat.count === 0;
   return (
-    <Card className="bg-surface border-rule shadow-sm flex flex-col overflow-hidden">
+    <Card
+      className={`flex flex-col overflow-hidden rounded-[10px] border-rule border-s-[3px] ${SEVERITY_RAIL[cat.severity]} ${
+        cleared ? "bg-parchment shadow-none" : "bg-surface shadow-sm"
+      }`}
+    >
       <CardContent className="p-0 flex flex-col grow">
         {/* top row — severity dot · title+age · big count number (mockup 01) */}
         <div className="flex items-start gap-3 px-5 pt-5 pb-2">
@@ -54,8 +67,8 @@ function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
             <h2 className="text-navy text-base font-semibold mb-0 leading-snug">{cat.label}</h2>
             <div className="text-[0.78rem] text-ink-muted mt-0.5">
               {cleared ? (
-                <span className="inline-block rounded-full bg-success-bg text-success text-[0.72rem] px-2.5 py-0.5 font-medium">
-                  תור נקי
+                <span className="inline-block rounded-full bg-success-bg text-success text-[0.72rem] px-2.5 py-0.5 font-semibold">
+                  ✓ תור נקי
                 </span>
               ) : cat.oldest_at ? (
                 <>הוותיק ביותר — {formatDate(cat.oldest_at)}</>
@@ -65,7 +78,9 @@ function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
             </div>
           </div>
           <span
-            className="text-3xl font-bold text-navy leading-none tabular-nums shrink-0"
+            className={`text-3xl font-bold leading-none tabular-nums shrink-0 ${
+              cleared ? "text-ink-muted" : "text-navy"
+            }`}
             aria-label={`${cat.count} פריטים ממתינים`}
           >
             {cat.count}
-- 
2.49.1