Enable full mode with multiple rooms

src/lib/active.svelte.ts

@@ -0,0 +1,17 @@
+import { GROUP_ID, MODE } from "$lib/config";
+
+// The group the user is currently acting within (posting, chatting, joining).
+// Simple mode has exactly one group; full mode follows the room or thread being
+// viewed. GROUP_ID is never assumed in full mode — this is the single source of
+// truth for "which group".
+let current = $state<string>(MODE === "full" ? "" : GROUP_ID);
+
+export const activeGroup = {
+  get id() {
+    return current;
+  },
+};
+
+export function setActiveGroup(id: string) {
+  if (id) current = id;
+}

src/lib/admins.svelte.ts

@@ -0,0 +1,41 @@
+import { SimplePool } from "@nostr/tools";
+import { RELAY_URL } from "$lib/config";
+
+// room id -> admin pubkeys (NIP-29 kind 39001 `p` tags), across all rooms.
+let byRoom = $state<Record<string, string[]>>({});
+let loaded = $state(false);
+let loadedKey = "";
+
+export const roomAdminsStore = {
+  get byRoom() {
+    return byRoom;
+  },
+  get loaded() {
+    return loaded;
+  },
+};
+
+export async function loadRoomAdmins(roomIds: string[]) {
+  if (roomIds.length === 0) return;
+  const key = [...roomIds].sort().join(",");
+  if (key === loadedKey) return;
+  loadedKey = key;
+
+  const pool = new SimplePool();
+  try {
+    const events = await pool.querySync([RELAY_URL], {
+      kinds: [39001],
+      "#d": roomIds,
+    });
+    const map: Record<string, string[]> = {};
+    for (const e of events) {
+      const d = e.tags.find((t) => t[0] === "d")?.[1];
+      if (!d) continue;
+      map[d] = e.tags.filter((t) => t[0] === "p" && t[1]).map((t) => t[1]);
+    }
+    byRoom = map;
+  } finally {
+    loaded = true;
+    pool.close([RELAY_URL]);
+  }
+}

src/lib/chat.svelte.ts

@@ -1,6 +1,6 @@
 import { SimplePool, type Event } from "@nostr/tools";
 import { loadNostrUser, type NostrUser } from "@nostr/gadgets/metadata";
-import { RELAY_URL, GROUP_ID } from "$lib/config";
+import { RELAY_URL } from "$lib/config";
 import { auth } from "$lib/auth.svelte";
 import { ingestNostrUser } from "$lib/profiles.svelte";
 import { extractMentionPubkeys, buildPTagHints } from "$lib/mentions";
@@ -16,7 +16,8 @@ export type ChatMessageData = {
 
 let messages = $state<ChatMessageData[]>([]);
 let profiles = $state<Record<string, NostrUser>>({});
-let started = false;
+let currentGroup: string | null = null;
+let chatReq = 0; // supersedes an in-flight load when the room changes
 let livePool: SimplePool | null = null;
 let liveSub: { close(): void } | null = null;
 
@@ -65,17 +66,28 @@ function ingestEvent(ev: Event) {
   loadProfile(ev.pubkey);
 }
 
-export async function startChat() {
-  if (started) return;
-  started = true;
+// (Re)start chat for a group. Switching rooms tears down the previous live
+// subscription, clears its messages, and reloads — a req token discards a load
+// that was superseded mid-flight.
+export async function startChat(groupId: string) {
+  if (!groupId || groupId === currentGroup) return;
+  currentGroup = groupId;
+  const req = ++chatReq;
+
+  liveSub?.close();
+  livePool?.close([RELAY_URL]);
+  liveSub = null;
+  livePool = null;
+  messages = [];
 
   const pool = new SimplePool();
   try {
     const events = await pool.querySync([RELAY_URL], {
       kinds: [9],
-      "#h": [GROUP_ID],
+      "#h": [groupId],
       limit: 100,
     });
+    if (req !== chatReq) return;
     for (const ev of events) ingestEvent(ev);
   } catch (e) {
     console.error("[chat] initial load failed", e);
@@ -83,12 +95,14 @@ export async function startChat() {
     pool.close([RELAY_URL]);
   }
 
+  if (req !== chatReq) return;
+
   livePool = new SimplePool();
   liveSub = livePool.subscribeMany(
     [RELAY_URL],
     {
       kinds: [9],
-      "#h": [GROUP_ID],
+      "#h": [groupId],
       since: Math.floor(Date.now() / 1000),
     },
     { onevent: (ev) => ingestEvent(ev) },
@@ -96,11 +110,13 @@ export async function startChat() {
 }
 
 export function stopChat() {
+  chatReq++;
   liveSub?.close();
   livePool?.close([RELAY_URL]);
   liveSub = null;
   livePool = null;
-  started = false;
+  currentGroup = null;
+  messages = [];
 }
 
 export async function sendChatMessage(
@@ -108,6 +124,7 @@ export async function sendChatMessage(
   replyTo?: { id: string; pubkey: string },
 ) {
   if (!auth.signer) throw new Error("Not logged in");
+  if (!currentGroup) throw new Error("No room selected");
   const ownPubkey = await auth.signer.getPublicKey();
 
   const previousRefs = messages
@@ -123,7 +140,7 @@ export async function sendChatMessage(
 
   const hints = await buildPTagHints(notifyPubkeys);
 
-  const tags: string[][] = [["h", GROUP_ID]];
+  const tags: string[][] = [["h", currentGroup]];
   if (replyTo) {
     tags.push(["q", replyTo.id, RELAY_URL, replyTo.pubkey]);
   }

src/lib/components/ChatSidebar.svelte

@@ -8,6 +8,7 @@
   } from "$lib/chat.svelte";
   import { auth, openLogin } from "$lib/auth.svelte";
   import { withJoin } from "$lib/join.svelte";
+  import { activeGroup } from "$lib/active.svelte";
   import type { NostrUser } from "@nostr/gadgets/metadata";
   import MentionAutocomplete from "$lib/components/MentionAutocomplete.svelte";
   import ChatContent from "$lib/components/ChatContent.svelte";
@@ -80,7 +81,7 @@
       ? { id: replyTarget.id, pubkey: replyTarget.pubkey }
       : undefined;
     try {
-      await withJoin(async () => {
+      await withJoin(activeGroup.id, async () => {
         await sendChatMessage(content, reply);
         inputValue = "";
         replyTarget = null;

src/lib/components/DiscussionsFeed.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import {
+    threadStore,
+    loadThreads,
+    loadMore,
+    type ThreadData,
+    type SortMode,
+  } from "$lib/threads.svelte";
+  import ThreadItem, {
+    type ThreadRow,
+    type Author,
+  } from "$lib/components/ThreadItem.svelte";
+  import SortToggle from "$lib/components/SortToggle.svelte";
+  import type { NostrUser } from "@nostr/gadgets/metadata";
+  import { auth, openLogin } from "$lib/auth.svelte";
+  import { openDraft } from "$lib/draft.svelte";
+  import { sortPref } from "$lib/sort.svelte";
+  import { page } from "$app/state";
+
+  type Props = {
+    groupId: string;
+    title: string;
+  };
+
+  let { groupId, title }: Props = $props();
+
+  function parseSort(v: string | null): SortMode | null {
+    return v === "new" ? "new" : v === "active" ? "active" : null;
+  }
+
+  // URL param is the explicit override; otherwise fall back to the saved
+  // preference so the sort survives Home/room navigation.
+  const urlSort = $derived(parseSort(page.url.searchParams.get("sort")));
+  const sort = $derived<SortMode>(urlSort ?? sortPref.value);
+
+  // Remember any explicit choice that arrives via the URL.
+  $effect(() => {
+    if (urlSort) sortPref.value = urlSort;
+  });
+
+  // Re-runs on mount and whenever the group or effective sort changes.
+  $effect(() => {
+    loadThreads(groupId, sort);
+  });
+
+  function onNewTopic() {
+    if (!auth.user) {
+      openLogin();
+      return;
+    }
+    openDraft();
+  }
+
+  function relativeTime(ts: number): string {
+    const diff = Math.floor(Date.now() / 1000) - ts;
+    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
+    return `${Math.floor(diff / 86400)}d`;
+  }
+
+  function resolveAuthor(
+    pubkey: string,
+    profiles: Record<string, NostrUser>,
+  ): Author {
+    const user = profiles[pubkey];
+    return {
+      pubkey,
+      name: user?.shortName ?? pubkey.slice(0, 8),
+      picture: user?.metadata.picture,
+    };
+  }
+
+  function toRow(
+    t: ThreadData,
+    profiles: Record<string, NostrUser>,
+  ): ThreadRow {
+    return {
+      id: t.id,
+      title: t.title,
+      labels: t.labels,
+      author: resolveAuthor(t.authorPubkey, profiles),
+      replyCount: t.replyCount,
+      repliers: t.replierPubkeys.map((pk) => resolveAuthor(pk, profiles)),
+      lastActiveAuthor: resolveAuthor(t.latestPubkey, profiles),
+      lastActivity: relativeTime(t.latestAt),
+    };
+  }
+
+  const rows = $derived(
+    threadStore.threads.map((t) => toRow(t, threadStore.profiles)),
+  );
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+</svelte:head>
+
+<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>
+    <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"
+      >
+        New discussion
+      </button>
+      <SortToggle {sort} />
+    </div>
+  </div>
+
+  <div>
+    {#each rows as thread}
+      <ThreadItem {thread} />
+    {/each}
+  </div>
+
+  {#if threadStore.loading && rows.length === 0}
+    <p class="py-6 text-center text-sm text-neutral-400">
+      Loading discussions…
+    </p>
+  {:else if !threadStore.exhausted}
+    <div class="flex justify-center py-6">
+      <button
+        onclick={() => loadMore(groupId)}
+        disabled={threadStore.loadingMore}
+        aria-busy={threadStore.loadingMore}
+        class="rounded border border-neutral-200 px-6 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
+      >
+        {threadStore.loadingMore ? "Loading…" : "Show more"}
+      </button>
+    </div>
+  {:else if rows.length > 0}
+    <p class="py-6 text-center text-sm text-neutral-400">No more discussions</p>
+  {/if}
+</div>

src/lib/components/LatestDiscussions.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { overviewStore } from "$lib/overview.svelte";
+  import { groupsStore } from "$lib/groups.svelte";
+  import type { NostrUser } from "@nostr/gadgets/metadata";
+
+  function roomName(id: string) {
+    return groupsStore.list.find((g) => g.id === id)?.name ?? id;
+  }
+
+  function authorOf(pubkey: string) {
+    const u: NostrUser | undefined = overviewStore.profiles[pubkey];
+    return {
+      name: u?.shortName ?? pubkey.slice(0, 8),
+      picture: u?.metadata?.picture,
+    };
+  }
+</script>
+
+<aside aria-label="Latest discussions">
+  <h2 class="pb-2 text-[1.5rem] leading-7 text-brand">Latest discussions</h2>
+  {#if overviewStore.recent.length === 0}
+    <p class="text-sm text-neutral-400">
+      {overviewStore.loading ? "Loading…" : "Nothing yet."}
+    </p>
+  {:else}
+    <ul class="divide-y divide-neutral-100">
+      {#each overviewStore.recent as t}
+        {@const author = authorOf(t.authorPubkey)}
+        <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"
+            >
+              {t.title}
+            </p>
+            <div
+              class="mt-1.5 flex items-center gap-1.5 text-xs text-neutral-400"
+            >
+              <span>by</span>
+              {#if author.picture}
+                <img
+                  src={author.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 text-[10px] font-semibold text-neutral-500"
+                  aria-hidden="true"
+                >
+                  {author.name[0].toUpperCase()}
+                </span>
+              {/if}
+              <span aria-hidden="true">in</span>
+              <span class="truncate">{roomName(t.groupId)}</span>
+            </div>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</aside>

src/lib/components/LeftSidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { rooms } from "$lib/mock";
   import { auth, openLogin, logout } from "$lib/auth.svelte";
   import { groupStore } from "$lib/group.svelte";
+  import { groupsStore } from "$lib/groups.svelte";
   import { draftState, resumeDraft } from "$lib/draft.svelte";
 
   type Props = {
@@ -11,7 +11,10 @@
 
   let { mode, activeRoom }: Props = $props();
 
-  const groups = [...new Set(rooms.map((r) => r.group))];
+  // The description of the room currently being viewed (full mode).
+  const activeAbout = $derived(
+    groupsStore.list.find((g) => g.id === activeRoom)?.about ?? "",
+  );
 </script>
 
 <aside
@@ -20,7 +23,7 @@
   <div>
     <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 hover:bg-neutral-100 text-neutral-700"
     >
       Home
     </a>
@@ -30,26 +33,30 @@
         <p class="text-sm text-neutral-500">{groupStore.data?.about ?? ""}</p>
       </div>
     {:else}
-      <nav class="flex-auto mt-6">
-        {#each groups as group}
-          <div class="mb-8">
-            <p
-              class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
-            >
-              {group}
-            </p>
-            {#each rooms.filter((r) => r.group === group) as room}
-              <a
-                href="/room/{room.slug}"
-                class="flex items-center gap-2 py-1 hover:bg-neutral-100
-								{activeRoom === room.slug ? ' text-brand' : 'text-neutral-700'}"
-              >
-                {room.name}
-              </a>
-            {/each}
-          </div>
+      <nav class="flex-auto mt-6" aria-label="Rooms">
+        <p
+          class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
+        >
+          Rooms
+        </p>
+        {#if groupsStore.list.length === 0 && !groupsStore.loaded}
+          <p class="py-1 text-sm text-neutral-400">Loading rooms…</p>
+        {/if}
+        {#each groupsStore.list as room}
+          <a
+            href="/room/{room.id}"
+            class="flex items-center gap-2 py-1 hover:bg-neutral-100
+							{activeRoom === room.id ? ' text-brand' : 'text-neutral-700'}"
+          >
+            {room.name}
+          </a>
         {/each}
       </nav>
+      {#if activeAbout}
+        <div class="mt-6">
+          <p class="text-sm text-neutral-500">{activeAbout}</p>
+        </div>
+      {/if}
     {/if}
 
     <nav class="flex-auto mt-6">

src/lib/components/MobileMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fly, fade } from "svelte/transition";
-  import { rooms } from "$lib/mock";
+  import { groupsStore } from "$lib/groups.svelte";
   import { auth, openLogin, logout } from "$lib/auth.svelte";
   import { draftState, resumeDraft } from "$lib/draft.svelte";
 
@@ -13,8 +13,6 @@
 
   let { open, onClose, mode, activeRoom }: Props = $props();
 
-  const groups = [...new Set(rooms.map((r) => r.group))];
-
   function onLogin() {
     onClose();
     openLogin();
@@ -115,25 +113,24 @@
         >
 
         {#if mode === "full"}
-          <nav class="mt-4">
-            {#each groups as group}
-              <div class="mb-5">
-                <p
-                  class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
-                >
-                  {group}
-                </p>
-                {#each rooms.filter((r) => r.group === group) as room}
-                  <a
-                    href="/room/{room.slug}"
-                    onclick={onClose}
-                    class="block py-1.5 text-lg
-											{activeRoom === room.slug ? 'text-brand' : 'text-neutral-700 hover:text-brand'}"
-                  >
-                    {room.name}
-                  </a>
-                {/each}
-              </div>
+          <nav class="mt-4" aria-label="Rooms">
+            <p
+              class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
+            >
+              Rooms
+            </p>
+            {#if groupsStore.list.length === 0 && !groupsStore.loaded}
+              <p class="py-1.5 text-base text-neutral-400">Loading rooms…</p>
+            {/if}
+            {#each groupsStore.list as room}
+              <a
+                href="/room/{room.id}"
+                onclick={onClose}
+                class="block py-1.5 text-lg
+									{activeRoom === room.id ? 'text-brand' : 'text-neutral-700 hover:text-brand'}"
+              >
+                {room.name}
+              </a>
             {/each}
           </nav>
         {/if}

src/lib/components/Navbar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { groupStore } from "$lib/group.svelte";
-  import { GROUP_ID } from "$lib/config";
+  import { GROUP_ID, TITLE } from "$lib/config";
 
   type Props = { onMenuToggle: () => void };
   let { onMenuToggle }: Props = $props();
 
-  const name = $derived(groupStore.data?.name ?? GROUP_ID);
+  const name = $derived(TITLE || groupStore.data?.name || GROUP_ID);
 </script>
 
 <header

src/lib/components/NewDiscussionModal.svelte

@@ -9,8 +9,10 @@
     removeLabel,
     publishDraft,
   } from "$lib/draft.svelte";
-  import { LABELS } from "$lib/config";
+  import { LABELS, MODE } from "$lib/config";
   import { groupStore } from "$lib/group.svelte";
+  import { groupsStore } from "$lib/groups.svelte";
+  import { activeGroup } from "$lib/active.svelte";
   import MessageEditor from "$lib/components/MessageEditor.svelte";
 
   let labelInput = $state("");
@@ -18,6 +20,14 @@
   let suggestOpen = $state(false);
   let titleEl = $state<HTMLInputElement | null>(null);
 
+  // The discussion posts to the active room, so show that room's name.
+  const targetName = $derived(
+    MODE === "full"
+      ? (groupsStore.list.find((g) => g.id === activeGroup.id)?.name ??
+        groupStore.data?.name)
+      : groupStore.data?.name,
+  );
+
   const available = $derived(
     LABELS.filter((l) => !draftState.labels.includes(l)),
   );
@@ -138,8 +148,8 @@
       <!-- Header -->
       <div class="flex items-start justify-between">
         <div>
-          {#if groupStore.data?.name}
-            <p class="text-sm text-neutral-700">{groupStore.data.name}</p>
+          {#if targetName}
+            <p class="text-sm text-neutral-700">{targetName}</p>
           {/if}
           <h2 id="newdisc-title" class="text-2xl text-brand">New discussion</h2>
         </div>

src/lib/components/ThreadItem.svelte

@@ -40,7 +40,7 @@
 >
   <!-- Col 1: title + byline -->
   <div class="flex-1 min-w-0">
-    <div class="text-lg mb-1.5 text-neutral-900 leading-6">{thread.title}</div>
+    <div class="text-lg mb-1.5 text-neutral-900 leading-5">{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")}

src/lib/config.ts

@@ -1,6 +1,7 @@
 import {
   PUBLIC_RELAY_URL,
   PUBLIC_GROUP_ID,
+  PUBLIC_TITLE,
   PUBLIC_MODE,
   PUBLIC_JOINCODE,
   PUBLIC_LABELS,
@@ -9,6 +10,7 @@ import {
 
 export const RELAY_URL = PUBLIC_RELAY_URL;
 export const GROUP_ID = PUBLIC_GROUP_ID;
+export const TITLE = PUBLIC_TITLE ?? "";
 export const MODE: "simple" | "full" =
   PUBLIC_MODE === "full" ? "full" : "simple";
 export const JOINCODE_REQUIRED = PUBLIC_JOINCODE === "yes";

src/lib/draft.svelte.ts

@@ -1,7 +1,8 @@
 import { SimplePool } from "@nostr/tools";
 import { auth } from "$lib/auth.svelte";
 import { withJoin } from "$lib/join.svelte";
-import { GROUP_ID, RELAY_URL } from "$lib/config";
+import { activeGroup } from "$lib/active.svelte";
+import { RELAY_URL } from "$lib/config";
 import { extractMentionPubkeys, buildPTagHints } from "$lib/mentions";
 
 let modalOpen = $state(false);
@@ -81,6 +82,11 @@ export async function publishDraft(): Promise<{ ok: boolean; threadId?: string }
     publishError = "Title and content are required";
     return { ok: false };
   }
+  const groupId = activeGroup.id;
+  if (!groupId) {
+    publishError = "No room selected";
+    return { ok: false };
+  }
 
   publishing = true;
   publishError = null;
@@ -91,9 +97,9 @@ export async function publishDraft(): Promise<{ ok: boolean; threadId?: string }
   const hints = await buildPTagHints(mentionPubkeys);
 
   try {
-    const success = await withJoin(async () => {
+    const success = await withJoin(groupId, async () => {
       const tags: string[][] = [
-        ["h", GROUP_ID],
+        ["h", groupId],
         ["title", t],
       ];
       for (const l of labels) tags.push(["t", l]);

src/lib/groups.svelte.ts

@@ -0,0 +1,48 @@
+import { SimplePool } from "@nostr/tools";
+import { RELAY_URL } from "$lib/config";
+
+export type GroupSummary = {
+  id: string; // NIP-29 group id (the `d` tag) — also the room URL slug
+  name: string;
+  picture?: string;
+  about?: string;
+  createdAt: number;
+};
+
+let list = $state<GroupSummary[]>([]);
+let loaded = $state(false);
+
+export const groupsStore = {
+  get list() {
+    return list;
+  },
+  get loaded() {
+    return loaded;
+  },
+};
+
+// Fetch every group the relay hosts. NIP-29 publishes one kind 39000 metadata
+// event per group, so an unfiltered query enumerates them all.
+export async function loadGroups() {
+  const pool = new SimplePool();
+  try {
+    const events = await pool.querySync([RELAY_URL], { kinds: [39000] });
+    list = events
+      .map((e) => {
+        const id = e.tags.find((t) => t[0] === "d")?.[1] ?? "";
+        return {
+          id,
+          name: e.tags.find((t) => t[0] === "name")?.[1] ?? id,
+          picture: e.tags.find((t) => t[0] === "picture")?.[1],
+          about: e.tags.find((t) => t[0] === "about")?.[1],
+          createdAt: e.created_at,
+        };
+      })
+      .filter((g) => g.id)
+      // Alphabetical for now; a per-group position tag will drive order later.
+      .sort((a, b) => a.name.localeCompare(b.name));
+  } finally {
+    loaded = true;
+    pool.close([RELAY_URL]);
+  }
+}

src/lib/join.svelte.ts

@@ -1,17 +1,17 @@
 import { Relay, SimplePool } from "@nostr/tools";
 import { auth } from "$lib/auth.svelte";
-import { GROUP_ID, RELAY_URL, JOINCODE_REQUIRED } from "$lib/config";
+import { GROUP_ID, MODE, RELAY_URL, JOINCODE_REQUIRED } from "$lib/config";
 
-let joined = $state(false);
+// Membership is per-group: full mode lets a user belong to some rooms but not
+// others, so we track joined group ids rather than a single boolean.
+let joinedGroups = new Set<string>();
 let modalOpen = $state(false);
 let modalError = $state<string | null>(null);
 let busy = $state(false);
 let pendingAction: (() => Promise<void>) | null = null;
+let pendingGroup: string | null = null;
 
 export const joinState = {
-  get joined() {
-    return joined;
-  },
   get modalOpen() {
     return modalOpen;
   },
@@ -27,11 +27,12 @@ export const joinState = {
 };
 
 export function resetJoinState() {
-  joined = false;
+  joinedGroups = new Set();
   modalOpen = false;
   modalError = null;
   busy = false;
   pendingAction = null;
+  pendingGroup = null;
 }
 
 // Checks group membership: kind:9000 (per-user put-user event, lightweight)
@@ -67,31 +68,32 @@ function queryHasMatch(
   });
 }
 
-export async function initJoinForUser(pubkey: string) {
+// Membership signal for one group: kind:9000 (per-user put-user event,
+// lightweight) first, falling back to kind:39002 (full members list, heavier).
+async function checkMembership(
+  pubkey: string,
+  groupId: string,
+): Promise<boolean> {
   let relay: Relay;
   try {
     relay = await Relay.connect(RELAY_URL);
   } catch {
-    return;
+    return false;
   }
   try {
     const has9000 = await queryHasMatch(relay, {
       kinds: [9000],
-      "#h": [GROUP_ID],
+      "#h": [groupId],
       "#p": [pubkey],
       limit: 1,
     });
-    if (has9000) {
-      joined = true;
-      return;
-    }
-    const has39002 = await queryHasMatch(relay, {
+    if (has9000) return true;
+    return await queryHasMatch(relay, {
       kinds: [39002],
-      "#d": [GROUP_ID],
+      "#d": [groupId],
       "#p": [pubkey],
       limit: 1,
     });
-    if (has39002) joined = true;
   } finally {
     try {
       relay.close();
@@ -99,6 +101,13 @@ export async function initJoinForUser(pubkey: string) {
   }
 }
 
+// Simple mode pre-checks the single configured group at login so the first post
+// skips the 9021. Full mode checks lazily per room when the user first acts.
+export async function initJoinForUser(pubkey: string) {
+  if (MODE !== "simple") return;
+  if (await checkMembership(pubkey, GROUP_ID)) joinedGroups.add(GROUP_ID);
+}
+
 export function closeJoinModal() {
   if (busy) return;
   modalOpen = false;
@@ -106,9 +115,9 @@ export function closeJoinModal() {
   pendingAction = null;
 }
 
-async function publishJoinRequest(code?: string) {
+async function publishJoinRequest(groupId: string, code?: string) {
   if (!auth.signer) throw new Error("Not logged in");
-  const tags: string[][] = [["h", GROUP_ID]];
+  const tags: string[][] = [["h", groupId]];
   if (code) tags.push(["code", code]);
   const event = await auth.signer.signEvent({
     kind: 9021,
@@ -130,22 +139,33 @@ async function publishJoinRequest(code?: string) {
   }
 }
 
-// Wraps a group action. If not yet joined, sends kind:9021 first, then the
-// action. On failure, opens the join modal so the user can retry (with code if
-// configured). Returns true on success, false if the modal was opened.
-export async function withJoin(action: () => Promise<void>): Promise<boolean> {
-  if (joined) {
+// Wraps an action that posts to `groupId`. If the user isn't known to be a
+// member, checks membership first, then sends kind:9021 before the action. On
+// failure, opens the join modal so the user can retry (with code if configured).
+// Returns true on success, false if the modal was opened.
+export async function withJoin(
+  groupId: string,
+  action: () => Promise<void>,
+): Promise<boolean> {
+  if (joinedGroups.has(groupId)) {
     await action();
     return true;
   }
   busy = true;
   try {
-    await publishJoinRequest();
+    const pubkey = auth.user?.pubkey;
+    if (pubkey && (await checkMembership(pubkey, groupId))) {
+      joinedGroups.add(groupId);
+      await action();
+      return true;
+    }
+    await publishJoinRequest(groupId);
     await action();
-    joined = true;
+    joinedGroups.add(groupId);
     return true;
   } catch (e) {
     pendingAction = action;
+    pendingGroup = groupId;
     modalError = e instanceof Error ? e.message : "Could not join the group";
     modalOpen = true;
     return false;
@@ -155,15 +175,16 @@ export async function withJoin(action: () => Promise<void>): Promise<boolean> {
 }
 
 export async function retryJoin(code?: string) {
-  if (!pendingAction || busy) return;
+  if (!pendingAction || !pendingGroup || busy) return;
   busy = true;
   modalError = null;
   try {
-    await publishJoinRequest(code);
+    await publishJoinRequest(pendingGroup, code);
     await pendingAction();
-    joined = true;
+    joinedGroups.add(pendingGroup);
     modalOpen = false;
     pendingAction = null;
+    pendingGroup = null;
   } catch (e) {
     modalError = e instanceof Error ? e.message : "Could not join the group";
   } finally {

src/lib/mock.ts

@@ -1,9 +1,3 @@
-export type Room = {
-  slug: string;
-  name: string;
-  group: string;
-};
-
 export type Author = {
   pubkey: string;
   name: string;
@@ -42,16 +36,6 @@ export const community = {
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 };
 
-export const rooms: Room[] = [
-  { slug: "off-topics-cafe", name: "Off topics cafe", group: "Groups" },
-  { slug: "proposals", name: "Proposals", group: "Groups" },
-  { slug: "development", name: "Development", group: "Groups" },
-  { slug: "announcements", name: "Announcements", group: "Groups" },
-  { slug: "off-topics", name: "Off topics", group: "Groups" },
-  { slug: "about", name: "About", group: "Resources" },
-  { slug: "help-center", name: "Help center", group: "Resources" },
-];
-
 const alice: Author = {
   pubkey: "npub1alice",
   name: "Alice",

src/lib/overview.svelte.ts

@@ -0,0 +1,128 @@
+import { Relay } from "@nostr/tools";
+import type { Event } from "@nostr/tools/core";
+import type { Filter } from "@nostr/tools/filter";
+import { loadNostrUser, type NostrUser } from "@nostr/gadgets/metadata";
+import { RELAY_URL } from "$lib/config";
+import { ingestNostrUser } from "$lib/profiles.svelte";
+
+export type RoomActivity = {
+  latestAt: number;
+  latestPubkey: string;
+};
+
+export type RecentThread = {
+  id: string;
+  title: string;
+  groupId: string;
+  authorPubkey: string;
+  createdAt: number;
+};
+
+let activity = $state<Record<string, RoomActivity>>({});
+let admins = $state<Record<string, string>>({}); // room id -> first admin pubkey
+let recent = $state<RecentThread[]>([]);
+let profiles = $state<Record<string, NostrUser>>({});
+let loading = $state(false);
+let loadedKey = ""; // room-id set last loaded for, to avoid redundant refetches
+
+export const overviewStore = {
+  get activity() {
+    return activity;
+  },
+  get admins() {
+    return admins;
+  },
+  get recent() {
+    return recent;
+  },
+  get profiles() {
+    return profiles;
+  },
+  get loading() {
+    return loading;
+  },
+};
+
+function querySync(relay: Relay, filter: Filter): Promise<Event[]> {
+  return new Promise((resolve) => {
+    const events: Event[] = [];
+    const sub = relay.subscribe([filter], {
+      onevent(e) {
+        events.push(e);
+      },
+      oneose() {
+        sub.close();
+        resolve(events);
+      },
+      onclose() {
+        resolve(events);
+      },
+    });
+  });
+}
+
+async function loadProfile(pubkey: string) {
+  if (profiles[pubkey]) return;
+  const user = await loadNostrUser(pubkey);
+  profiles[pubkey] = user;
+  ingestNostrUser(user);
+}
+
+// Builds the full-mode landing data: each room's last activity (for the room
+// cards) and the most recent threads across every room (for the side panel).
+export async function loadOverview(roomIds: string[]) {
+  if (roomIds.length === 0) return;
+  const key = [...roomIds].sort().join(",");
+  if (key === loadedKey) return;
+  loadedKey = key;
+
+  loading = true;
+  const relay = await Relay.connect(RELAY_URL);
+  try {
+    // One tiny query per room for its newest event (thread or reply).
+    const latest = await Promise.all(
+      roomIds.map((id) =>
+        querySync(relay, { kinds: [11, 1111], "#h": [id], limit: 1 }),
+      ),
+    );
+    const act: Record<string, RoomActivity> = {};
+    roomIds.forEach((id, i) => {
+      const e = latest[i][0];
+      if (e) act[id] = { latestAt: e.created_at, latestPubkey: e.pubkey };
+    });
+    activity = act;
+
+    // Each room's admin (NIP-29 kind 39001, first `p` tag) for the card byline.
+    const adminEvents = await Promise.all(
+      roomIds.map((id) => querySync(relay, { kinds: [39001], "#d": [id] })),
+    );
+    const adm: Record<string, string> = {};
+    roomIds.forEach((id, i) => {
+      const pk = adminEvents[i][0]?.tags.find((t) => t[0] === "p")?.[1];
+      if (pk) adm[id] = pk;
+    });
+    admins = adm;
+
+    // Most recent discussions (thread OPs) across all rooms combined.
+    const threads = await querySync(relay, {
+      kinds: [11],
+      "#h": roomIds,
+      limit: 20,
+    });
+    threads.sort((a, b) => b.created_at - a.created_at);
+    recent = threads.map((e) => ({
+      id: e.id,
+      title: e.tags.find((t) => t[0] === "title")?.[1] ?? "(untitled)",
+      groupId: e.tags.find((t) => t[0] === "h")?.[1] ?? "",
+      authorPubkey: e.pubkey,
+      createdAt: e.created_at,
+    }));
+
+    for (const a of Object.values(act)) loadProfile(a.latestPubkey);
+    for (const pk of Object.values(adm)) loadProfile(pk);
+    for (const t of recent) loadProfile(t.authorPubkey);
+  } finally {
+    relay.close();
+    loading = false;
+  }
+}

src/lib/thread.svelte.ts

@@ -23,6 +23,7 @@ type ThreadDetail = {
   id: string;
   title: string;
   labels: string[];
+  groupId: string; // the thread's NIP-29 group (its `h` tag)
   op: PostData;
   replies: PostData[];
 };
@@ -50,6 +51,7 @@ function loadMockThread(id: string) {
     id: t.id,
     title: t.title,
     labels: t.tags.map((tag) => tag.label),
+    groupId: GROUP_ID,
     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,
@@ -87,6 +89,7 @@ export async function loadThread(id: string) {
       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]),
+      groupId: event.tags.find((t) => t[0] === "h")?.[1] ?? GROUP_ID,
       op: {
         id: event.id,
         pubkey: event.pubkey,
@@ -133,7 +136,7 @@ export async function sendReply(content: string, ownPubkey: string) {
   const opHint = hints.get(detail.op.pubkey) ?? RELAY_URL;
 
   const tags: string[][] = [
-    ["h", GROUP_ID],
+    ["h", detail.groupId],
     ["E", detail.id, opHint, detail.op.pubkey],
     ["K", "11"],
     ["P", detail.op.pubkey, opHint],