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:
parent
4e3c4a1277
commit
ddf5f1e9b8
|
|
@ -401,6 +401,7 @@ export default function ClusterPage({ params }: ClusterPageProps) {
|
|||
onVideoClick={handleVideoClick}
|
||||
onPhotoClick={handlePhotoClick}
|
||||
onTextClick={handleTextClick}
|
||||
showNavigation={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue