Load group info in simple mode

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">

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

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]);
+  }
+}

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);
 

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false;