ui changes and cs prices
All checks were successful
Test and deploy staging / staging (push) Successful in 11m52s

This commit is contained in:
2026-09-25 00:44:06 +00:00
parent c757d0882a
commit abac077541
200 changed files with 6236 additions and 2311 deletions

View File

@@ -3,6 +3,8 @@
import { resolve } from '$app/paths';
import ProgressBar from '$lib/components/ProgressBar.svelte';
import ListPictureDropzone from '$lib/components/ListPictureDropzone.svelte';
import { Button } from '$lib/components/ui/button/index.js';
import { Input } from '$lib/components/ui/input/index.js';
import type { SubmitFunction } from '@sveltejs/kit';
import type { PageProps } from './$types';
let { data, form }: PageProps = $props();
@@ -53,12 +55,7 @@
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
>name<Input name="name" required maxlength={200} class="mt-2" /></label
>
<label class="block"
>type<select
@@ -69,11 +66,7 @@
></label
>
<ListPictureDropzone label="List picture (optional)" />
<button
disabled={uploading}
class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
>create list</button
>
<Button type="submit" disabled={uploading}>create list</Button>
</form>
</details>{/if}
</div>
@@ -84,37 +77,38 @@
<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)]"
class={list.isProgress
? 'grid grid-cols-[minmax(0,1fr)_8rem_auto] items-center gap-3 py-5 hover:text-[var(--site-muted)]'
: 'flex items-center justify-between gap-3 py-5 hover:text-[var(--site-muted)]'}
>
<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
<span class="flex items-center gap-3">
{#if list.pictureUrl}<img
src={list.pictureUrl}
alt=""
loading="lazy"
width="48"
height="48"
class="h-12 w-12 rounded bg-[var(--site-surface)] object-cover"
/>{/if}
<span class="text-lg font-medium">{list.name}</span>
</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 class="flex min-w-0 items-center gap-3">
{#if list.pictureUrl}<img
src={list.pictureUrl}
alt=""
loading="lazy"
width="48"
height="48"
class="h-12 w-12 rounded bg-[var(--site-surface)] object-cover"
/>{/if}
<span class="truncate text-lg font-medium">{list.name}</span>
</span>
{#if list.isProgress}<span class="mt-3 block"
{#if list.isProgress}
<span class="block w-32"
><ProgressBar
value={list.checked}
max={list.total}
label={`Progress on ${list.name}`}
small
/></span
>{/if}
>
{/if}
<span class="min-w-16 whitespace-nowrap text-right text-base text-[var(--site-muted)]">
{#if list.isProgress && data.user}
{list.total ? Math.round((list.checked / list.total) * 100) : 0}%
{:else}
{list.total} {list.total === 1 ? 'item' : 'items'}
{/if}
</span>
</a>
</li>
{:else}