feat: redesign day picker with expandable calendar, status markers & Playwright E2E testing

- Replace modal calendar with inline expandable calendar widget integrated into the day picker.
- Add status indicator dots (attended/absent/pending) to month calendar grid matching day picker.
- Disable and gray out weekend days in calendar when weekend schedule is turned off.
- Redesign extend bar with integrated handle that aligns with the palette.
- Remove start-to-end timing on Today screen's class time rail, showing only start time.
- Implement Playwright E2E and visual testing suite with multi-screen capture scripts.
- Add cascade DELETE endpoints for subjects and versioned recurring timetable entries.

scripts/capture-all.mjs

@@ -0,0 +1,118 @@
+import { chromium } from 'playwright';
+import { mkdirSync } from 'node:fs';
+
+const OUT_DIR = './screenshots';
+mkdirSync(OUT_DIR, { recursive: true });
+
+async function run() {
+  // Update profile
+  await fetch('http://localhost:4000/api/v1/profile', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      name: 'Sam Taylor',
+      college: 'Northbridge University',
+      programme: 'B.Tech Computer Science',
+      semester: 'Semester 3',
+    }),
+  });
+
+  // Get subjects or create if not present
+  let subjects = await fetch('http://localhost:4000/api/v1/subjects').then(r => r.json());
+  if (!subjects.length) {
+    await fetch('http://localhost:4000/api/v1/subjects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: 'Data Structures & Algorithms',
+        code: 'CS201',
+        shortName: 'DSA',
+        classType: 'Theory',
+        defaultRoom: 'Hall 101',
+        color: '#0559FA',
+      }),
+    });
+    await fetch('http://localhost:4000/api/v1/subjects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: 'Database Management Systems',
+        code: 'CS202',
+        shortName: 'DBMS',
+        classType: 'Lab',
+        defaultRoom: 'Lab 3',
+        color: '#9B4BA4',
+      }),
+    });
+    subjects = await fetch('http://localhost:4000/api/v1/subjects').then(r => r.json());
+  }
+
+  const now = new Date();
+  const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+  // Add one-off class for today
+  await fetch('http://localhost:4000/api/v1/schedule', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      subjectId: subjects[0].id,
+      date: dateStr,
+      startTime: '09:00',
+      endTime: '10:00',
+      room: 'Hall 101',
+    }),
+  }).catch(() => {});
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+    hasTouch: true,
+  });
+
+  const page = await context.newPage();
+
+  console.log('Capturing Today...');
+  await page.goto('http://127.0.0.1:3000/');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/01-today.png` });
+
+  console.log('Capturing Timetable...');
+  await page.goto('http://127.0.0.1:3000/timetable');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/02-timetable.png` });
+
+  console.log('Capturing Attendance...');
+  await page.goto('http://127.0.0.1:3000/attendance');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/03-attendance.png` });
+
+  console.log('Capturing Settings...');
+  await page.goto('http://127.0.0.1:3000/settings');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/04-settings.png` });
+
+  console.log('Capturing Account...');
+  await page.goto('http://127.0.0.1:3000/account');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/05-account.png` });
+
+  console.log('Capturing Subject Details...');
+  await page.goto(`http://127.0.0.1:3000/subjects/${subjects[0].id}`);
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/06-subject-details.png` });
+
+  console.log('Capturing Onboarding...');
+  await page.goto('http://127.0.0.1:3000/onboarding');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/07-onboarding.png` });
+
+  await browser.close();
+  console.log('All screenshots captured successfully!');
+}
+
+run().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

scripts/capture-friday.mjs

@@ -0,0 +1,23 @@
+import { chromium } from 'playwright';
+
+async function captureFriday() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+  });
+  const page = await context.newPage();
+  await page.goto('http://127.0.0.1:3000/');
+  await page.waitForTimeout(2000);
+  // Click on the Friday date card (date number 4)
+  const fridayCell = page.locator('text=fri').locator('..');
+  if (await fridayCell.isVisible()) {
+    await fridayCell.click();
+    await page.waitForTimeout(1000);
+  }
+  await page.screenshot({ path: './screenshots/01-today-friday.png' });
+  await browser.close();
+}
+
+captureFriday().catch(console.error);

scripts/serve-dist.mjs

@@ -0,0 +1,53 @@
+import { createServer } from 'node:http';
+import { readFileSync, existsSync, statSync } from 'node:fs';
+import { join, extname } from 'node:path';
+
+const PORT = 3000;
+const DIST = join(process.cwd(), 'dist-web');
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.ico': 'image/x-icon',
+  '.svg': 'image/svg+xml',
+  '.ttf': 'font/ttf',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+};
+
+const server = createServer((req, res) => {
+  const url = new URL(req.url || '/', `http://localhost:${PORT}`);
+  let pathname = decodeURIComponent(url.pathname);
+  if (pathname === '/') pathname = '/index.html';
+  
+  let filePath = join(DIST, pathname);
+  if (!existsSync(filePath) || statSync(filePath).isDirectory()) {
+    if (existsSync(join(DIST, `${pathname}.html`))) {
+      filePath = join(DIST, `${pathname}.html`);
+    } else if (existsSync(join(filePath, 'index.html'))) {
+      filePath = join(filePath, 'index.html');
+    } else {
+      filePath = join(DIST, 'index.html');
+    }
+  }
+
+  const ext = extname(filePath);
+  const contentType = MIME[ext] || 'application/octet-stream';
+
+  try {
+    const data = readFileSync(filePath);
+    res.writeHead(200, { 'Content-Type': contentType });
+    res.end(data);
+  } catch (err) {
+    res.writeHead(404);
+    res.end('Not found');
+  }
+});
+
+server.listen(PORT, '127.0.0.1', () => {
+  console.log(`Static server running at http://127.0.0.1:${PORT}`);
+});

scripts/take-screenshots.mjs

@@ -0,0 +1,66 @@
+import { chromium } from 'playwright';
+import { mkdirSync } from 'node:fs';
+
+const OUT_DIR = './screenshots';
+mkdirSync(OUT_DIR, { recursive: true });
+
+async function capture() {
+  const browser = await chromium.launch({ headless: true });
+  
+  // iPhone 14 dimensions & scale
+  const context = await browser.newContext({
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+    hasTouch: true,
+  });
+
+  const page = await context.newPage();
+
+  console.log('Navigating to Today screen...');
+  await page.goto('http://127.0.0.1:3000/');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: `${OUT_DIR}/01-today.png`, fullPage: false });
+
+  console.log('Navigating to Timetable...');
+  const timetableTab = page.locator('text=Timetable');
+  if (await timetableTab.isVisible()) {
+    await timetableTab.click();
+    await page.waitForTimeout(1500);
+    await page.screenshot({ path: `${OUT_DIR}/02-timetable.png`, fullPage: false });
+  }
+
+  console.log('Navigating to Attendance...');
+  const attendanceTab = page.locator('text=Attendance');
+  if (await attendanceTab.isVisible()) {
+    await attendanceTab.click();
+    await page.waitForTimeout(1500);
+    await page.screenshot({ path: `${OUT_DIR}/03-attendance.png`, fullPage: false });
+  }
+
+  console.log('Navigating to Settings...');
+  const settingsTab = page.locator('text=Settings');
+  if (await settingsTab.isVisible()) {
+    await settingsTab.click();
+    await page.waitForTimeout(1500);
+    await page.screenshot({ path: `${OUT_DIR}/04-settings.png`, fullPage: false });
+  }
+
+  console.log('Navigating to Account...');
+  await page.goto('http://127.0.0.1:3000/account');
+  await page.waitForTimeout(1500);
+  await page.screenshot({ path: `${OUT_DIR}/05-account.png`, fullPage: false });
+
+  console.log('Navigating to Onboarding...');
+  await page.goto('http://127.0.0.1:3000/onboarding');
+  await page.waitForTimeout(1500);
+  await page.screenshot({ path: `${OUT_DIR}/06-onboarding.png`, fullPage: false });
+
+  await browser.close();
+  console.log('All screenshots captured in', OUT_DIR);
+}
+
+capture().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

scripts/test-expand-calendar.mjs

@@ -0,0 +1,33 @@
+import { chromium } from 'playwright';
+
+async function capture() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+  });
+  const page = await context.newPage();
+
+  await page.goto('http://127.0.0.1:3000/');
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: './screenshots/10-today-collapsed.png' });
+
+  // Click extend bar
+  const extendBar = page.getByRole('button', { name: 'Expand calendar' });
+  await extendBar.click();
+  await page.waitForTimeout(1000);
+  await page.screenshot({ path: './screenshots/11-today-expanded.png' });
+
+  // Select an enabled weekday (Wednesday, Aug 12)
+  const day12 = page.getByRole('button', { name: /Wednesday, August 12/ });
+  if (await day12.isVisible()) {
+    await day12.click();
+    await page.waitForTimeout(1000);
+    await page.screenshot({ path: './screenshots/12-today-recollapsed-after-select.png' });
+  }
+
+  await browser.close();
+}
+
+capture().catch(console.error);

scripts/test-onboarding.mjs

@@ -0,0 +1,34 @@
+import { chromium } from 'playwright';
+
+async function testOnboarding() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+  });
+  const page = await context.newPage();
+  
+  await page.goto('http://127.0.0.1:3000/onboarding');
+  await page.waitForTimeout(1000);
+  
+  // Fill step 1
+  await page.fill('input[placeholder="e.g. Sam Taylor"]', 'Alex Morgan');
+  await page.fill('input[placeholder="e.g. Northbridge University"]', 'Stanford University');
+  await page.click('text=Continue');
+  await page.waitForTimeout(1000);
+  
+  await page.screenshot({ path: './screenshots/08-onboarding-step2.png' });
+  
+  // Add a subject
+  await page.fill('input[placeholder="e.g. Data Structures"]', 'Algorithms');
+  await page.fill('input[placeholder="e.g. CS201"]', 'CS161');
+  await page.click('text=Add subject');
+  await page.waitForTimeout(500);
+
+  await page.screenshot({ path: './screenshots/09-onboarding-with-subject.png' });
+
+  await browser.close();
+}
+
+testOnboarding().catch(console.error);