From 2b1a6257ded0558791ba4c0da09638b044a97968 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Wed, 3 Jun 2026 21:13:37 +0100
Subject: [PATCH] Improve listing UI

---
 src/lib/components/ThreadItem.svelte | 29 ++++++++++++++++++++--------
 src/routes/+page.svelte              | 24 ++++++++++++++++-------
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/ThreadItem.svelte b/src/lib/components/ThreadItem.svelte
index 4510d24..e1e99af 100644
--- a/src/lib/components/ThreadItem.svelte
+++ b/src/lib/components/ThreadItem.svelte
@@ -27,7 +27,7 @@
     <img src={a.picture} alt="" class={cls} />
   {:else}
     <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()}
     </span>
@@ -36,12 +36,18 @@
 
 <a
   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 -->
   <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 class="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400">
+    <div
+      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>
       {@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
       {#if thread.repliers.length > 0}
@@ -73,8 +79,11 @@
   <!-- Col 3: replies | activity -->
   <div class="flex shrink-0 items-center gap-4 sm:gap-6">
     <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-sm text-neutral-400 dark:text-neutral-500">replies</span>
+      <span class="text-neutral-800 dark:text-neutral-200"
+        >{thread.replyCount}</span
+      >
+      <span class="text-sm text-neutral-400 dark:text-neutral-500">replies</span
+      >
     </div>
 
     <div class="flex flex-col items-center gap-0.5">
@@ -83,9 +92,13 @@
           thread.lastActiveAuthor,
           "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>
-      <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>
 </a>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ce32cee..9584521 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -42,7 +42,7 @@
     <img src={a.picture} alt="" class="h-5 w-5 rounded-full object-cover" />
   {:else}
     <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"
     >
       {a.name[0].toUpperCase()}
@@ -79,17 +79,23 @@
       {@const last = act ? authorOf(act.latestPubkey) : null}
       <a
         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">
-          <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}
           </h2>
           {#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 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>
               {@render pic(admin)}
             </div>
@@ -99,9 +105,13 @@
           <div class="flex shrink-0 flex-col items-center gap-0.5">
             <div class="flex items-center gap-1">
               {@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>
-            <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>
         {/if}
       </a>