From 2e7f532c56c4a527fdfe4e1200dd22279f8df765 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 24 May 2026 09:43:19 -0700
Subject: [PATCH] Sidebar nested folder design and highlighting bug fix

---
 frontend/src/components/FileExplorer.tsx | 56 +++++++++++++++++++-----
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index ec653b2..4aec7a5 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -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); }}