add popup to view full item name and notes

src/lib/components/Drawer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Drawer, getDrawerStore } from "@skeletonlabs/skeleton";
+	import NavigationDrawer from "./navigation/NavigationDrawer.svelte";
+	import { navItems } from "./navigation/navigation";
+	import ItemDrawer from "./wishlists/ItemDrawer.svelte";
+
+	const drawerStore = getDrawerStore();
+</script>
+
+<Drawer>
+	{#if $drawerStore.id === "nav"}
+		<NavigationDrawer {navItems} />
+	{:else}
+		<ItemDrawer />
+	{/if}
+</Drawer>

src/lib/components/navigation/NavBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AppBar, getDrawerStore } from "@skeletonlabs/skeleton";
+	import { AppBar, getDrawerStore, type DrawerSettings } from "@skeletonlabs/skeleton";
 	import logo from "$lib/assets/logo.png";
 	import { page } from "$app/stores";
 	import NavMenu from "./NavMenu/NavMenu.svelte";
@@ -11,6 +11,11 @@
 	export let user: User | undefined;
 
 	const drawerStore = getDrawerStore();
+	const drawerSettings: DrawerSettings = {
+		id: "nav",
+		position: "left",
+		width: "w-[280px] md:w-[480px]"
+	};
 </script>
 
 <AppBar background="bg-surface-200-700-token" padding="py-2 md:py-4 px-4">
@@ -20,10 +25,7 @@
 				{#if user}
 					<button
 						class="btn btn-sm p-0 pt-0.5 md:hidden"
-						on:click={() =>
-							drawerStore.open({
-								width: "w-[280px] md:w-[480px]"
-							})}
+						on:click={() => drawerStore.open(drawerSettings)}
 					>
 						<iconify-icon class="text-2xl" icon="ion:menu" />
 					</button>

src/lib/components/navigation/NavigationDrawer.svelte

@@ -1,35 +1,33 @@
 <script lang="ts">
-	import { Drawer, getDrawerStore } from "@skeletonlabs/skeleton";
+	import { getDrawerStore } from "@skeletonlabs/skeleton";
 	import { page } from "$app/stores";
 
 	export let navItems: NavItem[];
 
 	const drawerStore = getDrawerStore();
 </script>
 
-<Drawer position="left">
-	<div class="mt-4 flex flex-row place-content-between items-center px-4">
-		<span class="text-4xl">Wishlist</span>
-		<button class="btn-icon" on:click={() => drawerStore.close()}>
-			<iconify-icon icon="ion:close" width="32" />
-		</button>
-	</div>
-	<nav class="list-nav p-4">
-		<ul>
-			{#each navItems as navItem}
-				<li>
-					<a
-						class="list-option space-x-1 font-bold"
-						class:variant-filled-primary={$page.url.pathname === navItem.href}
-						data-sveltekit-preload-data
-						href={navItem.href}
-						on:click={() => drawerStore.close()}
-					>
-						<iconify-icon class="text-xl" icon={navItem.icon} />
-						<p>{navItem.label}</p>
-					</a>
-				</li>
-			{/each}
-		</ul>
-	</nav>
-</Drawer>
+<div class="mt-4 flex flex-row place-content-between items-center px-4">
+	<span class="text-4xl">Wishlist</span>
+	<button class="btn-icon" on:click={() => drawerStore.close()}>
+		<iconify-icon icon="ion:close" width="32" />
+	</button>
+</div>
+<nav class="list-nav p-4">
+	<ul>
+		{#each navItems as navItem}
+			<li>
+				<a
+					class="list-option space-x-1 font-bold"
+					class:variant-filled-primary={$page.url.pathname === navItem.href}
+					data-sveltekit-preload-data
+					href={navItem.href}
+					on:click={() => drawerStore.close()}
+				>
+					<iconify-icon class="text-xl" icon={navItem.icon} />
+					<p>{navItem.label}</p>
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

src/lib/components/navigation/navigation.ts

@@ -0,0 +1,17 @@
+export const navItems = [
+	{
+		label: "Home",
+		href: "/",
+		icon: "ion:home"
+	},
+	{
+		label: "My Wishes",
+		href: "/wishlists/me",
+		icon: "ion:gift"
+	},
+	{
+		label: "My Claims",
+		href: "/claims",
+		icon: "ion:albums"
+	}
+] satisfies NavItem[];

src/lib/components/wishlists/ItemCard/ApprovalButtons.svelte

@@ -12,20 +12,30 @@
 
 <div class="flex flex-row space-x-2 md:space-x-4">
 	{#if !item.approved}
-		<button class="variant-filled-success btn btn-sm md:btn" on:click={() => dispatch("approve")}>
+		<button
+			class="variant-filled-success btn btn-sm md:btn"
+			on:click|stopPropagation={() => dispatch("approve")}
+		>
 			Approve
 		</button>
-		<button class="variant-filled-error btn btn-sm md:btn" on:click={() => dispatch("deny")}>
+		<button
+			class="variant-filled-error btn btn-sm md:btn"
+			on:click|stopPropagation={() => dispatch("deny")}
+		>
 			Deny
 		</button>
 	{:else if user.username === item.user?.username || user.username === item.addedBy?.username}
 		<button
 			class="variant-ghost-primary btn btn-sm md:btn"
-			on:click={() => goto(`/wishlists/${item.user?.username}/edit/${item.id}?ref=${$page.url}`)}
+			on:click|stopPropagation={() =>
+				goto(`/wishlists/${item.user?.username}/edit/${item.id}?ref=${$page.url}`)}
 		>
 			Edit
 		</button>
-		<button class="variant-filled-error btn btn-sm md:btn" on:click={() => dispatch("delete")}>
+		<button
+			class="variant-filled-error btn btn-sm md:btn"
+			on:click|stopPropagation={() => dispatch("delete")}
+		>
 			Delete
 		</button>
 	{/if}

src/lib/components/wishlists/ItemCard/ClaimButtons.svelte

@@ -16,7 +16,7 @@
 		<div class="flex flex-row space-x-2 md:space-x-4">
 			<button
 				class="variant-ghost-secondary btn btn-sm md:btn"
-				on:click={() => dispatch("unclaim")}
+				on:click|stopPropagation={() => dispatch("unclaim")}
 			>
 				Unclaim
 			</button>
@@ -26,6 +26,7 @@
 					type="checkbox"
 					bind:checked={item.purchased}
 					on:change={(event) => dispatch("purchase", { purchased: event.currentTarget?.checked })}
+					on:click|stopPropagation
 				/>
 				<span>Purchased</span>
 			</label>
@@ -34,7 +35,10 @@
 		<span>Claimed by {item.pledgedBy?.name}</span>
 	{/if}
 {:else}
-	<button class="variant-filled-secondary btn btn-sm md:btn" on:click={() => dispatch("claim")}>
+	<button
+		class="variant-filled-secondary btn btn-sm md:btn"
+		on:click|stopPropagation={() => dispatch("claim")}
+	>
 		Claim
 	</button>
 {/if}

src/lib/components/wishlists/ItemCard/ItemCard.svelte

@@ -12,7 +12,13 @@
 
 <script lang="ts">
 	import { invalidateAll } from "$app/navigation";
-	import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton";
+	import {
+		getDrawerStore,
+		getModalStore,
+		getToastStore,
+		type DrawerSettings,
+		type ModalSettings
+	} from "@skeletonlabs/skeleton";
 	import type { Item } from "@prisma/client";
 	import { ItemAPI } from "$lib/api/items";
 	import ApprovalButtons from "./ApprovalButtons.svelte";
@@ -24,6 +30,7 @@
 
 	const modalStore = getModalStore();
 	const toastStore = getToastStore();
+	const drawerStore = getDrawerStore();
 
 	let image_url: string;
 	const itemAPI = new ItemAPI(item.id);
@@ -95,6 +102,16 @@
 		}
 	});
 
+	const drawerSettings: DrawerSettings = {
+		id: "item",
+		position: "bottom",
+		height: "max-h-fit",
+		meta: {
+			item,
+			showFor
+		}
+	};
+
 	const handleDelete = async () => modalStore.trigger(confirmDeleteModal);
 	const handleApproval = async (approve = true) => modalStore.trigger(approvalModal(approve));
 
@@ -123,12 +140,23 @@
 	};
 </script>
 
-<div class="card" class:variant-ghost-warning={!item.approved}>
+<button
+	class="card card-hover block text-start"
+	class:variant-ghost-warning={!item.approved}
+	type="button"
+	on:click={() => drawerStore.open(drawerSettings)}
+>
 	<header class="card-header">
 		<div class="flex w-full">
 			<span class="line-clamp-2 text-xl font-bold md:text-2xl">
 				{#if item.url}
-					<a class="dark:!text-primary-200" href={item.url} rel="noreferrer" target="_blank">
+					<a
+						class="dark:!text-primary-200"
+						href={item.url}
+						rel="noreferrer"
+						target="_blank"
+						on:click|stopPropagation
+					>
 						{item.name}
 					</a>
 				{:else}
@@ -176,4 +204,4 @@
 			on:delete={handleDelete}
 		/>
 	</footer>
-</div>
+</button>

src/lib/components/wishlists/ItemDrawer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { getDrawerStore } from "@skeletonlabs/skeleton";
+	import type { FullItem } from "./ItemCard/ItemCard.svelte";
+
+	const drawerStore = getDrawerStore();
+	const item: FullItem = $drawerStore.meta.item satisfies FullItem;
+	const showFor: boolean = $drawerStore.meta.showFor;
+</script>
+
+<div class="flex flex-col space-y-2 p-4 pb-12">
+	<div class="flex w-full justify-center">
+		<hr class="self-c !w-12 !rounded !border-t-4" />
+	</div>
+	<span class="text-xl font-bold md:text-2xl">
+		{item.name}
+	</span>
+	<div class="flex flex-row space-x-2 text-base md:text-lg">
+		{#if item.price}
+			<span class="font-semibold">{item.price}</span>
+			<span>·</span>
+		{/if}
+
+		<span>
+			{#if showFor}
+				For <span class="text-secondary-700-200-token font-bold">{item.user?.name}</span>
+			{:else}
+				Added by <span class="text-secondary-700-200-token font-bold">{item.addedBy?.name}</span>
+			{/if}
+		</span>
+	</div>
+	<p class="whitespace-pre-wrap">{item.note}</p>
+</div>

src/routes/+layout.svelte

@@ -16,7 +16,6 @@
 
 	import NavBar from "$lib/components/navigation/NavBar.svelte";
 	import NavigationLoadingBar from "$lib/components/navigation/NavigationLoadingBar.svelte";
-	import NavigationDrawer from "$lib/components/navigation/NavigationDrawer.svelte";
 	import AddUserModal from "$lib/components/modals/AddUserModal.svelte";
 	import GroupSelectModal from "$lib/components/modals/GroupSelectModal.svelte";
 	import InviteUserModal from "$lib/components/modals/InviteUserModal.svelte";
@@ -25,6 +24,8 @@
 	import BottomTabs from "$lib/components/navigation/BottomTabs.svelte";
 	import { isInstalled } from "$lib/stores/is-installed";
 	import PullToRefresh from "pulltorefreshjs";
+	import { navItems } from "$lib/components/navigation/navigation";
+	import Drawer from "$lib/components/Drawer.svelte";
 
 	export let data: LayoutData;
 
@@ -75,24 +76,6 @@
 		}
 	});
 
-	$: navItems = [
-		{
-			label: "Home",
-			href: "/",
-			icon: "ion:home"
-		},
-		{
-			label: "My Wishes",
-			href: "/wishlists/me",
-			icon: "ion:gift"
-		},
-		{
-			label: "My Claims",
-			href: "/claims",
-			icon: "ion:albums"
-		}
-	] satisfies NavItem[];
-
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 
 	const modalComponentRegistry: Record<string, ModalComponent> = {
@@ -108,7 +91,7 @@
 	};
 </script>
 
-<NavigationDrawer {navItems} />
+<Drawer />
 
 <AppShell on:scroll={scrollHandler}>
 	<svelte:fragment slot="header">