Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sidebar nested folder design and highlighting bug fix
All checks were successful
Automated Container Build / build-and-push (push) Successful in 36s
Details

Browse source
This commit is contained in:
Elijah 2026-05-24 09:43:19 -07:00
parent dd798877f5
commit 2e7f532c56
1 changed files with 44 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/components/FileExplorer.tsx
View file

@ -1315,23 +1315,54 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
</div>
<nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
{[
{ id: 'files' as SidebarSection, icon: Folder, label: 'All Files' },
].map(({ id, icon: Icon, label }) => (
<div className="flex flex-col">
<button
key={id}
id={`nav-${id}`}
onClick={() => handleSectionChange(id)}
id="nav-files"
onClick={() => { handleSectionChange('files'); navigateTo('.'); }}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150"
style={{
backgroundColor: activeSection === id ? 'var(--color-accent-subtle)' : 'transparent',
color: activeSection === id ? 'var(--color-accent)' : 'var(--color-text-secondary)',
backgroundColor: activeSection === 'files' && currentPath === '.' ? 'var(--color-accent-subtle)' : 'transparent',
color: activeSection === 'files' && currentPath === '.' ? 'var(--color-accent)' : 'var(--color-text-secondary)',
}}
>
<Icon className="w-4.5 h-4.5" />
{label}
<Folder className="w-4.5 h-4.5 flex-shrink-0" />
All Files
</button>
))}
<AnimatePresence>
{activeSection === 'files' && pathSegments.length > 0 && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
className="overflow-hidden flex flex-col mt-1"
>
{pathSegments.map((seg, i) => {
const segPath = pathSegments.slice(0, i + 1).join('/');
const isLast = i === pathSegments.length - 1;
return (
<div key={segPath} className="flex items-center">
<div style={{ width: `${(i + 1) * 16 + 12}px` }} className="flex justify-end pr-2 flex-shrink-0">
<CornerDownRight className="w-3.5 h-3.5" style={{ color: 'var(--color-text-tertiary)' }} />
</div>
<button
onClick={() => navigateTo(segPath)}
className="flex-1 flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 hover:bg-white/5 truncate"
style={{
backgroundColor: isLast ? 'var(--color-accent-subtle)' : 'transparent',
color: isLast ? 'var(--color-accent)' : 'var(--color-text-secondary)',
}}
title={seg}
>
<Folder className="w-4 h-4 flex-shrink-0" />
<span className="truncate">{seg}</span>
</button>
</div>
);
})}
</motion.div>
)}
</AnimatePresence>
</div>
<div className="py-1">
<button
@ -1385,7 +1416,8 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
}}
className="group flex items-center justify-between px-10 py-2 text-sm font-medium cursor-pointer rounded-lg transition-colors hover:bg-white/5 gap-3"
style={{
color: 'var(--color-text-secondary)',
backgroundColor: activeSection === 'files' && currentPath === file.path ? 'var(--color-accent-subtle)' : 'transparent',
color: activeSection === 'files' && currentPath === file.path ? 'var(--color-accent)' : 'var(--color-text-secondary)',
borderTop: dragOverPinnedItem === file.path ? '2px solid var(--color-accent)' : '2px solid transparent',
}}
onClick={() => { setActiveSection('files'); navigateTo(file.path); }}