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')}
>
)}