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