From 312e524c54d2aa8fdd7c87fd7b931bf8f12e9984 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 8 Feb 2025 20:19:32 -0500
Subject: [PATCH] refactor app layout and add residents page

---
 .../Navigation/Navbar/Navbar.svelte           |  2 +-
 src/routes/+layout.svelte                     | 14 +++---
 src/routes/app/+layout.svelte                 | 48 +++++++++++--------
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/Navigation/Navbar/Navbar.svelte b/src/lib/components/Navigation/Navbar/Navbar.svelte
index ad57fe6..841f780 100644
--- a/src/lib/components/Navigation/Navbar/Navbar.svelte
+++ b/src/lib/components/Navigation/Navbar/Navbar.svelte
@@ -4,7 +4,7 @@
 	let { start, center, end }: { start?: Snippet; center?: Snippet; end?: Snippet } = $props();
 </script>
 
-<header class="navbar justify-between bg-base-200 px-4">
+<header class="navbar justify-between rounded-box bg-base-200 px-4">
 	<div class="navbar-start">{@render start?.()}</div>
 	<div class="navbar-center">{@render center?.()}</div>
 	<div class="navbar-end">{@render end?.()}</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d2e1c32..6173499 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,16 +8,16 @@
 	let { children } = $props();
 </script>
 
-<div class="layout">
-	<ParaglideJS {i18n}>
-		<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
+<ParaglideJS {i18n}>
+	<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
+		<div class="layout">
 			{@render children()}
-		</ClerkProvider>
-	</ParaglideJS>
-</div>
+		</div>
+	</ClerkProvider>
+</ParaglideJS>
 
 <style>
 	.layout {
-		@apply h-screen w-screen bg-base-100;
+		@apply h-screen w-screen p-8;
 	}
 </style>
diff --git a/src/routes/app/+layout.svelte b/src/routes/app/+layout.svelte
index a28013b..2bcbc78 100644
--- a/src/routes/app/+layout.svelte
+++ b/src/routes/app/+layout.svelte
@@ -5,7 +5,7 @@
 	import { messages } from '$lib/i18n';
 	import 'clerk-sveltekit/client';
 	import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte';
-	import { Cog, LogOut, MessageCircleMore } from 'lucide-svelte';
+	import { Cog, LogOut, MessageCircleMore, UsersRound } from 'lucide-svelte';
 	import type { Snippet } from 'svelte';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
@@ -65,7 +65,7 @@
 		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 		<ul
 			tabindex="0"
-			class="menu dropdown-content menu-lg z-[1] mt-4 w-52 rounded-box bg-base-200 p-2 text-right shadow"
+			class="menu dropdown-content menu-lg z-[1] mt-4 w-52 rounded-box border border-neutral bg-base-200 p-2 text-right shadow"
 		>
 			<li>
 				<button onclick={() => goto('/app/sms')}>
@@ -73,6 +73,12 @@
 					{messages.nav_menu_sms()}
 				</button>
 			</li>
+			<li>
+				<button onclick={() => goto('/app/residents')}>
+					<UsersRound />
+					{messages.nav_menu_residents()}
+				</button>
+			</li>
 			<li>
 				<button onclick={() => goto('/app/settings')}>
 					<Cog />
@@ -89,20 +95,24 @@
 	</div>
 {/snippet}
 
-<Navbar>
-	{#snippet start()}
-		<Button onclick={() => goto('/app')}>
-			<h2 class="prose prose-xl">Hestia</h2>
-		</Button>
-	{/snippet}
-	{#snippet center()}
-		<h1 class="prose prose-2xl">Svelte</h1>
-	{/snippet}
-	{#snippet end()}
-		<div class="flex items-center gap-3">
-			<p class="prose prose-lg">{message}</p>
-			{@render userMenu()}
-		</div>
-	{/snippet}
-</Navbar>
-{@render children()}
+<div class="flex h-full flex-col items-stretch gap-4">
+	<Navbar>
+		{#snippet start()}
+			<Button onclick={() => goto('/app')} class="rounded-box" color="ghost">
+				<h2 class="prose prose-xl">Hestia</h2>
+			</Button>
+		{/snippet}
+		{#snippet center()}
+			<h1 class="prose prose-2xl">Svelte</h1>
+		{/snippet}
+		{#snippet end()}
+			<div class="flex items-center gap-3">
+				<p class="prose prose-lg">{message}</p>
+				{@render userMenu()}
+			</div>
+		{/snippet}
+	</Navbar>
+	<div class="h-full rounded-box bg-base-200 p-8">
+		{@render children()}
+	</div>
+</div>