refactor(header): extract nav link component, add search widget stub, recolor header

src/components/nav-link.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	let props = $props()
 </script>
 

src/lib/components/Nav.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import NavLink from "./NavLink.svelte";
-	import Search from "./Search.svelte";
-</script>
-
-<div
-	class="max-md:hidden flex gap-x-4 h-full items-center grow"
->
-	<Search />
-	<NavLink href="/docs/intro">Docs</NavLink>
-	<NavLink href="https://fleurixos.org" class="text-coral-600">Try {DISTRO}</NavLink>
-</div>

src/routes/+layout.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 	import "../main.css";
-	import Footer from "./Footer.svelte";
-	import Nav from "$lib/components/Nav.svelte";
+	import Footer from "./footer.svelte";
+	import NavLink from "../components/nav-link.svelte";
+	import Search from "../components/search.svelte";
 
 	let { children } = $props();
 	globalThis.PKGS = "petalpkgs";
@@ -28,7 +29,13 @@
 			</a>
 			<span></span>
 
-			<Nav />
+			<div
+				class="max-md:hidden flex gap-x-4 h-full items-center grow"
+			>
+				<Search />
+				<NavLink href="/docs/intro">Docs</NavLink>
+				<NavLink href="https://fleurixos.org" class="text-coral-600">Try {DISTRO}</NavLink>
+			</div>
 		</div>
 	</nav>