From 9df8fce89f8fe913006c10dad9b91e84fa1efe74 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Thu, 26 Mar 2026 16:03:29 +0100
Subject: [PATCH] Load group info in simple mode

---
 src/lib/components/LeftSidebar.svelte |  8 +++---
 src/lib/components/Navbar.svelte      | 26 +++++++++++------
 src/lib/group.svelte.ts               | 40 +++++++++++++++++++++++++++
 src/routes/+layout.svelte             |  6 +++-
 src/routes/+layout.ts                 |  1 +
 5 files changed, 68 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/group.svelte.ts
 create mode 100644 src/routes/+layout.ts

diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index 5d73a97..7c24983 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { rooms, community } from "$lib/mock";
+  import { rooms } from "$lib/mock";
   import { auth, login, logout } from "$lib/auth.svelte";
+  import { groupStore } from "$lib/group.svelte";
 
   type Props = {
     mode: "simple" | "full";
@@ -10,11 +11,10 @@
   let { mode, activeRoom }: Props = $props();
 
   const groups = [...new Set(rooms.map((r) => r.group))];
-
 </script>
 
 <aside
-  class="flex max-w-52 min-w-48 shrink-0 flex-col justify-between py-2 pl-8 pr-3 pb-8"
+  class="flex max-w-52 min-w-48 shrink-0 flex-col justify-between py-2 pl-8 pr-1 pb-8"
 >
   <div>
     <a
@@ -26,7 +26,7 @@
 
     {#if mode === "simple"}
       <div class="flex mt-6">
-        <p class="text-sm text-gray-500">{community.about}</p>
+        <p class="text-sm text-gray-500">{groupStore.data?.about ?? ""}</p>
       </div>
     {:else}
       <nav class="flex-auto mt-6">
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index f4daf36..ee78487 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,16 +1,26 @@
 <script lang="ts">
-  import { community } from "$lib/mock";
+  import { groupStore } from "$lib/group.svelte";
+  import { GROUP_ID } from "$lib/config";
+
+  const name = $derived(groupStore.data?.name ?? GROUP_ID);
 </script>
 
 <header class="flex h-16 shrink-0 items-center justify-between px-8">
   <div class="flex items-center gap-2">
-    <div
-      class="flex h-9 w-9 items-center justify-center rounded-full bg-red-500 font-bold text-white"
-    >
-      {community.name[0]}
-    </div>
-    <span class="text-[1.7rem] font-medium text-gray-900">{community.name}</span
-    >
+    {#if groupStore.data?.picture}
+      <img
+        src={groupStore.data.picture}
+        alt=""
+        class="h-9 w-9 rounded-full object-cover"
+      />
+    {:else}
+      <div
+        class="flex h-9 w-9 items-center justify-center rounded-full bg-red-500 font-bold text-white"
+      >
+        {name[0].toUpperCase()}
+      </div>
+    {/if}
+    <span class="text-[1.7rem] font-medium text-gray-900">{name}</span>
   </div>
   <button class="text-sm text-gray-500 hover:text-gray-900"
     >Create your own community</button
diff --git a/src/lib/group.svelte.ts b/src/lib/group.svelte.ts
new file mode 100644
index 0000000..07ea513
--- /dev/null
+++ b/src/lib/group.svelte.ts
@@ -0,0 +1,40 @@
+import { SimplePool } from "@nostr/tools";
+import { RELAY_URL, GROUP_ID } from "$lib/config";
+
+export type GroupMetadata = {
+  name: string;
+  picture?: string;
+  about?: string;
+  isPrivate: boolean;
+  isClosed: boolean;
+};
+
+let group = $state<GroupMetadata | null>(null);
+
+export const groupStore = {
+  get data() {
+    return group;
+  },
+};
+
+export async function loadGroup() {
+  const pool = new SimplePool();
+  try {
+    const events = await pool.querySync([RELAY_URL], {
+      kinds: [39000],
+      "#d": [GROUP_ID],
+      limit: 1,
+    });
+    const event = events[0];
+    if (!event) return;
+    group = {
+      name: event.tags.find((t) => t[0] === "name")?.[1] ?? GROUP_ID,
+      picture: event.tags.find((t) => t[0] === "picture")?.[1],
+      about: event.tags.find((t) => t[0] === "about")?.[1],
+      isPrivate: event.tags.some((t) => t[0] === "private"),
+      isClosed: event.tags.some((t) => t[0] === "closed"),
+    };
+  } finally {
+    pool.close([RELAY_URL]);
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7ef51d7..c2223e6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
   import { page } from "$app/state";
   import { onMount } from "svelte";
   import { restoreSession } from "$lib/auth.svelte";
+  import { loadGroup } from "$lib/group.svelte";
   import { MODE } from "$lib/config";
 
   let { children } = $props();
@@ -14,7 +15,10 @@
   const mode = MODE;
   const chatEnabled = true;
 
-  onMount(restoreSession);
+  onMount(() => {
+    restoreSession();
+    loadGroup();
+  });
 
   let chatExpanded = $state(false);
 
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const ssr = false;