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,22 +30,29 @@ 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">
-      <Sidebar />
+      {/* Custom title bar — sits at the very top */}
-      <main className="flex-1 flex flex-col min-w-0">
+      <TitleBar />
-        {activeView === "explore" ? (
+
-          <>
+      {/* Main app content below the title bar */}
-            <BackgroundTasks />
+      <div className="flex flex-1 min-h-0">
-            <TagCloud />
+        <Sidebar />
-          </>
+        <main className="flex-1 flex flex-col min-w-0">
-        ) : (
+          {activeView === "explore" ? (
-          <>
+            <>
-            <Toolbar />
+              <BackgroundTasks />
-            <BackgroundTasks />
+              <TagCloud />
-            <Gallery />
+            </>
-          </>
+          ) : (
-        )}
+            <>
-      </main>
+              <Toolbar />
+              <BackgroundTasks />
+              <Gallery />
+            </>
+          )}
+        </main>
+      </div>
+
       <Lightbox />
     </div>
   );