Inital Commit

frontend/src/routes/+layout.svelte

@@ -0,0 +1,78 @@
+<script>
+	import { onMount } from "svelte";
+	import { isTauri } from "@tauri-apps/api/core";
+	import WebNavbar from "$lib/components/WebNavbar.svelte";
+	import WebFooter from "$lib/components/WebFooter.svelte";
+	import MobileTabBar from "$lib/components/MobileTabBar.svelte";
+
+	let { children } = $props();
+
+	// State to track if we are in the Tauri App
+	let isApp = $state(false);
+
+	onMount(() => {
+		// Strategy 2: Determine mode
+		isApp = isTauri();
+
+		// Strategy 1: Add platform class to body for global styling
+		if (isApp) {
+			document.body.classList.add("platform-native");
+		} else {
+			document.body.classList.add("platform-web");
+		}
+	});
+</script>
+
+<!-- Strategy 2: Layout Splitting -->
+{#if isApp}
+	<main class="app-container">
+		{@render children()}
+	</main>
+	<MobileTabBar />
+{:else}
+	<WebNavbar />
+	<main class="web-container">
+		{@render children()}
+	</main>
+	<WebFooter />
+{/if}
+
+<style>
+	/* Base styles */
+	:global(body) {
+		margin: 0;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+			Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	}
+
+	/* Web specific container */
+	.web-container {
+		min-height: 80vh; /* Ensure footer pushes down */
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 20px;
+	}
+
+	/* App specific container - Full height, no body scroll usually handled here or in global css */
+	.app-container {
+		height: 100vh;
+		overflow-y: auto;
+		padding: 10px;
+		padding-bottom: 70px; /* Space for TabBar */
+		box-sizing: border-box;
+	}
+
+	/* Strategy 1 Example: Global Style Overrides based on class */
+	/* Web Buttons: Boxy */
+	:global(.platform-web button) {
+		border-radius: 4px;
+		padding: 8px 16px;
+	}
+
+	/* Native Buttons: Rounder and larger touch targets */
+	:global(.platform-native button) {
+		border-radius: 20px;
+		padding: 12px 24px;
+		font-size: 1.1rem;
+	}
+</style>