From b3e653374821cedab2c58b036fb95f1128c0bd7d Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Wed, 27 May 2026 15:30:11 +0100
Subject: [PATCH] Use prettier-plugin-svelte and prettier-plugin-tailwindcss

---
 .prettierignore                              |  1 +
 .prettierrc                                  |  9 ++++++
 src/lib/components/ChatSidebar.svelte        |  2 +-
 src/lib/components/DeleteModal.svelte        |  2 +-
 src/lib/components/DiscussionsFeed.svelte    |  4 +--
 src/lib/components/JoinModal.svelte          |  6 ++--
 src/lib/components/LatestDiscussions.svelte  |  4 +--
 src/lib/components/LeftSidebar.svelte        | 24 +++++++-------
 src/lib/components/LoginModal.svelte         | 12 +++----
 src/lib/components/MobileMenu.svelte         | 19 ++++++-----
 src/lib/components/Navbar.svelte             |  6 ++--
 src/lib/components/NewDiscussionModal.svelte | 24 +++++++-------
 src/lib/components/PostContent.svelte        | 16 ++++-----
 src/lib/components/SortToggle.svelte         |  2 +-
 src/lib/components/Tag.svelte                |  2 +-
 src/lib/components/ThreadItem.svelte         |  4 +--
 src/lib/components/ThreadScrubber.svelte     | 12 +++----
 src/routes/+layout.svelte                    |  6 ++--
 src/routes/+page.svelte                      |  6 ++--
 src/routes/contacts/+page.svelte             |  6 ++--
 src/routes/layout.css                        |  4 +--
 src/routes/resource/[slug]/+page.svelte      |  2 +-
 src/routes/thread/[id]/+page.svelte          | 34 ++++++++++----------
 23 files changed, 109 insertions(+), 98 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 7d74fe2..1280bab 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,3 +7,4 @@ bun.lockb
 
 # Miscellaneous
 /static/
+src/app.html
diff --git a/.prettierrc b/.prettierrc
index e69de29..94de367 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": { "parser": "svelte" }
+    }
+  ]
+}
diff --git a/src/lib/components/ChatSidebar.svelte b/src/lib/components/ChatSidebar.svelte
index 728b41f..d88bf75 100644
--- a/src/lib/components/ChatSidebar.svelte
+++ b/src/lib/components/ChatSidebar.svelte
@@ -190,7 +190,7 @@
 
 <aside
   bind:this={asideEl}
-  class="flex-1 flex-col bg-white px-4 pt-4 pb-20 md:absolute md:top-6 md:right-0 md:z-10 md:h-[calc(100%-1.5rem)] md:flex-none md:rounded-tl-xl md:px-6 md:py-6 md:transition-all md:duration-200 min-[1540px]:rounded-tr-xl
+  class="flex-1 flex-col bg-white px-4 pt-4 pb-20 min-[1540px]:rounded-tr-xl md:absolute md:top-6 md:right-0 md:z-10 md:h-[calc(100%-1.5rem)] md:flex-none md:rounded-tl-xl md:px-6 md:py-6 md:transition-all md:duration-200
 		{mobileActive ? 'flex' : 'hidden'} md:flex
 		{expanded ? 'md:w-150 md:shadow-2xl' : 'md:w-80 md:shadow-lg'}"
 >
diff --git a/src/lib/components/DeleteModal.svelte b/src/lib/components/DeleteModal.svelte
index 47cb14f..b93d727 100644
--- a/src/lib/components/DeleteModal.svelte
+++ b/src/lib/components/DeleteModal.svelte
@@ -70,7 +70,7 @@
         disabled={deleteState.busy}
         rows="2"
         placeholder="Recorded with the deletion"
-        class="mb-4 w-full resize-none rounded border border-neutral-200 px-3 py-2 text-sm focus:ring-1 focus:ring-brand focus:outline-none disabled:opacity-50"
+        class="focus:ring-brand mb-4 w-full resize-none rounded border border-neutral-200 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
       ></textarea>
 
       <div class="flex justify-end gap-2">
diff --git a/src/lib/components/DiscussionsFeed.svelte b/src/lib/components/DiscussionsFeed.svelte
index 2cf2657..77087ce 100644
--- a/src/lib/components/DiscussionsFeed.svelte
+++ b/src/lib/components/DiscussionsFeed.svelte
@@ -97,11 +97,11 @@
 
 <div class="mx-auto max-w-6xl">
   <div class="flex flex-wrap items-center justify-between gap-2 py-2">
-    <h1 class="text-[1.65rem] text-brand leading-7">{title}</h1>
+    <h1 class="text-brand text-[1.65rem] leading-7">{title}</h1>
     <div class="flex items-center gap-2">
       <button
         onclick={onNewTopic}
-        class="rounded bg-brand px-4 py-1.5 md:text-sm font-medium text-white hover:bg-brand-hover md:px-6"
+        class="bg-brand hover:bg-brand-hover rounded px-4 py-1.5 font-medium text-white md:px-6 md:text-sm"
       >
         New discussion
       </button>
diff --git a/src/lib/components/JoinModal.svelte b/src/lib/components/JoinModal.svelte
index 64531f8..27d7bce 100644
--- a/src/lib/components/JoinModal.svelte
+++ b/src/lib/components/JoinModal.svelte
@@ -47,7 +47,7 @@
         onclick={onClose}
         aria-label="Close"
         disabled={joinState.busy}
-        class="absolute right-3 top-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700 disabled:opacity-50"
+        class="absolute top-3 right-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700 disabled:opacity-50"
       >
         ×
       </button>
@@ -87,7 +87,7 @@
           autocapitalize="off"
           spellcheck="false"
           onkeydown={(e) => e.key === "Enter" && onRetry()}
-          class="mb-3 w-full rounded border border-neutral-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+          class="focus:ring-brand mb-3 w-full rounded border border-neutral-200 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
         />
       {/if}
 
@@ -104,7 +104,7 @@
           type="button"
           onclick={onRetry}
           disabled={joinState.busy || (joinState.codeRequired && !code.trim())}
-          class="rounded bg-brand px-3 py-2 text-sm font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-brand hover:bg-brand-hover rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {joinState.busy ? "Trying…" : "Retry"}
         </button>
diff --git a/src/lib/components/LatestDiscussions.svelte b/src/lib/components/LatestDiscussions.svelte
index cd2bd5d..f893664 100644
--- a/src/lib/components/LatestDiscussions.svelte
+++ b/src/lib/components/LatestDiscussions.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <aside aria-label="Latest discussions">
-  <h2 class="pb-2 text-[1.5rem] leading-7 text-brand">Latest discussions</h2>
+  <h2 class="text-brand pb-2 text-[1.5rem] leading-7">Latest discussions</h2>
   {#if overviewStore.recent.length === 0}
     <p class="text-sm text-neutral-400">
       {overviewStore.loading ? "Loading…" : "Nothing yet."}
@@ -40,7 +40,7 @@
         <li>
           <a href="/thread/{t.id}" class="group block py-3">
             <p
-              class="line-clamp-2 text-lg text-neutral-700 leading-5 group-hover:text-brand"
+              class="group-hover:text-brand line-clamp-2 text-lg leading-5 text-neutral-700"
             >
               {t.title}
             </p>
diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index 0186320..b7549e4 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -30,12 +30,12 @@
 </script>
 
 <aside
-  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pl-8 pr-1 pb-8 md:flex md:pt-6"
+  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pr-1 pb-8 pl-8 md:flex md:pt-6"
 >
   <div>
     <a
       href="/"
-      class="mb-6 mt-3 flex flex-col min-w-0 hover:opacity-90"
+      class="mt-3 mb-6 flex min-w-0 flex-col hover:opacity-90"
       aria-label="{name} — home"
     >
       {#if groupStore.data?.picture}
@@ -45,26 +45,26 @@
           class="max-w-[90%] shrink-0 object-cover"
         />
       {/if}
-      <span class="text-[1.3rem] font-medium text-neutral-900 mt-2 leading-6"
+      <span class="mt-2 text-[1.3rem] leading-6 font-medium text-neutral-900"
         >{name}</span
       >
     </a>
 
     <a
       href="/"
-      class="flex items-center gap-2 py-1 hover:bg-neutral-100 text-neutral-700"
+      class="flex items-center gap-2 py-1 text-neutral-700 hover:bg-neutral-100"
     >
       {mode === "simple" ? "Discussions" : "Home"}
     </a>
 
     {#if mode === "simple"}
-      <div class="flex mt-6">
+      <div class="mt-6 flex">
         <p class="text-sm text-neutral-500">{groupStore.data?.about ?? ""}</p>
       </div>
     {:else}
-      <nav class="flex-auto mt-6" aria-label="Rooms">
+      <nav class="mt-6 flex-auto" aria-label="Rooms">
         <p
-          class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
+          class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase"
         >
           Rooms
         </p>
@@ -84,7 +84,7 @@
       {#if activeAbout}
         <div class="mt-6">
           <p
-            class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
+            class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase"
           >
             About
           </p>
@@ -93,9 +93,9 @@
       {/if}
     {/if}
 
-    <nav class="flex-auto mt-6" aria-label="Resources">
+    <nav class="mt-6 flex-auto" aria-label="Resources">
       <p
-        class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
+        class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase"
       >
         Resources
       </p>
@@ -122,7 +122,7 @@
       <button
         type="button"
         onclick={resumeDraft}
-        class="w-full rounded bg-brand px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-hover"
+        class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-1.5 text-sm font-medium text-white"
       >
         Resume draft
       </button>
@@ -154,7 +154,7 @@
     {:else}
       <button
         onclick={openLogin}
-        class="mt-3 w-full rounded bg-brand px-3 py-1.5 font-medium text-sm text-white hover:bg-brand-hover"
+        class="bg-brand hover:bg-brand-hover mt-3 w-full rounded px-3 py-1.5 text-sm font-medium text-white"
       >
         Login
       </button>
diff --git a/src/lib/components/LoginModal.svelte b/src/lib/components/LoginModal.svelte
index 6f07fe9..0bc1029 100644
--- a/src/lib/components/LoginModal.svelte
+++ b/src/lib/components/LoginModal.svelte
@@ -97,7 +97,7 @@
         type="button"
         onclick={onClose}
         aria-label="Close"
-        class="absolute right-3 top-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700"
+        class="absolute top-3 right-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700"
       >
         ×
       </button>
@@ -119,7 +119,7 @@
         <button
           onclick={handleExtension}
           disabled={busy || !hasExtension}
-          class="w-full rounded bg-brand px-3 py-2 text-sm font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {busy ? "Connecting…" : "Log in with extension"}
         </button>
@@ -131,7 +131,7 @@
         <button
           type="button"
           onclick={showNsecView}
-          class="mt-4 block w-full text-center text-sm text-brand hover:underline"
+          class="text-brand mt-4 block w-full text-center text-sm hover:underline"
         >
           Or log in using your nsec
         </button>
@@ -149,12 +149,12 @@
           autocorrect="off"
           spellcheck="false"
           onkeydown={(e) => e.key === "Enter" && handleNsec()}
-          class="w-full rounded border border-neutral-200 px-3 py-2 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+          class="focus:ring-brand w-full rounded border border-neutral-200 px-3 py-2 font-mono text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
         />
         <button
           onclick={handleNsec}
           disabled={busy || !nsec.trim()}
-          class="mt-3 w-full rounded bg-brand px-3 py-2 text-sm font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-brand hover:bg-brand-hover mt-3 w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {busy ? "Logging in…" : "Log in"}
         </button>
@@ -164,7 +164,7 @@
         <button
           type="button"
           onclick={showExtensionView}
-          class="mt-4 block w-full text-center text-sm text-brand hover:underline"
+          class="text-brand mt-4 block w-full text-center text-sm hover:underline"
         >
           Log in with extension
         </button>
diff --git a/src/lib/components/MobileMenu.svelte b/src/lib/components/MobileMenu.svelte
index 7662a51..6be3ab8 100644
--- a/src/lib/components/MobileMenu.svelte
+++ b/src/lib/components/MobileMenu.svelte
@@ -119,14 +119,14 @@
         <a
           href="/"
           onclick={onClose}
-          class="py-2 text-xl text-neutral-700 hover:text-brand"
+          class="hover:text-brand py-2 text-xl text-neutral-700"
           >{mode === "simple" ? "Discussions" : "Home"}</a
         >
 
         {#if mode === "full"}
           <nav class="mt-4" aria-label="Rooms">
             <p
-              class="pb-1 font-semibold uppercase tracking-wider text-neutral-400"
+              class="pb-1 font-semibold tracking-wider text-neutral-400 uppercase"
             >
               Rooms
             </p>
@@ -138,7 +138,7 @@
                 href="/room/{room.id}"
                 onclick={onClose}
                 class="block py-1.5 text-xl
-									{activeRoom === room.id ? 'text-brand' : 'text-neutral-700 hover:text-brand'}"
+									{activeRoom === room.id ? 'text-brand' : 'hover:text-brand text-neutral-700'}"
               >
                 {room.name}
               </a>
@@ -148,7 +148,7 @@
 
         <nav class="mt-4" aria-label="Resources">
           <p
-            class="pb-1 font-semibold uppercase tracking-wider text-neutral-400"
+            class="pb-1 font-semibold tracking-wider text-neutral-400 uppercase"
           >
             Resources
           </p>
@@ -157,7 +157,7 @@
               href="/resource/{r.slug}"
               onclick={onClose}
               aria-current={activeResource === r.slug ? "page" : undefined}
-              class="block py-1.5 text-xl hover:text-brand
+              class="hover:text-brand block py-1.5 text-xl
                 {activeResource === r.slug ? 'text-brand' : 'text-neutral-700'}"
               >{r.title}</a
             >
@@ -166,9 +166,8 @@
             href="/contacts"
             onclick={onClose}
             aria-current={contactsActive ? "page" : undefined}
-            class="block py-1.5 text-lg hover:text-brand
-              {contactsActive ? 'text-brand' : 'text-neutral-700'}"
-            >Contacts</a
+            class="hover:text-brand block py-1.5 text-lg
+              {contactsActive ? 'text-brand' : 'text-neutral-700'}">Contacts</a
           >
         </nav>
 
@@ -177,7 +176,7 @@
             <button
               type="button"
               onclick={onResume}
-              class="w-full rounded bg-brand px-3 py-2 font-medium text-white hover:bg-brand-hover"
+              class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 font-medium text-white"
             >
               Resume draft
             </button>
@@ -214,7 +213,7 @@
             <button
               type="button"
               onclick={onLogin}
-              class="w-full rounded bg-brand px-3 py-2 text-lg font-medium text-white hover:bg-brand-hover"
+              class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 text-lg font-medium text-white"
             >
               Login
             </button>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 2e87106..f3f3716 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -8,7 +8,8 @@
   // PUBLIC_TITLE always wins when set. Without it, simple mode shows the room's
   // own name; full mode has no single room, so it falls back to GROUP_ID.
   const name = $derived(
-    TITLE || (MODE === "simple" ? (groupStore.data?.name ?? GROUP_ID) : GROUP_ID),
+    TITLE ||
+      (MODE === "simple" ? (groupStore.data?.name ?? GROUP_ID) : GROUP_ID),
   );
 </script>
 
@@ -34,7 +35,8 @@
         {name[0].toUpperCase()}
       </div>
     {/if}
-    <span class="truncate text-2xl font-medium text-neutral-900 md:text-[1.7rem]"
+    <span
+      class="truncate text-2xl font-medium text-neutral-900 md:text-[1.7rem]"
       >{name}</span
     >
   </a>
diff --git a/src/lib/components/NewDiscussionModal.svelte b/src/lib/components/NewDiscussionModal.svelte
index 2185ffe..4a63623 100644
--- a/src/lib/components/NewDiscussionModal.svelte
+++ b/src/lib/components/NewDiscussionModal.svelte
@@ -24,7 +24,7 @@
   const targetName = $derived(
     MODE === "full"
       ? (groupsStore.list.find((g) => g.id === activeGroup.id)?.name ??
-        groupStore.data?.name)
+          groupStore.data?.name)
       : groupStore.data?.name,
   );
 
@@ -151,7 +151,7 @@
           {#if targetName}
             <p class="text-sm text-neutral-700">{targetName}</p>
           {/if}
-          <h2 id="newdisc-title" class="text-2xl text-brand">New discussion</h2>
+          <h2 id="newdisc-title" class="text-brand text-2xl">New discussion</h2>
         </div>
         <button
           type="button"
@@ -179,7 +179,7 @@
       <div>
         <label
           for="newdisc-title-input"
-          class="block text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"
+          class="mb-1 block text-xs font-semibold tracking-wider text-neutral-400 uppercase"
         >
           Title
         </label>
@@ -190,7 +190,7 @@
           bind:value={draftState.title}
           disabled={draftState.publishing}
           maxlength="72"
-          class="w-full rounded border border-neutral-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+          class="focus:ring-brand w-full rounded border border-neutral-200 px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50"
         />
       </div>
 
@@ -199,16 +199,16 @@
         <div class="relative">
           <label
             for="newdisc-labels-input"
-            class="block text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"
+            class="mb-1 block text-xs font-semibold tracking-wider text-neutral-400 uppercase"
           >
             Labels
           </label>
           <div
-            class="flex flex-wrap gap-1.5 items-center rounded border border-neutral-200 px-3 py-1.5 min-h-[2.5rem] focus-within:ring-1 focus-within:ring-brand"
+            class="focus-within:ring-brand flex min-h-[2.5rem] flex-wrap items-center gap-1.5 rounded border border-neutral-200 px-3 py-1.5 focus-within:ring-1"
           >
             {#each draftState.labels as l}
               <span
-                class="inline-flex items-center gap-1 rounded-lg bg-accent px-2 py-0.5 text-sm text-white"
+                class="bg-accent inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-sm text-white"
               >
                 {l}
                 <button
@@ -219,7 +219,7 @@
                 >
               </span>
             {/each}
-            <div class="relative flex-1 min-w-[6rem]">
+            <div class="relative min-w-[6rem] flex-1">
               <input
                 id="newdisc-labels-input"
                 type="text"
@@ -234,7 +234,7 @@
                 placeholder={draftState.labels.length === 0
                   ? "Click to choose…"
                   : ""}
-                class="relative z-10 w-full border-0 bg-transparent p-0 outline-none focus:ring-0 text-sm py-0.5 disabled:opacity-50"
+                class="relative z-10 w-full border-0 bg-transparent p-0 py-0.5 text-sm outline-none focus:ring-0 disabled:opacity-50"
               />
               {#if suggestion}
                 <span
@@ -250,14 +250,14 @@
           </div>
           {#if suggestOpen && filtered.length > 0}
             <div
-              class="absolute left-0 right-0 z-20 mt-1 rounded border border-neutral-200 bg-white shadow-lg p-3 flex flex-wrap gap-1.5"
+              class="absolute right-0 left-0 z-20 mt-1 flex flex-wrap gap-1.5 rounded border border-neutral-200 bg-white p-3 shadow-lg"
             >
               {#each filtered as l}
                 <button
                   type="button"
                   onmousedown={(e) => e.preventDefault()}
                   onclick={() => onSuggestionClick(l)}
-                  class="rounded-lg bg-accent hover:bg-accent-hover px-2.5 py-0.5 text-sm text-white"
+                  class="bg-accent hover:bg-accent-hover rounded-lg px-2.5 py-0.5 text-sm text-white"
                 >
                   {l}
                 </button>
@@ -304,7 +304,7 @@
           disabled={draftState.publishing ||
             !draftState.title.trim() ||
             !draftState.content.trim()}
-          class="rounded bg-brand px-5 py-1.5 font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-brand hover:bg-brand-hover rounded px-5 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {draftState.publishing ? "Publishing…" : "Publish discussion"}
         </button>
diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte
index cea39fd..498b862 100644
--- a/src/lib/components/PostContent.svelte
+++ b/src/lib/components/PostContent.svelte
@@ -593,7 +593,7 @@
         href={inline.href}
         target={internal ? undefined : "_blank"}
         rel={internal ? undefined : "noopener noreferrer"}
-        class="text-brand hover:underline break-all">{inline.label}</a
+        class="text-brand break-all hover:underline">{inline.label}</a
       >
     {:else if inline.type === "mention"}
       {@const u = profiles[inline.pubkey] ?? resolvedUsers[inline.pubkey]}
@@ -607,10 +607,10 @@
       {@const u = profiles[inline.pubkey] ?? resolvedUsers[inline.pubkey]}
       <a
         href="#post-{inline.eventId}"
-        class="no-underline font-normal leading-4 bg-neutral-100 block -ml-3 pl-3 py-1 hover:bg-neutral-200"
+        class="-ml-3 block bg-neutral-100 py-1 pl-3 leading-4 font-normal no-underline hover:bg-neutral-200"
         >{u?.shortName ?? inline.pubkey.slice(0, 8)} said
         <svg
-          class="inline w-3 mb-0.5"
+          class="mb-0.5 inline w-3"
           viewBox="0 0 800 800"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
@@ -628,7 +628,7 @@
         href="https://njump.me/{inline.entity}"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-brand hover:underline break-all">{inline.label}</a
+        class="text-brand break-all hover:underline">{inline.label}</a
       >
     {:else if inline.type === "strong"}
       <strong>{@render renderInlines(inline.children)}</strong>
@@ -679,11 +679,11 @@
         src={block.src}
         alt={block.alt}
         loading="lazy"
-        class="block -mx-6 w-[calc(100%_+_3rem)] max-w-none max-h-[80vh] object-contain rounded-none md:mx-auto md:w-full md:max-w-full md:rounded"
+        class="-mx-6 block max-h-[80vh] w-[calc(100%_+_3rem)] max-w-none rounded-none object-contain md:mx-auto md:w-full md:max-w-full md:rounded"
       />
     {:else if block.type === "blockquote"}
       <blockquote
-        class="my-3 pb-1 mb-3 border-l-3 border-neutral-200 pl-3 text-neutral-500"
+        class="my-3 mb-3 border-l-3 border-neutral-200 pb-1 pl-3 text-neutral-500"
       >
         {@render renderBlocks(block.blocks)}
       </blockquote>
@@ -713,7 +713,7 @@
     {:else if block.type === "table"}
       {@const headRows = block.rows.filter((r) => r.head)}
       {@const bodyRows = block.rows.filter((r) => !r.head)}
-      <div class="overflow-x-auto my-4">
+      <div class="my-4 overflow-x-auto">
         <table>
           {#if headRows.length}
             <thead>
@@ -752,7 +752,7 @@
 {/snippet}
 
 <div
-  class="prose leading-5 max-w-none text-neutral-700 [&_p]:my-3 [&_img]:my-5 [&_blockquote_img]:mx-0 [&_blockquote_img]:w-full [&_blockquote_img]:max-w-full [&_blockquote_img]:rounded [&_table]:my-0 [&_pre]:bg-neutral-100 [&_pre]:text-neutral-800 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-neutral-100 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none [&_code]:before:content-none [&_code]:after:content-none"
+  class="prose max-w-none leading-5 text-neutral-700 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-neutral-100 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_blockquote_img]:mx-0 [&_blockquote_img]:w-full [&_blockquote_img]:max-w-full [&_blockquote_img]:rounded [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none [&_code]:before:content-none [&_code]:after:content-none [&_img]:my-5 [&_p]:my-3 [&_pre]:bg-neutral-100 [&_pre]:text-neutral-800 [&_table]:my-0"
 >
   {@render renderBlocks(blocks)}
 </div>
diff --git a/src/lib/components/SortToggle.svelte b/src/lib/components/SortToggle.svelte
index d6357eb..63d2484 100644
--- a/src/lib/components/SortToggle.svelte
+++ b/src/lib/components/SortToggle.svelte
@@ -61,7 +61,7 @@
     aria-haspopup="menu"
     aria-expanded={open}
     aria-label="Sort discussions, current: {currentLabel}"
-    class="flex items-center gap-2 rounded bg-neutral-800 px-4 py-1.5 md:text-sm font-medium text-white hover:bg-neutral-700"
+    class="flex items-center gap-2 rounded bg-neutral-800 px-4 py-1.5 font-medium text-white hover:bg-neutral-700 md:text-sm"
   >
     <svg
       class="h-4 w-4"
diff --git a/src/lib/components/Tag.svelte b/src/lib/components/Tag.svelte
index 7d270dd..e8be2de 100644
--- a/src/lib/components/Tag.svelte
+++ b/src/lib/components/Tag.svelte
@@ -3,6 +3,6 @@
   let { label }: Props = $props();
 </script>
 
-<span class="rounded-lg bg-accent px-2.5 py-0 text-sm text-white">
+<span class="bg-accent rounded-lg px-2.5 py-0 text-sm text-white">
   {label}
 </span>
diff --git a/src/lib/components/ThreadItem.svelte b/src/lib/components/ThreadItem.svelte
index d69d9b8..91e4bcd 100644
--- a/src/lib/components/ThreadItem.svelte
+++ b/src/lib/components/ThreadItem.svelte
@@ -39,8 +39,8 @@
   class="flex items-center gap-3 border-b border-neutral-100 py-4 hover:bg-neutral-50 sm:gap-6"
 >
   <!-- Col 1: title + byline -->
-  <div class="flex-1 min-w-0">
-    <div class="text-lg mb-1.5 text-neutral-900 leading-5">{thread.title}</div>
+  <div class="min-w-0 flex-1">
+    <div class="mb-1.5 text-lg leading-5 text-neutral-900">{thread.title}</div>
     <div class="flex items-center gap-1.5 text-sm text-neutral-500">
       <span>by</span>
       {@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
diff --git a/src/lib/components/ThreadScrubber.svelte b/src/lib/components/ThreadScrubber.svelte
index ea79720..83a9335 100644
--- a/src/lib/components/ThreadScrubber.svelte
+++ b/src/lib/components/ThreadScrubber.svelte
@@ -141,7 +141,7 @@
 </script>
 
 <div
-  class="sticky self-start flex-shrink-0 flex-col items-end select-none pt-1 max-md:hidden {isOverflowing
+  class="sticky flex-shrink-0 flex-col items-end self-start pt-1 select-none max-md:hidden {isOverflowing
     ? 'flex'
     : 'hidden'}"
   style="top: calc({topOffset}px - 1.5rem); height: 50vh; width: 72px;"
@@ -149,7 +149,7 @@
 >
   <!-- First post date -->
   <div
-    class="text-xs text-neutral-300 mb-1 text-right leading-tight whitespace-pre"
+    class="mb-1 text-right text-xs leading-tight whitespace-pre text-neutral-300"
   >
     {firstPost ? formatDate(firstPost.createdAt) : ""}
   </div>
@@ -157,7 +157,7 @@
   <!-- Track area -->
   <div
     bind:this={trackEl}
-    class="relative flex-1 w-full cursor-pointer"
+    class="relative w-full flex-1 cursor-pointer"
     onclick={onTrackClick}
     role="presentation"
   >
@@ -169,7 +169,7 @@
 
     <!-- Thumb -->
     <div
-      class="absolute rounded-full bg-brand hover:bg-neutral-600 transition-colors cursor-grab active:cursor-grabbing touch-none"
+      class="bg-brand absolute cursor-grab touch-none rounded-full transition-colors hover:bg-neutral-600 active:cursor-grabbing"
       style="width: 4px; right: 3px; top: {thumbTop}px; height: {thumbHeight}px;"
       onpointerdown={onThumbPointerDown}
       onpointermove={onThumbPointerMove}
@@ -180,7 +180,7 @@
 
     <!-- Current date label -->
     <div
-      class="absolute text-xs text-neutral-400 whitespace-nowrap pointer-events-none leading-tight"
+      class="pointer-events-none absolute text-xs leading-tight whitespace-nowrap text-neutral-400"
       style="right: 18px; top: {thumbTop +
         thumbHeight / 2}px; transform: translateY(-50%);"
     >
@@ -190,7 +190,7 @@
 
   <!-- Last post date -->
   <div
-    class="text-xs text-neutral-300 mt-1 text-right leading-tight whitespace-pre"
+    class="mt-1 text-right text-xs leading-tight whitespace-pre text-neutral-300"
   >
     {lastPost ? formatDate(lastPost.createdAt) : ""}
   </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c82a3c2..b3aa21d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -104,7 +104,7 @@
 >
   <Navbar onMenuToggle={() => (menuOpen = true)} />
   <div
-    class="relative md:flex md:flex-1 md:overflow-hidden md:gap-5 {mobileView ===
+    class="relative md:flex md:flex-1 md:gap-5 md:overflow-hidden {mobileView ===
     'chat'
       ? 'flex flex-1 overflow-hidden'
       : ''}"
@@ -120,7 +120,7 @@
            it first and it reappears once the top is reached. Desktop only. -->
       <div class="hidden md:block md:h-6" aria-hidden="true"></div>
       <div
-        class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-4 md:pt-8 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-10 md:pt-6"
+        class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-4 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-10 md:pt-6 md:pt-8"
       >
         {@render children()}
       </div>
@@ -136,7 +136,7 @@
       <!-- Own panel (40%) so the gray gutter matches the main↔chat gap.
            Hidden on mobile — it's supplementary to the main column. -->
       <div
-        class="no-scrollbar hidden min-w-0 md:block md:flex-[2] md:min-h-0 md:overflow-y-auto"
+        class="no-scrollbar hidden min-w-0 md:block md:min-h-0 md:flex-[2] md:overflow-y-auto"
       >
         <div class="hidden md:block md:h-6" aria-hidden="true"></div>
         <div
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1a5f456..d586f47 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -62,7 +62,7 @@
   {#if partial}
     <hr class="text-neutral-300" />
   {:else}
-    <h1 class="py-2 text-[1.65rem] text-brand">Forum rooms</h1>
+    <h1 class="text-brand py-2 text-[1.65rem]">Forum rooms</h1>
   {/if}
 
   {#if groupsStore.list.length === 0}
@@ -82,11 +82,11 @@
         class="group flex items-start justify-between gap-4 py-5"
       >
         <div class="min-w-0">
-          <h2 class="text-2xl text-neutral-800 group-hover:text-brand">
+          <h2 class="group-hover:text-brand text-2xl text-neutral-800">
             {room.name}
           </h2>
           {#if room.about}
-            <p class="mt-1 text-neutral-600 leading-5">{room.about}</p>
+            <p class="mt-1 leading-5 text-neutral-600">{room.about}</p>
           {/if}
           {#if admin}
             <div class="mt-2 flex items-center gap-2 text-sm text-neutral-500">
diff --git a/src/routes/contacts/+page.svelte b/src/routes/contacts/+page.svelte
index d3e03f8..d8c8339 100644
--- a/src/routes/contacts/+page.svelte
+++ b/src/routes/contacts/+page.svelte
@@ -72,7 +72,7 @@
 </svelte:head>
 
 <div class="mx-auto max-w-6xl">
-  <h1 class="py-2 text-[1.65rem] text-brand">Contacts</h1>
+  <h1 class="text-brand py-2 text-[1.65rem]">Contacts</h1>
 
   {#if partial}
     <div class="mb-8">
@@ -120,7 +120,7 @@
                 href="https://njump.me/{c.npub}"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="shrink-0 text-sm text-brand hover:underline"
+                class="text-brand shrink-0 text-sm hover:underline"
               >
                 View profile ↗
               </a>
@@ -139,7 +139,7 @@
                     href={websiteHref(c.entry.website)}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="truncate text-brand hover:underline"
+                    class="text-brand truncate hover:underline"
                   >
                     {websiteLabel(c.entry.website)}
                   </a>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 7a3e8d7..322247e 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,6 +1,6 @@
 @import "tailwindcss";
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
 
 html {
   font-size: 16px;
diff --git a/src/routes/resource/[slug]/+page.svelte b/src/routes/resource/[slug]/+page.svelte
index 4a258fb..f34e64a 100644
--- a/src/routes/resource/[slug]/+page.svelte
+++ b/src/routes/resource/[slug]/+page.svelte
@@ -31,7 +31,7 @@
 <div class="mx-auto max-w-6xl">
   <a
     href="/"
-    class="mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 hover:text-brand"
+    class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/thread/[id]/+page.svelte b/src/routes/thread/[id]/+page.svelte
index e6bdc70..a1b9701 100644
--- a/src/routes/thread/[id]/+page.svelte
+++ b/src/routes/thread/[id]/+page.svelte
@@ -264,11 +264,11 @@
     <img
       src={author.picture}
       alt=""
-      class="w-12 h-12 rounded-full object-cover"
+      class="h-12 w-12 rounded-full object-cover"
     />
   {:else}
     <span
-      class="w-12 h-12 flex items-center justify-center rounded-full bg-neutral-200 text-lg font-semibold text-neutral-500"
+      class="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-200 text-lg font-semibold text-neutral-500"
     >
       {author.name[0].toUpperCase()}
     </span>
@@ -281,11 +281,11 @@
   bindEl: (el: HTMLElement | null) => void,
 )}
   {@const author = resolveAuthor(p.pubkey, profiles)}
-  <div use:bindEl class="md:flex md:gap-6 md:items-start">
+  <div use:bindEl class="md:flex md:items-start md:gap-6">
     <div class="hidden flex-shrink-0 md:block">
       {@render avatar(author)}
     </div>
-    <div class="flex-1 min-w-0">
+    <div class="min-w-0 flex-1">
       <div
         class="mb-4 flex items-center justify-between md:mb-3 md:items-baseline"
       >
@@ -321,7 +321,7 @@
               {#if openMenuId === p.id}
                 <div
                   role="menu"
-                  class="absolute right-0 top-7 z-20 w-36 rounded-lg border border-neutral-100 bg-white py-1 text-sm shadow-lg"
+                  class="absolute top-7 right-0 z-20 w-36 rounded-lg border border-neutral-100 bg-white py-1 text-sm shadow-lg"
                 >
                   <button
                     role="menuitem"
@@ -344,11 +344,11 @@
         <PostContent content={p.content} {profiles} {threadEventAuthors} />
       </div>
       {#if auth.user}
-        <div class="flex items-center justify-start mt-6">
+        <div class="mt-6 flex items-center justify-start">
           <button
             onclick={() => quotePost(p)}
             disabled={!auth.user}
-            class="flex items-center gap-1.5 text-neutral-300 cursor-pointer hover:text-brand transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            class="hover:text-brand flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
           >
             <span>Quote post</span>
             <svg
@@ -372,14 +372,14 @@
 {/snippet}
 
 {#if detail}
-  <div class="flex gap-6 items-start">
-    <div class="flex-1 min-w-0 {!scrubberVisible ? 'md:pr-18' : ''}">
+  <div class="flex items-start gap-6">
+    <div class="min-w-0 flex-1 {!scrubberVisible ? 'md:pr-18' : ''}">
       <div
-        class="relative z-10 bg-white pb-1 md:sticky md:-top-6 md:-mx-10 md:px-10 md:pt-6 md:-mt-6"
+        class="relative z-10 bg-white pb-1 md:sticky md:-top-6 md:-mx-10 md:-mt-6 md:px-10 md:pt-6"
       >
         <a
           href={MODE === "full" ? `/room/${detail.groupId}` : "/"}
-          class="mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 hover:text-brand"
+          class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -398,10 +398,10 @@
           </svg>
           Discussions
         </a>
-        <h1 class="text-[1.65rem] text-brand leading-7">{detail.title}</h1>
+        <h1 class="text-brand text-[1.65rem] leading-7">{detail.title}</h1>
         {#if isScrolled}
           <div
-            class="absolute left-0 right-0 h-8 pointer-events-none transition-opacity duration-200"
+            class="pointer-events-none absolute right-0 left-0 h-8 transition-opacity duration-200"
             style="top: 100%; background: linear-gradient(to bottom, white, transparent);"
           ></div>
         {/if}
@@ -433,7 +433,7 @@
         {#if auth.user}
           {#if replyError}
             <div
-              class="mb-4 rounded bg-red-50 px-4 py-3 text-sm text-red-700 border border-red-200"
+              class="mb-4 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
             >
               {replyError}
             </div>
@@ -452,13 +452,13 @@
             <button
               onclick={submitReply}
               disabled={replying || !replyContent.trim()}
-              class="rounded bg-brand px-6 py-1.5 font-medium text-white hover:bg-brand-hover disabled:opacity-50 disabled:cursor-not-allowed"
+              class="bg-brand hover:bg-brand-hover rounded px-6 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
             >
               {replying ? "Posting…" : "post reply"}
             </button>
           </div>
         {:else}
-          <p class=" text-neutral-500 text-center">
+          <p class=" text-center text-neutral-500">
             To participate and reply, please
             <button onclick={openLogin} class="text-brand hover:underline"
               >login now</button
@@ -485,7 +485,7 @@
     onmousedown={(e) => e.preventDefault()}
     onclick={quoteFromSelection}
     style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;"
-    class="fixed -translate-x-1/2 -translate-y-full z-50 rounded bg-neutral-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-neutral-700"
+    class="fixed z-50 -translate-x-1/2 -translate-y-full rounded bg-neutral-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-neutral-700"
   >
     Quote
   </button>