60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useGalleryStore } from "./store";
|
|
import { Sidebar } from "./components/Sidebar";
|
|
import { BackgroundTasks } from "./components/BackgroundTasks";
|
|
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);
|
|
const loadBackgroundJobProgress = useGalleryStore((state) => state.loadBackgroundJobProgress);
|
|
const loadImages = useGalleryStore((state) => state.loadImages);
|
|
const subscribeToProgress = useGalleryStore((state) => state.subscribeToProgress);
|
|
const activeView = useGalleryStore((state) => state.activeView);
|
|
|
|
useEffect(() => {
|
|
loadFolders().then(() => {
|
|
void loadBackgroundJobProgress();
|
|
return loadImages(true);
|
|
});
|
|
let unlisten: (() => void) | undefined;
|
|
subscribeToProgress().then((fn) => {
|
|
unlisten = fn;
|
|
});
|
|
return () => {
|
|
unlisten?.();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<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" ? (
|
|
<>
|
|
<BackgroundTasks />
|
|
<TagCloud />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Toolbar />
|
|
<BackgroundTasks />
|
|
<Gallery />
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
|
|
<Lightbox />
|
|
</div>
|
|
);
|
|
}
|