home: split cases table by appeal type + add appeal-type chart

Backend (cases listing)
- /api/cases: also return updated_at, created_at, practice_area,
  appeal_subtype, subject. The detail-mode response was previously
  dropping these even though db.list_cases reads them, leaving the
  UI's "תחום" and "עודכן" columns blank.

Frontend
- Split the home table into two: רישוי (1xxx) and היטל השבחה ופיצויים
  (8xxx + 9xxx), bucketing on appeal_subtype with a case-number-prefix
  fallback. The "תחום" column is now redundant and removed.
- New AppealTypeBars chart in the right rail next to the existing
  status donut.
- Donut: switch to a vertical layout (donut on top, legend below in a
  3-col grid) so labels like "חדש / בעיבוד" no longer wrap inside the
  320px sidebar; counts now align in a tabular column.
- CasesTable accepts emptyText/searchPlaceholder so each split table
  has its own copy.

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

web-ui/src/components/cases/status-donut.tsx

@@ -55,29 +55,32 @@ export function StatusDonut({ cases }: { cases?: Case[] }) {
           .join(", ")})`;
 
   return (
-    <div className="flex items-center gap-6">
+    <div className="flex flex-col items-center gap-5">
       <div
-        className="relative w-[140px] h-[140px] rounded-full shadow-sm"
+        className="relative w-[150px] h-[150px] rounded-full shadow-sm"
         style={{ background }}
         aria-label="פיזור תיקים לפי סטטוס"
       >
-        <div className="absolute inset-[18px] bg-surface rounded-full flex flex-col items-center justify-center">
-          <span className="font-display text-2xl font-black text-navy leading-none">
+        <div className="absolute inset-[20px] bg-surface rounded-full flex flex-col items-center justify-center">
+          <span className="font-display text-3xl font-black text-navy leading-none tabular-nums">
             {total}
           </span>
-          <span className="text-[0.7rem] text-ink-muted mt-1">תיקים</span>
+          <span className="text-[0.7rem] text-ink-muted mt-1 tracking-wide">תיקים</span>
         </div>
       </div>
 
-      <ul className="flex flex-col gap-1.5 text-sm">
+      <ul className="grid grid-cols-1 gap-1.5 text-sm w-full">
         {(Object.keys(GROUP_META) as GroupKey[]).map((k) => (
-          <li key={k} className="flex items-center gap-2">
+          <li
+            key={k}
+            className="grid grid-cols-[auto_1fr_auto] items-center gap-2 py-1 px-2 rounded-md hover:bg-rule-soft/40 transition-colors"
+          >
             <span
-              className="inline-block w-2.5 h-2.5 rounded-full"
+              className="inline-block w-2.5 h-2.5 rounded-full shrink-0"
               style={{ background: GROUP_META[k].color }}
             />
-            <span className="text-ink-soft">{GROUP_META[k].label}</span>
-            <span className="text-ink-muted tabular-nums me-auto ms-1">
+            <span className="text-ink-soft truncate">{GROUP_META[k].label}</span>
+            <span className="text-ink font-semibold tabular-nums">
               {counts[k]}
             </span>
           </li>