From 8f9f5c76cb81f8d5bf19c5dad76611d5f9f7c17c Mon Sep 17 00:00:00 2001
From: ae <git@golfed.xyz>
Date: Mon, 21 Apr 2025 22:21:30 +0300
Subject: [PATCH] feat: proper notification (error/success) handling

---
 web/src/app.css                             |  70 +++++++------
 web/src/lib/components/AuthForm.svelte      |   6 +-
 web/src/lib/components/NoteView.svelte      | 110 +++++++++++++++-----
 web/src/lib/components/SettingsModal.svelte |  52 +++++----
 web/src/lib/components/Sidebar.svelte       |   2 +-
 web/src/lib/const.ts                        |   4 +
 web/src/lib/icons/Close.svelte              |   8 +-
 web/src/routes/login/+page.svelte           |   2 +-
 8 files changed, 158 insertions(+), 96 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 0ac8d70..79b15ef 100644
--- a/web/src/app.css
+++ b/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 cursor-pointer 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 {
@@ -521,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 {
@@ -541,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 */
@@ -615,12 +612,21 @@
 		}
 	}
 
-	.main-error-popup {
+	.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 h-20 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 {
diff --git a/web/src/lib/components/AuthForm.svelte b/web/src/lib/components/AuthForm.svelte
index 8a289af..6a4dd3c 100644
--- a/web/src/lib/components/AuthForm.svelte
+++ b/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")
-		}
+		await handler(username, password)
 	}
 </script>
 
diff --git a/web/src/lib/components/NoteView.svelte b/web/src/lib/components/NoteView.svelte
index 72a5753..937585f 100644
--- a/web/src/lib/components/NoteView.svelte
+++ b/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,25 +26,22 @@
 	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()
+		// 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")
-				goto("/login")
-				return
-			}
-
-			await loadNotes()
-		} catch (error) {
-			console.error(`error during auth: ${error}`)
+		// If still no current user after the fetch attempt, redirect to login
+		if (!$currentUser) {
+			console.log("[VIEW] No user data found, routing to login page")
 			goto("/login")
+			return
 		}
 
+		await loadNotes()
+
 		// Default to sidebar closed on mobile
 		const handleResize = () => {
 			if (window.innerWidth < 768 && sidebarOpen) {
@@ -165,34 +165,88 @@
 	}
 
 	const deleteNote = async (noteID: string) => {
-		try {
-			await apiClient.deleteNote(noteID)
+		await apiClient.deleteNote(noteID)
 
-			// If we're deleting the currently active note, clear the current note
-			if ($currentFullNote && $currentFullNote.id === noteID) {
-				currentFullNote.set(null)
-			}
-
-			// 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"}`)
+		// If we're deleting the currently active note, clear the current note
+		if ($currentFullNote && $currentFullNote.id === noteID) {
+			currentFullNote.set(null)
 		}
+
+		// Refresh the notes list due to updates being pushed to server
+		await loadNotes()
+
+		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}
diff --git a/web/src/lib/components/SettingsModal.svelte b/web/src/lib/components/SettingsModal.svelte
index 61d623f..cfb0066 100644
--- a/web/src/lib/components/SettingsModal.svelte
+++ b/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
diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte
index c1b7cef..7276817 100644
--- a/web/src/lib/components/Sidebar.svelte
+++ b/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 />
diff --git a/web/src/lib/const.ts b/web/src/lib/const.ts
index 51a1dee..3c5f246 100644
--- a/web/src/lib/const.ts
+++ b/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.
diff --git a/web/src/lib/icons/Close.svelte b/web/src/lib/icons/Close.svelte
index 694b638..ec489dc 100644
--- a/web/src/lib/icons/Close.svelte
+++ b/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>
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index a5584b7..c49b8f1 100644
--- a/web/src/routes/login/+page.svelte
+++ b/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>