diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx index d3464be..d22f8df 100644 --- a/frontend/src/components/FileExplorer.tsx +++ b/frontend/src/components/FileExplorer.tsx @@ -1308,6 +1308,84 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) { return sortedGroupNames.map(name => ({ name, files: groupsMap[name] })); }, [displayFiles, activeSection, trashAutoPurgeDays]); + const renderPinnedSidebarSection = (filterExt?: string) => { + const displayedPinned = filterExt ? pinnedFiles.filter(f => f.name.endsWith(filterExt)) : pinnedFiles; + + return ( +
+ + + {pinnedExpanded && ( + + {displayedPinned.length === 0 ? ( +
No pinned items
+ ) : ( + displayedPinned.map((file) => ( +
{ + e.dataTransfer.setData('text/plain', file.path); + }} + onDragOver={(e) => { + e.preventDefault(); + setDragOverPinnedItem(file.path); + }} + onDragLeave={() => { + setDragOverPinnedItem(null); + }} + onDrop={(e) => { + e.preventDefault(); + setDragOverPinnedItem(null); + const source = e.dataTransfer.getData('text/plain'); + if (source && source !== file.path) { + handlePinnedDragEnd(source, file.path); + } + }} + 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={{ + 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); }} + onContextMenu={(e) => handleContextMenu(e, file)} + > +
+ {getFileIcon(file)} +
+ {getFileDisplayName(file.name, file.is_dir)} +
+ )) + )} +
+ )} +
+
+ ); + }; + + return (
{isMobile && sidebarOpen && ( @@ -1425,76 +1503,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
-
- - - {pinnedExpanded && ( - - {pinnedFiles.length === 0 ? ( -
No pinned items
- ) : ( - pinnedFiles.map((file) => ( -
{ - e.dataTransfer.setData('text/plain', file.path); - }} - onDragOver={(e) => { - e.preventDefault(); - setDragOverPinnedItem(file.path); - }} - onDragLeave={() => { - setDragOverPinnedItem(null); - }} - onDrop={(e) => { - e.preventDefault(); - setDragOverPinnedItem(null); - const source = e.dataTransfer.getData('text/plain'); - if (source && source !== file.path) { - handlePinnedDragEnd(source, file.path); - } - }} - 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={{ - 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); }} - onContextMenu={(e) => handleContextMenu(e, file)} - > -
- {getFileIcon(file)} -
- {getFileDisplayName(file.name, file.is_dir)} -
- )) - )} -
- )} -
-
+ {renderPinnedSidebarSection()} {[ { id: 'shared' as SidebarSection, icon: LinkIcon, label: 'Shared Files' }, @@ -1532,6 +1541,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) { Recent Documents + {renderPinnedSidebarSection('.docx')} )} @@ -1549,6 +1559,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) { Recent Presentations + {renderPinnedSidebarSection('.pptx')} )}