xorbitlab
/
nextav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/clusters/[id]/page.tsx
View File

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

88
src/components/cluster-folder-view.tsx
View File

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