From 65dd30df46d4869fd6bf4c83e62132b999b1cdd0 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Wed, 8 Apr 2026 03:42:13 +0200
Subject: [PATCH] feat(app): add layout shell with bottom nav and Toaster

---
 app/app/components/bottom-nav.tsx | 27 +++++++++++++++++++++++++++
 app/app/routes.ts                 |  8 +++++---
 app/app/routes/layout.tsx         | 15 +++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 app/app/components/bottom-nav.tsx
 create mode 100644 app/app/routes/layout.tsx

diff --git a/app/app/components/bottom-nav.tsx b/app/app/components/bottom-nav.tsx
new file mode 100644
index 0000000..2fa868f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/app/routes.ts b/app/app/routes.ts
index bfb9c80..892c231 100644
--- a/app/app/routes.ts
+++ b/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"),
-  route("songs/:id", "routes/songs.$id.tsx"),
+  layout("routes/layout.tsx", [
+    index("routes/home.tsx"),
+    route("songs/:id", "routes/songs.$id.tsx"),
+  ]),
 ] satisfies RouteConfig;
diff --git a/app/app/routes/layout.tsx b/app/app/routes/layout.tsx
new file mode 100644
index 0000000..2cce906
--- /dev/null
+++ b/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>
+  );
+}