feat: resizable columns, nav rail overhaul, multi-select & drag-drop, UI polish

Resizable Columns
- Add ResizeHandle component with mouse drag, keyboard (Arrow keys),
  and double-click to reset to default width
- Add sidebarWidth/emailListWidth to ui-store with clamping + persistence
- Wire resize handles between sidebar/email-list panels on desktop

Navigation Rail Overhaul
- Move StorageQuotaCircle, push-status, sign-out from Sidebar to NavigationRail
- Interactive SVG ring with popover breakdown (used/free/total)
- Sidebar collapse state lifted to ui-store
- Show total email count per mailbox alongside unread badge

Email Multi-Selection & Drag-and-Drop
- Ctrl+Click (toggle) and Shift+Click (range) on all list items
- Add selectRangeEmails and lastSelectedEmailId to email-store
- Enable drag-and-drop on thread items and thread headers
- useEmailDrag accepts optional threadEmails for full-thread drag

Email Viewer Layout
- Remove card wrapper for cleaner full-width reading
- Always render HTML body when available
- Adjust skeleton loader to match flat layout

Modal & UI Polish
- Standardise backdrops, close buttons, padding, border-radius, transitions
- Migrate template-string classNames to cn() in settings
- Unify focus-ring token to ring-ring on form controls

i18n
- Add storage_used/free/total keys to all 8 locales

Dev Mock JMAP Server (new, gated by DEV_MOCK_JMAP=true)
- Session, Mailbox/Email/Thread/Identity CRUD, back-references, upload
- GET /download with Content-Disposition, GET /eventsource SSE

Tests (46 new)
- ui-store (13), email-selection (10), resize-handle (9), mock-server (14)

components/email/thread-email-item.tsx

@@ -5,6 +5,8 @@ import { Email } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
 import { Paperclip, Star, Circle } from "lucide-react";
+import { useEmailDrag } from "@/hooks/use-email-drag";
+import { useEmailStore } from "@/stores/email-store";
 
 interface ThreadEmailItemProps {
   email: Email;
@@ -24,24 +26,46 @@ export function ThreadEmailItem({
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
   const sender = email.from?.[0];
+  const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails } = useEmailStore();
+  const isChecked = selectedEmailIds.has(email.id);
+
+  const { dragHandlers, isDragging } = useEmailDrag({
+    email,
+    sourceMailboxId: selectedMailbox,
+  });
 
   const handleContextMenu = (e: React.MouseEvent) => {
     onContextMenu?.(e, email);
   };
 
+  const handleClick = (e: React.MouseEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      toggleEmailSelection(email.id);
+    } else if (e.shiftKey) {
+      e.preventDefault();
+      selectRangeEmails(email.id);
+    } else {
+      onClick?.();
+    }
+  };
+
   return (
     <div
+      {...dragHandlers}
       className={cn(
         "relative cursor-pointer transition-all duration-150",
-        "pl-12 pr-4 py-2.5", // Indented for thread hierarchy
+        "pl-12 pr-4 py-2.5",
         "border-l-2 border-l-transparent",
         selected
           ? "bg-accent border-l-primary"
           : "hover:bg-muted/50",
         isUnread && !selected && "bg-accent/20",
-        !isLast && "border-b border-border/30"
+        !isLast && "border-b border-border/30",
+        isChecked && "ring-2 ring-primary/20 bg-accent/40",
+        isDragging && "opacity-50 scale-[0.98] ring-2 ring-primary/30"
       )}
-      onClick={onClick}
+      onClick={handleClick}
       onContextMenu={handleContextMenu}
     >
       <div className="flex items-start gap-3">