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

messages yet

src/routes/+page.svelte

@@ -25,10 +25,10 @@
         Screenshots
 
         <div class="grid grid-cols-2 grid-rows-2 w-76 gap-2">
-            <img src="https://placehold.co/150x150"/>
-            <img src="https://placehold.co/150x150"/>
-            <img src="https://placehold.co/150x150"/>
-            <img src="https://placehold.co/150x150"/>
+            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
+            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
+            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
+            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
         </div>
     </div>
 

src/routes/app/+page.server.ts

@@ -0,0 +1,19 @@
+import { redirect } from '@sveltejs/kit';
+import { getRequestEvent } from '$app/server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const user = requireLogin();
+	return { user };
+};
+
+
+function requireLogin() {
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return redirect(302, '/login');
+	}
+
+	return locals.user;
+}

src/routes/app/+page.svelte

@@ -1 +1,75 @@
-<h1>nothing here, yet!</h1>
+<script lang="ts">
+  import { Status, type Server, type Group, type Friend } from "$lib";
+  import AppSidebar from "$lib/components/app-sidebar.svelte";
+  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+
+  let currentPageID: string|null = $state(null);
+  let currentPageType: string|null = $state(null);
+  let currentPage: Friend | Group | Server | null = $state(null);
+
+  const overview_data = {
+    friends: [
+      { id: crypto.randomUUID(), name: "Alice", status: Status.OFFLINE, image: "https://placehold.co/40x40" },
+      { id: crypto.randomUUID(), name: "Bob", status: Status.DND, image: "https://placehold.co/40x40" },
+      { id: crypto.randomUUID(), name: "Charlie", status: Status.ONLINE, image: "https://placehold.co/40x40" },
+    ],
+    groups: [
+      { id: crypto.randomUUID(), name: "Work Team", members: 5 },
+      { id: crypto.randomUUID(), name: "Gaming Group", members: 8 },
+    ],
+    servers: [
+      { id: crypto.randomUUID(), name: "Main Server", image: "https://placehold.co/40x40" },
+      { id: crypto.randomUUID(), name: "Backup Server", image: "https://placehold.co/40x40" },
+    ],
+  };
+
+  $effect(() => {
+    if (currentPageID) {
+      let f = overview_data.friends.find(friend => friend.id === currentPageID);
+      let g = overview_data.groups.find(group => group.id === currentPageID);
+      let s = overview_data.servers.find(server => server.id === currentPageID);
+
+      if(f) {
+        currentPageType = "friend";
+        currentPage = f;
+      } else if(g) {
+        currentPageType = "group";
+        currentPage = g;
+      } else if(s) {
+        currentPageType = "server";
+        currentPage = s;
+      }
+    } else {
+      currentPage = null;
+      currentPageType = null;
+    }
+  });
+</script>
+
+<Sidebar.Provider>
+  <AppSidebar bind:currentPage={currentPageID} data={overview_data} />
+
+  <Sidebar.Inset>
+    <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+      <Sidebar.Trigger class="-ms-1" />
+      {#if currentPageType == "server"}
+          {@const server = (currentPage as Server)}
+
+          <img src={server!.image} alt={server!.name} class="size-6 rounded-full" />
+
+          <h1>{server!.name}</h1>
+      {:else if currentPageType == "friend"}
+            {@const friend = (currentPage as Friend)}
+
+          <img src={friend.image} alt={friend!.name} class="size-6 rounded-full" />
+
+          <h1>{friend!.name} [{friend.status == Status.ONLINE ? "Online!" : friend.status == Status.DND ? "DND" : friend.status == Status.OFFLINE ? "Offline" : "Unknown"}]</h1>
+      {:else if currentPageType == "group"}
+      {@const group = (currentPage as Group)}
+
+          <h1>{group!.name} ({group.members} member{group.members > 1 ? "s" : ""})</h1>
+      {/if}
+    </header>
+    <h1> this is like lowkirkounely the content, i should put messages and shi here</h1>
+  </Sidebar.Inset>
+</Sidebar.Provider>