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)

stores/email-store.ts

@@ -44,6 +44,8 @@ interface EmailStore {
   setSearchQuery: (query: string) => void;
   setQuota: (quota: { used: number; total: number } | null) => void;
   toggleEmailSelection: (emailId: string) => void;
+  selectRangeEmails: (targetEmailId: string) => void;
+  lastSelectedEmailId: string | null;
   selectAllEmails: () => void;
   clearSelection: () => void;
 
@@ -106,6 +108,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
   quota: null,
   processingReadStatus: new Set(),
   selectedEmailIds: new Set(),
+  lastSelectedEmailId: null,
   hasMoreEmails: false,
   totalEmails: 0,
   isPushConnected: false,
@@ -127,7 +130,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
 
   setEmails: (emails) => set({ emails }),
   setMailboxes: (mailboxes) => set({ mailboxes }),
-  selectEmail: (email) => set({ selectedEmail: email }),
+  selectEmail: (email) => set({ selectedEmail: email, lastSelectedEmailId: email?.id ?? get().lastSelectedEmailId }),
   selectMailbox: (mailboxId) => set({
     selectedMailbox: mailboxId,
     selectedEmail: null,
@@ -150,6 +153,22 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
     } else {
       newSelection.add(emailId);
     }
+    set({ selectedEmailIds: newSelection, lastSelectedEmailId: emailId });
+  },
+
+  selectRangeEmails: (targetEmailId) => {
+    const { emails, lastSelectedEmailId, selectedEmailIds } = get();
+    const anchorId = lastSelectedEmailId || emails[0]?.id;
+    if (!anchorId) return;
+    const anchorIndex = emails.findIndex(e => e.id === anchorId);
+    const targetIndex = emails.findIndex(e => e.id === targetEmailId);
+    if (anchorIndex === -1 || targetIndex === -1) return;
+    const start = Math.min(anchorIndex, targetIndex);
+    const end = Math.max(anchorIndex, targetIndex);
+    const newSelection = new Set(selectedEmailIds);
+    for (let i = start; i <= end; i++) {
+      newSelection.add(emails[i].id);
+    }
     set({ selectedEmailIds: newSelection });
   },
 
@@ -160,7 +179,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
   },
 
   clearSelection: () => {
-    set({ selectedEmailIds: new Set() });
+    set({ selectedEmailIds: new Set(), lastSelectedEmailId: null });
   },
 
   // JMAP operations