From 6408982d77e15c7afa6686adbe5cf43bcb3b718e Mon Sep 17 00:00:00 2001
From: Chris Bisset <chris@gurucomputing.com.au>
Date: Fri, 28 Mar 2025 06:56:38 +0000
Subject: [PATCH] added list cards

---
 src/lib/components/users/user-cards.svelte    |  6 +-
 .../users/user-cards/user-card.svelte         | 55 ++++++++++++-------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/users/user-cards.svelte b/src/lib/components/users/user-cards.svelte
index b160d14..4f0e564 100644
--- a/src/lib/components/users/user-cards.svelte
+++ b/src/lib/components/users/user-cards.svelte
@@ -6,10 +6,8 @@
 	getUsers();
 </script>
 
-<ul class="list bg-base-200 rounded-box shadow-md max-w-xl">
+<ul class="list bg-base-200 rounded-box max-w-xl shadow-md">
 	{#each appSettings.users as user}
-		<li class="list-row">
-			<UserCard userCard={user} />
-		</li>
+		<UserCard userCard={user} />
 	{/each}
 </ul>
diff --git a/src/lib/components/users/user-cards/user-card.svelte b/src/lib/components/users/user-cards/user-card.svelte
index a557c61..7df3790 100644
--- a/src/lib/components/users/user-cards/user-card.svelte
+++ b/src/lib/components/users/user-cards/user-card.svelte
@@ -6,26 +6,39 @@
 	}
 
 	let { userCard }: Props = $props();
+	let cardExpanded = $state(false);
 </script>
 
-<div>
-	<table class="table-zebra table prose">
-		<tbody>
-			<tr>
-				<td>
-					<strong>
-						{userCard.id}
-					</strong>
-				</td>
-				<td>
-					<strong class="flex">
-						{userCard.name}
-						<svg data-slot="icon" fill="none" class="mt-1.5 ml-2 h-4 w-4" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-							<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"></path>
-						</svg>
-					</strong>
-				</td>
-			</tr>
-		</tbody>
-	</table>
-</div>
+<!-- Allow the parent div to open/close the chevron as well for convenience.
+requires stopPropogation for downstream buttons -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<li class="list-row" onclick={() => {cardExpanded = !cardExpanded}} >
+	<div class="prose prose-sm">
+		<strong>
+			{userCard.id}
+		</strong>
+	</div>
+	<div class="list-col-grow prose prose-sm">
+		<strong class="flex">
+			{userCard.name}
+			<svg data-slot="icon" fill="none" class="mt-1 ml-2 h-4 w-4" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"></path>
+			</svg>
+		</strong>
+	</div>
+	<div>
+		<button class="btn btn-xs" onclick={(e) => {e.stopPropagation(); cardExpanded = !cardExpanded}}>
+			{#if !cardExpanded}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+				</svg>
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+				</svg>
+			{/if}
+		</button>
+	</div>
+	<div></div>
+</li>