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)
This commit is contained in:
Linus Rath
@@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user