feat: Show info of currently signed in user

src/lib/components/channelDialog.svelte

@@ -32,7 +32,8 @@
         type="text"
         bind:value={$form.channelName}
         aria-invalid={$errors.channelName ? 'true' : undefined}
-        {...$constraints.channelName} />
+        {...$constraints.channelName}
+      />
       {#if $errors.channelName}<Label for="channelName" class="m-0 p-0 text-red-500">{$errors.channelName}</Label>{/if}
       <Dialog.Footer>
         <Button type="submit">Create</Button>

src/lib/components/mainLayout.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
   import MessagesSquare from 'lucide-svelte/icons/messages-square';
   import type { Snippet } from 'svelte';
-  import type { SuperValidated } from 'sveltekit-superforms';
+  import type { PageData } from '../../routes/$types';
   import Channel from './channel.svelte';
   import ChannelDialog from './channelDialog.svelte';
   import ModeSwitcher from './modeSwitcher.svelte';
+  import User from './user.svelte';
 
   interface Props {
-    data: SuperValidated<{
-      channelName: string;
-    }>;
-    channels: string[];
+    data: PageData;
     children: Snippet;
   }
 
   let sidebarWidth = $state(0);
-  const { data, channels, children }: Props = $props();
+  const { data, children }: Props = $props();
+  const channels = data.channels;
 </script>
 
 <div class="w-screen">
@@ -37,7 +36,8 @@
           </nav>
         </div>
         <div class="mt-auto p-4">
-          <ChannelDialog {data} />
+          <User {data} />
+          <ChannelDialog data={data.form} />
         </div>
       </div>
     </div>

src/lib/components/user.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { PageData } from '../../routes/$types';
+  const { data }: { data: PageData } = $props();
+
+  const imageSrc = data.session?.user.image ?? `https://api.dicebear.com/9.x/identicon/svg?seed=${data.session?.user.name}`;
+</script>
+
+{#if data.session}
+  <div class="mb-1 flex w-full p-2">
+    <div class="avatar mr-2 rounded-sm">
+      <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
+        <img src={imageSrc} alt="Profile image for {data.session?.user.name}" />
+      </div>
+    </div>
+    <div class="w-full">
+      <p class="font-bold">{data.session?.user.name}</p>
+      <p>{data.session?.user.email}</p>
+    </div>
+  </div>
+{/if}

src/routes/+layout.server.ts

@@ -1,9 +1,10 @@
 import { db } from '$lib/server/db';
+import { auth } from '$lib/server/db/auth';
 import { newChannelSchema } from '$lib/types/schema';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
-export async function load() {
+export async function load({ request }) {
   const form = await superValidate(zod(newChannelSchema));
   const rows = await db.getChannels();
   const channels: string[] = rows
@@ -12,7 +13,12 @@ export async function load() {
       })
     : [];
 
+  const session = await auth.api.getSession({
+    headers: request.headers,
+  });
+
   return {
+    session,
     channels,
     form,
   };

src/routes/+layout.svelte

@@ -7,6 +7,6 @@
 </script>
 
 <ModeWatcher />
-<MainLayout data={data.form} channels={data.channels}>
+<MainLayout {data}>
   {@render children()}
 </MainLayout>