implement a non-working version of the app, with no database and no

messages yet

references/members-sidebar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+  import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar/index.js";
+  import UserIcon from "@lucide/svelte/icons/user";
+
+  // Sample members data
+  const members = [
+    { id: 1, name: "Alice", status: "online", image: "https://placehold.co/40x40" },
+    { id: 2, name: "Bob", status: "online", image: "https://placehold.co/40x40" },
+    { id: 3, name: "Charlie", status: "offline", image: "https://placehold.co/40x40" },
+    { id: 4, name: "Diana", status: "online", image: "https://placehold.co/40x40" },
+    { id: 5, name: "Eve", status: "dnd", image: "https://placehold.co/40x40" },
+  ];
+
+  // Status colors
+  const statusColors = {
+    online: "bg-green-500",
+    offline: "bg-gray-500",
+    dnd: "bg-red-500"
+  };
+</script>
+
+<Sidebar.Root class="w-64 border-l">
+  <Sidebar.Header class="p-4 border-b">
+    <h3 class="font-medium">Members ({members.length})</h3>
+  </Sidebar.Header>
+
+  <Sidebar.Content class="p-2">
+    <Sidebar.Group>
+      <Sidebar.Menu>
+        {#each members as member (member.id)}
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton class="w-full justify-start gap-3">
+              <div class="relative">
+                <Avatar class="size-8">
+                  <AvatarImage src={member.image} alt={member.name} />
+                  <AvatarFallback>
+                    <UserIcon class="size-4" />
+                  </AvatarFallback>
+                </Avatar>
+                <span class={`absolute bottom-0 right-0 block size-2 rounded-full ring-1 ring-white ${statusColors[member.status]}`}></span>
+              </div>
+              <span class="truncate">{member.name}</span>
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+        {/each}
+      </Sidebar.Menu>
+    </Sidebar.Group>
+  </Sidebar.Content>
+</Sidebar.Root>