Show labels inside the thread

src/lib/thread.svelte.ts

@@ -16,6 +16,7 @@ export type PostData = {
 type ThreadDetail = {
   id: string;
   title: string;
+  labels: string[];
   op: PostData;
   replies: PostData[];
 };
@@ -41,6 +42,7 @@ function loadMockThread(id: string) {
   detail = {
     id: t.id,
     title: t.title,
+    labels: t.tags.map((tag) => tag.label),
     op: { id: t.op.id, pubkey: t.op.author.pubkey, createdAt: toUnix(t.op.createdAt), content: t.op.content },
     replies: (t.op.replies ?? []).map((r) => ({
       id: r.id, pubkey: r.author.pubkey, createdAt: toUnix(r.createdAt), content: r.content,
@@ -77,6 +79,7 @@ export async function loadThread(id: string) {
     detail = {
       id: event.id,
       title: event.tags.find((t) => t[0] === "title")?.[1] ?? "(untitled)",
+      labels: event.tags.filter((t) => t[0] === "t" && t[1]).map((t) => t[1]),
       op: {
         id: event.id,
         pubkey: event.pubkey,

src/routes/room/[slug]/+page.svelte

@@ -22,6 +22,7 @@
     return {
       id: t.id,
       title: t.title,
+      labels: t.tags.map((tag) => tag.label),
       author: t.op.author,
       replyCount: t.replyCount,
       repliers: t.participants

src/routes/thread/[id]/+page.svelte

@@ -13,6 +13,7 @@
   import ThreadScrubber from "$lib/components/ThreadScrubber.svelte";
   import MessageEditor from "$lib/components/MessageEditor.svelte";
   import PostContent from "$lib/components/PostContent.svelte";
+  import Tag from "$lib/components/Tag.svelte";
   import { type NostrUser } from "@nostr/gadgets/metadata";
 
   type Author = { pubkey: string; name: string; picture?: string };
@@ -150,17 +151,25 @@
   <div class="flex gap-6 items-start">
     <div class="flex-1 min-w-0" class:pr-18={!scrubberVisible}>
       <div
-        class="sticky -top-6 bg-white z-10 pb-4 -mx-10 px-10 pt-6 -mt-6 relative"
+        class="sticky -top-6 bg-white z-10 pb-1 -mx-10 px-10 pt-6 -mt-6 relative"
       >
         <h1 class="text-[1.65rem] text-brand leading-7">{detail.title}</h1>
-        <div
+        {#if isScrolled}
-          class="absolute left-0 right-0 h-8 pointer-events-none transition-opacity duration-200"
+          <div
-          style="top: 100%; opacity: {isScrolled
+            class="absolute left-0 right-0 h-8 pointer-events-none transition-opacity duration-200"
-            ? 1
+            style="top: 100%; background: linear-gradient(to bottom, white, transparent);"
-            : 0}; background: linear-gradient(to bottom, white, transparent);"
+          ></div>
-        ></div>
+        {/if}
       </div>
 
+      {#if detail.labels.length > 0}
+        <div class="mt-1 flex flex-wrap items-center gap-1">
+          {#each detail.labels as l}
+            <Tag label={l} />
+          {/each}
+        </div>
+      {/if}
+
       <div class="pt-6 pb-6" bind:this={opEl}>
         {@render post(detail.op, () => {})}
       </div>