feat(app): add layout shell with bottom nav and Toaster

app/app/components/bottom-nav.tsx

@@ -0,0 +1,27 @@
+import { NavLink } from "react-router";
+import { Music } from "lucide-react";
+import { cn } from "~/lib/utils";
+
+export function BottomNav() {
+  return (
+    <nav className="border-t bg-background shrink-0">
+      <div className="max-w-lg mx-auto flex">
+        <NavLink
+          to="/"
+          end
+          className={({ isActive }) =>
+            cn(
+              "flex flex-col items-center gap-0.5 flex-1 py-2 text-xs transition-colors",
+              isActive
+                ? "text-primary"
+                : "text-muted-foreground hover:text-foreground"
+            )
+          }
+        >
+          <Music className="w-5 h-5" />
+          <span>Library</span>
+        </NavLink>
+      </div>
+    </nav>
+  );
+}

app/app/routes.ts

@@ -1,6 +1,8 @@
-import { type RouteConfig, index, route } from "@react-router/dev/routes";
+import { type RouteConfig, index, layout, route } from "@react-router/dev/routes";
 
 export default [
-  index("routes/home.tsx"),
+  layout("routes/layout.tsx", [
-  route("songs/:id", "routes/songs.$id.tsx"),
+    index("routes/home.tsx"),
+    route("songs/:id", "routes/songs.$id.tsx"),
+  ]),
 ] satisfies RouteConfig;

app/app/routes/layout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router";
+import { Toaster } from "sonner";
+import { BottomNav } from "~/components/bottom-nav";
+
+export default function Layout() {
+  return (
+    <div className="flex flex-col h-dvh">
+      <div className="flex-1 overflow-hidden">
+        <Outlet />
+      </div>
+      <BottomNav />
+      <Toaster position="top-center" richColors />
+    </div>
+  );
+}