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

src/lib/components/Nav.svelte

@@ -0,0 +1,12 @@
+<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/lib/components/NavLink.svelte

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

src/routes/+layout.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 	import "../main.css";
-	import Footer from "./footer.svelte";
+	import Footer from "./Footer.svelte";
-	import NavLink from "../components/nav-link.svelte";
+	import Nav from "$lib/components/Nav.svelte";
-	import Search from "../components/search.svelte";
 
 	let { children } = $props();
 	globalThis.PKGS = "petalpkgs";
@@ -29,13 +28,7 @@
 			</a>
 			<span></span>
 
-			<div
+			<Nav />
-				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>