feat: proper notification (error/success) handling

.env.template

@@ -15,3 +15,7 @@ APP_ENV="production"
 DOMAIN=""
 FRONTEND_URL=""
 
+# Frontend
+VITE_VIEW_COOKIE_PATH="/"
+VITE_VIEW_COOKIE_DOMAIN=$DOMAIN
+VITE_COKOIE_SAME_SITE="strict"

web/src/app.css

@@ -5,11 +5,19 @@
 	--light-foreground: #e0e0e0;
 	--light-accent: #303052;
 	--light-text: rgb(34, 40, 49);
+	--light-error-text: #4b0000;
+	--light-error-background: #fcaaaae1;
+	--light-success-text: #004b0a;
+	--light-success-background: #adfcaae1;
 
 	--dark-background: #181818;
 	--dark-foreground: #222222;
 	--dark-accent: #bebff7;
 	--dark-text: rgb(238, 238, 238);
+	--dark-error-text: #fcadaa;
+	--dark-error-background: #4b0000e0;
+	--dark-success-text: #adfcaa;
+	--dark-success-background: #004b0ae0;
 }
 
 /* Scrollbar width */
@@ -79,7 +87,7 @@
 	}
 
 	button {
-		@apply rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
+		@apply cursor-pointer rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
 	}
 
 	button:hover {
@@ -131,20 +139,20 @@
 
 	/* Error messages */
 	.error {
-		@apply rounded-lg bg-red-100 p-3 text-sm text-red-500;
+		@apply flex items-center justify-between rounded-lg bg-[var(--light-error-background)] p-3 text-sm text-[var(--light-error-text)];
 	}
 
 	.dark .error {
-		@apply bg-red-900/30 text-red-300;
+		@apply bg-[var(--dark-error-background)] text-[var(--dark-error-text)];
 	}
 
 	/* Success messages */
 	.success {
-		@apply rounded-lg bg-green-100 p-3 text-sm text-green-500;
+		@apply flex items-center justify-between rounded-lg bg-[var(--light-success-background)] p-3 text-sm text-[var(--light-success-text)];
 	}
 
 	.dark .success {
-		@apply bg-green-900/30 text-green-300;
+		@apply bg-[var(--dark-success-background)] text-[var(--dark-success-text)];
 	}
 
 	.btn-primary {
@@ -185,13 +193,18 @@
 	}
 
 	.sidebar {
-		@apply fixed flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
+		@apply fixed z-10 flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
 	}
 
 	.dark .sidebar {
 		@apply border-[var(--dark-foreground)] bg-[var(--dark-foreground)];
 	}
 
+	.sidebar-header {
+		/* Should align with the navbar height for visual consistency */
+		@apply h-20;
+	}
+
 	.sidebar-header,
 	.sidebar-footer {
 		@apply border-[var(--light-text)]/20 p-4;
@@ -243,27 +256,11 @@
 	}
 
 	.sidebar-item-delete {
-		@apply flex h-6.5 w-6.5 items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1;
+		@apply flex h-6.5 w-6.5 items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1 text-[var(--light-accent)]/50 hover:text-[var(--light-accent)];
 	}
 
 	.dark .sidebar-item-delete {
-		@apply border-[var(--dark-accent)]/20;
-	}
-
-	.sidebar-item-delete > svg {
-		@apply text-[var(--light-accent)]/50;
-	}
-
-	.dark .sidebar-item-delete > svg {
-		@apply text-[var(--dark-accent)]/50;
-	}
-
-	.sidebar-item-delete:hover > svg {
-		@apply text-[var(--light-accent)] transition-colors delay-100;
-	}
-
-	.dark .sidebar-item-delete:hover > svg {
-		@apply text-[var(--dark-accent)];
+		@apply border-[var(--dark-accent)]/20 text-[var(--dark-accent)]/50 hover:text-[var(--dark-accent)];
 	}
 
 	.sidebar-divider {
@@ -304,7 +301,7 @@
 	}
 
 	.versions-dropdown-item {
-		@apply w-full cursor-pointer bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
+		@apply w-full bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
 	}
 
 	.dark .versions-dropdown-item {
@@ -336,6 +333,10 @@
 	}
 
 	/* Note editor */
+	.note-title-container {
+		@apply mb-4;
+	}
+
 	.note-title-input {
 		@apply w-full rounded-2xl border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
 	}
@@ -352,18 +353,30 @@
 		@apply text-[var(--dark-text)]/60;
 	}
 
+	.note-editor-container {
+		@apply flex min-h-0 flex-1 flex-col overflow-auto;
+	}
+
+	.note-editor-wrapper {
+		@apply flex h-full flex-col;
+	}
+
+	.note-editor-content {
+		@apply flex h-full flex-col;
+	}
+
 	.note-textarea {
 		@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
 	}
 
-	.note-save-button {
-		@apply absolute right-10 bottom-10;
-	}
-
 	.dark .note-textarea {
 		@apply focus:border-[var(--dark-accent)]/60;
 	}
 
+	.note-save-button {
+		@apply fixed right-10 bottom-10 z-10;
+	}
+
 	/* Markdown preview */
 	.markdown-preview h1 {
 		@apply mt-6 mb-4 border-b border-[var(--light-foreground)] pb-3 text-3xl;
@@ -505,15 +518,15 @@
 
 	/* Settings modal */
 	.modal-backdrop {
-		@apply fixed inset-0 z-50 flex items-center justify-center backdrop-blur-xs;
+		@apply fixed inset-0 z-40 flex items-center justify-center backdrop-blur-xs;
 	}
 
 	.modal-content {
-		@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
+		@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg border-2 border-[var(--light-accent)]/10 bg-[var(--light-background)] shadow-lg;
 	}
 
 	.dark .modal-content {
-		@apply bg-[var(--dark-background)];
+		@apply border-[var(--dark-accent)]/10 bg-[var(--dark-background)];
 	}
 
 	.modal-section {
@@ -525,11 +538,11 @@
 	}
 
 	.modal-close-button {
-		@apply text-[var(--light-background)]/60 hover:text-[var(--light-background)];
+		@apply h-8 w-8 items-center justify-center rounded-md border-1 border-[var(--light-accent)]/20 bg-transparent p-1 text-[var(--light-accent)]/50 hover:text-[var(--light-accent)];
 	}
 
 	.dark .modal-close-button {
-		@apply text-[var(--dark-background)]/60 hover:text-[var(--dark-background)];
+		@apply border-[var(--dark-accent)]/20 text-[var(--dark-accent)]/50 hover:text-[var(--dark-accent)];
 	}
 
 	/* Loading spinner */
@@ -577,19 +590,43 @@
 
 	/* Main layout */
 	.main-layout-container {
-		@apply flex h-screen bg-[var(--light-background)];
+		@apply flex h-screen w-full bg-[var(--light-background)];
 	}
 
 	.dark .main-layout-container {
 		@apply bg-[var(--dark-background)];
 	}
 
-	.main-error-popup {
+	.content-wrapper {
+		@apply flex h-screen flex-1 flex-col overflow-hidden;
+	}
+
+	.note-content-fixed-width {
+		@apply mx-auto flex w-full max-w-[800px] flex-col px-8 py-0;
+		height: calc(100% - 5rem);
+	}
+
+	@media (max-width: 768px) {
+		.note-content-fixed-width {
+			@apply max-w-full px-4 py-0;
+		}
+	}
+
+	.main-info-popup {
+		/* Z-value should be set so that this is on top of the modal's background blur */
 		@apply fixed top-4 right-4 z-50 max-w-md;
 	}
 
+	.main-info-popup-button {
+		@apply ml-2 h-4 w-4 items-center justify-center rounded-md bg-transparent p-0 text-inherit;
+	}
+
 	.main-header {
-		@apply flex items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
+		/* 
+            Should have higher z-value than the contents, but still less than the sidebar
+            (otherwise the navbar and the sidebar shadows will seem uneven).
+        */
+		@apply z-5 flex h-20 items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
 	}
 
 	.dark .main-header {
@@ -597,7 +634,7 @@
 	}
 
 	.main-content {
-		@apply flex-1 overflow-auto bg-[var(--light-background)] p-6;
+		@apply flex min-h-0 flex-1 flex-col overflow-auto bg-[var(--light-background)] p-6;
 	}
 
 	.dark .main-content {

web/src/lib/client.ts

@@ -103,6 +103,7 @@ export const accessToken: Writable<string | null> = writable(null)
 export const csrfToken: Writable<string | null> = writable(null)
 export const isPending: Writable<boolean> = writable(false)
 export const cError: Writable<string | null> = writable(null)
+export const cSuccess: Writable<string | null> = writable(null)
 
 class ApiClient {
 	private viewCookieName: string
@@ -122,10 +123,11 @@ class ApiClient {
 
 	private async handleRequest<T>(
 		fn: () => Promise<T>,
-		options: { useBearerAuth: boolean }
+		options: { useBearerAuth: boolean; suspendGlobalErr: boolean }
 	): Promise<T | null> {
 		isPending.set(true)
 		cError.set(null)
+		cSuccess.set(null)
 
 		// NOTE: If `handleResponse` is used, errors thrown from it will be caught here
 
@@ -145,8 +147,17 @@ class ApiClient {
 
 			return await fn()
 		} catch (err) {
-			cError.set(err instanceof Error ? err.message : "Unknown error")
-			console.log(`[ERR] ${get(cError)}`)
+			const errMsg = err instanceof Error ? err.message : "Unknown error"
+
+			// The suspension option is handy when we want to display the error inside a modal instead of in a global notification
+			if (options.suspendGlobalErr) {
+				// Throw the same error to the next handler (should be handled inside the caller component)
+				throw new Error(errMsg)
+			} else {
+				cError.set(errMsg)
+			}
+
+			console.log(`[ERR] ${errMsg}`)
 		} finally {
 			isPending.set(false)
 		}
@@ -224,7 +235,7 @@ class ApiClient {
 				accessToken.set(newToken)
 				this.lastAtUpdate = new Date()
 			},
-			{ useBearerAuth: false }
+			{ useBearerAuth: false, suspendGlobalErr: false }
 		)
 	}
 
@@ -258,7 +269,7 @@ class ApiClient {
 				csrfToken.set(newToken)
 				this.lastCsrfUpdate = new Date()
 			},
-			{ useBearerAuth: false }
+			{ useBearerAuth: false, suspendGlobalErr: false }
 		)
 	}
 
@@ -414,7 +425,7 @@ class ApiClient {
 
 				await goto("/login")
 			},
-			{ useBearerAuth: false }
+			{ useBearerAuth: false, suspendGlobalErr: false }
 		)
 	}
 
@@ -437,7 +448,7 @@ class ApiClient {
 
 				goto("/")
 			},
-			{ useBearerAuth: false }
+			{ useBearerAuth: false, suspendGlobalErr: false }
 		)
 	}
 
@@ -458,10 +469,10 @@ class ApiClient {
 					return
 				}
 
-				await this.handleResponse<void>(response, { useBearerAuth: false })
+				await this.handleResponse<void>(response, { useBearerAuth: true })
 				await this.handleLocalLogout()
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -473,12 +484,12 @@ class ApiClient {
 						...this.getAuthHeader()
 					}
 				})
-				const data = await this.handleResponse<ApiUserResponse>(response, { useBearerAuth: false })
+				const data = await this.handleResponse<ApiUserResponse>(response, { useBearerAuth: true })
 				const user = this.deserializeUser(data)
 
 				currentUser.set(user)
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -498,19 +509,20 @@ class ApiClient {
 						...this.getAuthHeader(),
 						"Content-Type": "application/json"
 					},
+					credentials: "include",
 					body: JSON.stringify(data)
 				})
 
-				const { accessToken: token, user } = await this.handleResponse<{
-					accessToken: string
+				const { access_token: token, user } = await this.handleResponse<{
+					access_token: string
 					user: User
-				}>(response, { useBearerAuth: false })
+				}>(response, { useBearerAuth: true })
 
 				accessToken.set(token)
 				currentUser.set(user || null)
 				this.lastAtUpdate = new Date()
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
 		)
 	}
 
@@ -532,10 +544,10 @@ class ApiClient {
 					return
 				}
 
-				await this.handleResponse<void>(response, { useBearerAuth: false })
+				await this.handleResponse<void>(response, { useBearerAuth: true })
 				await this.handleLocalLogout()
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
 		)
 	}
 
@@ -556,12 +568,12 @@ class ApiClient {
 					}
 				})
 
-				const users = await this.handleResponse<User[]>(response, { useBearerAuth: false })
+				const users = await this.handleResponse<User[]>(response, { useBearerAuth: true })
 				console.log(`[ADMIN] Got ${users.length} user results`)
 
 				return users
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
 		)
 	}
 
@@ -589,9 +601,9 @@ class ApiClient {
 					return
 				}
 
-				await this.handleResponse<void>(response, { useBearerAuth: false })
+				await this.handleResponse<void>(response, { useBearerAuth: true })
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
 		)
 	}
 
@@ -609,7 +621,7 @@ class ApiClient {
 
 				let notes: NoteMetadata[] = []
 				let data = await this.handleResponse<ApiNoteMetadataResponse[]>(response, {
-					useBearerAuth: false
+					useBearerAuth: true
 				})
 
 				if (data) {
@@ -620,7 +632,7 @@ class ApiClient {
 
 				return notes
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -636,9 +648,9 @@ class ApiClient {
 						...this.getAuthHeader()
 					}
 				})
-				return await this.handleResponse<NewNoteResponse>(response, { useBearerAuth: false })
+				return await this.handleResponse<NewNoteResponse>(response, { useBearerAuth: true })
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -665,7 +677,7 @@ class ApiClient {
 				})
 
 				const data = await this.handleResponse<ApiFullNoteResponse>(response, {
-					useBearerAuth: false
+					useBearerAuth: true
 				})
 				const note = this.deserializeFullNote(data)
 
@@ -675,7 +687,7 @@ class ApiClient {
 
 				return note
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -698,9 +710,9 @@ class ApiClient {
 					return
 				}
 
-				await this.handleResponse<void>(response, { useBearerAuth: false })
+				await this.handleResponse<void>(response, { useBearerAuth: true })
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -728,7 +740,7 @@ class ApiClient {
 				})
 
 				const data = await this.handleResponse<ApiVersionMetadataResponse[]>(response, {
-					useBearerAuth: false
+					useBearerAuth: true
 				})
 				const versions = this.deserializeVersionMetadatas(data)
 
@@ -737,7 +749,7 @@ class ApiClient {
 
 				return versions
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -764,9 +776,9 @@ class ApiClient {
 					return
 				}
 
-				await this.handleResponse<void>(response, { useBearerAuth: false })
+				await this.handleResponse<void>(response, { useBearerAuth: true })
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 
@@ -781,6 +793,9 @@ class ApiClient {
 
 		// NOTE: No need to explicitly prevent attempting a cache hit as versions aren't editable
 
+		// TODO: If accessing the active version, don't attempt to hit the cache,
+		//       but instead load the contents from the currently active full note
+
 		const cachedVersion = this.loadedVersionsCache.get(noteID + versionID)
 		if (cachedVersion != null) {
 			return cachedVersion
@@ -795,7 +810,7 @@ class ApiClient {
 				})
 
 				const data = await this.handleResponse<ApiFullVersionResponse>(response, {
-					useBearerAuth: false
+					useBearerAuth: true
 				})
 				const version = this.joinDeserializedVersion(noteID, data)
 
@@ -808,7 +823,7 @@ class ApiClient {
 
 				return version
 			},
-			{ useBearerAuth: true }
+			{ useBearerAuth: true, suspendGlobalErr: false }
 		)
 	}
 }

web/src/lib/components/AuthForm.svelte

@@ -41,11 +41,7 @@
 			return
 		}
 
-		try {
 		await handler(username, password)
-		} catch (err) {
-			cError.set(err instanceof Error ? err.message : "Authentication failed")
-		}
 	}
 </script>
 

web/src/lib/components/NoteEditor.svelte

@@ -122,9 +122,9 @@
 	}
 </script>
 
-<div class="flex h-full flex-col">
+<div class="note-editor-content">
 	<!-- Note title -->
-	<div class="mb-4">
+	<div class="note-title-container">
 		{#if isEditing}
 			<input
 				type="text"
@@ -158,10 +158,10 @@
 		{/if}
 	</div>
 
-	<!-- Note content -->
-	<div class="flex-1 overflow-auto">
+	<!-- Note content (takes up remaining vertical space) -->
+	<div class="note-editor-container">
 		{#if isEditing}
-			<div class="relative h-full">
+			<div class="note-editor-wrapper">
 				<textarea
 					bind:this={textarea}
 					bind:value={editableContent}

web/src/lib/components/NoteView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte"
+	import { onDestroy, onMount } from "svelte"
 	import { goto } from "$app/navigation"
 	import ThemeToggle from "./ThemeToggle.svelte"
 	import Sidebar from "./Sidebar.svelte"
@@ -12,10 +12,13 @@
 		availableNotes,
 		versionHistory,
 		cError,
-		type FullNote
+		type FullNote,
+		cSuccess
 	} from "$lib/client"
 	import ToggleSidebar from "$lib/icons/ToggleSidebar.svelte"
 	import VersionArrow from "$lib/icons/VersionArrow.svelte"
+	import Close from "$lib/icons/Close.svelte"
+	import { ERR_NOTIFICATION_DUR, SUC_NOTIFICATION_DUR } from "$lib/const"
 
 	// State
 	let isComponentReady = false
@@ -23,24 +26,21 @@
 	let showSettings = false
 	let showVersionsDropdown = false
 	let isEditing = false
+	let errorTimeout: ReturnType<typeof setTimeout> | null = null
+	let successTimeout: ReturnType<typeof setTimeout> | null = null
 
 	onMount(async (): Promise<any> => {
-		try {
 		// The following fetch attempts to refresh any expired tokens automatically
 		await apiClient.getCurrentUser()
 
 		// If still no current user after the fetch attempt, redirect to login
 		if (!$currentUser) {
-				console.log("no user data found, routing to auth page")
+			console.log("[VIEW] No user data found, routing to login page")
 			goto("/login")
 			return
 		}
 
 		await loadNotes()
-		} catch (error) {
-			console.error(`error during auth: ${error}`)
-			goto("/login")
-		}
 
 		// Default to sidebar closed on mobile
 		const handleResize = () => {
@@ -165,7 +165,6 @@
 	}
 
 	const deleteNote = async (noteID: string) => {
-		try {
 		await apiClient.deleteNote(noteID)
 
 		// If we're deleting the currently active note, clear the current note
@@ -175,24 +174,79 @@
 
 		// Refresh the notes list due to updates being pushed to server
 		await loadNotes()
-		} catch (err) {
-			cError.set(`Failed to delete note: ${err instanceof Error ? err.message : "Unknown error"}`)
-		}
+
+		cSuccess.set("Note deleted successfully.")
 	}
 
 	const logout = async () => {
 		await apiClient.logout()
 	}
+
+	const errorUnsubscribe = cError.subscribe((value) => {
+		// Clear any existing timeout to avoid multiple timeouts
+		if (errorTimeout) {
+			clearTimeout(errorTimeout)
+			errorTimeout = null
+		}
+
+		if (value) {
+			errorTimeout = setTimeout(() => {
+				cError.set(null)
+			}, ERR_NOTIFICATION_DUR)
+		}
+	})
+
+	const successUnsubscribe = cSuccess.subscribe((value) => {
+		// Clear any existing timeout to avoid multiple timeouts
+		if (successTimeout) {
+			clearTimeout(successTimeout)
+			successTimeout = null
+		}
+
+		if (value) {
+			successTimeout = setTimeout(() => {
+				cSuccess.set(null)
+			}, SUC_NOTIFICATION_DUR)
+		}
+	})
+
+	onDestroy(() => {
+		errorUnsubscribe()
+		successUnsubscribe()
+
+		// Clear any pending timeouts
+		if (errorTimeout) {
+			clearTimeout(errorTimeout)
+		}
+
+		if (successTimeout) {
+			clearTimeout(successTimeout)
+		}
+	})
 </script>
 
 {#if isComponentReady}
 	<div class="main-layout-container">
 		<!-- Error notification -->
 		{#if $cError}
-			<div class="main-error-popup">
+			<div class="main-info-popup">
 				<div class="error">
 					{$cError}
-					<button class="ml-2 text-red-700" on:click={() => cError.set(null)}> × </button>
+					<button class="main-info-popup-button" on:click={() => cError.set(null)}>
+						<Close />
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Success notification -->
+		{#if $cSuccess}
+			<div class="main-info-popup">
+				<div class="success">
+					{$cSuccess}
+					<button class="main-info-popup-button" on:click={() => cSuccess.set(null)}>
+						<Close />
+					</button>
 				</div>
 			</div>
 		{/if}
@@ -210,9 +264,9 @@
 			on:close={closeSidebar}
 		/>
 
-		<!-- Main content -->
+		<!-- Main content area -->
 		<div
-			class="flex flex-1 flex-col overflow-hidden transition-all duration-300"
+			class="content-wrapper transition-all duration-300"
 			class:md:-ml-64={!sidebarOpen}
 			class:md:ml-0={sidebarOpen}
 		>
@@ -279,7 +333,8 @@
 				</div>
 			</header>
 
-			<!-- Note content area -->
+			<!-- Note content area with fixed width -->
+			<div class="note-content-fixed-width">
 				<main class="main-content">
 					{#if $currentFullNote}
 						<NoteEditor note={$currentFullNote} bind:isEditing {saveNote} />
@@ -291,6 +346,7 @@
 					{/if}
 				</main>
 			</div>
+		</div>
 
 		<!-- Settings Modal -->
 		{#if showSettings}

web/src/lib/components/SettingsModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { apiClient, cError } from "$lib/client"
+	import { apiClient, cSuccess } from "$lib/client"
 	import Close from "$lib/icons/Close.svelte"
 	import { isPasswordValid } from "$lib/utils"
 	import { onMount } from "svelte"
@@ -10,11 +10,12 @@
 	let currentPassword = ""
 	let newPassword = ""
 	let confirmPassword = ""
-	let passwordError = ""
+	let changePasswordModalError = ""
 	let isNewPasswordValid = true
 
 	let deleteConfirmPassword = ""
 	let deleteConfirmText = ""
+	let deleteUserModalError = ""
 
 	let modalContent: HTMLDivElement | null = null
 	let previouslyFocusedElement: HTMLElement | null = null
@@ -45,24 +46,24 @@
 
 	const changePassword = async () => {
 		if (!currentPassword) {
-			passwordError = "Current password is required"
+			changePasswordModalError = "Current password is required."
 			return
 		}
 
 		if (!newPassword) {
-			passwordError = "New password is required"
+			changePasswordModalError = "New password is required."
 			return
 		}
 
 		if (newPassword !== confirmPassword) {
-			passwordError = "New passwords do not match"
+			changePasswordModalError = "New passwords do not match."
 			return
 		}
 
-		;[isNewPasswordValid, passwordError] = isPasswordValid(newPassword)
+		;[isNewPasswordValid, changePasswordModalError] = isPasswordValid(newPassword)
 
 		if (!isNewPasswordValid) {
-			// Error will be automatically displayed
+			// Error will be automatically displayed inside corresponding modal section
 			return
 		}
 
@@ -72,33 +73,32 @@
 			newPassword = ""
 			confirmPassword = ""
 
-			cError.set("Password updated successfully")
+			cSuccess.set("Password updated successfully.")
 
 			setTimeout(() => {
-				cError.set(null)
 				onClose()
-			}, 2000)
-		} catch (error) {
-			// Error handling is done by the API client
+			}, 100)
+		} catch (err) {
+			changePasswordModalError = err instanceof Error ? err.message : "Unknown error."
 		}
 	}
 
 	const deleteAccount = async () => {
 		if (!deleteConfirmPassword) {
-			passwordError = "Password is required to delete your account"
+			deleteUserModalError = "Password is required to delete your account."
 			return
 		}
 
 		if (deleteConfirmText !== "DELETE") {
-			passwordError = "Please type DELETE to confirm account deletion"
+			deleteUserModalError = "Please type DELETE to confirm account deletion."
 			return
 		}
 
 		try {
 			await apiClient.deleteCurrentUser(deleteConfirmPassword)
 			// The API client will handle the redirect to login page after successful deletion
-		} catch (error) {
-			// Error handling is done by the API client
+		} catch (err) {
+			deleteUserModalError = err instanceof Error ? err.message : "Unknown error."
 		}
 	}
 
@@ -142,7 +142,7 @@
 		role="document"
 		tabindex="-1"
 	>
-		<!-- Header -->
+		<!-- Header (title + close button) -->
 		<div class="modal-section flex items-center justify-between" role="heading" aria-level="1">
 			<h2 class="text-xl font-bold">Settings</h2>
 			<button on:click={onClose} class="modal-close-button" aria-label="Close settings">
@@ -154,9 +154,9 @@
 		<div class="modal-section">
 			<h3 class="mb-4 text-lg font-bold">Account Settings</h3>
 
-			{#if passwordError}
+			{#if changePasswordModalError}
 				<div class="error mb-4" role="alert">
-					{passwordError}
+					{changePasswordModalError}
 				</div>
 			{/if}
 
@@ -181,14 +181,22 @@
 					<input type="password" id="confirmPassword" bind:value={confirmPassword} class="w-full" />
 				</div>
 
-				<button on:click={changePassword} class="btn-primary w-full"> Change Password </button>
+				<button on:click={changePassword} class="btn-primary w-full rounded-full">
+					Change Password
+				</button>
 			</div>
 		</div>
 
 		<!-- Danger zone -->
-		<div class="p-4">
+		<div class="modal-section">
 			<h3 class="mb-4 text-lg font-bold text-red-500">Danger Zone</h3>
 
+			{#if deleteUserModalError}
+				<div class="error mb-4" role="alert">
+					{deleteUserModalError}
+				</div>
+			{/if}
+
 			<div class="space-y-4">
 				<p class="text-sm">
 					Deleting your account will permanently remove all your notes and account information. This
@@ -220,7 +228,7 @@
 
 				<button
 					on:click={deleteAccount}
-					class="w-full rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
+					class="w-full rounded-full bg-red-500 font-bold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
 					disabled={deleteConfirmText !== "DELETE" || !deleteConfirmPassword}
 				>
 					Delete My Account

web/src/lib/components/Sidebar.svelte

@@ -90,7 +90,7 @@
 			<div class="relative pl-4">
 				<button
 					on:click={closeSidebar}
-					class="btn-secondary rounded-full p-2 md:hidden"
+					class="btn-secondary h-9 w-9 rounded-full p-2 md:hidden"
 					aria-label="Close sidebar"
 				>
 					<Close />

web/src/lib/const.ts

@@ -30,3 +30,7 @@ export const VIEW_COOKIE_PATH = import.meta.env.VITE_VIEW_COOKIE_PATH || "/"
 export const VIEW_COOKIE_DOMAIN = import.meta.env.VITE_VIEW_COOKIE_DOMAIN || "localhost"
 export const COOKIE_SAME_SITE = import.meta.env.VITE_COOKIE_SAME_SITE || "strict"
 export const COOKIE_SECURE = import.meta.env.PROD ? true : false
+
+// Error/success notification display durations
+export const ERR_NOTIFICATION_DUR = 8 * 1000 // 8 s.
+export const SUC_NOTIFICATION_DUR = 8 * 1000 // 8 s.

web/src/lib/icons/Close.svelte

@@ -1,9 +1,3 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="h-6 w-6"
-	fill="none"
-	viewBox="0 0 24 24"
-	stroke="currentColor"
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 </svg>

web/src/routes/login/+page.svelte

@@ -3,7 +3,7 @@
 	import { apiClient } from "$lib/client"
 
 	const loginHandler = (username: string, password: string) => {
-		return apiClient.login(username, password)
+		return apiClient.login(username, password) as Promise<void>
 	}
 </script>