refactor: migrate breadcrumb management to Zustand store

- Replace route-based breadcrumb logic in layout with centralized Zustand store
- Each page now sets its own breadcrumb content via useBreadcrumbStore

Author: itstauq

src-frontend/app/apps/page.tsx

@@ -6,11 +6,19 @@ import { AppList } from "@/components/apps/app-list";
 import { AppDetail } from "@/components/apps/app-detail";
 import { toast } from "@/hooks/use-toast";
 import { uninstallApp } from "@/lib/api/apps";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
+import { useBreadcrumbStore } from "@/stores";
+import { AppBreadcrumb } from "@/components/apps/breadcrumb";
 
 function AppsPageContent() {
   const router = useRouter();
   const [selectedApp] = useQueryState("id");
+  const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
+
+  useEffect(() => {
+    setBreadcrumb(<AppBreadcrumb />);
+    return () => clearBreadcrumb();
+  }, [setBreadcrumb, clearBreadcrumb]);
 
   const handleUninstallApp = async (appId: string): Promise<boolean> => {
     const appName = appId.split(".").pop();

src-frontend/app/layout.tsx

@@ -16,10 +16,7 @@ import {
 import { AnalyticsProvider, PageViewTracker } from "@/lib/analytics";
 import { useEffect } from "react";
 import { useTheme } from "next-themes";
-import { AppBreadcrumb } from "@/components/apps/breadcrumb";
-import { WorkspaceBreadcrumb } from "@/components/workspace/breadcrumb";
-import { MarketplaceBreadcrumb } from "@/components/marketplace/marketplace-breadcrumb";
-import { ScrollText } from "lucide-react";
+import { useBreadcrumbStore } from "@/stores";
 
 const title = "SyftBox";
 const description = "The internet of private data!";
@@ -29,6 +26,7 @@ function MainLayout({ children }: { children: React.ReactNode }) {
   const sidebarExcludedPaths = ["/", "/about/", "/updates/"];
   const shouldShowSidebar = !sidebarExcludedPaths.includes(pathname);
   const { theme } = useTheme();
+  const { breadcrumbContent } = useBreadcrumbStore();
 
   useEffect(() => {
     if (typeof window !== "undefined" && window.__TAURI__) {
@@ -62,29 +60,6 @@ function MainLayout({ children }: { children: React.ReactNode }) {
     }
   }, []);
 
-  // Determine which breadcrumb to show based on the current route
-  const getBreadcrumb = () => {
-    if (pathname.startsWith("/apps")) {
-      return <AppBreadcrumb />;
-    }
-    if (pathname.startsWith("/workspace")) {
-      return <WorkspaceBreadcrumb />;
-    }
-    if (pathname.startsWith("/marketplace")) {
-      return <MarketplaceBreadcrumb />;
-    }
-    if (pathname.startsWith("/logs")) {
-      return (
-        <span className="flex items-center gap-2 p-1 text-sm">
-          <ScrollText className="h-4 w-4" />
-          <span>Logs</span>
-        </span>
-      );
-    }
-    // For other routes, show nothing
-    return null;
-  };
-
   if (!shouldShowSidebar) {
     return (
       <div className="bg-sidebar flex h-screen w-screen">
@@ -105,7 +80,7 @@ function MainLayout({ children }: { children: React.ReactNode }) {
         }}
       >
         <div className="bg-sidebar flex h-screen w-screen flex-col">
-          <TitleBar>{getBreadcrumb()}</TitleBar>
+          <TitleBar>{breadcrumbContent}</TitleBar>
           <div className="flex flex-1 overflow-hidden">
             <Sidebar className="border-none">
               <AppSidebar />

src-frontend/app/logs/page.tsx

@@ -1,7 +1,22 @@
 "use client";
 
+import { useEffect } from "react";
 import { Logs } from "@/components/logs";
+import { useBreadcrumbStore } from "@/stores";
+import { ScrollText } from "lucide-react";
 
 export default function LogsPage() {
+  const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
+
+  useEffect(() => {
+    setBreadcrumb(
+      <span className="flex items-center gap-2 p-1 text-sm">
+        <ScrollText className="h-4 w-4" />
+        <span>Logs</span>
+      </span>,
+    );
+    return () => clearBreadcrumb();
+  }, [setBreadcrumb, clearBreadcrumb]);
+
   return <Logs />;
 }

src-frontend/app/marketplace/page.tsx

@@ -24,6 +24,8 @@ import {
 import { Toolbar } from "@/components/ui/toolbar";
 import { toast } from "@/hooks/use-toast";
 import { Suspense } from "react";
+import { useBreadcrumbStore } from "@/stores";
+import { MarketplaceBreadcrumb } from "@/components/marketplace/marketplace-breadcrumb";
 
 function MarketplacePageContent() {
   const router = useRouter();
@@ -35,6 +37,7 @@ function MarketplacePageContent() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [marketplaceApps, setMarketplaceApps] = useState<MarketplaceApp[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
 
   useEffect(() => {
     const fetchApps = async () => {
@@ -57,6 +60,11 @@ function MarketplacePageContent() {
     fetchApps();
   }, []);
 
+  useEffect(() => {
+    setBreadcrumb(<MarketplaceBreadcrumb />);
+    return () => clearBreadcrumb();
+  }, [setBreadcrumb, clearBreadcrumb]);
+
   const handlePublishSubmit = async () => {
     if (!repoUrl.trim()) return;
 

src-frontend/app/workspace/page.tsx

@@ -7,15 +7,23 @@ import {
   initializeFileSystemStore,
   useFileSystemStore,
 } from "@/stores/useFileSystemStore";
+import { useBreadcrumbStore } from "@/stores";
+import { WorkspaceBreadcrumb } from "@/components/workspace/breadcrumb";
 
 function FilesPageContent() {
   const [initialPath] = useQueryState("path");
   const { refreshFileSystem } = useFileSystemStore();
+  const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
 
   useEffect(() => {
     initializeFileSystemStore(initialPath);
   }, [initialPath]);
 
+  useEffect(() => {
+    setBreadcrumb(<WorkspaceBreadcrumb />);
+    return () => clearBreadcrumb();
+  }, [setBreadcrumb, clearBreadcrumb]);
+
   useEffect(() => {
     // Periodically refresh the file system
     const interval = setInterval(() => {

src-frontend/stores/index.ts

@@ -14,3 +14,4 @@ export {
   initializeFileSystemStore,
 } from "./useFileSystemStore";
 export { useSidebarStore, type FavoriteItem } from "./useSidebarStore";
+export { useBreadcrumbStore } from "./useBreadcrumbStore";

src-frontend/stores/useBreadcrumbStore.ts

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+import type { ReactNode } from "react";
+
+interface BreadcrumbStore {
+  breadcrumbContent: ReactNode | null;
+  setBreadcrumb: (content: ReactNode | null) => void;
+  clearBreadcrumb: () => void;
+}
+
+export const useBreadcrumbStore = create<BreadcrumbStore>((set) => ({
+  breadcrumbContent: null,
+  setBreadcrumb: (content) => set({ breadcrumbContent: content }),
+  clearBreadcrumb: () => set({ breadcrumbContent: null }),
+}));