From aa8161ffc2073eebbf1b47418dba12e8acc7eaf3 Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Mon, 29 Sep 2025 17:32:01 +0200
Subject: [PATCH] add:modal component

---
 AGENTS.md                              |   3 +-
 src/lib/components/Modal.svelte        | 280 +++++++++++++++++++++++++
 src/lib/components/ProfilePanel.svelte | 135 ++++--------
 src/lib/index.ts                       |   1 +
 4 files changed, 320 insertions(+), 99 deletions(-)
 create mode 100644 src/lib/components/Modal.svelte

diff --git a/AGENTS.md b/AGENTS.md
index 78642aa..f1fea5b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -25,8 +25,7 @@
 
 ## Testing
 
-- **Stories**: Storybook for component testing
-- **No unit tests**: Focus on Storybook stories for component validation
+- **No testing framework**: Components are tested manually during development
 
 ## Database
 
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..8caafbe
--- /dev/null
+++ b/src/lib/components/Modal.svelte
@@ -0,0 +1,280 @@
+<script lang="ts">
+	let {
+		showModal = $bindable(),
+		header,
+		children,
+		positioning = 'center'
+	} = $props<{
+		showModal: boolean;
+		header?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		positioning?: 'center' | 'dropdown';
+	}>();
+
+	let dialog = $state<HTMLDialogElement>();
+
+	$effect(() => {
+		if (showModal && dialog && positioning === 'center') {
+			dialog.showModal();
+		}
+	});
+
+	function closeModal() {
+		if (dialog && positioning === 'center') {
+			dialog.close();
+		} else {
+			showModal = false;
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		const target = e.target as Element;
+		if (
+			e.target === dialog ||
+			(positioning === 'dropdown' && target && !target.closest('.modal-content'))
+		) {
+			closeModal();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			closeModal();
+		}
+	}
+
+	// Handle backdrop clicks for dropdown mode
+	function handleWindowClick(e: Event) {
+		if (positioning === 'dropdown' && showModal) {
+			const target = e.target as Element;
+			if (target && !target.closest('.modal') && !target.closest('.profile-container')) {
+				closeModal();
+			}
+		}
+	}
+</script>
+
+<svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} />
+
+{#if positioning === 'center'}
+	<dialog
+		bind:this={dialog}
+		onclose={() => (showModal = false)}
+		onclick={handleBackdropClick}
+		class="modal"
+	>
+		<div class="modal-content">
+			{#if header}
+				<div class="modal-header">
+					{@render header()}
+					<button type="button" class="close-button" onclick={closeModal} aria-label="Close modal">
+						<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+							<path
+								d="M18 6L6 18M6 6L18 18"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</button>
+				</div>
+			{:else}
+				<button
+					type="button"
+					class="close-button-solo"
+					onclick={closeModal}
+					aria-label="Close modal"
+				>
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+						<path
+							d="M18 6L6 18M6 6L18 18"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			{/if}
+
+			{#if children}
+				<div class="modal-body">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	</dialog>
+{:else if positioning === 'dropdown' && showModal}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div class="modal dropdown" onclick={handleBackdropClick} role="dialog" tabindex="-1">
+		<div class="modal-content">
+			{#if header}
+				<div class="modal-header">
+					{@render header()}
+					<button type="button" class="close-button" onclick={closeModal} aria-label="Close modal">
+						<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+							<path
+								d="M18 6L6 18M6 6L18 18"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</button>
+				</div>
+			{:else}
+				<button
+					type="button"
+					class="close-button-solo"
+					onclick={closeModal}
+					aria-label="Close modal"
+				>
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+						<path
+							d="M18 6L6 18M6 6L18 18"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			{/if}
+
+			{#if children}
+				<div class="modal-body">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal {
+		max-width: 32rem;
+		max-height: 90vh;
+		width: 100%;
+		border-radius: 12px;
+		border: none;
+		padding: 0;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+		background: white;
+		overflow: hidden;
+	}
+
+	.modal.dropdown {
+		position: absolute;
+		top: calc(100% + 8px);
+		right: 0;
+		max-width: 320px;
+		width: 320px;
+		z-index: 1000;
+	}
+
+	.modal::backdrop {
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		min-height: 100%;
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20px;
+		border-bottom: 1px solid #e5e5e5;
+	}
+
+	.modal-body {
+		padding: 0;
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	.close-button,
+	.close-button-solo {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: #666;
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+		flex-shrink: 0;
+	}
+
+	.close-button-solo {
+		position: absolute;
+		top: 16px;
+		right: 16px;
+	}
+
+	.close-button:hover,
+	.close-button-solo:hover {
+		background-color: #f5f5f5;
+		color: #333;
+	}
+
+	.close-button:focus,
+	.close-button-solo:focus {
+		outline: 2px solid #3b82f6;
+		outline-offset: 2px;
+	}
+
+	.modal[open] {
+		animation: slideIn 0.3s ease-out;
+	}
+
+	.modal.dropdown {
+		animation: slideIn 0.3s ease-out;
+	}
+
+	.modal[open]::backdrop {
+		animation: backdrop-fade 0.2s ease-out;
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes backdrop-fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.modal {
+			max-width: 95vw;
+			margin: 1rem;
+		}
+
+		.modal-header {
+			padding: 16px;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.modal.dropdown {
+			max-width: 280px;
+			width: 280px;
+		}
+	}
+</style>
diff --git a/src/lib/components/ProfilePanel.svelte b/src/lib/components/ProfilePanel.svelte
index 57968c5..72b4f39 100644
--- a/src/lib/components/ProfilePanel.svelte
+++ b/src/lib/components/ProfilePanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import Modal from './Modal.svelte';
 
 	interface Props {
 		username: string;
@@ -10,110 +11,47 @@
 
 	let { username, id, isOpen, onClose }: Props = $props();
 
-	// Close panel on escape key
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
+	// Create a bindable showModal that syncs with isOpen
+	let showModal = $derived(false);
+
+	// Sync showModal with isOpen prop
+	$effect(() => {
+		showModal = isOpen;
+	});
+
+	// Handle modal close and sync back to parent
+	$effect(() => {
+		if (!showModal && isOpen) {
 			onClose();
 		}
-	}
+	});
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<Modal bind:showModal positioning="dropdown">
+	{#snippet header()}
+		<h2>Profile</h2>
+	{/snippet}
 
-{#if isOpen}
-	<div class="backdrop" role="presentation">
-		<div class="panel">
-			<div class="panel-header">
-				<h2>Profile</h2>
-				<button class="close-button" onclick={onClose} type="button" aria-label="Close">
-					<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-						<path
-							d="M18 6L6 18M6 6L18 18"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-				</button>
-			</div>
+	<div class="panel-content">
+		<div class="user-item">
+			<span class="label">Username</span>
+			<span class="value">{username}</span>
+		</div>
 
-			<div class="panel-content">
-				<div class="user-item">
-					<span class="label">Username</span>
-					<span class="value">{username}</span>
-				</div>
+		<div class="user-item">
+			<span class="label">User ID</span>
+			<span class="value">{id}</span>
+		</div>
 
-				<div class="user-item">
-					<span class="label">User ID</span>
-					<span class="value">{id}</span>
-				</div>
-
-				<div class="panel-actions">
-					<form method="post" action="/logout" use:enhance>
-						<button type="submit" class="signout-button"> Sign out </button>
-					</form>
-				</div>
-			</div>
+		<div class="panel-actions">
+			<form method="post" action="/logout" use:enhance>
+				<button type="submit" class="signout-button"> Sign out </button>
+			</form>
 		</div>
 	</div>
-{/if}
+</Modal>
 
 <style>
-	.panel {
-		position: absolute;
-		top: calc(100% + 8px);
-		right: 0;
-		background: white;
-		border-radius: 12px;
-		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-		width: 320px;
-		overflow: hidden;
-		animation: slideIn 0.3s ease-out;
-		z-index: 1000;
-	}
-
-	@keyframes slideIn {
-		from {
-			opacity: 0;
-			transform: translateY(-20px) scale(0.95);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0) scale(1);
-		}
-	}
-
-	.panel-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 20px;
-		border-bottom: 1px solid #e5e5e5;
-	}
-
-	.panel-header h2 {
-		font-size: 18px;
-		font-weight: 600;
-		color: #333;
-		margin: 0;
-	}
-
-	.close-button {
-		background: none;
-		border: none;
-		padding: 4px;
-		cursor: pointer;
-		color: #666;
-		border-radius: 4px;
-		transition: background-color 0.2s ease;
-	}
-
-	.close-button:hover {
-		background-color: #f5f5f5;
-		color: #333;
-	}
-
 	.panel-content {
 		padding: 0;
 		display: flex;
@@ -171,11 +109,14 @@
 		background-color: #bd2130;
 	}
 
-	@media (max-width: 480px) {
-		.panel {
-			width: 280px;
-		}
+	:global(.modal h2) {
+		font-size: 18px;
+		font-weight: 600;
+		color: #333;
+		margin: 0;
+	}
 
+	@media (max-width: 480px) {
 		.user-item {
 			padding: 14px 16px;
 		}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 9376242..b406a32 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -5,3 +5,4 @@ export { default as ErrorMessage } from './components/ErrorMessage.svelte';
 export { default as ProfileIcon } from './components/ProfileIcon.svelte';
 export { default as ProfilePanel } from './components/ProfilePanel.svelte';
 export { default as Header } from './components/Header.svelte';
+export { default as Modal } from './components/Modal.svelte';