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

messages yet

references/README.md

@@ -0,0 +1 @@
+The files here are not for use. I use them as inspiration.

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>

references/search-form.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label } from "$lib/components/ui/label/index.js";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import type { WithElementRef } from "$lib/utils.js";
+	import SearchIcon from "@lucide/svelte/icons/search";
+	import type { HTMLFormAttributes } from "svelte/elements";
+
+	let { ref = $bindable(null), ...restProps }: WithElementRef<HTMLFormAttributes> = $props();
+</script>
+
+<form bind:this={ref} {...restProps}>
+	<Sidebar.Group class="py-0">
+		<Sidebar.GroupContent class="relative">
+			<Label for="search" class="sr-only">Search</Label>
+			<Sidebar.Input id="search" placeholder="Search the docs..." class="ps-8" />
+			<SearchIcon
+				class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 opacity-50 select-none"
+			/>
+		</Sidebar.GroupContent>
+	</Sidebar.Group>
+</form>

references/settings-dialog.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+
+  export let open: boolean = false;
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="sm:max-w-[425px]">
+    <Dialog.Header>
+      <Dialog.Title>Settings</Dialog.Title>
+      <Dialog.Description>
+        Configure your application settings
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <div class="py-4">
+      <h1 class="text-lg font-medium">hi</h1>
+    </div>
+
+    <Dialog.Footer>
+      <Dialog.Close asChild let:builder>
+        <button use:builder class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded">
+          Close
+        </button>
+      </Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>