hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve listing UI

Browse source
This commit is contained in:
dtonon 2026-06-03 21:13:37 +01:00
parent 2dc823d055
commit 2b1a6257de
2 changed files with 38 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/lib/components/ThreadItem.svelte
View file

@ -27,7 +27,7 @@
<img src={a.picture} alt="" class={cls} /> <img src={a.picture} alt="" class={cls} />
{:else} {:else}
<span <span
class="{cls} flex items-center justify-center rounded-full bg-neutral-200 dark:bg-neutral-700 text-[10px] font-semibold text-neutral-500 dark:text-neutral-400" class="{cls} flex items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
> >
{a.name[0].toUpperCase()} {a.name[0].toUpperCase()}
</span> </span>
@ -36,12 +36,18 @@
<a <a
href="/thread/{thread.id}" href="/thread/{thread.id}"
class="flex items-center gap-3 border-b border-neutral-100 dark:border-neutral-800 py-4 hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:gap-6" class="group flex items-center gap-3 border-b border-neutral-100 py-4 hover:bg-linear-to-r hover:from-transparent hover:via-neutral-100 hover:to-transparent sm:gap-6 dark:border-neutral-800 dark:hover:bg-linear-to-r dark:hover:from-transparent dark:hover:via-neutral-800 dark:hover:to-transparent"
> >
<!-- Col 1: title + byline --> <!-- Col 1: title + byline -->
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100">{thread.title}</div> <div
<div class="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400"> class="group-hover:text-brand mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100"
>
{thread.title}
</div>
<div
class="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400"
>
<span>by</span> <span>by</span>
{@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")} {@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
{#if thread.repliers.length > 0} {#if thread.repliers.length > 0}
@ -73,8 +79,11 @@
<!-- Col 3: replies | activity --> <!-- Col 3: replies | activity -->
<div class="flex shrink-0 items-center gap-4 sm:gap-6"> <div class="flex shrink-0 items-center gap-4 sm:gap-6">
<div class="flex flex-col items-center gap-0.5"> <div class="flex flex-col items-center gap-0.5">
<span class="text-neutral-800 dark:text-neutral-200">{thread.replyCount}</span> <span class="text-neutral-800 dark:text-neutral-200"
<span class="text-sm text-neutral-400 dark:text-neutral-500">replies</span> >{thread.replyCount}</span
>
<span class="text-sm text-neutral-400 dark:text-neutral-500">replies</span
>
</div> </div>
<div class="flex flex-col items-center gap-0.5"> <div class="flex flex-col items-center gap-0.5">
@ -83,9 +92,13 @@
thread.lastActiveAuthor, thread.lastActiveAuthor,
"h-5 w-5 rounded-full object-cover", "h-5 w-5 rounded-full object-cover",
)} )}
<span class="text-neutral-800 dark:text-neutral-200">{thread.lastActivity}</span> <span class="text-neutral-800 dark:text-neutral-200"
>{thread.lastActivity}</span
>
</div> </div>
<span class="text-sm text-neutral-400 dark:text-neutral-500">activity</span> <span class="text-sm text-neutral-400 dark:text-neutral-500"
>activity</span
>
</div> </div>
</div> </div>
</a> </a>

24
src/routes/+page.svelte
View file

@ -42,7 +42,7 @@
<img src={a.picture} alt="" class="h-5 w-5 rounded-full object-cover" /> <img src={a.picture} alt="" class="h-5 w-5 rounded-full object-cover" />
{:else} {:else}
<span <span
class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 dark:bg-neutral-700 text-[10px] font-semibold text-neutral-500 dark:text-neutral-400" class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
aria-hidden="true" aria-hidden="true"
> >
{a.name[0].toUpperCase()} {a.name[0].toUpperCase()}
@ -79,17 +79,23 @@
{@const last = act ? authorOf(act.latestPubkey) : null} {@const last = act ? authorOf(act.latestPubkey) : null}
<a <a
href="/room/{room.id}" href="/room/{room.id}"
class="group flex items-start justify-between gap-4 py-5" class="group flex items-start justify-between gap-4 py-5 hover:bg-linear-to-r hover:from-transparent hover:via-neutral-100 hover:to-transparent dark:hover:bg-linear-to-r dark:hover:from-transparent dark:hover:via-neutral-800 dark:hover:to-transparent"
> >
<div class="min-w-0"> <div class="min-w-0">
<h2 class="group-hover:text-brand text-2xl text-neutral-800 dark:text-neutral-200"> <h2
class="group-hover:text-brand text-2xl text-neutral-800 dark:text-neutral-200"
>
{room.name} {room.name}
</h2> </h2>
{#if room.about} {#if room.about}
<p class="mt-1 leading-5 text-neutral-600 dark:text-neutral-400">{room.about}</p> <p class="mt-1 leading-5 text-neutral-600 dark:text-neutral-400">
{room.about}
</p>
{/if} {/if}
{#if admin} {#if admin}
<div class="mt-2 flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400"> <div
class="mt-2 flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400"
>
<span>Admin</span> <span>Admin</span>
{@render pic(admin)} {@render pic(admin)}
</div> </div>
@ -99,9 +105,13 @@
<div class="flex shrink-0 flex-col items-center gap-0.5"> <div class="flex shrink-0 flex-col items-center gap-0.5">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
{@render pic(last)} {@render pic(last)}
<span class="text-neutral-800 dark:text-neutral-200">{relativeTime(act.latestAt)}</span> <span class="text-neutral-800 dark:text-neutral-200"
>{relativeTime(act.latestAt)}</span
>
</div> </div>
<span class="text-sm text-neutral-400 dark:text-neutral-500">activity</span> <span class="text-sm text-neutral-400 dark:text-neutral-500"
>activity</span
>
</div> </div>
{/if} {/if}
</a> </a>