Merge pull request #148 from gbw/feature/move-dialog-navigation

static/css/components/dialogs.css

@@ -77,6 +77,17 @@
 	border-top: 1px solid #e2e8f0;
 }
 
+.rename-dialog-buttons .btn-outline {
+	background: transparent;
+	color: #4a5568;
+	border: 1px solid #cbd5e0;
+}
+
+.rename-dialog-buttons .btn-outline:hover {
+	background: #f7fafc;
+	border-color: #a0aec0;
+}
+
 /* Share Dialog — Modern Style */
 .share-dialog {
 	position: fixed;
@@ -341,6 +352,45 @@
 	margin-bottom: 15px;
 }
 
+/* Move dialog breadcrumb navigation */
+.move-dialog-breadcrumb {
+	display: none; /* Hidden by default, shown via JS when navigating into subfolders */
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 4px;
+	padding: 8px 12px;
+	background: #f8fafc;
+	border-radius: 8px;
+	margin-bottom: 12px;
+	font-size: 13px;
+	overflow-x: auto;
+}
+
+.move-breadcrumb-item {
+	color: #4a5568;
+	cursor: pointer;
+	padding: 2px 6px;
+	border-radius: 4px;
+	transition: all 0.15s ease;
+	white-space: nowrap;
+}
+
+.move-breadcrumb-item:hover {
+	background: #e2e8f0;
+	color: #1a202c;
+}
+
+.move-breadcrumb-item.current {
+	color: #ff5e3a;
+	font-weight: 600;
+	cursor: default;
+}
+
+.move-breadcrumb-separator {
+	color: #a0aec0;
+	margin: 0 2px;
+}
+
 /* Folder select items in move dialog */
 .folder-select-item {
 	display: flex;
@@ -373,6 +423,70 @@
 	color: #ff5e3a;
 }
 
+/* "Select this folder" option */
+.folder-select-item.folder-select-current {
+	background-color: rgba(72, 187, 120, 0.1);
+	color: #2f855a;
+	font-weight: 500;
+}
+
+.folder-select-item.folder-select-current:hover {
+	background-color: rgba(72, 187, 120, 0.15);
+}
+
+.folder-select-item.folder-select-current i {
+	color: #48bb78;
+}
+
+/* Navigate up option */
+.folder-select-item.folder-navigate-up {
+	color: #718096;
+	font-style: italic;
+}
+
+.folder-select-item.folder-navigate-up:hover {
+	color: #4a5568;
+}
+
+.folder-select-item.folder-navigate-up i {
+	color: #a0aec0;
+}
+
+/* Folder navigation item (click to enter) */
+.folder-select-item.folder-navigate {
+	justify-content: space-between;
+}
+
+.folder-select-item.folder-navigate .folder-name {
+	flex: 1;
+}
+
+.folder-select-item.folder-navigate .folder-navigate-icon {
+	color: #a0aec0;
+	font-size: 12px;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+}
+
+.folder-select-item.folder-navigate:hover .folder-navigate-icon {
+	opacity: 1;
+}
+
+/* Empty folder message */
+.folder-select-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 24px;
+	color: #a0aec0;
+	font-size: 14px;
+}
+
+.folder-select-empty i {
+	font-size: 20px;
+}
+
 /* Custom confirm dialog */
 .confirm-dialog {
 	position: fixed;
@@ -554,6 +668,17 @@
 	border-top-color: #334155;
 }
 
+[data-theme="dark"] .rename-dialog-buttons .btn-outline {
+	background: transparent;
+	color: #94a3b8;
+	border-color: #475569;
+}
+
+[data-theme="dark"] .rename-dialog-buttons .btn-outline:hover {
+	background: #334155;
+	border-color: #64748b;
+}
+
 [data-theme="dark"] .shared-dialog-content {
 	background-color: #1e293b;
 }
@@ -747,3 +872,80 @@
 [data-theme="dark"] .share-item-info {
 	color: #e2e8f0;
 }
+
+/* Dark mode for move dialog breadcrumb */
+[data-theme="dark"] .move-dialog-breadcrumb {
+	background: #0f172a;
+}
+
+[data-theme="dark"] .move-breadcrumb-item {
+	color: #94a3b8;
+}
+
+[data-theme="dark"] .move-breadcrumb-item:hover {
+	background: #334155;
+	color: #e2e8f0;
+}
+
+[data-theme="dark"] .move-breadcrumb-item.current {
+	color: #ff5e3a;
+}
+
+[data-theme="dark"] .move-breadcrumb-separator {
+	color: #475569;
+}
+
+/* Dark mode for folder select items */
+[data-theme="dark"] .folder-select-item {
+	color: #cbd5e1;
+}
+
+[data-theme="dark"] .folder-select-item:hover {
+	background-color: #334155;
+}
+
+[data-theme="dark"] .folder-select-item.selected {
+	background-color: rgba(255,94,58,0.15);
+	color: #ff5e3a;
+}
+
+[data-theme="dark"] .folder-select-item i {
+	color: #fbbf24;
+}
+
+[data-theme="dark"] .folder-select-item.selected i {
+	color: #ff5e3a;
+}
+
+[data-theme="dark"] .folder-select-item.folder-select-current {
+	background-color: rgba(74, 222, 128, 0.1);
+	color: #86efac;
+}
+
+[data-theme="dark"] .folder-select-item.folder-select-current:hover {
+	background-color: rgba(74, 222, 128, 0.15);
+}
+
+[data-theme="dark"] .folder-select-item.folder-select-current i {
+	color: #4ade80;
+}
+
+[data-theme="dark"] .folder-select-item.folder-navigate-up {
+	color: #64748b;
+}
+
+[data-theme="dark"] .folder-select-item.folder-navigate-up:hover {
+	color: #94a3b8;
+}
+
+[data-theme="dark"] .folder-select-item.folder-navigate-up i {
+	color: #475569;
+}
+
+[data-theme="dark"] .folder-select-item.folder-navigate .folder-navigate-icon {
+	color: #475569;
+}
+
+[data-theme="dark"] .folder-select-empty {
+	color: #475569;
+}

static/js/app/ui.js

@@ -102,7 +102,7 @@ const ui = {
             document.body.appendChild(renameDialog);
         }
 
-        // Move dialog — modern
+        // Move dialog — modern with navigation
         if (!document.getElementById('move-file-dialog')) {
             const moveDialog = document.createElement('div');
             moveDialog.className = 'rename-dialog';
@@ -115,14 +115,13 @@ const ui = {
                     </div>
                     <div class="rename-dialog-body">
                         <p style="margin:0 0 12px;color:#718096;font-size:14px" data-i18n="dialogs.select_destination">Select destination folder:</p>
+                        <div id="move-dialog-breadcrumb" class="move-dialog-breadcrumb"></div>
                         <div id="folder-select-container" style="max-height:220px;overflow-y:auto;">
-                            <div class="folder-select-item selected" data-folder-id="">
-                                <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Root</span>
-                            </div>
                         </div>
                     </div>
                     <div class="rename-dialog-buttons">
                         <button class="btn btn-secondary" id="move-cancel-btn" data-i18n="actions.cancel">Cancel</button>
+                        <button class="btn btn-outline" id="copy-confirm-btn" data-i18n="actions.copy">Copy</button>
                         <button class="btn btn-primary" id="move-confirm-btn" data-i18n="actions.move_to">Move</button>
                     </div>
                 </div>

static/js/features/files/contextMenus.js

@@ -259,8 +259,91 @@ const contextMenus = {
         // Move dialog events
         const moveCancelBtn = document.getElementById('move-cancel-btn');
         const moveConfirmBtn = document.getElementById('move-confirm-btn');
+        const copyConfirmBtn = document.getElementById('copy-confirm-btn');
+        const moveFileDialog = document.getElementById('move-file-dialog');
 
         moveCancelBtn.addEventListener('click', this.closeMoveDialog);
+
+        // Close move dialog on Escape key
+        // Store handler reference to avoid duplicate listeners
+        // Note: We don't use stopPropagation because all Escape handlers are on document level
+        // Each handler checks its own state, so multiple dialogs can be closed with multiple Escape presses
+        if (!window._moveDialogEscapeHandler) {
+            window._moveDialogEscapeHandler = (e) => {
+                if (e.key === 'Escape' && moveFileDialog.style.display === 'flex') {
+                    this.closeMoveDialog();
+                }
+            };
+            document.addEventListener('keydown', window._moveDialogEscapeHandler);
+        }
+
+        // Copy button handler
+        copyConfirmBtn.addEventListener('click', async () => {
+            // Batch copy mode (from multiSelect)
+            if (window.app.moveDialogMode === 'batch' && window.multiSelect) {
+                const targetId = window.app.selectedTargetFolderId;
+                const items = window.app.batchMoveItems || [];
+
+                const fileIds = items.filter(i => i.type === 'file').map(i => i.id);
+                const folderIds = items.filter(i => i.type === 'folder').map(i => i.id);
+
+                let success = 0, errors = 0;
+
+                try {
+                    // Batch copy files
+                    if (fileIds.length > 0) {
+                        const res = await fetch('/api/batch/files/copy', {
+                            method: 'POST',
+                            headers: { ...getAuthHeaders(), 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ file_ids: fileIds, target_folder_id: targetId })
+                        });
+                        const data = await res.json();
+                        success += data.stats?.successful || 0;
+                        errors += data.stats?.failed || 0;
+                    }
+
+                    // Note: Folder copy is not yet implemented in batch API
+                    if (folderIds.length > 0) {
+                        window.ui.showNotification('Info', 'Folder copy is not yet supported in batch mode');
+                    }
+                } catch (err) {
+                    console.error('Batch copy error:', err);
+                    errors++;
+                }
+
+                this.closeMoveDialog();
+                window.multiSelect.clear();
+                window.loadFiles();
+
+                if (errors > 0) {
+                    window.ui.showNotification('Batch copy', `${success} copied, ${errors} failed`);
+                } else {
+                    window.ui.showNotification('Items copied',
+                        `${success} item${success !== 1 ? 's' : ''} copied successfully`);
+                }
+                return;
+            }
+
+            // Single item copy
+            if (window.app.moveDialogMode === 'file' && window.app.contextMenuTargetFile) {
+                const success = await window.fileOps.copyFile(
+                    window.app.contextMenuTargetFile.id,
+                    window.app.selectedTargetFolderId
+                );
+                if (success) {
+                    this.closeMoveDialog();
+                }
+            } else if (window.app.moveDialogMode === 'folder' && window.app.contextMenuTargetFolder) {
+                const success = await window.fileOps.copyFolder(
+                    window.app.contextMenuTargetFolder.id,
+                    window.app.selectedTargetFolderId
+                );
+                if (success) {
+                    this.closeMoveDialog();
+                }
+            }
+        });
+
         moveConfirmBtn.addEventListener('click', async () => {
             // Batch move mode (from multiSelect)
             if (window.app.moveDialogMode === 'batch' && window.multiSelect) {
@@ -395,6 +478,46 @@ const contextMenus = {
         // Reset selection
         window.app.selectedTargetFolderId = "";
 
+        // Ensure we have the home folder ID BEFORE calculating startFolderId
+        if (!window.app.userHomeFolderId) {
+            console.log('[Move Dialog] Home folder ID not set, resolving...');
+            await window.resolveHomeFolder();
+        }
+
+        // Initialize dialog navigation state
+        // Start at the parent of the item being moved (so user sees siblings and can navigate)
+        let startFolderId = null;
+        let startFolderName = null;
+        if (mode === 'file' && item.folder_id) {
+            startFolderId = item.folder_id;
+            // We need the folder name for breadcrumb - try to get it from current view
+            const folderEl = document.querySelector(`[data-folder-id="${startFolderId}"]`);
+            if (folderEl) {
+                startFolderName = folderEl.querySelector('.folder-name, .item-name')?.textContent || null;
+            }
+        } else if (mode === 'folder' && item.parent_id) {
+            startFolderId = item.parent_id;
+        } else {
+            // If item is at root level, start at user's home folder
+            startFolderId = window.app.userHomeFolderId || null;
+        }
+
+        console.log('[Move Dialog] showMoveDialog - item:', item, 'mode:', mode, 'startFolderId:', startFolderId, 'userHomeFolderId:', window.app.userHomeFolderId);
+
+        // Store the item being moved and navigation state
+        window.app.moveDialogItemId = item.id;
+        window.app.moveDialogItemMode = mode;
+        window.app.moveDialogCurrentFolderId = startFolderId;
+
+        // Build initial breadcrumb if starting at a non-home folder
+        // This allows proper navigation back to home
+        const breadcrumb = [];
+        if (startFolderId && startFolderId !== window.app.userHomeFolderId && startFolderName) {
+            // We have the folder name, add it to breadcrumb
+            breadcrumb.push({ id: startFolderId, name: startFolderName });
+        }
+        window.app.moveDialogBreadcrumb = breadcrumb;
+
         // Update dialog title (preserve icon)
         const dialogHeader = document.getElementById('move-file-dialog').querySelector('.rename-dialog-header');
         const titleText = mode === 'file' ?
@@ -402,8 +525,8 @@ const contextMenus = {
             (window.i18n ? window.i18n.t('dialogs.move_folder') : 'Move folder');
         dialogHeader.innerHTML = `<i class="fas fa-arrows-alt" style="color:#ff5e3a"></i> <span>${titleText}</span>`;
 
-        // Load all available folders
+        // Load folders for the starting location
-        await this.loadAllFolders(item.id, mode);
+        await this.loadMoveDialogFolders(startFolderId);
 
         // Show dialog
         document.getElementById('move-file-dialog').style.display = 'flex';
@@ -456,87 +579,262 @@ const contextMenus = {
     },
 
     /**
-     * Load all folders for the move dialog
+     * Load folders for the move dialog with navigation support
-     * @param {string} itemId - ID of the item being moved
+     * Shows subfolders of the specified parent folder and allows navigation
-     * @param {string} mode - 'file' or 'folder'
+     * @param {string} parentFolderId - Parent folder ID to load children from (null for root)
      */
-    async loadAllFolders(itemId, mode) {
+    async loadMoveDialogFolders(parentFolderId) {
         try {
             const token = localStorage.getItem('oxicloud_token');
             const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
-            const response = await fetch('/api/folders', { headers });
-            if (response.ok) {
-                const folders = await response.json();
-                const folderSelectContainer = document.getElementById('folder-select-container');
 
-                // Clear container except root option
+            // Ensure we have the home folder ID before proceeding
-                folderSelectContainer.innerHTML = `
+            if (!window.app.userHomeFolderId) {
-                    <div class="folder-select-item selected" data-folder-id="">
+                await window.resolveHomeFolder();
-                        <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Root</span>
+            }
-                    </div>
+
+            // Get the effective folder ID
+            const effectiveParentId = parentFolderId || window.app.userHomeFolderId;
+
+            // Must have a folder ID to proceed
+            if (!effectiveParentId) {
+                console.error('[Move Dialog] Cannot load folders - no folder ID available');
+                return;
+            }
+
+            // Use the contents endpoint to get children
+            const url = `/api/folders/${effectiveParentId}/contents`;
+
+            console.log('[Move Dialog] Loading folders from:', url, 'effectiveParentId:', effectiveParentId);
+            const response = await fetch(url, { headers });
+            if (!response.ok) {
+                console.error('Failed to load folders:', response.status);
+                return;
+            }
+
+            const data = await response.json();
+            console.log('[Move Dialog] API response:', data);
+
+            // The contents endpoint returns an array of child folders
+            // The fallback /api/folders returns root folders (home folder itself)
+            const folders = Array.isArray(data) ? data : (data.folders || []);
+            console.log('[Move Dialog] Loaded folders:', folders.length, 'folders:', folders);
+
+            const folderSelectContainer = document.getElementById('folder-select-container');
+            const breadcrumbContainer = document.getElementById('move-dialog-breadcrumb');
+
+            // Clear container
+            folderSelectContainer.innerHTML = '';
+
+            // Get current navigation state
+            const itemId = window.app.moveDialogItemId;
+            const mode = window.app.moveDialogItemMode;
+            const breadcrumb = window.app.moveDialogBreadcrumb || [];
+
+            // Always show breadcrumb to allow navigation back to home
+            this._renderMoveDialogBreadcrumb(breadcrumbContainer, breadcrumb, effectiveParentId);
+            breadcrumbContainer.style.display = 'flex';
+
+            // Option to select current folder as destination (only after navigating into subfolders)
+            if (breadcrumb.length > 0 && effectiveParentId && effectiveParentId !== itemId) {
+                const currentFolderOption = document.createElement('div');
+                currentFolderOption.className = 'folder-select-item folder-select-current';
+                currentFolderOption.innerHTML = `
+                    <i class="fas fa-check-circle" style="color: #48bb78;"></i>
+                    <span>${window.i18n ? window.i18n.t('dialogs.select_this_folder') : 'Select this folder'}</span>
                 `;
-
+                currentFolderOption.addEventListener('click', () => {
-                // Select root by default
-                window.app.selectedTargetFolderId = "";
-
-                // Add all available folders
-                if (Array.isArray(folders)) {
-                    folders.forEach(folder => {
-                        // Skip folders that would create cycles
-                        if (mode === 'folder' && folder.id === itemId) {
-                            return;
-                        }
-
-                        // Skip current folder of the item
-                        if (mode === 'file' && window.app.contextMenuTargetFile && 
-                            folder.id === window.app.contextMenuTargetFile.folder_id) {
-                            return;
-                        }
-
-                        if (mode === 'folder' && window.app.contextMenuTargetFolder && 
-                            folder.id === window.app.contextMenuTargetFolder.parent_id) {
-                            return;
-                        }
-
-                        const folderItem = document.createElement('div');
-                        folderItem.className = 'folder-select-item';
-                        folderItem.dataset.folderId = folder.id;
-                        folderItem.innerHTML = `<i class="fas fa-folder"></i> ${escapeHtml(folder.name)}`;
-
-                        folderItem.addEventListener('click', () => {
-                            // Deselect all
-                            document.querySelectorAll('.folder-select-item').forEach(item => {
-                                item.classList.remove('selected');
-                            });
-
-                            // Select this one
-                            folderItem.classList.add('selected');
-                            window.app.selectedTargetFolderId = folder.id;
-                        });
-
-                        folderSelectContainer.appendChild(folderItem);
-                    });
-                }
-
-                // Event for root option
-                const rootOption = folderSelectContainer.querySelector('.folder-select-item');
-                rootOption.addEventListener('click', () => {
                     document.querySelectorAll('.folder-select-item').forEach(item => {
                         item.classList.remove('selected');
                     });
-                    rootOption.classList.add('selected');
+                    currentFolderOption.classList.add('selected');
-                    window.app.selectedTargetFolderId = "";
+                    window.app.selectedTargetFolderId = effectiveParentId;
+                });
+                folderSelectContainer.appendChild(currentFolderOption);
+            }
+
+            // Add "Go to parent" option if not at home folder
+            const isAtHomeFolder = effectiveParentId === window.app.userHomeFolderId;
+            if (!isAtHomeFolder || breadcrumb.length > 0) {
+                const parentOption = document.createElement('div');
+                parentOption.className = 'folder-select-item folder-navigate-up';
+                parentOption.innerHTML = `
+                    <i class="fas fa-level-up-alt"></i>
+                    <span>${window.i18n ? window.i18n.t('dialogs.go_to_parent') : '.. (parent folder)'}</span>
+                `;
+                parentOption.addEventListener('click', () => {
+                    // Navigate to parent folder
+                    const currentBreadcrumb = window.app.moveDialogBreadcrumb || [];
+                    if (currentBreadcrumb.length > 0) {
+                        // Remove current folder from breadcrumb
+                        currentBreadcrumb.pop();
+                        const parentFolder = currentBreadcrumb.length > 0
+                            ? currentBreadcrumb[currentBreadcrumb.length - 1]
+                            : null;
+                        window.app.moveDialogBreadcrumb = currentBreadcrumb;
+                        window.app.moveDialogCurrentFolderId = parentFolder ? parentFolder.id : null;
+                        this.loadMoveDialogFolders(parentFolder ? parentFolder.id : null);
+                    } else {
+                        // Go to root (home folder)
+                        window.app.moveDialogBreadcrumb = [];
+                        window.app.moveDialogCurrentFolderId = window.app.userHomeFolderId || null;
+                        this.loadMoveDialogFolders(window.app.userHomeFolderId || null);
+                    }
+                });
+                folderSelectContainer.appendChild(parentOption);
+            }
+
+            // Add subfolders (clicking navigates INTO the folder)
+            folders.forEach(folder => {
+                // Skip the item being moved (to prevent moving a folder into itself)
+                if (mode === 'folder' && folder.id === itemId) {
+                    return;
+                }
+
+                const folderItem = document.createElement('div');
+                folderItem.className = 'folder-select-item folder-navigate';
+                folderItem.dataset.folderId = folder.id;
+                folderItem.innerHTML = `
+                    <i class="fas fa-folder"></i>
+                    <span class="folder-name">${escapeHtml(folder.name)}</span>
+                    <i class="fas fa-chevron-right folder-navigate-icon"></i>
+                `;
+
+                // Click navigates INTO this folder
+                folderItem.addEventListener('click', () => {
+                    // Add to breadcrumb
+                    const breadcrumb = window.app.moveDialogBreadcrumb || [];
+                    breadcrumb.push({ id: folder.id, name: folder.name });
+                    window.app.moveDialogBreadcrumb = breadcrumb;
+                    window.app.moveDialogCurrentFolderId = folder.id;
+                    this.loadMoveDialogFolders(folder.id);
                 });
 
-                // Translate new elements (scoped to container)
+                folderSelectContainer.appendChild(folderItem);
-                if (window.i18n && window.i18n.translateElement) {
+            });
-                    window.i18n.translateElement(folderSelectContainer);
+
-                }
+            // Show "no subfolders" message if there are no folders to navigate
+            if (folders.length === 0 && breadcrumb.length === 0) {
+                // At home folder level with no subfolders - show option to move here
+                const homeOption = document.createElement('div');
+                homeOption.className = 'folder-select-item folder-select-current';
+                homeOption.innerHTML = `
+                    <i class="fas fa-check-circle" style="color: #48bb78;"></i>
+                    <span>${window.i18n ? window.i18n.t('dialogs.move_to_home') : 'Move to Home folder'}</span>
+                `;
+                homeOption.addEventListener('click', () => {
+                    document.querySelectorAll('.folder-select-item').forEach(item => {
+                        item.classList.remove('selected');
+                    });
+                    homeOption.classList.add('selected');
+                    window.app.selectedTargetFolderId = '';  // Empty means root/home
+                });
+                folderSelectContainer.appendChild(homeOption);
+            } else if (folders.length === 0) {
+                // Inside a subfolder with no children - show empty message
+                const emptyMsg = document.createElement('div');
+                emptyMsg.className = 'folder-select-empty';
+                emptyMsg.innerHTML = `<i class="fas fa-folder-open"></i> <span>${window.i18n ? window.i18n.t('dialogs.no_subfolders') : 'No subfolders to navigate'}</span>`;
+                folderSelectContainer.appendChild(emptyMsg);
+            }
+
+            // Set default selection to current folder
+            window.app.selectedTargetFolderId = parentFolderId || '';
+
+            // Translate new elements
+            if (window.i18n && window.i18n.translateElement) {
+                window.i18n.translateElement(folderSelectContainer);
             }
         } catch (error) {
             console.error('Error loading folders:', error);
         }
     },
+
+    /**
+     * Render breadcrumb navigation for move dialog
+     */
+    _renderMoveDialogBreadcrumb(container, breadcrumb, currentFolderId) {
+        if (!container) return;
+        container.innerHTML = '';
+
+        const homeFolderId = window.app.userHomeFolderId;
+        const homeFolderName = window.app.userHomeFolderName || 'Home';
+
+        // Home icon (click to go to home folder)
+        const homeItem = document.createElement('span');
+        homeItem.className = 'move-breadcrumb-item';
+        homeItem.innerHTML = '<i class="fas fa-home"></i>';
+        homeItem.addEventListener('click', () => {
+            window.app.moveDialogBreadcrumb = [];
+            window.app.moveDialogCurrentFolderId = homeFolderId || null;
+            this.loadMoveDialogFolders(homeFolderId || null);
+        });
+        container.appendChild(homeItem);
+
+        // Home folder name
+        if (homeFolderName) {
+            const separator = document.createElement('span');
+            separator.className = 'move-breadcrumb-separator';
+            separator.textContent = '>';
+            container.appendChild(separator);
+
+            const homeNameItem = document.createElement('span');
+            homeNameItem.className = 'move-breadcrumb-item';
+            if (breadcrumb.length === 0) {
+                homeNameItem.classList.add('current');
+            }
+            homeNameItem.textContent = homeFolderName;
+            if (breadcrumb.length > 0) {
+                homeNameItem.addEventListener('click', () => {
+                    window.app.moveDialogBreadcrumb = [];
+                    window.app.moveDialogCurrentFolderId = homeFolderId || null;
+                    this.loadMoveDialogFolders(homeFolderId || null);
+                });
+            }
+            container.appendChild(homeNameItem);
+        }
+
+        // Breadcrumb path
+        breadcrumb.forEach((segment, index) => {
+            const separator = document.createElement('span');
+            separator.className = 'move-breadcrumb-separator';
+            separator.textContent = '>';
+            container.appendChild(separator);
+
+            const item = document.createElement('span');
+            item.className = 'move-breadcrumb-item';
+            if (index === breadcrumb.length - 1) {
+                item.classList.add('current');
+            }
+            item.textContent = segment.name;
+
+            // Click to navigate back to this level
+            if (index < breadcrumb.length - 1) {
+                item.addEventListener('click', () => {
+                    window.app.moveDialogBreadcrumb = breadcrumb.slice(0, index + 1);
+                    window.app.moveDialogCurrentFolderId = segment.id;
+                    this.loadMoveDialogFolders(segment.id);
+                });
+            }
+            container.appendChild(item);
+        });
+    },
+
+    /**
+     * Load all folders for the move dialog (batch operations)
+     * Uses the same navigation pattern as loadMoveDialogFolders
+     * @param {string} itemId - ID of the item being moved (unused, kept for compatibility)
+     * @param {string} mode - 'batch' for batch operations
+     */
+    async loadAllFolders(itemId, mode) {
+        // For batch mode, use the same navigation as regular move dialog
+        // Initialize navigation state starting at home folder
+        window.app.moveDialogBreadcrumb = [];
+        window.app.moveDialogCurrentFolderId = window.app.userHomeFolderId || null;
+
+        // Use loadMoveDialogFolders which uses /api/folders/{id}/contents
+        await this.loadMoveDialogFolders(window.app.userHomeFolderId || null);
+    },
     /**
      * Show share dialog for files or folders
      * @param {Object} item - File or folder object

static/js/features/files/fileOperations.js

@@ -766,6 +766,63 @@ const fileOps = {
         }
     },
 
+    /**
+     * Copy a file to another folder
+     * @param {string} fileId - File ID
+     * @param {string} targetFolderId - Target folder ID
+     * @returns {Promise<boolean>} - Success status
+     */
+    async copyFile(fileId, targetFolderId) {
+        try {
+            const response = await fetch('/api/batch/files/copy', {
+                method: 'POST',
+                headers: {
+                    ...getAuthHeaders(),
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    file_ids: [fileId],
+                    target_folder_id: targetFolderId === "" ? null : targetFolderId
+                })
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                // Reload files after copying
+                await window.loadFiles();
+                window.ui.showNotification('File copied', 'File copied successfully');
+                return true;
+            } else {
+                let errorMessage = 'Unknown error';
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.error || 'Unknown error';
+                } catch (e) {
+                    errorMessage = 'Error processing server response';
+                }
+                window.ui.showNotification('Error', `Error copying the file: ${errorMessage}`);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error copying file:', error);
+            window.ui.showNotification('Error', 'Error copying the file');
+            return false;
+        }
+    },
+
+    /**
+     * Copy a folder to another folder
+     * Note: Backend folder copy is not yet implemented, this shows a notification
+     * @param {string} folderId - Folder ID
+     * @param {string} targetFolderId - Target folder ID
+     * @returns {Promise<boolean>} - Success status
+     */
+    async copyFolder(folderId, targetFolderId) {
+        // Folder copy is not yet implemented in the backend
+        window.ui.showNotification('Not implemented', 'Folder copy is not yet supported');
+        return false;
+    },
+
     /**
      * Rename a file
      * @param {string} fileId - File ID

static/locales/en.json

@@ -202,6 +202,9 @@
     "move_file": "Move file",
     "move_folder": "Move folder",
     "select_destination": "Select destination folder:",
+    "select_this_folder": "Select this folder",
+    "go_to_parent": ".. (parent folder)",
+    "no_subfolders": "No subfolders",
     "root": "Root",
     "delete_confirmation": "Are you sure you want to delete",
     "and_contents": "and all its contents",

static/locales/es.json

@@ -202,6 +202,9 @@
     "move_file": "Mover archivo",
     "move_folder": "Mover carpeta",
     "select_destination": "Selecciona la carpeta destino:",
+    "select_this_folder": "Seleccionar esta carpeta",
+    "go_to_parent": ".. (carpeta superior)",
+    "no_subfolders": "Sin subcarpetas",
     "root": "Raíz",
     "delete_confirmation": "¿Estás seguro de que quieres eliminar",
     "and_contents": "y todo su contenido",