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.
This commit is contained in:
tigeren 2025-10-18 17:58:20 +00:00
parent 4e3c4a1277
commit ddf5f1e9b8
2 changed files with 47 additions and 42 deletions

View File

@ -401,6 +401,7 @@ export default function ClusterPage({ params }: ClusterPageProps) {
onVideoClick={handleVideoClick}
onPhotoClick={handlePhotoClick}
onTextClick={handleTextClick}
showNavigation={false}
/>
)}

View File

@ -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