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/__tests__/email-selection.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useEmailStore } from '../email-store';
+
+function makeEmail(id: string, threadId = `thread-${id}`) {
+  return {
+    id,
+    threadId,
+    mailboxIds: { inbox: true },
+    keywords: {},
+    size: 100,
+    receivedAt: new Date().toISOString(),
+    from: [{ name: 'Test', email: 'test@example.com' }],
+    to: [{ name: 'User', email: 'user@example.com' }],
+    subject: `Email ${id}`,
+    preview: 'preview',
+    hasAttachment: false,
+    textBody: [],
+    htmlBody: [],
+    bodyValues: {},
+  };
+}
+
+describe('email-store selection', () => {
+  beforeEach(() => {
+    useEmailStore.setState({
+      emails: [makeEmail('a'), makeEmail('b'), makeEmail('c'), makeEmail('d'), makeEmail('e')],
+      selectedEmailIds: new Set(),
+      lastSelectedEmailId: null,
+      selectedEmail: null,
+    });
+  });
+
+  describe('toggleEmailSelection', () => {
+    it('should add email to selection', () => {
+      useEmailStore.getState().toggleEmailSelection('b');
+      expect(useEmailStore.getState().selectedEmailIds.has('b')).toBe(true);
+      expect(useEmailStore.getState().lastSelectedEmailId).toBe('b');
+    });
+
+    it('should remove email from selection when toggled again', () => {
+      useEmailStore.getState().toggleEmailSelection('b');
+      useEmailStore.getState().toggleEmailSelection('b');
+      expect(useEmailStore.getState().selectedEmailIds.has('b')).toBe(false);
+    });
+
+    it('should support selecting multiple emails', () => {
+      useEmailStore.getState().toggleEmailSelection('a');
+      useEmailStore.getState().toggleEmailSelection('c');
+      const ids = useEmailStore.getState().selectedEmailIds;
+      expect(ids.has('a')).toBe(true);
+      expect(ids.has('c')).toBe(true);
+      expect(ids.size).toBe(2);
+    });
+  });
+
+  describe('selectRangeEmails', () => {
+    it('should select range from last selected to target (forward)', () => {
+      useEmailStore.getState().toggleEmailSelection('b'); // anchor at index 1
+      useEmailStore.getState().selectRangeEmails('d'); // target at index 3
+      const ids = useEmailStore.getState().selectedEmailIds;
+      expect(ids.has('b')).toBe(true);
+      expect(ids.has('c')).toBe(true);
+      expect(ids.has('d')).toBe(true);
+      expect(ids.size).toBe(3);
+    });
+
+    it('should select range backward', () => {
+      useEmailStore.getState().toggleEmailSelection('d'); // anchor at index 3
+      useEmailStore.getState().selectRangeEmails('b'); // target at index 1
+      const ids = useEmailStore.getState().selectedEmailIds;
+      expect(ids.has('b')).toBe(true);
+      expect(ids.has('c')).toBe(true);
+      expect(ids.has('d')).toBe(true);
+      expect(ids.size).toBe(3);
+    });
+
+    it('should use first email as anchor when no previous selection', () => {
+      useEmailStore.getState().selectRangeEmails('c'); // no anchor → uses first email 'a'
+      const ids = useEmailStore.getState().selectedEmailIds;
+      expect(ids.has('a')).toBe(true);
+      expect(ids.has('b')).toBe(true);
+      expect(ids.has('c')).toBe(true);
+      expect(ids.size).toBe(3);
+    });
+
+    it('should add to existing selection', () => {
+      useEmailStore.getState().toggleEmailSelection('a');
+      useEmailStore.getState().toggleEmailSelection('b'); // anchor now at 'b'
+      useEmailStore.getState().selectRangeEmails('d');
+      const ids = useEmailStore.getState().selectedEmailIds;
+      // 'a' still selected, plus b-d range
+      expect(ids.has('a')).toBe(true);
+      expect(ids.has('b')).toBe(true);
+      expect(ids.has('c')).toBe(true);
+      expect(ids.has('d')).toBe(true);
+      expect(ids.size).toBe(4);
+    });
+
+    it('should handle single-item range', () => {
+      useEmailStore.getState().toggleEmailSelection('c');
+      useEmailStore.getState().selectRangeEmails('c');
+      const ids = useEmailStore.getState().selectedEmailIds;
+      expect(ids.has('c')).toBe(true);
+      expect(ids.size).toBe(1);
+    });
+  });
+
+  describe('selectAllEmails', () => {
+    it('should select all emails', () => {
+      useEmailStore.getState().selectAllEmails();
+      expect(useEmailStore.getState().selectedEmailIds.size).toBe(5);
+    });
+  });
+
+  describe('clearSelection', () => {
+    it('should clear all selections and reset anchor', () => {
+      useEmailStore.getState().toggleEmailSelection('a');
+      useEmailStore.getState().toggleEmailSelection('b');
+      useEmailStore.getState().clearSelection();
+      expect(useEmailStore.getState().selectedEmailIds.size).toBe(0);
+      expect(useEmailStore.getState().lastSelectedEmailId).toBeNull();
+    });
+  });
+});

stores/__tests__/ui-store.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useUIStore } from '../ui-store';
+
+describe('ui-store', () => {
+  beforeEach(() => {
+    useUIStore.setState({
+      activeView: 'list',
+      sidebarOpen: false,
+      tabletListVisible: true,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: true,
+      sidebarWidth: 256,
+      emailListWidth: 384,
+      sidebarCollapsed: false,
+    });
+    localStorage.clear();
+  });
+
+  describe('setSidebarWidth', () => {
+    it('should clamp to minimum', () => {
+      useUIStore.getState().setSidebarWidth(50);
+      expect(useUIStore.getState().sidebarWidth).toBe(180);
+    });
+
+    it('should clamp to maximum', () => {
+      useUIStore.getState().setSidebarWidth(999);
+      expect(useUIStore.getState().sidebarWidth).toBe(400);
+    });
+
+    it('should accept values within range', () => {
+      useUIStore.getState().setSidebarWidth(300);
+      expect(useUIStore.getState().sidebarWidth).toBe(300);
+    });
+  });
+
+  describe('setEmailListWidth', () => {
+    it('should clamp to minimum', () => {
+      useUIStore.getState().setEmailListWidth(100);
+      expect(useUIStore.getState().emailListWidth).toBe(240);
+    });
+
+    it('should clamp to maximum', () => {
+      useUIStore.getState().setEmailListWidth(1000);
+      expect(useUIStore.getState().emailListWidth).toBe(600);
+    });
+
+    it('should accept values within range', () => {
+      useUIStore.getState().setEmailListWidth(450);
+      expect(useUIStore.getState().emailListWidth).toBe(450);
+    });
+  });
+
+  describe('resetSidebarWidth', () => {
+    it('should reset to default (256)', () => {
+      useUIStore.getState().setSidebarWidth(350);
+      useUIStore.getState().resetSidebarWidth();
+      expect(useUIStore.getState().sidebarWidth).toBe(256);
+    });
+
+    it('should persist to localStorage', () => {
+      useUIStore.getState().setSidebarWidth(350);
+      useUIStore.getState().setEmailListWidth(500);
+      useUIStore.getState().resetSidebarWidth();
+      const stored = JSON.parse(localStorage.getItem('column-widths')!);
+      expect(stored.sidebarWidth).toBe(256);
+      expect(stored.emailListWidth).toBe(500);
+    });
+  });
+
+  describe('resetEmailListWidth', () => {
+    it('should reset to default (384)', () => {
+      useUIStore.getState().setEmailListWidth(550);
+      useUIStore.getState().resetEmailListWidth();
+      expect(useUIStore.getState().emailListWidth).toBe(384);
+    });
+
+    it('should persist to localStorage', () => {
+      useUIStore.getState().setSidebarWidth(300);
+      useUIStore.getState().setEmailListWidth(550);
+      useUIStore.getState().resetEmailListWidth();
+      const stored = JSON.parse(localStorage.getItem('column-widths')!);
+      expect(stored.sidebarWidth).toBe(300);
+      expect(stored.emailListWidth).toBe(384);
+    });
+  });
+
+  describe('persistColumnWidths', () => {
+    it('should save current widths to localStorage', () => {
+      useUIStore.getState().setSidebarWidth(280);
+      useUIStore.getState().setEmailListWidth(420);
+      useUIStore.getState().persistColumnWidths();
+      const stored = JSON.parse(localStorage.getItem('column-widths')!);
+      expect(stored.sidebarWidth).toBe(280);
+      expect(stored.emailListWidth).toBe(420);
+    });
+  });
+
+  describe('sidebarCollapsed', () => {
+    it('should toggle collapsed state', () => {
+      expect(useUIStore.getState().sidebarCollapsed).toBe(false);
+      useUIStore.getState().toggleSidebarCollapsed();
+      expect(useUIStore.getState().sidebarCollapsed).toBe(true);
+      useUIStore.getState().toggleSidebarCollapsed();
+      expect(useUIStore.getState().sidebarCollapsed).toBe(false);
+    });
+
+    it('should set collapsed directly', () => {
+      useUIStore.getState().setSidebarCollapsed(true);
+      expect(useUIStore.getState().sidebarCollapsed).toBe(true);
+    });
+  });
+});

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

stores/ui-store.ts

@@ -4,6 +4,14 @@ import { create } from "zustand";
 
 export type ActiveView = "sidebar" | "list" | "viewer";
 
+// Column width constraints (in pixels)
+const SIDEBAR_MIN = 180;
+const SIDEBAR_MAX = 400;
+const SIDEBAR_DEFAULT = 256;
+const EMAIL_LIST_MIN = 240;
+const EMAIL_LIST_MAX = 600;
+const EMAIL_LIST_DEFAULT = 384;
+
 interface UIState {
   // Mobile view state
   activeView: ActiveView;
@@ -17,12 +25,26 @@ interface UIState {
   isTablet: boolean;
   isDesktop: boolean;
 
+  // Resizable column widths (desktop only)
+  sidebarWidth: number;
+  emailListWidth: number;
+
+  // Sidebar collapsed state (desktop)
+  sidebarCollapsed: boolean;
+
   // Actions
   setActiveView: (view: ActiveView) => void;
   setSidebarOpen: (open: boolean) => void;
   toggleSidebar: () => void;
   setTabletListVisible: (visible: boolean) => void;
   setDeviceType: (isMobile: boolean, isTablet: boolean, isDesktop: boolean) => void;
+  setSidebarWidth: (width: number) => void;
+  setEmailListWidth: (width: number) => void;
+  resetSidebarWidth: () => void;
+  resetEmailListWidth: () => void;
+  persistColumnWidths: () => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+  toggleSidebarCollapsed: () => void;
 
   // Navigation helpers
   showEmailList: () => void;
@@ -30,6 +52,8 @@ interface UIState {
   goBack: () => void;
 }
 
+// Column widths are hydrated from localStorage by the page component on mount
+
 export const useUIStore = create<UIState>((set, get) => ({
   // Initial state (SSR-safe defaults)
   activeView: "list",
@@ -38,6 +62,9 @@ export const useUIStore = create<UIState>((set, get) => ({
   isMobile: false,
   isTablet: false,
   isDesktop: true,
+  sidebarWidth: SIDEBAR_DEFAULT,
+  emailListWidth: EMAIL_LIST_DEFAULT,
+  sidebarCollapsed: false,
 
   // Actions
   setActiveView: (view) => set({ activeView: view }),
@@ -51,6 +78,38 @@ export const useUIStore = create<UIState>((set, get) => ({
   setDeviceType: (isMobile, isTablet, isDesktop) =>
     set({ isMobile, isTablet, isDesktop }),
 
+  setSidebarWidth: (width) =>
+    set({ sidebarWidth: Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, width)) }),
+
+  setEmailListWidth: (width) =>
+    set({ emailListWidth: Math.min(EMAIL_LIST_MAX, Math.max(EMAIL_LIST_MIN, width)) }),
+
+  resetSidebarWidth: () => {
+    set({ sidebarWidth: SIDEBAR_DEFAULT });
+    const { emailListWidth } = get();
+    try {
+      localStorage.setItem("column-widths", JSON.stringify({ sidebarWidth: SIDEBAR_DEFAULT, emailListWidth }));
+    } catch { /* localStorage may be unavailable */ }
+  },
+
+  resetEmailListWidth: () => {
+    set({ emailListWidth: EMAIL_LIST_DEFAULT });
+    const { sidebarWidth } = get();
+    try {
+      localStorage.setItem("column-widths", JSON.stringify({ sidebarWidth, emailListWidth: EMAIL_LIST_DEFAULT }));
+    } catch { /* localStorage may be unavailable */ }
+  },
+
+  persistColumnWidths: () => {
+    const { sidebarWidth, emailListWidth } = get();
+    try {
+      localStorage.setItem("column-widths", JSON.stringify({ sidebarWidth, emailListWidth }));
+    } catch { /* localStorage may be unavailable */ }
+  },
+
+  setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+  toggleSidebarCollapsed: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+
   // Navigation helpers for mobile
   showEmailList: () => {
     const { isMobile } = get();