added notification toasts (error modals still broken)

internal/view/page/test.templ

@@ -0,0 +1,71 @@
+package page
+
+import "git.haelnorr.com/h/oslstats/internal/view/layout"
+
+// Page content for the test notification page
+templ Test() {
+	@layout.Global("Notification Test") {
+		<div class="flex items-center justify-center min-h-[calc(100vh-200px)]">
+			<div class="w-full max-w-md px-4">
+				<!-- Title -->
+				<h1 class="text-4xl font-bold text-center text-text mb-8">
+					Notification Test
+				</h1>
+				<!-- Form Card -->
+				<div class="bg-surface0 rounded-lg shadow-lg p-6 border border-overlay0">
+					<form hx-post="/test" hx-swap="none" class="flex flex-col gap-4">
+						<!-- Notification Type -->
+						<div class="flex flex-col gap-2">
+							<label for="type" class="text-sm font-semibold text-subtext1">
+								Notification Type
+							</label>
+							<select
+								name="type"
+								id="type"
+								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
+							>
+								<option value="error">Error Modal</option>
+								<option value="warn">Warning Toast</option>
+								<option value="info">Info Toast</option>
+								<option value="success">Success Toast</option>
+							</select>
+						</div>
+						<!-- Title Input -->
+						<div class="flex flex-col gap-2">
+							<label for="title" class="text-sm font-semibold text-subtext1">
+								Title
+							</label>
+							<input
+								type="text"
+								name="title"
+								id="title"
+								placeholder="Enter notification title"
+								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
+							/>
+						</div>
+						<!-- Message Input -->
+						<div class="flex flex-col gap-2">
+							<label for="message" class="text-sm font-semibold text-subtext1">
+								Message
+							</label>
+							<input
+								type="text"
+								name="message"
+								id="message"
+								placeholder="Enter notification message"
+								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
+							/>
+						</div>
+						<!-- Submit Button -->
+						<button
+							type="submit"
+							class="mt-2 bg-mauve text-crust font-semibold px-6 py-3 rounded-lg hover:bg-mauve/75 transition"
+						>
+							Send Notification
+						</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	}
+}