fix: Move main layout config into +layout.svelte

Author: arithefirst

src/lib/components/mainLayout.svelte

@@ -1,9 +1,50 @@
 <script lang="ts">
-  import MainLayout from '$lib/components/mainLayout.svelte';
-  import type { LayoutProps } from './$types';
-  let { data, children }: LayoutProps = $props();
+  import { Toaster } from '$lib/components/ui/sonner/index';
+  import { MessagesSquare } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+  import type { PageData } from '../../routes/(main)/$types';
+  import Channel from '$lib/components/channel.svelte';
+  import ChannelDialog from '$lib/components/forms/channelDialog.svelte';
+  import ModeSwitcher from '$lib/components/modeSwitcher.svelte';
+  import User from '$lib/components/user.svelte';
+
+  interface Props {
+    data: PageData;
+    children: Snippet;
+  }
+
+  let sidebarWidth = $state(0);
+  const { data, children }: Props = $props();
+  const channels = data.channels;
 </script>
 
-<MainLayout {data}>
-  {@render children()}
-</MainLayout>
+<div class="w-screen">
+  <Toaster />
+  <div class="grid h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+    <div class="hidden border-r bg-muted/40 md:block" bind:clientWidth={sidebarWidth}>
+      <div class="flex h-full max-h-screen flex-col gap-2">
+        <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+          <a href="/" class="flex items-center gap-2 font-semibold">
+            <MessagesSquare class="h-6 w-6" />
+            <span class="">SVChat</span>
+          </a>
+          <ModeSwitcher />
+        </div>
+        <div class="h-full flex-1 overflow-scroll">
+          <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
+            {#each channels as channelName}
+              <Channel {channelName} />
+            {/each}
+          </nav>
+        </div>
+        <div class="mt-auto border-t p-4">
+          <User {data} />
+          <ChannelDialog data={data.form} />
+        </div>
+      </div>
+    </div>
+    <div class="relative max-h-screen p-2" style={`max-width: calc(100vw - 1px - ${sidebarWidth}px)`}>
+      {@render children()}
+    </div>
+  </div>
+</div>