src/App.tsx

@@ -6,6 +6,7 @@ import { Toolbar } from "./components/Toolbar";
 import { Gallery } from "./components/Gallery";
 import { Lightbox } from "./components/Lightbox";
 import { TagCloud } from "./components/TagCloud";
+import { TitleBar } from "./components/TitleBar";
 
 export default function App() {
   const loadFolders = useGalleryStore((state) => state.loadFolders);
@@ -29,7 +30,12 @@ export default function App() {
   }, []);
 
   return (
-    <div className="flex h-screen bg-gray-950 text-white overflow-hidden select-none">
+    <div className="flex h-screen flex-col bg-gray-950 text-white overflow-hidden select-none">
+      {/* Custom title bar — sits at the very top */}
+      <TitleBar />
+
+      {/* Main app content below the title bar */}
+      <div className="flex flex-1 min-h-0">
         <Sidebar />
         <main className="flex-1 flex flex-col min-w-0">
           {activeView === "explore" ? (
@@ -45,6 +51,8 @@ export default function App() {
             </>
           )}
         </main>
+      </div>
+
       <Lightbox />
     </div>
   );