web-ui/src/components/goldset/goldset-panel.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { Check, X, ChevronDown, ChevronLeft } from "lucide-react";
+import { Check, X, ChevronDown, ChevronLeft, Info } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   useGoldset, useGoldsetScore, useTagGoldset, useCreateGoldsetSample,
   type GoldsetItem,
@@ -32,7 +33,10 @@ function cleanCitation(s: string | null | undefined): string {
 }
 
 function isTagged(it: GoldsetItem): boolean {
-  return it.is_holding !== null;
+  // Fully tagged only when ALL THREE answers are set — otherwise, in
+  // "hide tagged" mode, a card would vanish the moment is_holding is clicked,
+  // before correct_type / quote_complete can be set.
+  return it.is_holding !== null && it.quote_complete !== null && !!it.correct_type;
 }
 
 // ─── Score panel ──────────────────────────────────────────────────────────────
@@ -86,6 +90,82 @@ function ScorePanel({ batch }: { batch: string }) {
   );
 }
 
+// ─── Rule-type help (info popover) ────────────────────────────────────────────
+
+const TYPE_HELP: { label: string; def: string; test: string; example: string }[] = [
+  {
+    label: "מחייבת",
+    def: "העיקרון שהיה הכרחי להכרעה — ה-holding האמיתי. בר-הסתמכות מלא.",
+    test: "מבחן וומבו: הפוך את הכלל — אם התוצאה הייתה משתנה → מחייבת.",
+    example: "נטל ההוכחה בהיטל השבחה מוטל על הוועדה המקומית.",
+  },
+  {
+    label: "פרשני",
+    def: "קביעה שמפרשת הוראת-חוק / מונח / תכנית (מה המשמעות של סעיף X).",
+    test: "עונה ל'מה פירוש הנורמה?' ולא ל'מה הדין?'.",
+    example: "תכלית הפטור לפי ס' 19(ב)(4) היא לעודד פעילות ציבורית.",
+  },
+  {
+    label: "פרוצדורלי",
+    def: "כלל סדר-דין: מועדים, סמכות, זכות-עמידה, מיצוי הליכים, נטל.",
+    test: "עוסק ב'איך' מתנהל ההליך, לא במהות התכנונית.",
+    example: "המועד להגשת ערר הוא 30 יום.",
+  },
+  {
+    label: "משכנע",
+    def: "אסמכתה לא-מחייבת את הערכאה — שכנוע בלבד.",
+    test: "מקור שאינו כובל: ועדת-ערר אחרת, דעת-מיעוט, ספרות.",
+    example: "ועדת ערר ירושלים מסתמכת על החלטת ועדת ערר ממחוז אחר.",
+  },
+  {
+    label: "יישום",
+    def: "החלת כלל על עובדות התיק הספציפי — תלוי-עובדות, לא בר-הכללה (לרוב 'לא הלכה').",
+    test: "מכיל 'במקרה דנן', שמות-צדדים, סכומים, המבנה הקונקרטי.",
+    example: "במקרה דנן ההיתר בטל כי השומה שגתה ב-12,000 ₪.",
+  },
+  {
+    label: "אמרת-אגב",
+    def: "נאמר אגב אורחא, לא הכרחי להכרעה; הערכאה לא הכריעה בו. לא מחייב.",
+    test: "מבחן וומבו הפוך: היפוך הכלל לא משנה את התוצאה. דגלים: 'למעלה מן הצורך', 'מבלי לקבוע מסמרות'.",
+    example: "אף שאיננו נדרשים להכריע, נעיר כי ייתכן ש...",
+  },
+];
+
+function RuleTypeHelp() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center text-ink-muted hover:text-gold-deep"
+          aria-label="הסבר על סוגי ההלכה"
+          title="הסבר על הסוגים"
+        >
+          <Info className="w-3.5 h-3.5" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-[min(92vw,560px)] max-h-[70vh] overflow-y-auto p-0">
+        <div className="p-3 border-b border-rule">
+          <p className="font-semibold text-navy text-sm">סוגי ההלכה — במה הם נבדלים</p>
+          <p className="text-[0.72rem] text-ink-muted mt-0.5">
+            כלל-אצבע: סימנת "הלכה" → לרוב מחייבת / פרשני / פרוצדורלי / משכנע. סימנת "לא" → לרוב יישום / אמרת-אגב.
+          </p>
+        </div>
+        <ul className="divide-y divide-rule-soft">
+          {TYPE_HELP.map((t) => (
+            <li key={t.label} className="p-3 space-y-1" dir="rtl">
+              <div className="font-semibold text-navy text-sm">{t.label}</div>
+              <div className="text-[0.78rem] text-ink-soft leading-relaxed">{t.def}</div>
+              <div className="text-[0.72rem] text-ink-muted"><span className="font-medium">מבחן:</span> {t.test}</div>
+              <div className="text-[0.72rem] text-ink-muted"><span className="font-medium">דוגמה:</span> {t.example}</div>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // ─── Tag card ─────────────────────────────────────────────────────────────────
 
 function TagCard({
@@ -140,7 +220,10 @@ function TagCard({
         </div>
         {/* correct_type */}
         <div>
-          <div className="text-[0.7rem] text-ink-muted mb-1">הסוג הנכון</div>
+          <div className="text-[0.7rem] text-ink-muted mb-1 flex items-center gap-1">
+            הסוג הנכון
+            <RuleTypeHelp />
+          </div>
           <div className="flex gap-1 flex-wrap">
             {TYPES.map((t) => (
               <Button key={t.value} size="sm"