beeeeg update

src/routes/lists/+page.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
+	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
+</script>
+
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
+	<div class="mb-10 flex flex-wrap items-center justify-between gap-4">
+		<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">lists</h1>
+		{#if data.isAdmin}<details class="relative">
+				<summary class="cursor-pointer text-base underline underline-offset-4">new list</summary>
+				<form
+					method="POST"
+					action="?/newList"
+					use:enhance
+					class="absolute top-full right-0 z-10 mt-3 w-80 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
+				>
+					<label class="block"
+						>name<input
+							name="name"
+							required
+							maxlength="200"
+							class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+						/></label
+					>
+					<label class="block"
+						>type<select
+							name="type"
+							class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+							><option value="normal">normal</option><option value="progress">progress</option
+							></select
+						></label
+					>
+					<button
+						class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
+						>create list</button
+					>
+				</form>
+			</details>{/if}
+	</div>
+	{#if form?.message}<p role="alert" class="mb-5 text-red-500">{form.message}</p>{/if}
+	<ul>
+		{#each data.lists as list (list.id)}
+			<li class="border-t border-[var(--site-border)]">
+				<a
+					href={resolve('/lists/[slug]', { slug: list.slug })}
+					class="block py-5 hover:text-[var(--site-muted)]"
+				>
+					<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
+						<span class="text-lg font-medium">{list.name}</span>
+						<span class="text-base text-[var(--site-muted)]">
+							{#if list.isProgress && data.user}
+								{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}
+							{:else}
+								{list.total}
+								{list.total === 1 ? 'item' : 'items'}{list.isProgress ? ' · progress' : ''}
+							{/if}
+						</span>
+					</span>
+					{#if list.isProgress}<span class="mt-3 block"
+							><ProgressBar
+								value={list.checked}
+								max={list.total}
+								label={`Progress on ${list.name}`}
+								small
+							/></span
+						>{/if}
+				</a>
+			</li>
+		{:else}
+			<li class="border-t border-[var(--site-border)] py-5 text-[var(--site-muted)]">
+				no lists yet
+			</li>
+		{/each}
+	</ul>
+</div>