feat: add logo to header (#70)

kantord · web-flow · commit a7d3e7f6c5bb · 2025-11-21T11:34:06.000+01:00
* feat: add logo to header

* .

* leverage route groups to group logged-in pages together

* fix
diff --git a/src/app/(authed)/catalog/page.tsx b/src/app/(authed)/catalog/page.tsx
@@ -2,7 +2,7 @@ import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 import { SignOut } from "@/components/sign-out-button";
 import { auth } from "@/lib/auth/auth";
-import { getServersSummary } from "./actions";
+import { getServersSummary } from "../../catalog/actions";
 
 export default async function CatalogPage() {
   const session = await auth.api.getSession({
diff --git a/src/app/(authed)/layout.tsx b/src/app/(authed)/layout.tsx
@@ -0,0 +1,14 @@
+import { Navbar } from "@/components/navbar";
+
+export default async function AuthedLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}
diff --git a/src/app/(authed)/page.tsx b/src/app/(authed)/page.tsx
diff --git a/src/app/__tests__/page.test.tsx b/src/app/__tests__/page.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
-import Home from "../page";
+import Home from "@/app/(authed)/page";
 
 test("Home page renders welcome heading and link to catalog when user is logged in", async () => {
   render(await Home());
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { Toaster } from "sonner";
-import { Navbar } from "@/components/navbar";
 import "./globals.css";
 
 const inter = Inter({
@@ -14,15 +13,14 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
       <body className={`${inter.variable} antialiased`}>
-        <Navbar />
         {children}
         <Toaster
           richColors
diff --git a/src/components/navbar-logo.tsx b/src/components/navbar-logo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+export function NavbarLogo() {
+  return (
+    <div className="flex items-center gap-2">
+      <Image
+        src="/toolhive-icon.svg"
+        alt="Toolhive"
+        width={17}
+        height={19}
+        className="shrink-0"
+      />
+      <span className="text-2xl font-bold tracking-tight">Toolhive</span>
+    </div>
+  );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -1,4 +1,5 @@
 import { headers } from "next/headers";
+import { NavbarLogo } from "@/components/navbar-logo";
 import { UserMenu } from "@/components/user-menu";
 import { auth } from "@/lib/auth/auth";
 
@@ -10,7 +11,7 @@ export async function Navbar() {
   return (
     <header className="w-full border-b bg-muted/50">
       <div className="container mx-auto flex items-center justify-between px-4 py-4">
-        <div />
+        <NavbarLogo />
         {session?.user?.name && <UserMenu userName={session.user.name} />}
       </div>
     </header>
