problem: layout and colours suck

src/lib/components/ChatLayout.svelte

@@ -14,58 +14,68 @@
 		ToolboxSolid
 	} from 'svelte-awesome-icons';
 	import Button from './Button.svelte';
+	import MessageInput from './MessageInput.svelte';
 
 	export let hideFaucet = false;
 </script>
 
-<div class="grid grid-cols-12 grid-rows-12 w-full h-full">
-	<div class="grid grid-cols-12 grid-rows-12 col-span-12 row-span-10">
-		<div
-			class="flex flex-col gap-y-2 py-2 bg-cyan-500 dark:bg-cyan-950 row-span-12 col-span-1 place-items-center"
-		>
-			<slot name="buttons" />
-			{#if !hideFaucet}
-				<Button
-					onClick={() => {
-						goto(`${base}/`);
-					}}
-				>
-					<FaucetSolid />
-				</Button>
-			{/if}
+<div class="flex h-screen w-screen flex-row">
+	<!-- Icon Sidebar -->
+	<div class="w-12 flex-shrink-0 block bg-orange-500 dark:bg-cyan-950">
+		<div class="flex h-full flex-col bg-layer-2">
+			<div class="flex flex-1 flex-col overflow-hidden place-items-center">
+				<slot name="buttons" />
+				{#if !hideFaucet}
+					<Button
+						onClick={() => {
+							goto(`${base}/`);
+						}}
+					>
+						<FaucetSolid />
+					</Button>
+				{/if}
 
-			<Button><ListCheckSolid /></Button>
-			<Button><CircleQuestionSolid /></Button>
-			<Button><GearSolid /></Button>
+				<Button><ListCheckSolid /></Button>
+				<Button><CircleQuestionSolid /></Button>
+				<Button><GearSolid /></Button>
 
-			<Button onClick={toggleMode}>
-				<Moon
-					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-				/>
-				<Sun
-					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-				/>
-				<span class="sr-only">Toggle theme</span>
-			</Button>
+				<Button onClick={toggleMode}>
+					<Moon
+						class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+					/>
+					<Sun
+						class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+					/>
+					<span class="sr-only">Toggle theme</span>
+				</Button>
 
-			<LoginButton />
+				<LoginButton />
 
-			<!-- <Button onClick={()=>{goto(`${base}/debug`)}}><ToolboxSolid /></Button
-			> -->
-			<Button><PodcastSolid /></Button>
-			<Button notifs={0}
-				onClick={() => {
-					goto(`${base}/marcus`);
-				}}><img class="w-9 min-w-9" src={`${base}/marcus.png`} /></Button
-			>
+				<!-- <Button onClick={()=>{goto(`${base}/debug`)}}><ToolboxSolid /></Button
+					> -->
+				<Button><PodcastSolid /></Button>
+				<Button
+					notifs={0}
+					onClick={() => {
+						goto(`${base}/marcus`);
+					}}><img class="w-9 min-w-9" src={`${base}/marcus.png`} /></Button
+				>
+			</div>
+			<div class="mb-2 overflow-hidden place-items-center">
+				<Button><Home size={24} /></Button>
+			</div>
 		</div>
-		<div
-			class="bg-white dark:bg-zinc-900 row-span-12 col-span-11 overflow-x-hidden overflow-y-scroll no-scrollbar ml-1"
-		>
-			<slot />
+	</div>
+
+	<div class="flex-1">
+		<div class="h-screen flex-col">
+			<div class="h-5/6 flex-1 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"><slot /></div>
+			<div class="h-1/6"><MessageInput /></div>
 		</div>
 	</div>
-	<div class="col-span-12 row-span-10 bg-sky-100 dark:bg-sky-950">
-		<Input placeholder="Start typing..." type="text" class=" bg-sky-100 dark:bg-sky-950" />
+	<div class="hidden flex-1 lg:block">
+		<div class="h-screen flex-col">
+			<div class="h-full flex-1 bg-zinc-400 dark:bg-cyan-800"><slot name="right" /></div>
+		</div>
 	</div>
 </div>

src/lib/components/MessageInput.svelte

@@ -0,0 +1,80 @@
+<div class="flex items-center px-3 py-2 bg-zinc-300 dark:bg-cyan-900 h-full">
+	<div>
+		<button
+			type="button"
+			class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+		>
+			<svg
+				class="w-5 h-5"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 20 18"
+			>
+				<path
+					fill="currentColor"
+					d="M13 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM7.565 7.423 4.5 14h11.518l-2.516-3.71L11 13 7.565 7.423Z"
+				/>
+				<path
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M18 1H2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z"
+				/>
+				<path
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M13 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM7.565 7.423 4.5 14h11.518l-2.516-3.71L11 13 7.565 7.423Z"
+				/>
+			</svg>
+			<span class="sr-only">Upload image</span>
+		</button>
+		<button
+			type="button"
+			class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+		>
+			<svg
+				class="w-5 h-5"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 20 20"
+			>
+				<path
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M13.408 7.5h.01m-6.876 0h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM4.6 11a5.5 5.5 0 0 0 10.81 0H4.6Z"
+				/>
+			</svg>
+			<span class="sr-only">Add emoji</span>
+		</button>
+	</div>
+	<textarea
+		id="chat"
+		rows="1"
+		class="resize-none block mx-4 p-2.5 w-full h-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+		placeholder="Your message..."
+	></textarea>
+	<button
+		type="submit"
+		class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
+	>
+		<svg
+			class="w-5 h-5 rotate-90 rtl:-rotate-90"
+			aria-hidden="true"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="currentColor"
+			viewBox="0 0 18 20"
+		>
+			<path
+				d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z"
+			/>
+		</svg>
+		<span class="sr-only">Send message</span>
+	</button>
+</div>

src/lib/views/messages/Messages.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+	import Button from '@/components/Button.svelte';
 	import ChatLayout from '@/components/ChatLayout.svelte';
 	import Coracle from '@/components/Coracle.svelte';
 	import { FrontendDataStore } from '@/snort_workers/main';
 	import { viewed } from '@/workers_snort/firehose_master';
 	import type { NostrEvent } from 'nostr-tools';
-	import { ArrowTurnUpSolid, FaucetSolid } from 'svelte-awesome-icons';
+	import { ArrowTurnUpSolid } from 'svelte-awesome-icons';
 	import { derived, writable, type Writable } from 'svelte/store';
 	import RenderKind1 from './RenderKind1.svelte';
 	import RenderKind1AsThreadHead from './RenderKind1AsThreadHead.svelte';
-	import Button from '@/components/Button.svelte';
 
 	//take current threadparentID (or root) and create a derived store of all events. derive antoher one to pipe it through sorting/filtering store.
 	//

src/lib/views/messages/RenderKind1.svelte

@@ -30,7 +30,7 @@ onMount(() => {
 	$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
 </script>
 
-<div bind:this={top} class="w-full pt-2">
+<div bind:this={top} class="w-full pt-2 pl-2 pr-2">
 	<div class="grid">
 		<div class="flex gap-2">
 			<img