modal added

src/lib/components/FilterPage.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	const modalStore = getModalStore();
+
+	if ($modalStore[0]) console.log($modalStore[0]);
+</script>
+
+{#if $modalStore[0]}
+	<div
+		class="w-modal-wide bg-surface-100-800-token p-2 rounded-container-token space-y-2 drop-shadow-lg"
+	>
+		<div id="body" class="">lol test</div>
+		<hr />
+		<div id="footer" class="flex justify-center space-x-2">
+			<button
+				class="btn btn-primary border-token border-surface-500-400-token variant-ghost-warning"
+				on:click={() => {
+					$modalStore[0].response?.({ foo: 'bar' });
+					modalStore.close();
+				}}
+			>
+				Save
+			</button>
+			<button
+				class="btn btn-primary border-token border-surface-500-400-token variant-ghost-surface"
+				on:click={() => modalStore.close()}
+			>
+				Cancel
+			</button>
+		</div>
+	</div>
+{/if}

src/lib/components/ItemList.svelte

@@ -21,12 +21,24 @@
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	export let items: T[] = [];
 	export let selected: T;
 	export let columns: columnType<T>[];
+	export let filter = '';
 
 	selected ??= items[0];
 
+	const modalStore = getModalStore();
+	const modalSettings = {
+		type: 'component',
+		component: 'FilterPage',
+		props: { filter },
+		response: (result: boolean | undefined) => {
+			console.log('result', result);
+		},
+	} as ModalSettings;
+
 	$: if (dev) {
 		console.log(selected);
 	}
@@ -109,7 +121,8 @@
 		<div>
 			<div class="input-group input-group-divider flex flex-row rounded-b-none">
 				<div class="input-group-shim !p-0">
-					<button class="btn p-0">Filters</button>
+					<button class="btn p-0" on:click={() => modalStore.trigger(modalSettings)}>Filters</button
+					>
 				</div>
 				<input
 					class="input rounded-b-none rounded-l-none p-1 pl-2"

src/lib/components/ModalRegistry.ts

@@ -0,0 +1,7 @@
+import type { ModalComponent } from '@skeletonlabs/skeleton';
+import FilterPage from './FilterPage.svelte';
+
+export const modalRegistry: Record<string, ModalComponent> = {
+	// Set a unique modal ID, then pass the component reference
+	FilterPage: { ref: FilterPage },
+};

src/routes/+layout.svelte

@@ -5,8 +5,15 @@
 	import { onNavigate } from '$app/navigation';
 	import { settings } from '$lib/settings';
 	import { slide } from 'svelte/transition';
+
+	// Modals
+	import { Modal, initializeStores } from '@skeletonlabs/skeleton';
+	import { modalRegistry } from '$lib/components/ModalRegistry';
+	initializeStores();
+
+	// For debugging, does nothing but adds the contentManager to the window object
 	import contentManager from '$lib/data/contentManager';
-	contentManager; // For debugging, does nothing but adds the contentManager to the window object
+	contentManager;
 
 	// Floating UI for Popups
 	import { AppShell, storePopup } from '@skeletonlabs/skeleton';
@@ -36,6 +43,8 @@
 
 <svelte:window bind:innerHeight={windowHeight} bind:innerWidth={windowWidth} />
 
+<Modal components={modalRegistry} />
+
 <AppShell>
 	<svelte:fragment slot="header">
 		{#if windowWidth >= 640}