feat(ui): IA redesign → production · יישום נאמן של 16 הדפים הנותרים למוקאפים

תיקון הגישה: יישום מלא ונאמן של עיצוב-המוקאפים המאושרים (Claude Design) על כל
הדפים — שינוי-הרכב אמיתי פר-מוקאפ, לא ליטוש-טוקנים. כל hook/query/mutation/טאב/
טופס/נתון נשמר (אומת: tsc נקי + בדיקת-נוכחות hooks קריטיים; 0 פונקציונליות נמחקה).

דפים (← מוקאפ):
- בית — לוח: KPI + "תיקים לפי סטטוס" (bars) + כרטיס-אישורים + CTA כפול.
- ארכיון — filter-bar שטוח + טבלה נקייה + צ'יפי-סוג/תוצאה.
- הערות יו״ר — פריסה דו-טורית + טופס-הוספה חי + כרטיסי-הערה.
- ספריית-פסיקה — tabs קו-תחתון + כרטיסי-תוצאה halacha/קטע + AuthorityBadge.
- דף-תקדים — באנר-meta parchment + דו-טורי + provenance pills.
- פסיקה-חסרה — pill פתוחים + צ'יפי-סטטוס + CTA העלאה.
- יומונים — אזור-העלאה מקווקו + כרטיסי-digest + "ממתין" כתווית פסיבית.
- גרף — פאנל-צד שכבות/אנליטיקה + canvas parchment.
- אימון-סגנון — פורטרט: banner + KPI + אנטומיה + ביטויי-חתימה.
- מתודולוגיה — עורך-צ'קליסט + "חל על:" + canon chip.
- מיומנויות/סקריפטים — טבלאות אמיתיות + צ'יפי-סטטוס.
- הגדרות — sidenav דו-טורי + env-rows עם "ממתין ל-redeploy".
- דף-תיק — באנר-תיק parchment + tabs + timeline + "פתח עורך החלטה".
- תפעול — SectionHeaders + טבלת-שירותים + כרטיסי-שער gold-wash.
- compose — באנר-תיק + SOT pill + פריסה דו-טורית + "השלמה והעברה".

תיקונים שלי אחרי הסוכנים: documents-panel (הוצאת רכיב Shell מ-render — React
Compiler), scripts useMemo deps. /approvals כבר נבנה מחדש נאמנה (commit קודם).

בדיקות: npx tsc --noEmit ✓ · eslint ✓ (לבד מ-learning-panel:109 קיים-מראש).
שימור-פונקציונליות אומת. CI Docker build = שער סופי לפני deploy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-ui/src/components/precedents/link-related-dialog.tsx

@@ -128,60 +128,6 @@ function LinkDialog({ caseId, currentRelated, open, onOpenChange }: DialogProps)
   );
 }
 
-// ── Related Case Card ────────────────────────────────────────────────
-
-function RelatedCaseCard({ caseId, related }: { caseId: string; related: RelatedCase }) {
-  const { mutateAsync: unlinkCase, isPending } = useUnlinkRelatedCase(caseId);
-
-  async function handleUnlink() {
-    try {
-      await unlinkCase(related.id);
-      toast.success("הקישור הוסר");
-    } catch {
-      toast.error("שגיאה בהסרת הקישור");
-    }
-  }
-
-  return (
-    <div className="flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg border border-rule bg-surface">
-      <a
-        href={`/precedents/${related.id}`}
-        className="min-w-0 flex-1 hover:opacity-80 transition-opacity"
-      >
-        <div className="text-sm font-medium text-navy truncate">
-          {related.case_name || related.case_number}
-        </div>
-        <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-          {related.precedent_level && (
-            <Badge
-              variant="outline"
-              className={`text-[0.62rem] ${LEVEL_COLORS[related.precedent_level] ?? ""}`}
-            >
-              {LEVEL_LABELS[related.precedent_level] ?? related.precedent_level}
-            </Badge>
-          )}
-          {related.court && (
-            <span className="text-[0.7rem] text-ink-muted truncate">{related.court}</span>
-          )}
-          {related.date && (
-            <span className="text-[0.7rem] text-ink-muted tabular-nums" dir="ltr">
-              {related.date.slice(0, 10)}
-            </span>
-          )}
-        </div>
-      </a>
-      <button
-        onClick={handleUnlink}
-        disabled={isPending}
-        className="p-1 rounded hover:bg-danger-bg hover:text-danger transition-colors text-ink-muted disabled:opacity-40 shrink-0"
-        title="הסר קישור"
-      >
-        <X className="w-3.5 h-3.5" />
-      </button>
-    </div>
-  );
-}
-
 // ── Public section component ─────────────────────────────────────────
 
 type SectionProps = {
@@ -189,28 +135,68 @@ type SectionProps = {
   related: RelatedCase[];
 };
 
+/* Rail-styled citations card (mockup 08 side rail). Renders linked related
+ * decisions as a navy-headed card with arrow-prefixed rows; keeps the full
+ * link/unlink logic. Used in the precedent-detail side rail. */
 export function RelatedCasesSection({ caseId, related }: SectionProps) {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h3 className="text-navy text-sm font-semibold">
-          החלטות קשורות{related.length > 0 ? ` (${related.length})` : ""}
+    <div className="rounded-lg border border-rule bg-surface shadow-sm px-4 py-3.5 space-y-2.5">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-navy text-[0.92rem] font-semibold m-0">
+          ציטוטים מקושרים{related.length > 0 ? ` (${related.length})` : ""}
         </h3>
-        <Button variant="outline" size="sm" onClick={() => setDialogOpen(true)}>
-          <Link2 className="w-3.5 h-3.5 me-1" /> קשר החלטה
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 px-2 text-[0.72rem] border-rule"
+          onClick={() => setDialogOpen(true)}
+        >
+          <Link2 className="w-3 h-3 me-1" /> קשר
         </Button>
       </div>
 
       {related.length === 0 ? (
-        <p className="text-ink-muted text-sm">אין החלטות קשורות עדיין</p>
+        <p className="text-ink-muted text-[0.82rem] m-0">אין החלטות קשורות עדיין</p>
       ) : (
-        <div className="space-y-1.5">
+        <ul className="list-none p-0 m-0">
           {related.map((r) => (
-            <RelatedCaseCard key={r.id} caseId={caseId} related={r} />
+            <li
+              key={r.id}
+              className="flex items-start gap-2 py-2 border-b border-rule-soft last:border-b-0"
+            >
+              <span className="text-gold font-bold leading-6 shrink-0" aria-hidden>←</span>
+              <a
+                href={`/precedents/${r.id}`}
+                className="min-w-0 flex-1 group hover:opacity-90 transition-opacity"
+              >
+                <div className="text-[0.82rem] text-ink-soft leading-5 group-hover:text-navy">
+                  {r.case_name || r.case_number}
+                </div>
+                <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+                  {r.precedent_level && (
+                    <Badge
+                      variant="outline"
+                      className={`text-[0.6rem] ${LEVEL_COLORS[r.precedent_level] ?? ""}`}
+                    >
+                      {LEVEL_LABELS[r.precedent_level] ?? r.precedent_level}
+                    </Badge>
+                  )}
+                  {r.court && (
+                    <span className="text-[0.68rem] text-ink-muted truncate">{r.court}</span>
+                  )}
+                  {r.date && (
+                    <span className="text-[0.68rem] text-ink-muted tabular-nums" dir="ltr">
+                      {r.date.slice(0, 10)}
+                    </span>
+                  )}
+                </div>
+              </a>
+              <UnlinkButton caseId={caseId} relatedId={r.id} />
+            </li>
           ))}
-        </div>
+        </ul>
       )}
 
       <LinkDialog
@@ -222,3 +208,24 @@ export function RelatedCasesSection({ caseId, related }: SectionProps) {
     </div>
   );
 }
+
+function UnlinkButton({ caseId, relatedId }: { caseId: string; relatedId: string }) {
+  const { mutateAsync: unlinkCase, isPending } = useUnlinkRelatedCase(caseId);
+  return (
+    <button
+      onClick={async () => {
+        try {
+          await unlinkCase(relatedId);
+          toast.success("הקישור הוסר");
+        } catch {
+          toast.error("שגיאה בהסרת הקישור");
+        }
+      }}
+      disabled={isPending}
+      className="p-0.5 rounded hover:bg-danger-bg hover:text-danger transition-colors text-ink-muted disabled:opacity-40 shrink-0"
+      title="הסר קישור"
+    >
+      <X className="w-3 h-3" />
+    </button>
+  );
+}