From 15e3a12bd3ebf6e055c22b57362d8815bf1e6fc2 Mon Sep 17 00:00:00 2001
From: Christian Bromann <git@bromann.dev>
Date: Mon, 2 Jun 2025 23:11:44 -0700
Subject: [PATCH] fix: Fix demo banner layout conflict with sidebar

- Extract demo banner from global fixed positioning to prevent sidebar overlap
- Create reusable DemoBanner component with proper positioning logic
- Consolidate header structure across all app pages using new Header component
- Remove duplicate header code from agents, inbox, chat, rag, tools, and playground pages
- Fix visual bug where demo banner was being cut off by the sidebar layout

Resolves layout conflict where the fixed-positioned demo banner would overlap
or be clipped by the sidebar navigation structure.
---
 apps/web/src/app/(app)/agents/page.tsx        | 23 ++++++-------
 apps/web/src/app/(app)/inbox/page.tsx         | 24 ++++++-------
 apps/web/src/app/(app)/layout.tsx             | 16 ---------
 apps/web/src/app/(app)/page.tsx               | 11 +++---
 apps/web/src/app/(app)/rag/page.tsx           | 23 ++++++-------
 apps/web/src/app/(app)/tools/page.tsx         | 26 +++++++-------
 .../src/app/(app)/tools/playground/page.tsx   | 34 +++++++++----------
 apps/web/src/components/ui/demo.tsx           | 29 ++++++++++++++++
 apps/web/src/components/ui/header.tsx         | 17 ++++++++++
 9 files changed, 114 insertions(+), 89 deletions(-)
 create mode 100644 apps/web/src/components/ui/demo.tsx
 create mode 100644 apps/web/src/components/ui/header.tsx

diff --git a/apps/web/src/app/(app)/agents/page.tsx b/apps/web/src/app/(app)/agents/page.tsx
index f7538363..d9a67ed1 100644
--- a/apps/web/src/app/(app)/agents/page.tsx
+++ b/apps/web/src/app/(app)/agents/page.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
+import { Header } from "@/components/ui/header";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
 import React from "react";
@@ -19,18 +20,16 @@ export default function AgentsPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Agents</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Agents</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <AgentsInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/inbox/page.tsx b/apps/web/src/app/(app)/inbox/page.tsx
index e85a97c4..6b39200f 100644
--- a/apps/web/src/app/(app)/inbox/page.tsx
+++ b/apps/web/src/app/(app)/inbox/page.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import { ThreadsProvider } from "@/components/agent-inbox/contexts/ThreadContext";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
+import { Header } from "@/components/ui/header";
 import { InboxSidebar, InboxSidebarTrigger } from "@/components/inbox-sidebar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import {
@@ -22,19 +23,16 @@ export default function InboxPage(): React.ReactNode {
         <div className="flex min-h-full w-full flex-row">
           {/* Header */}
           <div className="w-full">
-            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-              <div className="flex items-center gap-2 px-4">
-                <SidebarTrigger className="-ml-1" />
-
-                <Breadcrumb>
-                  <BreadcrumbList>
-                    <BreadcrumbItem>
-                      <BreadcrumbPage>Inbox</BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </BreadcrumbList>
-                </Breadcrumb>
-              </div>
-            </header>
+            <Header>
+              <SidebarTrigger className="-ml-1" />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Inbox</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </Header>
 
             {/* Main content */}
             <div className="flex h-full w-full flex-col">
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index d7d1bb30..58c4908b 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -5,7 +5,6 @@ import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { SidebarLayout } from "@/components/sidebar";
 import { AuthProvider } from "@/providers/Auth";
-import { DOCS_LINK } from "@/constants";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -23,7 +22,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const isDemoApp = process.env.NEXT_PUBLIC_DEMO_APP === "true";
   return (
     <html lang="en">
       <head>
@@ -35,20 +33,6 @@ export default function RootLayout({
         )}
       </head>
       <body className={inter.className}>
-        {isDemoApp && (
-          <div className="fixed top-0 right-0 left-0 z-10 bg-[#CFC8FE] py-2 text-center text-black shadow-md">
-            You're currently using the demo application. To use your own agents,
-            and run in production, check out the{" "}
-            <a
-              className="underline underline-offset-2"
-              href={DOCS_LINK}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              documentation
-            </a>
-          </div>
-        )}
         <NuqsAdapter>
           <AuthProvider>
             <SidebarLayout>{children}</SidebarLayout>
diff --git a/apps/web/src/app/(app)/page.tsx b/apps/web/src/app/(app)/page.tsx
index 2f87a452..2089e034 100644
--- a/apps/web/src/app/(app)/page.tsx
+++ b/apps/web/src/app/(app)/page.tsx
@@ -2,6 +2,7 @@
 
 import ChatInterface from "@/features/chat";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Header } from "@/components/ui/header";
 import { Toaster } from "@/components/ui/sonner";
 import React from "react";
 import { ChatBreadcrumb } from "@/features/chat/components/chat-breadcrumb";
@@ -14,12 +15,10 @@ export default function ChatPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <ChatBreadcrumb />
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <ChatBreadcrumb />
+      </Header>
       <ChatInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/rag/page.tsx b/apps/web/src/app/(app)/rag/page.tsx
index 4c05538b..bfea0faa 100644
--- a/apps/web/src/app/(app)/rag/page.tsx
+++ b/apps/web/src/app/(app)/rag/page.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
+import { Header } from "@/components/ui/header";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
 import React from "react";
@@ -19,18 +20,16 @@ export default function RAGPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>RAG</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>RAG</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <RAGInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/tools/page.tsx b/apps/web/src/app/(app)/tools/page.tsx
index b67f0cfc..6d46bf01 100644
--- a/apps/web/src/app/(app)/tools/page.tsx
+++ b/apps/web/src/app/(app)/tools/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import ToolsInterface from "@/features/tools";
 import {
   Breadcrumb,
@@ -9,7 +11,7 @@ import {
 } from "@/components/ui/breadcrumb";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import React from "react";
+import { Header } from "@/components/ui/header";
 
 /**
  * The /tools page.
@@ -19,18 +21,16 @@ export default function ToolsPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Tools</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Tools</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <ToolsInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/tools/playground/page.tsx b/apps/web/src/app/(app)/tools/playground/page.tsx
index 3607fd51..fdf49529 100644
--- a/apps/web/src/app/(app)/tools/playground/page.tsx
+++ b/apps/web/src/app/(app)/tools/playground/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import ToolsPlaygroundInterface from "@/features/tools/playground";
 import {
   Breadcrumb,
@@ -11,7 +13,7 @@ import {
 } from "@/components/ui/breadcrumb";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import React from "react";
+import { Header } from "@/components/ui/header";
 
 /**
  * The /tools page.
@@ -21,22 +23,20 @@ export default function ToolsPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="/tools">Tools</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Playground</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/tools">Tools</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Playground</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <ToolsPlaygroundInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/components/ui/demo.tsx b/apps/web/src/components/ui/demo.tsx
new file mode 100644
index 00000000..991ffd3b
--- /dev/null
+++ b/apps/web/src/components/ui/demo.tsx
@@ -0,0 +1,29 @@
+import { DOCS_LINK } from "@/constants";
+
+const isDemoApp = process.env.NEXT_PUBLIC_DEMO_APP === "true";
+
+/**
+ * A banner that appears at the top of the page if the app is a demo app.
+ */
+function DemoBanner() {
+    if (!isDemoApp) {
+        return
+    }
+
+    return (
+        <div className="fixed top-0 right-0 left-0 z-10 bg-[#CFC8FE] py-2 text-center text-black shadow-md">
+            You're currently using the demo application. To use your own agents,
+            and run in production, check out the{" "}
+            <a
+                className="underline underline-offset-2"
+                href={DOCS_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                documentation
+            </a>
+        </div>
+    )
+}
+
+export { DemoBanner };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/header.tsx b/apps/web/src/components/ui/header.tsx
new file mode 100644
index 00000000..11101179
--- /dev/null
+++ b/apps/web/src/components/ui/header.tsx
@@ -0,0 +1,17 @@
+import { DemoBanner } from "./demo";
+
+/**
+ * A header component that can be used to display a header with a sidebar trigger and a breadcrumb.
+ */
+function Header({ children }: React.PropsWithChildren) {
+    return (
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+            <DemoBanner />
+            <div className="flex items-center gap-2 px-4">
+                {children}
+            </div>
+        </header>
+    )
+}
+
+export { Header };
\ No newline at end of file