commit b30c6519ff58f3758ba920ebbace05c3cb7881e8 · dunkirk.sh/thistle

+27 -16

src/index.ts

···

       135
       135
        
       		console.warn(

     

       136
       136
        
       			"[Startup] ORIGIN not set, defaulting to http://localhost:3000",

     

       137
       137
        
       		);

     

       138
       138
       -
       		console.warn(

     

       139
       139
       -
       			"[Startup] Set ORIGIN in production for correct email links",

     

       140
       140
       -
       		);

     

       138
       138
       +
       		console.warn("[Startup] Set ORIGIN in production for correct email links");

     

       141
       139
        
       	}

     

       142
       140
        
       

     

       143
       141
        
       	console.log("[Startup] Environment variable validation passed");

     
···

       641
       639
        
       						}),

     

       642
       640
        
       					});

     

       643
       641
        
       

     

       644
       644
       -
       					return Response.json({ success: true, message: "Verification email sent" });

     

       642
       642
       +
       					return Response.json({

     

       643
       643
       +
       						success: true,

     

       644
       644
       +
       						message: "Verification email sent",

     

       645
       645
       +
       					});

     

       645
       646
        
       				} catch (error) {

     

       646
       647
        
       					return handleError(error);

     

       647
       648
        
       				}

     
···

       829
       830
        
       					await updateUserPassword(userId, password);

     

       830
       831
        
       					consumePasswordResetToken(token);

     

       831
       832
        
       

     

       832
       832
       -
       					return Response.json({ success: true, message: "Password reset successfully" });

     

       833
       833
       +
       					return Response.json({

     

       834
       834
       +
       						success: true,

     

       835
       835
       +
       						message: "Password reset successfully",

     

       836
       836
       +
       					});

     

       833
       837
        
       				} catch (error) {

     

       834
       838
        
       					console.error("[Email] Reset password error:", error);

     

       835
       839
        
       					return Response.json(

     
···

       898
       902
        
       				try {

     

       899
       903
        
       					const user = requireAuth(req);

     

       900
       904
        
       

     

       901
       901
       -
       					const rateLimitError = enforceRateLimit(req, "passkey-register-options", {

     

       902
       902
       -
       						ip: { max: 10, windowSeconds: 5 * 60 },

     

       903
       903
       -
       					});

     

       905
       905
       +
       					const rateLimitError = enforceRateLimit(

     

       906
       906
       +
       						req,

     

       907
       907
       +
       						"passkey-register-options",

     

       908
       908
       +
       						{

     

       909
       909
       +
       							ip: { max: 10, windowSeconds: 5 * 60 },

     

       910
       910
       +
       						},

     

       911
       911
       +
       					);

     

       904
       912
        
       					if (rateLimitError) return rateLimitError;

     

       905
       913
        
       

     

       906
       914
        
       					const options = await createRegistrationOptions(user);

     
···

       915
       923
        
       				try {

     

       916
       924
        
       					const _user = requireAuth(req);

     

       917
       925
        
       

     

       918
       918
       -
       					const rateLimitError = enforceRateLimit(req, "passkey-register-verify", {

     

       919
       919
       -
       						ip: { max: 10, windowSeconds: 5 * 60 },

     

       920
       920
       -
       					});

     

       926
       926
       +
       					const rateLimitError = enforceRateLimit(

     

       927
       927
       +
       						req,

     

       928
       928
       +
       						"passkey-register-verify",

     

       929
       929
       +
       						{

     

       930
       930
       +
       							ip: { max: 10, windowSeconds: 5 * 60 },

     

       931
       931
       +
       						},

     

       932
       932
       +
       					);

     

       921
       933
        
       					if (rateLimitError) return rateLimitError;

     

       922
       934
        
       

     

       923
       935
        
       					const body = await req.json();

     
···

       2195
       2207
        
       						const { encodeCursor } = await import("./lib/cursor");

     

       2196
       2208
        
       						const last = transcriptions[transcriptions.length - 1];

     

       2197
       2209
        
       						if (last) {

     

       2198
       2198
       -
       							nextCursor = encodeCursor([

     

       2199
       2199
       -
       								last.created_at.toString(),

     

       2200
       2200
       -
       								last.id,

     

       2201
       2201
       -
       							]);

     

       2210
       2210
       +
       							nextCursor = encodeCursor([last.created_at.toString(), last.id]);

     

       2202
       2211
        
       						}

     

       2203
       2212
        
       					}

     

       2204
       2213
        
       

     
···

       3440
       3449
        
       	server.stop();

     

       3441
       3450
        
       

     

       3442
       3451
        
       	// 2. Close all active SSE streams (safe to kill - sync will handle reconnection)

     

       3443
       3443
       -
       	console.log(`[Shutdown] Closing ${activeSSEStreams.size} active SSE streams...`);

     

       3452
       3452
       +
       	console.log(

     

       3453
       3453
       +
       		`[Shutdown] Closing ${activeSSEStreams.size} active SSE streams...`,

     

       3454
       3454
       +
       	);

     

       3444
       3455
        
       	for (const controller of activeSSEStreams) {

     

       3445
       3456
        
       		try {

     

       3446
       3457
        
       			controller.close();

+1 -1

src/lib/api-response-format.test.ts

···

       2
       2
        
       

     

       3
       3
        
       /**

     

       4
       4
        
        * API Response Format Standards

     

       5
       5
       -
        * 

     

       5
       5
       +
        *

     

       6
       6
        
        * This test documents the standardized response formats across the API.

     

       7
       7
        
        * All endpoints should follow these patterns for consistency.

     

       8
       8
        
        */

+4 -1

src/lib/auth.ts

···

       759
       759
        
       		const { encodeCursor } = require("./cursor");

     

       760
       760
        
       		const last = users[users.length - 1];

     

       761
       761
        
       		if (last) {

     

       762
       762
       -
       			nextCursor = encodeCursor([last.created_at.toString(), last.id.toString()]);

     

       762
       762
       +
       			nextCursor = encodeCursor([

     

       763
       763
       +
       				last.created_at.toString(),

     

       764
       764
       +
       				last.id.toString(),

     

       765
       765
       +
       			]);

     

       763
       766
        
       		}

     

       764
       767
        
       	}

     

       765
       768

+4 -1

src/lib/classes.ts

···

       99
       99
        
       			const { year, semester, courseCode, id } = decodeClassCursor(cursor);

     

       100
       100
        
       

     

       101
       101
        
       			classes = db

     

       102
       102
       -
       				.query<ClassWithStats, [number, number, string, string, string, number]>(

     

       102
       102
       +
       				.query<

     

       103
       103
       +
       					ClassWithStats,

     

       104
       104
       +
       					[number, number, string, string, string, number]

     

       105
       105
       +
       				>(

     

       103
       106
        
       					`SELECT c.* FROM classes c

     

       104
       107
        
       					INNER JOIN class_members cm ON c.id = cm.class_id

     

       105
       108
        
       					WHERE cm.user_id = ? AND

+3 -3

src/lib/cursor.test.ts

···

       1
       1
        
       import { describe, expect, test } from "bun:test";

     

       2
       2
        
       import {

     

       3
       3
       -
       	encodeCursor,

     

       3
       3
       +
       	decodeClassCursor,

     

       4
       4
        
       	decodeCursor,

     

       5
       5
       -
       	encodeSimpleCursor,

     

       6
       5
        
       	decodeSimpleCursor,

     

       7
       6
        
       	encodeClassCursor,

     

       8
       8
       -
       	decodeClassCursor,

     

       7
       7
       +
       	encodeCursor,

     

       8
       8
       +
       	encodeSimpleCursor,

     

       9
       9
        
       } from "./cursor";

     

       10
       10
        
       

     

       11
       11
        
       describe("Cursor encoding/decoding", () => {

+104 -89

src/pages/admin.ts

···

       1
       1
       -
       const transcriptionsComponent = document.getElementById('transcriptions-component') as any;

     

       2
       2
       -
       const usersComponent = document.getElementById('users-component') as any;

     

       3
       3
       -
       const userModal = document.getElementById('user-modal') as any;

     

       4
       4
       -
       const transcriptModal = document.getElementById('transcript-modal') as any;

     

       5
       5
       -
       const errorMessage = document.getElementById('error-message') as HTMLElement;

     

       6
       6
       -
       const loading = document.getElementById('loading') as HTMLElement;

     

       7
       7
       -
       const content = document.getElementById('content') as HTMLElement;

     

       1
       1
       +
       const transcriptionsComponent = document.getElementById(

     

       2
       2
       +
       	"transcriptions-component",

     

       3
       3
       +
       ) as HTMLElement | null;

     

       4
       4
       +
       const usersComponent = document.getElementById(

     

       5
       5
       +
       	"users-component",

     

       6
       6
       +
       ) as HTMLElement | null;

     

       7
       7
       +
       const userModal = document.getElementById("user-modal") as HTMLElement | null;

     

       8
       8
       +
       const transcriptModal = document.getElementById(

     

       9
       9
       +
       	"transcript-modal",

     

       10
       10
       +
       ) as HTMLElement | null;

     

       11
       11
       +
       const errorMessage = document.getElementById("error-message") as HTMLElement;

     

       12
       12
       +
       const loading = document.getElementById("loading") as HTMLElement;

     

       13
       13
       +
       const content = document.getElementById("content") as HTMLElement;

     

       8
       14
        
       

     

       9
       15
        
       // Modal functions

     

       10
       16
        
       function openUserModal(userId: string) {

     

       11
       11
       -
         userModal.setAttribute('open', '');

     

       12
       12
       -
         userModal.userId = userId;

     

       17
       17
       +
       	userModal.setAttribute("open", "");

     

       18
       18
       +
       	userModal.userId = userId;

     

       13
       19
        
       }

     

       14
       20
        
       

     

       15
       21
        
       function closeUserModal() {

     

       16
       16
       -
         userModal.removeAttribute('open');

     

       17
       17
       -
         userModal.userId = null;

     

       22
       22
       +
       	userModal.removeAttribute("open");

     

       23
       23
       +
       	userModal.userId = null;

     

       18
       24
        
       }

     

       19
       25
        
       

     

       20
       26
        
       function openTranscriptModal(transcriptId: string) {

     

       21
       21
       -
         transcriptModal.setAttribute('open', '');

     

       22
       22
       -
         transcriptModal.transcriptId = transcriptId;

     

       27
       27
       +
       	transcriptModal.setAttribute("open", "");

     

       28
       28
       +
       	transcriptModal.transcriptId = transcriptId;

     

       23
       29
        
       }

     

       24
       30
        
       

     

       25
       31
        
       function closeTranscriptModal() {

     

       26
       26
       -
         transcriptModal.removeAttribute('open');

     

       27
       27
       -
         transcriptModal.transcriptId = null;

     

       32
       32
       +
       	transcriptModal.removeAttribute("open");

     

       33
       33
       +
       	transcriptModal.transcriptId = null;

     

       28
       34
        
       }

     

       29
       35
        
       

     

       30
       36
        
       // Listen for component events

     

       31
       31
       -
       transcriptionsComponent?.addEventListener('open-transcription', (e: CustomEvent) => {

     

       32
       32
       -
         openTranscriptModal(e.detail.id);

     

       33
       33
       -
       });

     

       37
       37
       +
       transcriptionsComponent?.addEventListener(

     

       38
       38
       +
       	"open-transcription",

     

       39
       39
       +
       	(e: CustomEvent) => {

     

       40
       40
       +
       		openTranscriptModal(e.detail.id);

     

       41
       41
       +
       	},

     

       42
       42
       +
       );

     

       34
       43
        
       

     

       35
       35
       -
       usersComponent?.addEventListener('open-user', (e: CustomEvent) => {

     

       36
       36
       -
         openUserModal(e.detail.id);

     

       44
       44
       +
       usersComponent?.addEventListener("open-user", (e: CustomEvent) => {

     

       45
       45
       +
       	openUserModal(e.detail.id);

     

       37
       46
        
       });

     

       38
       47
        
       

     

       39
       48
        
       // Listen for modal close events

     

       40
       40
       -
       userModal?.addEventListener('close', closeUserModal);

     

       41
       41
       -
       userModal?.addEventListener('user-updated', async () => {

     

       42
       42
       -
         await loadStats();

     

       49
       49
       +
       userModal?.addEventListener("close", closeUserModal);

     

       50
       50
       +
       userModal?.addEventListener("user-updated", async () => {

     

       51
       51
       +
       	await loadStats();

     

       43
       52
        
       });

     

       44
       44
       -
       userModal?.addEventListener('click', (e: MouseEvent) => {

     

       45
       45
       -
         if (e.target === userModal) closeUserModal();

     

       53
       53
       +
       userModal?.addEventListener("click", (e: MouseEvent) => {

     

       54
       54
       +
       	if (e.target === userModal) closeUserModal();

     

       46
       55
        
       });

     

       47
       56
        
       

     

       48
       48
       -
       transcriptModal?.addEventListener('close', closeTranscriptModal);

     

       49
       49
       -
       transcriptModal?.addEventListener('transcript-deleted', async () => {

     

       50
       50
       -
         await loadStats();

     

       57
       57
       +
       transcriptModal?.addEventListener("close", closeTranscriptModal);

     

       58
       58
       +
       transcriptModal?.addEventListener("transcript-deleted", async () => {

     

       59
       59
       +
       	await loadStats();

     

       51
       60
        
       });

     

       52
       52
       -
       transcriptModal?.addEventListener('click', (e: MouseEvent) => {

     

       53
       53
       -
         if (e.target === transcriptModal) closeTranscriptModal();

     

       61
       61
       +
       transcriptModal?.addEventListener("click", (e: MouseEvent) => {

     

       62
       62
       +
       	if (e.target === transcriptModal) closeTranscriptModal();

     

       54
       63
        
       });

     

       55
       64
        
       

     

       56
       65
        
       async function loadStats() {

     

       57
       57
       -
         try {

     

       58
       58
       -
           const [transcriptionsRes, usersRes] = await Promise.all([

     

       59
       59
       -
             fetch('/api/admin/transcriptions'),

     

       60
       60
       -
             fetch('/api/admin/users')

     

       61
       61
       -
           ]);

     

       66
       66
       +
       	try {

     

       67
       67
       +
       		const [transcriptionsRes, usersRes] = await Promise.all([

     

       68
       68
       +
       			fetch("/api/admin/transcriptions"),

     

       69
       69
       +
       			fetch("/api/admin/users"),

     

       70
       70
       +
       		]);

     

       62
       71
        
       

     

       63
       63
       -
           if (!transcriptionsRes.ok || !usersRes.ok) {

     

       64
       64
       -
             if (transcriptionsRes.status === 403 || usersRes.status === 403) {

     

       65
       65
       -
               window.location.href = '/';

     

       66
       66
       -
               return;

     

       67
       67
       -
             }

     

       68
       68
       -
             throw new Error('Failed to load admin data');

     

       69
       69
       -
           }

     

       72
       72
       +
       		if (!transcriptionsRes.ok || !usersRes.ok) {

     

       73
       73
       +
       			if (transcriptionsRes.status === 403 || usersRes.status === 403) {

     

       74
       74
       +
       				window.location.href = "/";

     

       75
       75
       +
       				return;

     

       76
       76
       +
       			}

     

       77
       77
       +
       			throw new Error("Failed to load admin data");

     

       78
       78
       +
       		}

     

       79
       79
       +
       

     

       80
       80
       +
       		const transcriptions = await transcriptionsRes.json();

     

       81
       81
       +
       		const users = await usersRes.json();

     

       82
       82
       +
       

     

       83
       83
       +
       		const totalUsers = document.getElementById("total-users");

     

       84
       84
       +
       		const totalTranscriptions = document.getElementById("total-transcriptions");

     

       85
       85
       +
       		const failedTranscriptions = document.getElementById(

     

       86
       86
       +
       			"failed-transcriptions",

     

       87
       87
       +
       		);

     

       70
       88
        
       

     

       71
       71
       -
           const transcriptions = await transcriptionsRes.json();

     

       72
       72
       -
           const users = await usersRes.json();

     

       89
       89
       +
       		if (totalUsers) totalUsers.textContent = users.length.toString();

     

       90
       90
       +
       		if (totalTranscriptions)

     

       91
       91
       +
       			totalTranscriptions.textContent = transcriptions.length.toString();

     

       73
       92
        
       

     

       74
       74
       -
           const totalUsers = document.getElementById('total-users');

     

       75
       75
       -
           const totalTranscriptions = document.getElementById('total-transcriptions');

     

       76
       76
       -
           const failedTranscriptions = document.getElementById('failed-transcriptions');

     

       77
       77
       -
           

     

       78
       78
       -
           if (totalUsers) totalUsers.textContent = users.length.toString();

     

       79
       79
       -
           if (totalTranscriptions) totalTranscriptions.textContent = transcriptions.length.toString();

     

       80
       80
       -
           

     

       81
       81
       -
           const failed = transcriptions.filter((t: any) => t.status === 'failed');

     

       82
       82
       -
           if (failedTranscriptions) failedTranscriptions.textContent = failed.length.toString();

     

       93
       93
       +
       		const failed = transcriptions.filter(

     

       94
       94
       +
       			(t: { status: string }) => t.status === "failed",

     

       95
       95
       +
       		);

     

       96
       96
       +
       		if (failedTranscriptions)

     

       97
       97
       +
       			failedTranscriptions.textContent = failed.length.toString();

     

       83
       98
        
       

     

       84
       84
       -
           loading.classList.add('hidden');

     

       85
       85
       -
           content.classList.remove('hidden');

     

       86
       86
       -
         } catch (error) {

     

       87
       87
       -
           errorMessage.textContent = (error as Error).message;

     

       88
       88
       -
           errorMessage.classList.remove('hidden');

     

       89
       89
       -
           loading.classList.add('hidden');

     

       90
       90
       -
         }

     

       99
       99
       +
       		loading.classList.add("hidden");

     

       100
       100
       +
       		content.classList.remove("hidden");

     

       101
       101
       +
       	} catch (error) {

     

       102
       102
       +
       		errorMessage.textContent = (error as Error).message;

     

       103
       103
       +
       		errorMessage.classList.remove("hidden");

     

       104
       104
       +
       		loading.classList.add("hidden");

     

       105
       105
       +
       	}

     

       91
       106
        
       }

     

       92
       107
        
       

     

       93
       108
        
       // Tab switching

     

       94
       109
        
       function switchTab(tabName: string) {

     

       95
       95
       -
         document.querySelectorAll('.tab').forEach(t => {

     

       96
       96
       -
           t.classList.remove('active');

     

       97
       97
       -
         });

     

       98
       98
       -
         document.querySelectorAll('.tab-content').forEach(c => {

     

       99
       99
       -
           c.classList.remove('active');

     

       100
       100
       -
         });

     

       110
       110
       +
       	document.querySelectorAll(".tab").forEach((t) => {

     

       111
       111
       +
       		t.classList.remove("active");

     

       112
       112
       +
       	});

     

       113
       113
       +
       	document.querySelectorAll(".tab-content").forEach((c) => {

     

       114
       114
       +
       		c.classList.remove("active");

     

       115
       115
       +
       	});

     

       101
       116
        
       

     

       102
       102
       -
         const tabButton = document.querySelector(`[data-tab="${tabName}"]`);

     

       103
       103
       -
         const tabContent = document.getElementById(`${tabName}-tab`);

     

       104
       104
       -
         

     

       105
       105
       -
         if (tabButton && tabContent) {

     

       106
       106
       -
           tabButton.classList.add('active');

     

       107
       107
       -
           tabContent.classList.add('active');

     

       108
       108
       -
           

     

       109
       109
       -
           // Update URL without reloading

     

       110
       110
       -
           const url = new URL(window.location.href);

     

       111
       111
       -
           url.searchParams.set('tab', tabName);

     

       112
       112
       -
           // Remove subtab param when leaving classes tab

     

       113
       113
       -
           if (tabName !== 'classes') {

     

       114
       114
       -
             url.searchParams.delete('subtab');

     

       115
       115
       -
           }

     

       116
       116
       -
           window.history.pushState({}, '', url);

     

       117
       117
       -
         }

     

       117
       117
       +
       	const tabButton = document.querySelector(`[data-tab="${tabName}"]`);

     

       118
       118
       +
       	const tabContent = document.getElementById(`${tabName}-tab`);

     

       119
       119
       +
       

     

       120
       120
       +
       	if (tabButton && tabContent) {

     

       121
       121
       +
       		tabButton.classList.add("active");

     

       122
       122
       +
       		tabContent.classList.add("active");

     

       123
       123
       +
       

     

       124
       124
       +
       		// Update URL without reloading

     

       125
       125
       +
       		const url = new URL(window.location.href);

     

       126
       126
       +
       		url.searchParams.set("tab", tabName);

     

       127
       127
       +
       		// Remove subtab param when leaving classes tab

     

       128
       128
       +
       		if (tabName !== "classes") {

     

       129
       129
       +
       			url.searchParams.delete("subtab");

     

       130
       130
       +
       		}

     

       131
       131
       +
       		window.history.pushState({}, "", url);

     

       132
       132
       +
       	}

     

       118
       133
        
       }

     

       119
       134
        
       

     

       120
       120
       -
       document.querySelectorAll('.tab').forEach(tab => {

     

       121
       121
       -
         tab.addEventListener('click', () => {

     

       122
       122
       -
           switchTab((tab as HTMLElement).dataset.tab || '');

     

       123
       123
       -
         });

     

       135
       135
       +
       document.querySelectorAll(".tab").forEach((tab) => {

     

       136
       136
       +
       	tab.addEventListener("click", () => {

     

       137
       137
       +
       		switchTab((tab as HTMLElement).dataset.tab || "");

     

       138
       138
       +
       	});

     

       124
       139
        
       });

     

       125
       140
        
       

     

       126
       141
        
       // Check for tab query parameter on load

     

       127
       142
        
       const params = new URLSearchParams(window.location.search);

     

       128
       128
       -
       const initialTab = params.get('tab');

     

       129
       129
       -
       const validTabs = ['pending', 'transcriptions', 'users', 'classes'];

     

       143
       143
       +
       const initialTab = params.get("tab");

     

       144
       144
       +
       const validTabs = ["pending", "transcriptions", "users", "classes"];

     

       130
       145
        
       

     

       131
       146
        
       if (initialTab && validTabs.includes(initialTab)) {

     

       132
       132
       -
         switchTab(initialTab);

     

       147
       147
       +
       	switchTab(initialTab);

     

       133
       148
        
       }

     

       134
       149
        
       

     

       135
       150
        
       // Initialize

+12 -8

src/pages/index.ts

···

       1
       1
       -
       document.getElementById('start-btn')?.addEventListener('click', async () => {

     

       2
       2
       -
         const authComponent = document.querySelector('auth-component') as any;

     

       3
       3
       -
         const isLoggedIn = await authComponent.isAuthenticated();

     

       1
       1
       +
       document.getElementById("start-btn")?.addEventListener("click", async () => {

     

       2
       2
       +
       	const authComponent = document.querySelector("auth-component");

     

       3
       3
       +
       	if (!authComponent) return;

     

       4
       4
        
       

     

       5
       5
       -
         if (isLoggedIn) {

     

       6
       6
       -
           window.location.href = '/classes';

     

       7
       7
       -
         } else {

     

       8
       8
       -
           authComponent.openAuthModal();

     

       9
       9
       -
         }

     

       5
       5
       +
       	const isLoggedIn = await (

     

       6
       6
       +
       		authComponent as { isAuthenticated: () => Promise<boolean> }

     

       7
       7
       +
       	).isAuthenticated();

     

       8
       8
       +
       

     

       9
       9
       +
       	if (isLoggedIn) {

     

       10
       10
       +
       		window.location.href = "/classes";

     

       11
       11
       +
       	} else {

     

       12
       12
       +
       		(authComponent as { openAuthModal: () => void }).openAuthModal();

     

       13
       13
       +
       	}

     

       10
       14
        
       });

+4 -4

src/pages/reset-password.ts

···

       1
       1
        
       // Wait for component to be defined before setting token

     

       2
       2
       -
       await customElements.whenDefined('reset-password-form');

     

       2
       2
       +
       await customElements.whenDefined("reset-password-form");

     

       3
       3
        
       

     

       4
       4
        
       // Get token from URL and pass to component

     

       5
       5
        
       const urlParams = new URLSearchParams(window.location.search);

     

       6
       6
       -
       const token = urlParams.get('token');

     

       7
       7
       -
       const resetForm = document.getElementById('reset-form') as any;

     

       6
       6
       +
       const token = urlParams.get("token");

     

       7
       7
       +
       const resetForm = document.getElementById("reset-form");

     

       8
       8
        
       if (resetForm) {

     

       9
       9
       -
         resetForm.token = token;

     

       9
       9
       +
       	(resetForm as { token: string | null }).token = token;

     

       10
       10
        
       }

+64 -64

src/styles/admin.css

···

       1
       1
        
       main {

     

       2
       2
       -
         max-width: 80rem;

     

       3
       3
       -
         margin: 0 auto;

     

       4
       4
       -
         padding: 2rem;

     

       2
       2
       +
       	max-width: 80rem;

     

       3
       3
       +
       	margin: 0 auto;

     

       4
       4
       +
       	padding: 2rem;

     

       5
       5
        
       }

     

       6
       6
        
       

     

       7
       7
        
       h1 {

     

       8
       8
       -
         margin-bottom: 2rem;

     

       9
       9
       -
         color: var(--text);

     

       8
       8
       +
       	margin-bottom: 2rem;

     

       9
       9
       +
       	color: var(--text);

     

       10
       10
        
       }

     

       11
       11
        
       

     

       12
       12
        
       .section {

     

       13
       13
       -
         margin-bottom: 3rem;

     

       13
       13
       +
       	margin-bottom: 3rem;

     

       14
       14
        
       }

     

       15
       15
        
       

     

       16
       16
        
       .section-title {

     

       17
       17
       -
         font-size: 1.5rem;

     

       18
       18
       -
         font-weight: 600;

     

       19
       19
       -
         color: var(--text);

     

       20
       20
       -
         margin-bottom: 1rem;

     

       21
       21
       -
         display: flex;

     

       22
       22
       -
         align-items: center;

     

       23
       23
       -
         gap: 0.5rem;

     

       17
       17
       +
       	font-size: 1.5rem;

     

       18
       18
       +
       	font-weight: 600;

     

       19
       19
       +
       	color: var(--text);

     

       20
       20
       +
       	margin-bottom: 1rem;

     

       21
       21
       +
       	display: flex;

     

       22
       22
       +
       	align-items: center;

     

       23
       23
       +
       	gap: 0.5rem;

     

       24
       24
        
       }

     

       25
       25
        
       

     

       26
       26
        
       .tabs {

     

       27
       27
       -
         display: flex;

     

       28
       28
       -
         gap: 1rem;

     

       29
       29
       -
         border-bottom: 2px solid var(--secondary);

     

       30
       30
       -
         margin-bottom: 2rem;

     

       27
       27
       +
       	display: flex;

     

       28
       28
       +
       	gap: 1rem;

     

       29
       29
       +
       	border-bottom: 2px solid var(--secondary);

     

       30
       30
       +
       	margin-bottom: 2rem;

     

       31
       31
        
       }

     

       32
       32
        
       

     

       33
       33
        
       .tab {

     

       34
       34
       -
         padding: 0.75rem 1.5rem;

     

       35
       35
       -
         border: none;

     

       36
       36
       -
         background: transparent;

     

       37
       37
       -
         color: var(--text);

     

       38
       38
       -
         cursor: pointer;

     

       39
       39
       -
         font-size: 1rem;

     

       40
       40
       -
         font-weight: 500;

     

       41
       41
       -
         font-family: inherit;

     

       42
       42
       -
         border-bottom: 2px solid transparent;

     

       43
       43
       -
         margin-bottom: -2px;

     

       44
       44
       -
         transition: all 0.2s;

     

       34
       34
       +
       	padding: 0.75rem 1.5rem;

     

       35
       35
       +
       	border: none;

     

       36
       36
       +
       	background: transparent;

     

       37
       37
       +
       	color: var(--text);

     

       38
       38
       +
       	cursor: pointer;

     

       39
       39
       +
       	font-size: 1rem;

     

       40
       40
       +
       	font-weight: 500;

     

       41
       41
       +
       	font-family: inherit;

     

       42
       42
       +
       	border-bottom: 2px solid transparent;

     

       43
       43
       +
       	margin-bottom: -2px;

     

       44
       44
       +
       	transition: all 0.2s;

     

       45
       45
        
       }

     

       46
       46
        
       

     

       47
       47
        
       .tab:hover {

     

       48
       48
       -
         color: var(--primary);

     

       48
       48
       +
       	color: var(--primary);

     

       49
       49
        
       }

     

       50
       50
        
       

     

       51
       51
        
       .tab.active {

     

       52
       52
       -
         color: var(--primary);

     

       53
       53
       -
         border-bottom-color: var(--primary);

     

       52
       52
       +
       	color: var(--primary);

     

       53
       53
       +
       	border-bottom-color: var(--primary);

     

       54
       54
        
       }

     

       55
       55
        
       

     

       56
       56
        
       .tab-content {

     

       57
       57
       -
         display: none;

     

       57
       57
       +
       	display: none;

     

       58
       58
        
       }

     

       59
       59
        
       

     

       60
       60
        
       .tab-content.active {

     

       61
       61
       -
         display: block;

     

       61
       61
       +
       	display: block;

     

       62
       62
        
       }

     

       63
       63
        
       

     

       64
       64
        
       .empty-state {

     

       65
       65
       -
         text-align: center;

     

       66
       66
       -
         padding: 3rem;

     

       67
       67
       -
         color: var(--text);

     

       68
       68
       -
         opacity: 0.6;

     

       65
       65
       +
       	text-align: center;

     

       66
       66
       +
       	padding: 3rem;

     

       67
       67
       +
       	color: var(--text);

     

       68
       68
       +
       	opacity: 0.6;

     

       69
       69
        
       }

     

       70
       70
        
       

     

       71
       71
        
       .loading {

     

       72
       72
       -
         text-align: center;

     

       73
       73
       -
         padding: 3rem;

     

       74
       74
       -
         color: var(--text);

     

       72
       72
       +
       	text-align: center;

     

       73
       73
       +
       	padding: 3rem;

     

       74
       74
       +
       	color: var(--text);

     

       75
       75
        
       }

     

       76
       76
        
       

     

       77
       77
        
       .error {

     

       78
       78
       -
         background: #fee2e2;

     

       79
       79
       -
         color: #991b1b;

     

       80
       80
       -
         padding: 1rem;

     

       81
       81
       -
         border-radius: 6px;

     

       82
       82
       -
         margin-bottom: 1rem;

     

       78
       78
       +
       	background: #fee2e2;

     

       79
       79
       +
       	color: #991b1b;

     

       80
       80
       +
       	padding: 1rem;

     

       81
       81
       +
       	border-radius: 6px;

     

       82
       82
       +
       	margin-bottom: 1rem;

     

       83
       83
        
       }

     

       84
       84
        
       

     

       85
       85
        
       .stats {

     

       86
       86
       -
         display: grid;

     

       87
       87
       -
         grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

     

       88
       88
       -
         gap: 1rem;

     

       89
       89
       -
         margin-bottom: 2rem;

     

       86
       86
       +
       	display: grid;

     

       87
       87
       +
       	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

     

       88
       88
       +
       	gap: 1rem;

     

       89
       89
       +
       	margin-bottom: 2rem;

     

       90
       90
        
       }

     

       91
       91
        
       

     

       92
       92
        
       .stat-card {

     

       93
       93
       -
         background: var(--background);

     

       94
       94
       -
         border: 2px solid var(--secondary);

     

       95
       95
       -
         border-radius: 8px;

     

       96
       96
       -
         padding: 1.5rem;

     

       93
       93
       +
       	background: var(--background);

     

       94
       94
       +
       	border: 2px solid var(--secondary);

     

       95
       95
       +
       	border-radius: 8px;

     

       96
       96
       +
       	padding: 1.5rem;

     

       97
       97
        
       }

     

       98
       98
        
       

     

       99
       99
        
       .stat-value {

     

       100
       100
       -
         font-size: 2rem;

     

       101
       101
       -
         font-weight: 700;

     

       102
       102
       -
         color: var(--primary);

     

       103
       103
       -
         margin-bottom: 0.25rem;

     

       100
       100
       +
       	font-size: 2rem;

     

       101
       101
       +
       	font-weight: 700;

     

       102
       102
       +
       	color: var(--primary);

     

       103
       103
       +
       	margin-bottom: 0.25rem;

     

       104
       104
        
       }

     

       105
       105
        
       

     

       106
       106
        
       .stat-label {

     

       107
       107
       -
         color: var(--text);

     

       108
       108
       -
         opacity: 0.7;

     

       109
       109
       -
         font-size: 0.875rem;

     

       107
       107
       +
       	color: var(--text);

     

       108
       108
       +
       	opacity: 0.7;

     

       109
       109
       +
       	font-size: 0.875rem;

     

       110
       110
        
       }

     

       111
       111
        
       

     

       112
       112
        
       .timestamp {

     

       113
       113
       -
         color: var(--text);

     

       114
       114
       -
         opacity: 0.6;

     

       115
       115
       -
         font-size: 0.875rem;

     

       113
       113
       +
       	color: var(--text);

     

       114
       114
       +
       	opacity: 0.6;

     

       115
       115
       +
       	font-size: 0.875rem;

     

       116
       116
        
       }

     

       117
       117
        
       

     

       118
       118
        
       .hidden {

     

       119
       119
       -
         display: none;

     

       119
       119
       +
       	display: none;

     

       120
       120
        
       }

+41 -41

src/styles/index.css

···

       1
       1
        
       .hero-title {

     

       2
       2
       -
         font-size: 3rem;

     

       3
       3
       -
         font-weight: 700;

     

       4
       4
       -
         color: var(--text);

     

       5
       5
       -
         margin-bottom: 1rem;

     

       2
       2
       +
       	font-size: 3rem;

     

       3
       3
       +
       	font-weight: 700;

     

       4
       4
       +
       	color: var(--text);

     

       5
       5
       +
       	margin-bottom: 1rem;

     

       6
       6
        
       }

     

       7
       7
        
       

     

       8
       8
        
       .hero-subtitle {

     

       9
       9
       -
         font-size: 1.25rem;

     

       10
       10
       -
         color: var(--text);

     

       11
       11
       -
         opacity: 0.8;

     

       12
       12
       -
         margin-bottom: 2rem;

     

       9
       9
       +
       	font-size: 1.25rem;

     

       10
       10
       +
       	color: var(--text);

     

       11
       11
       +
       	opacity: 0.8;

     

       12
       12
       +
       	margin-bottom: 2rem;

     

       13
       13
        
       }

     

       14
       14
        
       

     

       15
       15
        
       main {

     

       16
       16
       -
         text-align: center;

     

       17
       17
       -
         padding: 4rem 2rem;

     

       16
       16
       +
       	text-align: center;

     

       17
       17
       +
       	padding: 4rem 2rem;

     

       18
       18
        
       }

     

       19
       19
        
       

     

       20
       20
        
       .cta-buttons {

     

       21
       21
       -
         display: flex;

     

       22
       22
       -
         gap: 1rem;

     

       23
       23
       -
         justify-content: center;

     

       24
       24
       -
         margin-top: 2rem;

     

       21
       21
       +
       	display: flex;

     

       22
       22
       +
       	gap: 1rem;

     

       23
       23
       +
       	justify-content: center;

     

       24
       24
       +
       	margin-top: 2rem;

     

       25
       25
        
       }

     

       26
       26
        
       

     

       27
       27
        
       .btn {

     

       28
       28
       -
         padding: 0.75rem 1.5rem;

     

       29
       29
       -
         border-radius: 6px;

     

       30
       30
       -
         font-size: 1rem;

     

       31
       31
       -
         font-weight: 500;

     

       32
       32
       -
         cursor: pointer;

     

       33
       33
       -
         transition: all 0.2s;

     

       34
       34
       -
         font-family: inherit;

     

       35
       35
       -
         border: 2px solid;

     

       36
       36
       -
         text-decoration: none;

     

       37
       37
       -
         display: inline-block;

     

       28
       28
       +
       	padding: 0.75rem 1.5rem;

     

       29
       29
       +
       	border-radius: 6px;

     

       30
       30
       +
       	font-size: 1rem;

     

       31
       31
       +
       	font-weight: 500;

     

       32
       32
       +
       	cursor: pointer;

     

       33
       33
       +
       	transition: all 0.2s;

     

       34
       34
       +
       	font-family: inherit;

     

       35
       35
       +
       	border: 2px solid;

     

       36
       36
       +
       	text-decoration: none;

     

       37
       37
       +
       	display: inline-block;

     

       38
       38
        
       }

     

       39
       39
        
       

     

       40
       40
        
       .btn-primary {

     

       41
       41
       -
         background: var(--primary);

     

       42
       42
       -
         color: white;

     

       43
       43
       -
         border-color: var(--primary);

     

       41
       41
       +
       	background: var(--primary);

     

       42
       42
       +
       	color: white;

     

       43
       43
       +
       	border-color: var(--primary);

     

       44
       44
        
       }

     

       45
       45
        
       

     

       46
       46
        
       .btn-primary:hover {

     

       47
       47
       -
         background: transparent;

     

       48
       48
       -
         color: var(--primary);

     

       47
       47
       +
       	background: transparent;

     

       48
       48
       +
       	color: var(--primary);

     

       49
       49
        
       }

     

       50
       50
        
       

     

       51
       51
        
       .btn-secondary {

     

       52
       52
       -
         background: transparent;

     

       53
       53
       -
         color: var(--text);

     

       54
       54
       -
         border-color: var(--secondary);

     

       52
       52
       +
       	background: transparent;

     

       53
       53
       +
       	color: var(--text);

     

       54
       54
       +
       	border-color: var(--secondary);

     

       55
       55
        
       }

     

       56
       56
        
       

     

       57
       57
        
       .btn-secondary:hover {

     

       58
       58
       -
         border-color: var(--primary);

     

       59
       59
       -
         color: var(--primary);

     

       58
       58
       +
       	border-color: var(--primary);

     

       59
       59
       +
       	color: var(--primary);

     

       60
       60
        
       }

     

       61
       61
        
       

     

       62
       62
        
       @media (max-width: 640px) {

     

       63
       63
       -
         .hero-title {

     

       64
       64
       -
           font-size: 2.5rem;

     

       65
       65
       -
         }

     

       63
       63
       +
       	.hero-title {

     

       64
       64
       +
       		font-size: 2.5rem;

     

       65
       65
       +
       	}

     

       66
       66
        
       

     

       67
       67
       -
         .cta-buttons {

     

       68
       68
       -
           flex-direction: column;

     

       69
       69
       -
           align-items: center;

     

       70
       70
       -
         }

     

       67
       67
       +
       	.cta-buttons {

     

       68
       68
       +
       		flex-direction: column;

     

       69
       69
       +
       		align-items: center;

     

       70
       70
       +
       	}

     

       71
       71
        
       }

+4 -4

src/styles/reset-password.css

···

       1
       1
        
       main {

     

       2
       2
       -
         display: flex;

     

       3
       3
       -
         align-items: center;

     

       4
       4
       -
         justify-content: center;

     

       5
       5
       -
         padding: 4rem 1rem;

     

       2
       2
       +
       	display: flex;

     

       3
       3
       +
       	align-items: center;

     

       4
       4
       +
       	justify-content: center;

     

       5
       5
       +
       	padding: 4rem 1rem;

     

       6
       6
        
       }

+1 -1

src/styles/settings.css

···

       1
       1
        
       main {

     

       2
       2
       -
         max-width: 64rem;

     

       2
       2
       +
       	max-width: 64rem;

     

       3
       3
        
       }

+13 -13

src/styles/transcribe.css

···

       1
       1
        
       .page-header {

     

       2
       2
       -
         text-align: center;

     

       3
       3
       -
         margin-bottom: 3rem;

     

       2
       2
       +
       	text-align: center;

     

       3
       3
       +
       	margin-bottom: 3rem;

     

       4
       4
        
       }

     

       5
       5
        
       

     

       6
       6
        
       .page-title {

     

       7
       7
       -
         font-size: 2.5rem;

     

       8
       8
       -
         font-weight: 700;

     

       9
       9
       -
         color: var(--text);

     

       10
       10
       -
         margin-bottom: 0.5rem;

     

       7
       7
       +
       	font-size: 2.5rem;

     

       8
       8
       +
       	font-weight: 700;

     

       9
       9
       +
       	color: var(--text);

     

       10
       10
       +
       	margin-bottom: 0.5rem;

     

       11
       11
        
       }

     

       12
       12
        
       

     

       13
       13
        
       .page-subtitle {

     

       14
       14
       -
         font-size: 1.125rem;

     

       15
       15
       -
         color: var(--text);

     

       16
       16
       -
         opacity: 0.8;

     

       14
       14
       +
       	font-size: 1.125rem;

     

       15
       15
       +
       	color: var(--text);

     

       16
       16
       +
       	opacity: 0.8;

     

       17
       17
        
       }

     

       18
       18
        
       

     

       19
       19
        
       .back-link {

     

       20
       20
       -
         color: var(--paynes-gray);

     

       21
       21
       -
         text-decoration: none;

     

       22
       22
       -
         font-size: 0.875rem;

     

       20
       20
       +
       	color: var(--paynes-gray);

     

       21
       21
       +
       	text-decoration: none;

     

       22
       22
       +
       	font-size: 0.875rem;

     

       23
       23
        
       }

     

       24
       24
        
       

     

       25
       25
        
       .mb-1 {

     

       26
       26
       -
         margin-bottom: 1rem;

     

       26
       26
       +
       	margin-bottom: 1rem;

     

       27
       27
        
       }