From ddf5f1e9b8d208048fa89fcfb98bec437b3f3ed2 Mon Sep 17 00:00:00 2001
From: tigeren <tigeren@live.com>
Date: Sat, 18 Oct 2025 17:58:20 +0000
Subject: [PATCH] feat(cluster-folder-view): add conditional navigation
 rendering

- Introduce `showNavigation` prop to control the visibility of the navigation header and breadcrumbs in the ClusterFolderView component.
- Update ClusterPage to set `showNavigation` to false, disabling navigation for specific use cases.
---
 src/app/clusters/[id]/page.tsx         |  1 +
 src/components/cluster-folder-view.tsx | 88 ++++++++++++++------------
 2 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/src/app/clusters/[id]/page.tsx b/src/app/clusters/[id]/page.tsx
index 0d990e8..27d00b1 100644
--- a/src/app/clusters/[id]/page.tsx
+++ b/src/app/clusters/[id]/page.tsx
@@ -401,6 +401,7 @@ export default function ClusterPage({ params }: ClusterPageProps) {
             onVideoClick={handleVideoClick}
             onPhotoClick={handlePhotoClick}
             onTextClick={handleTextClick}
+            showNavigation={false}
           />
         )}
 
diff --git a/src/components/cluster-folder-view.tsx b/src/components/cluster-folder-view.tsx
index 72b89e7..7cc6deb 100644
--- a/src/components/cluster-folder-view.tsx
+++ b/src/components/cluster-folder-view.tsx
@@ -51,6 +51,7 @@ interface ClusterFolderViewProps {
   onVideoClick: (video: FileSystemItem) => void;
   onPhotoClick: (photo: FileSystemItem, index: number) => void;
   onTextClick: (text: FileSystemItem) => void;
+  showNavigation?: boolean;
 }
 
 export default function ClusterFolderView({
@@ -59,7 +60,8 @@ export default function ClusterFolderView({
   libraries: clusterLibraries,
   onVideoClick,
   onPhotoClick,
-  onTextClick
+  onTextClick,
+  showNavigation = true
 }: ClusterFolderViewProps) {
   const router = useRouter();
   const [currentPath, setCurrentPath] = useState<string | null>(null); // null = virtual root
@@ -333,48 +335,50 @@ export default function ClusterFolderView({
   // Render Folder View (using VirtualizedFolderGrid)
   return (
     <div className="space-y-4">
-      {/* Custom Header with Breadcrumbs */}
-      <div className="flex items-center gap-4">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleBackClick}
-          className="text-zinc-400 hover:text-white hover:bg-zinc-800/50"
-          disabled={isVirtualRoot}
-        >
-          <ChevronLeft className="h-4 w-4 mr-2" />
-          Back
-        </Button>
+      {/* Custom Header with Breadcrumbs - only show if showNavigation is true */}
+      {showNavigation && (
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBackClick}
+            className="text-zinc-400 hover:text-white hover:bg-zinc-800/50"
+            disabled={isVirtualRoot}
+          >
+            <ChevronLeft className="h-4 w-4 mr-2" />
+            Back
+          </Button>
 
-        {/* Breadcrumbs */}
-        <nav className="flex items-center flex-wrap gap-2 text-sm font-medium text-zinc-400">
-          {breadcrumbs.map((breadcrumb, index) => (
-            <div key={breadcrumb.path || 'root'} className="flex items-center gap-2">
-              {index > 0 && <span className="text-zinc-600">/</span>}
-              <button
-                onClick={() => handleBreadcrumbClick(breadcrumb.path)}
-                className={`hover:text-white transition-colors ${
-                  index === breadcrumbs.length - 1 
-                    ? 'text-white font-semibold cursor-default' 
-                    : 'hover:underline cursor-pointer'
-                }`}
-                style={index === 0 ? { color: cluster.color } : undefined}
-                disabled={index === breadcrumbs.length - 1}
-                title={breadcrumb.path}
-              >
-                {index === 0 ? (
-                  <div className="flex items-center gap-1">
-                    <Home className="h-3 w-3" />
-                    <span>{breadcrumb.name}</span>
-                  </div>
-                ) : (
-                  breadcrumb.name
-                )}
-              </button>
-            </div>
-          ))}
-        </nav>
-      </div>
+          {/* Breadcrumbs */}
+          <nav className="flex items-center flex-wrap gap-2 text-sm font-medium text-zinc-400">
+            {breadcrumbs.map((breadcrumb, index) => (
+              <div key={breadcrumb.path || 'root'} className="flex items-center gap-2">
+                {index > 0 && <span className="text-zinc-600">/</span>}
+                <button
+                  onClick={() => handleBreadcrumbClick(breadcrumb.path)}
+                  className={`hover:text-white transition-colors ${
+                    index === breadcrumbs.length - 1 
+                      ? 'text-white font-semibold cursor-default' 
+                      : 'hover:underline cursor-pointer'
+                  }`}
+                  style={index === 0 ? { color: cluster.color } : undefined}
+                  disabled={index === breadcrumbs.length - 1}
+                  title={breadcrumb.path}
+                >
+                  {index === 0 ? (
+                    <div className="flex items-center gap-1">
+                      <Home className="h-3 w-3" />
+                      <span>{breadcrumb.name}</span>
+                    </div>
+                  ) : (
+                    breadcrumb.name
+                  )}
+                </button>
+              </div>
+            ))}
+          </nav>
+        </div>
+      )}
 
       {/* Folder Grid */}
       <VirtualizedFolderGrid