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/layout/__tests__/resize-handle.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import { ResizeHandle } from '../resize-handle';
+
+describe('ResizeHandle', () => {
+  it('should render with separator role', () => {
+    const { getByRole } = render(
+      <ResizeHandle onResize={vi.fn()} />
+    );
+    const handle = getByRole('separator');
+    expect(handle).toBeInTheDocument();
+    expect(handle).toHaveAttribute('aria-orientation', 'vertical');
+    expect(handle).toHaveAttribute('tabindex', '0');
+  });
+
+  describe('keyboard interaction', () => {
+    it('should call onResize with negative delta on ArrowLeft', () => {
+      const onResize = vi.fn();
+      const onResizeEnd = vi.fn();
+      const { getByRole } = render(
+        <ResizeHandle onResize={onResize} onResizeEnd={onResizeEnd} />
+      );
+      const handle = getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowLeft' });
+      expect(onResize).toHaveBeenCalledWith(-10);
+      expect(onResizeEnd).toHaveBeenCalled();
+    });
+
+    it('should call onResize with positive delta on ArrowRight', () => {
+      const onResize = vi.fn();
+      const onResizeEnd = vi.fn();
+      const { getByRole } = render(
+        <ResizeHandle onResize={onResize} onResizeEnd={onResizeEnd} />
+      );
+      const handle = getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowRight' });
+      expect(onResize).toHaveBeenCalledWith(10);
+      expect(onResizeEnd).toHaveBeenCalled();
+    });
+
+    it('should not respond to other keys', () => {
+      const onResize = vi.fn();
+      const { getByRole } = render(
+        <ResizeHandle onResize={onResize} />
+      );
+      const handle = getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowUp' });
+      fireEvent.keyDown(handle, { key: 'Enter' });
+      fireEvent.keyDown(handle, { key: 'a' });
+      expect(onResize).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('double-click', () => {
+    it('should call onDoubleClick when provided', () => {
+      const onDoubleClick = vi.fn();
+      const { getByRole } = render(
+        <ResizeHandle onResize={vi.fn()} onDoubleClick={onDoubleClick} />
+      );
+      const handle = getByRole('separator');
+      fireEvent.doubleClick(handle);
+      expect(onDoubleClick).toHaveBeenCalledOnce();
+    });
+
+    it('should not error when onDoubleClick is not provided', () => {
+      const { getByRole } = render(
+        <ResizeHandle onResize={vi.fn()} />
+      );
+      const handle = getByRole('separator');
+      expect(() => fireEvent.doubleClick(handle)).not.toThrow();
+    });
+  });
+
+  describe('mouse drag', () => {
+    it('should call onResize during mousemove after mousedown', () => {
+      const onResize = vi.fn();
+      const { getByRole } = render(
+        <ResizeHandle onResize={onResize} />
+      );
+      const handle = getByRole('separator');
+
+      fireEvent.mouseDown(handle, { clientX: 100 });
+      fireEvent.mouseMove(document, { clientX: 115 });
+      expect(onResize).toHaveBeenCalledWith(15);
+    });
+
+    it('should call onResizeEnd on mouseup', () => {
+      const onResizeEnd = vi.fn();
+      const { getByRole } = render(
+        <ResizeHandle onResize={vi.fn()} onResizeEnd={onResizeEnd} />
+      );
+      const handle = getByRole('separator');
+
+      fireEvent.mouseDown(handle, { clientX: 100 });
+      fireEvent.mouseUp(document);
+      expect(onResizeEnd).toHaveBeenCalledOnce();
+    });
+
+    it('should not call onResize on mousemove without mousedown', () => {
+      const onResize = vi.fn();
+      render(<ResizeHandle onResize={onResize} />);
+      fireEvent.mouseMove(document, { clientX: 200 });
+      expect(onResize).not.toHaveBeenCalled();
+    });
+  });
+});