From 9d10e48da6d9d095df0bf6342a2e44afc3d63a8a Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Wed, 22 Oct 2025 22:16:29 +0200
Subject: [PATCH] style: logo header

---
 apps/client/app/components/app-breadcrumb.tsx |  8 +-------
 apps/client/app/components/app-sidebar.tsx    | 19 ++++++++++++++++---
 apps/client/app/components/layout.tsx         |  2 +-
 apps/client/app/routes.ts                     |  1 +
 apps/client/app/routes/root.tsx               |  5 +++++
 5 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 apps/client/app/routes/root.tsx

diff --git a/apps/client/app/components/app-breadcrumb.tsx b/apps/client/app/components/app-breadcrumb.tsx
index 63b03c4..ca215dc 100644
--- a/apps/client/app/components/app-breadcrumb.tsx
+++ b/apps/client/app/components/app-breadcrumb.tsx
@@ -8,7 +8,6 @@ import {
 	BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
 import { useBreadcrumbs } from "~/lib/breadcrumbs";
-import { cn } from "../lib/utils";
 
 export function AppBreadcrumb() {
 	const breadcrumbs = useBreadcrumbs();
@@ -17,17 +16,12 @@ export function AppBreadcrumb() {
 		<Breadcrumb>
 			<BreadcrumbLink asChild></BreadcrumbLink>
 			<BreadcrumbList>
-				{breadcrumbs.length === 1 && (
-					<BreadcrumbItem>
-						<Link to="/volumes">Ironmount</Link>
-					</BreadcrumbItem>
-				)}
 				{breadcrumbs.map((breadcrumb, index) => {
 					const isLast = index === breadcrumbs.length - 1;
 
 					return (
 						<div key={`${breadcrumb.label}-${index}`} className="contents">
-							<BreadcrumbItem className={cn({ invisible: breadcrumbs.length <= 1 })}>
+							<BreadcrumbItem>
 								{isLast || breadcrumb.isCurrentPage ? (
 									<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
 								) : breadcrumb.href ? (
diff --git a/apps/client/app/components/app-sidebar.tsx b/apps/client/app/components/app-sidebar.tsx
index dae9feb..989a72f 100644
--- a/apps/client/app/components/app-sidebar.tsx
+++ b/apps/client/app/components/app-sidebar.tsx
@@ -1,10 +1,11 @@
-import { Database, HardDrive } from "lucide-react";
-import { NavLink } from "react-router";
+import { Database, HardDrive, Mountain } from "lucide-react";
+import { Link, NavLink } from "react-router";
 import {
 	Sidebar,
 	SidebarContent,
 	SidebarGroup,
 	SidebarGroupContent,
+	SidebarHeader,
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
@@ -31,7 +32,19 @@ export function AppSidebar() {
 
 	return (
 		<Sidebar variant="inset" collapsible="icon" className="p-0">
-			<div className="bg-card-header border-b border-border/50 hidden md:inline-block" style={{ height: 65 }}></div>
+			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] flex-row items-center p-4">
+				<Link to="/volumes" className="flex items-center gap-3 font-semibold">
+					<Mountain className="size-5 text-strong-accent ml-[6px]" />
+					<span
+						className={cn(
+							"text-base transition-opacity duration-200",
+							state === "collapsed" && "opacity-0 w-0 overflow-hidden",
+						)}
+					>
+						Ironmount
+					</span>
+				</Link>
+			</SidebarHeader>
 			<SidebarContent className="p-2 border-r">
 				<SidebarGroup>
 					<SidebarGroupContent>
diff --git a/apps/client/app/components/layout.tsx b/apps/client/app/components/layout.tsx
index d757d0a..a1bd202 100644
--- a/apps/client/app/components/layout.tsx
+++ b/apps/client/app/components/layout.tsx
@@ -71,7 +71,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 						)}
 					</div>
 				</header>
-				<main className="flex flex-col p-2 pt-4 sm:p-8 sm:pt-4 mx-auto">
+				<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
 					<Outlet />
 				</main>
 			</GridBackground>
diff --git a/apps/client/app/routes.ts b/apps/client/app/routes.ts
index e7e0458..fb586e3 100644
--- a/apps/client/app/routes.ts
+++ b/apps/client/app/routes.ts
@@ -4,6 +4,7 @@ export default [
 	route("onboarding", "./routes/onboarding.tsx"),
 	route("login", "./routes/login.tsx"),
 	layout("./components/layout.tsx", [
+		route("/", "./routes/root.tsx"),
 		route("volumes", "./routes/home.tsx"),
 		route("volumes/:name", "./routes/details.tsx"),
 	]),
diff --git a/apps/client/app/routes/root.tsx b/apps/client/app/routes/root.tsx
new file mode 100644
index 0000000..31cf3bd
--- /dev/null
+++ b/apps/client/app/routes/root.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "react-router";
+
+export const clientLoader = async () => {
+	return redirect("/volumes");
+};