From 2fa3d4ec67d8e7e8cec73c04d48ade3c13a0147f Mon Sep 17 00:00:00 2001
From: Justin Reiners <justin@reiners.io>
Date: Thu, 26 Mar 2026 12:03:31 -0500
Subject: [PATCH] feat: add root and public layouts with config-driven theming

---
 src/routes/(public)/+layout.server.ts | 16 +++++++++++++++
 src/routes/(public)/+layout.svelte    | 29 +++++++++++++++++++++++++++
 src/routes/+layout.server.ts          |  8 ++++++++
 src/routes/+layout.svelte             |  8 +++-----
 4 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/(public)/+layout.server.ts
 create mode 100644 src/routes/(public)/+layout.svelte
 create mode 100644 src/routes/+layout.server.ts

diff --git a/src/routes/(public)/+layout.server.ts b/src/routes/(public)/+layout.server.ts
new file mode 100644
index 0000000..3babdc5
--- /dev/null
+++ b/src/routes/(public)/+layout.server.ts
@@ -0,0 +1,16 @@
+import { db } from '$lib/server/db';
+import { sponsors } from '$lib/server/schema';
+import { eq, asc } from 'drizzle-orm';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ parent }) => {
+	const parentData = await parent();
+
+	const allSponsors = await db
+		.select()
+		.from(sponsors)
+		.where(eq(sponsors.active, true))
+		.orderBy(asc(sponsors.sortOrder));
+
+	return { ...parentData, sponsors: allSponsors };
+};
diff --git a/src/routes/(public)/+layout.svelte b/src/routes/(public)/+layout.svelte
new file mode 100644
index 0000000..b49d936
--- /dev/null
+++ b/src/routes/(public)/+layout.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Header from '$lib/components/public/Header.svelte';
+	import Footer from '$lib/components/public/Footer.svelte';
+
+	let { data, children } = $props();
+</script>
+
+<svelte:head>
+	<meta name="description" content="{data.orgConfig.orgInfo.name} — {data.orgConfig.orgInfo.tagline || 'A foster-based animal rescue'}" />
+	<meta property="og:site_name" content={data.orgConfig.orgInfo.name} />
+	<meta property="og:type" content="website" />
+	{@html `<style>:root{--color-primary:${data.orgConfig.branding.primaryColor};--color-primary-light:${data.orgConfig.branding.primaryColorLight};--color-primary-dark:${data.orgConfig.branding.primaryColorDark};--color-accent:${data.orgConfig.branding.accentColor};--color-accent-light:${data.orgConfig.branding.accentColorLight};--color-accent-dark:${data.orgConfig.branding.accentColorDark}}</style>`}
+</svelte:head>
+
+<div class="min-h-screen flex flex-col bg-warm-bg">
+	<Header
+		orgName={data.orgConfig.orgInfo.name}
+		logoUrl={data.orgConfig.branding.logoUrl}
+	/>
+	<main class="flex-1">
+		{@render children()}
+	</main>
+	<Footer
+		orgName={data.orgConfig.orgInfo.name}
+		sponsors={data.sponsors}
+		facebookUrl={data.orgConfig.orgInfo.facebookUrl}
+		instagramUrl={data.orgConfig.orgInfo.instagramUrl}
+	/>
+</div>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..21de368
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,8 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user,
+		orgConfig: locals.orgConfig
+	};
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9cebde5..aa71a3c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg';
+	import '../app.css';
+	import Toast from '$lib/components/ui/Toast.svelte';
 
 	let { children } = $props();
 </script>
 
-<svelte:head>
-	<link rel="icon" href={favicon} />
-</svelte:head>
-
 {@render children()}
+<Toast />