feat: multi-select for batch file/folder actions (#100)

- Add checkboxes to list view items (grid view already had them)
- Add 'select all' checkbox in list view header
- Add batch action bar with Delete, Move, and Download buttons
- Batch delete: moves all selected items to trash in one operation
- Batch move: reuses existing move dialog in batch mode
- Batch download: downloads each selected item
- Keyboard shortcuts: Ctrl+A (select all), Escape (deselect), Delete key
- Shift+click for range selection in both grid and list views
- Selection state synced between grid and list views
- New multiSelect.js module manages selection state and batch operations

static/css/style.css

@@ -1783,17 +1783,18 @@ select:focus {
 
 .list-header {
     display: grid;
-    grid-template-columns: minmax(200px, 2fr) 1fr 1fr 120px;
+    grid-template-columns: 36px minmax(200px, 2fr) 1fr 1fr 120px;
     padding: 15px;
     font-weight: 600;
     color: #2d3748;
     background-color: #f8f9fa;
     border-bottom: 1px solid #e0e6ed;
+    align-items: center;
 }
 
 .file-item {
     display: grid;
-    grid-template-columns: minmax(200px, 2fr) 1fr 1fr 120px;
+    grid-template-columns: 36px minmax(200px, 2fr) 1fr 1fr 120px;
     padding: 12px 15px;
     border-bottom: 1px solid #f0f0f0;
     align-items: center;
@@ -1802,6 +1803,14 @@ select:focus {
     background-color: white;
 }
 
+.file-item.selected {
+    background-color: #fff8f6;
+}
+
+.file-item.selected:hover {
+    background-color: #fff0ec;
+}
+
 /* For trash mode, adjust columns */
 .trash-item.file-item {
     grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 120px 100px;
@@ -3601,4 +3610,131 @@ html[dir='rtl'] .fa-sign-out-alt {
 .upload-toast-stats {
     font-size: 12px;
     color: #888;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Multi-Select – checkboxes & batch action bar
+   ═══════════════════════════════════════════════════════════ */
+
+/* -- List-view checkbox column -- */
+.list-header-checkbox,
+.list-item-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.list-header-checkbox input[type="checkbox"],
+.list-item-checkbox input[type="checkbox"] {
+    width: 17px;
+    height: 17px;
+    cursor: pointer;
+    accent-color: #ff5e3a;
+    border-radius: 4px;
+}
+
+/* Sync checkbox state visually with .selected */
+.file-item.selected .item-checkbox {
+    /* Checked via JS */
+}
+
+/* -- Batch action bar -- */
+.batch-action-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #1e293b;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 12px;
+    margin: 0 0 12px;
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transform: translateY(-8px);
+    transition: opacity 0.2s, max-height 0.25s, transform 0.2s, margin 0.2s, padding 0.2s;
+    pointer-events: none;
+}
+
+.batch-action-bar.visible {
+    opacity: 1;
+    max-height: 60px;
+    transform: translateY(0);
+    pointer-events: auto;
+    padding: 10px 20px;
+    margin: 0 0 12px;
+}
+
+.batch-bar-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.batch-bar-close {
+    background: none;
+    border: none;
+    color: rgba(255,255,255,0.7);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 4px 6px;
+    border-radius: 6px;
+    transition: background 0.15s, color 0.15s;
+}
+
+.batch-bar-close:hover {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+}
+
+.batch-bar-count {
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.batch-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.batch-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 14px;
+    border: none;
+    border-radius: 8px;
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+    white-space: nowrap;
+}
+
+.batch-btn:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+.batch-btn-danger {
+    background: rgba(239,68,68,0.25);
+    color: #fca5a5;
+}
+
+.batch-btn-danger:hover {
+    background: rgba(239,68,68,0.4);
+    color: #fff;
+}
+
+/* Responsive: hide button text on small screens */
+@media (max-width: 640px) {
+    .batch-btn span {
+        display: none;
+    }
+    .batch-btn {
+        padding: 7px 10px;
+    }
 }

static/index.html

@@ -21,6 +21,7 @@
     <script src="/js/ui.js"></script>
     <script src="/js/contextMenus.js"></script>
     <script src="/js/fileOperations.js"></script>
+    <script src="/js/multiSelect.js"></script>
     <script src="/js/search.js"></script>
     <script src="/js/favorites.js"></script>
     <script src="/js/recent.js"></script>
@@ -222,6 +223,7 @@
                 <!-- List View (hidden by default) -->
                 <div class="files-list-view" id="files-list-view" style="display: none;">
                     <div class="list-header">
+                        <div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
                         <div data-i18n="files.name">Name</div>
                         <div data-i18n="files.type">Type</div>
                         <div data-i18n="files.size">Size</div>

static/js/app.js

@@ -91,6 +91,12 @@ function initApp() {
         console.warn('Recent files module not available or not initializable');
     }
     
+    // Initialize multi-select / batch actions
+    if (window.multiSelect && window.multiSelect.init) {
+        console.log('Initializing multi-select module');
+        window.multiSelect.init();
+    }
+    
     // Wait for translations to load before checking authentication
     if (window.i18n && window.i18n.isLoaded && window.i18n.isLoaded()) {
         // Translations already loaded, proceed with authentication
@@ -617,8 +623,10 @@ function setupEventListeners() {
         }
 
         // Deselect all cards when clicking empty area (not on a card, menu, or modal)
-        if (!e.target.closest('.file-card') && !e.target.closest('.context-menu') && !e.target.closest('.about-modal')) {
+        if (!e.target.closest('.file-card') && !e.target.closest('.file-item') && !e.target.closest('.context-menu') && !e.target.closest('.about-modal') && !e.target.closest('.batch-action-bar')) {
             document.querySelectorAll('.file-card.selected').forEach(c => c.classList.remove('selected'));
+            document.querySelectorAll('.file-item.selected').forEach(c => c.classList.remove('selected'));
+            if (window.multiSelect) window.multiSelect.clear();
         }
     });
 }
@@ -714,6 +722,7 @@ async function loadFiles(options = {}) {
             elements.filesGrid.innerHTML = '<div class="empty-state"><p>Could not load files</p></div>';
             elements.filesListView.innerHTML = `
                 <div class="list-header">
+                    <div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
                     <div>Name</div>
                     <div>Type</div>
                     <div>Size</div>
@@ -729,15 +738,23 @@ async function loadFiles(options = {}) {
         const folders = await response.json();
         
         // Clear existing files in both views
+        if (window.multiSelect) window.multiSelect.clear();
         elements.filesGrid.innerHTML = '';
         elements.filesListView.innerHTML = `
             <div class="list-header">
+                <div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
                 <div data-i18n="files.name">Name</div>
                 <div data-i18n="files.type">Type</div>
                 <div data-i18n="files.size">Size</div>
                 <div data-i18n="files.modified">Modified</div>
             </div>
         `;
+
+        // Re-wire select-all checkbox after DOM rebuild
+        const selectAllCb = document.getElementById('select-all-checkbox');
+        if (selectAllCb && window.multiSelect) {
+            selectAllCb.addEventListener('change', () => window.multiSelect.toggleAll());
+        }
         
         // Translate the header if i18n is available
         if (window.i18n && window.i18n.translatePage) {
@@ -844,9 +861,11 @@ function formatFileSize(bytes) {
 async function loadTrashItems() {
     try {
         // Clear existing content
+        if (window.multiSelect) window.multiSelect.clear();
         elements.filesGrid.innerHTML = '';
         elements.filesListView.innerHTML = `
             <div class="list-header">
+                <div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
                 <div data-i18n="files.name">Name</div>
                 <div data-i18n="files.type">Type</div>
                 <div data-i18n="trash.original_location">Original location</div>

static/js/contextMenus.js

@@ -202,6 +202,41 @@ const contextMenus = {
 
         moveCancelBtn.addEventListener('click', this.closeMoveDialog);
         moveConfirmBtn.addEventListener('click', async () => {
+            // Batch move mode (from multiSelect)
+            if (window.app.moveDialogMode === 'batch' && window.multiSelect) {
+                const targetId = window.app.selectedTargetFolderId;
+                const items = window.app.batchMoveItems || [];
+                let success = 0, errors = 0;
+
+                for (const item of items) {
+                    try {
+                        if (item.type === 'folder') {
+                            if (item.id === targetId) continue;
+                            const ok = await window.fileOps.moveFolder(item.id, targetId);
+                            if (ok) success++; else errors++;
+                        } else {
+                            const ok = await window.fileOps.moveFile(item.id, targetId);
+                            if (ok) success++; else errors++;
+                        }
+                    } catch (err) {
+                        console.error('Error moving item:', item, err);
+                        errors++;
+                    }
+                }
+
+                this.closeMoveDialog();
+                window.multiSelect.clear();
+                window.loadFiles();
+
+                if (errors > 0) {
+                    window.ui.showNotification('Batch move', `${success} moved, ${errors} failed`);
+                } else {
+                    window.ui.showNotification('Items moved',
+                        `${success} item${success !== 1 ? 's' : ''} moved successfully`);
+                }
+                return;
+            }
+
             if (window.app.moveDialogMode === 'file' && window.app.contextMenuTargetFile) {
                 const success = await window.fileOps.moveFile(
                     window.app.contextMenuTargetFile.id, 

static/js/multiSelect.js

@@ -0,0 +1,456 @@
+/**
+ * OxiCloud - Multi-Select & Batch Actions Module
+ * Adds checkboxes to both grid and list views, a batch action bar,
+ * and batch delete / move / download operations.
+ */
+
+const multiSelect = {
+    /** Currently selected items: { id, name, type: 'file'|'folder', parentId } */
+    _selected: new Map(),
+
+    /** Last clicked index for Shift-range selection */
+    _lastClickedIndex: -1,
+
+    /** Whether the batch bar is currently visible */
+    _barVisible: false,
+
+    // ── Public API ──────────────────────────────────────────
+
+    /** Number of selected items */
+    get count() { return this._selected.size; },
+
+    /** All selected items as an array */
+    get items() { return Array.from(this._selected.values()); },
+
+    /** True when at least one item is selected */
+    get hasSelection() { return this._selected.size > 0; },
+
+    /** Get selected files only */
+    get files() { return this.items.filter(i => i.type === 'file'); },
+
+    /** Get selected folders only */
+    get folders() { return this.items.filter(i => i.type === 'folder'); },
+
+    // ── Selection state management ──────────────────────────
+
+    /**
+     * Toggle an item in the selection.
+     * @param {string} id
+     * @param {string} name
+     * @param {'file'|'folder'} type
+     * @param {string} parentId  parent / folder id
+     * @returns {boolean} new selected state
+     */
+    toggle(id, name, type, parentId) {
+        if (this._selected.has(id)) {
+            this._selected.delete(id);
+            return false;
+        }
+        this._selected.set(id, { id, name, type, parentId });
+        return true;
+    },
+
+    /** Select a single item (add if not present) */
+    select(id, name, type, parentId) {
+        this._selected.set(id, { id, name, type, parentId });
+    },
+
+    /** Deselect a single item */
+    deselect(id) {
+        this._selected.delete(id);
+    },
+
+    /** Clear the whole selection */
+    clear() {
+        this._selected.clear();
+        this._lastClickedIndex = -1;
+        // Remove visual state from DOM
+        document.querySelectorAll('.file-card.selected, .file-item.selected').forEach(el => {
+            el.classList.remove('selected');
+        });
+        // Uncheck all item checkboxes
+        document.querySelectorAll('.item-checkbox').forEach(cb => cb.checked = false);
+        this._syncUI();
+    },
+
+    /** Select all visible items */
+    selectAll() {
+        this._selectAllInContainer('files-grid', '.file-card');
+        this._selectAllInContainer('files-list-view', '.file-item');
+        this._syncUI();
+    },
+
+    /** Deselect/select all toggle */
+    toggleAll() {
+        const allItems = this._getAllVisibleItems();
+        if (this._selected.size === allItems.length && allItems.length > 0) {
+            this.clear();
+        } else {
+            this.selectAll();
+        }
+    },
+
+    // ── DOM helpers ─────────────────────────────────────────
+
+    /** Gather info from a DOM element and add to selection */
+    _selectElement(el) {
+        const info = this._extractInfo(el);
+        if (info) {
+            this.select(info.id, info.name, info.type, info.parentId);
+            el.classList.add('selected');
+        }
+    },
+
+    _selectAllInContainer(containerId, selector) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        container.querySelectorAll(selector).forEach(el => this._selectElement(el));
+    },
+
+    _getAllVisibleItems() {
+        const gridItems = [...document.querySelectorAll('#files-grid .file-card')];
+        const listItems = [...document.querySelectorAll('#files-list-view .file-item')];
+        // Only return items from the currently visible view
+        const grid = document.getElementById('files-grid');
+        if (grid && grid.style.display !== 'none') return gridItems;
+        return listItems;
+    },
+
+    /** Extract item info from a DOM element */
+    _extractInfo(el) {
+        if (el.dataset.folderId && el.dataset.folderName !== undefined) {
+            return {
+                id: el.dataset.folderId,
+                name: el.dataset.folderName,
+                type: 'folder',
+                parentId: el.dataset.parentId || ''
+            };
+        }
+        if (el.dataset.fileId) {
+            return {
+                id: el.dataset.fileId,
+                name: el.dataset.fileName,
+                type: 'file',
+                parentId: el.dataset.folderId || ''
+            };
+        }
+        return null;
+    },
+
+    // ── Click handler (shared by grid + list) ───────────────
+
+    /**
+     * Handle a checkbox/selection click on an item element.
+     * Supports Shift-click for range selection.
+     */
+    handleItemClick(el, event) {
+        const items = this._getAllVisibleItems();
+        const index = items.indexOf(el);
+
+        // Also find the matching element in the other view
+        const info = this._extractInfo(el);
+        if (!info) return;
+
+        const selectorOther = info.type === 'folder'
+            ? `[data-folder-id="${info.id}"]`
+            : `[data-file-id="${info.id}"]`;
+        const otherEl = [...document.querySelectorAll(selectorOther)]
+            .find(e => e !== el);
+
+        if (event && event.shiftKey && this._lastClickedIndex >= 0 && index >= 0) {
+            // Range selection
+            const start = Math.min(this._lastClickedIndex, index);
+            const end   = Math.max(this._lastClickedIndex, index);
+            for (let i = start; i <= end; i++) {
+                this._selectElement(items[i]);
+                // Mirror to other view
+                const iInfo = this._extractInfo(items[i]);
+                if (iInfo) {
+                    const sel = iInfo.type === 'folder'
+                        ? `[data-folder-id="${iInfo.id}"]`
+                        : `[data-file-id="${iInfo.id}"]`;
+                    document.querySelectorAll(sel).forEach(e => e.classList.add('selected'));
+                }
+            }
+        } else {
+            // Normal toggle
+            const nowSelected = this.toggle(info.id, info.name, info.type, info.parentId);
+            el.classList.toggle('selected', nowSelected);
+            if (otherEl) otherEl.classList.toggle('selected', nowSelected);
+        }
+
+        this._lastClickedIndex = index;
+        this._syncUI();
+    },
+
+    // ── Batch action bar ────────────────────────────────────
+
+    /** Create the batch action bar if it doesn't exist */
+    _ensureBar() {
+        if (document.getElementById('batch-action-bar')) return;
+
+        const bar = document.createElement('div');
+        bar.id = 'batch-action-bar';
+        bar.className = 'batch-action-bar';
+        bar.innerHTML = `
+            <div class="batch-bar-left">
+                <button class="batch-bar-close" id="batch-bar-close" title="Cancel selection">
+                    <i class="fas fa-times"></i>
+                </button>
+                <span class="batch-bar-count" id="batch-bar-count">0 selected</span>
+            </div>
+            <div class="batch-bar-actions">
+                <button class="batch-btn" id="batch-download" title="Download">
+                    <i class="fas fa-download"></i>
+                    <span data-i18n="actions.download">Download</span>
+                </button>
+                <button class="batch-btn" id="batch-move" title="Move">
+                    <i class="fas fa-arrows-alt"></i>
+                    <span data-i18n="actions.move">Move</span>
+                </button>
+                <button class="batch-btn batch-btn-danger" id="batch-delete" title="Delete">
+                    <i class="fas fa-trash-alt"></i>
+                    <span data-i18n="actions.delete">Delete</span>
+                </button>
+            </div>
+        `;
+
+        // Insert before the files-container (inside main-content)
+        const filesContainer = document.querySelector('.files-container');
+        if (filesContainer && filesContainer.parentNode) {
+            filesContainer.parentNode.insertBefore(bar, filesContainer);
+        } else {
+            document.body.appendChild(bar);
+        }
+
+        // Wire up events
+        document.getElementById('batch-bar-close').addEventListener('click', () => this.clear());
+        document.getElementById('batch-delete').addEventListener('click', () => this.batchDelete());
+        document.getElementById('batch-move').addEventListener('click', () => this.batchMove());
+        document.getElementById('batch-download').addEventListener('click', () => this.batchDownload());
+    },
+
+    /** Show/hide the bar and update the count */
+    _syncUI() {
+        this._ensureBar();
+        const bar = document.getElementById('batch-action-bar');
+        const count = document.getElementById('batch-bar-count');
+
+        if (this._selected.size > 0) {
+            bar.classList.add('visible');
+            this._barVisible = true;
+            const n = this._selected.size;
+            const itemsText = n === 1
+                ? (window.i18n ? window.i18n.t('batch.one_selected') : '1 item selected')
+                : (window.i18n ? window.i18n.t('batch.n_selected', { count: n }) : `${n} items selected`);
+            count.textContent = itemsText;
+        } else {
+            bar.classList.remove('visible');
+            this._barVisible = false;
+        }
+
+        // Update select-all checkbox state
+        this._syncSelectAllCheckbox();
+
+        // Sync individual list-view checkboxes
+        this._syncItemCheckboxes();
+    },
+
+    /** Sync individual item checkboxes with selection state */
+    _syncItemCheckboxes() {
+        document.querySelectorAll('.file-item').forEach(el => {
+            const cb = el.querySelector('.item-checkbox');
+            if (cb) {
+                cb.checked = el.classList.contains('selected');
+            }
+        });
+    },
+
+    _syncSelectAllCheckbox() {
+        const cb = document.getElementById('select-all-checkbox');
+        if (!cb) return;
+        const all = this._getAllVisibleItems();
+        if (all.length === 0) {
+            cb.checked = false;
+            cb.indeterminate = false;
+        } else if (this._selected.size === all.length) {
+            cb.checked = true;
+            cb.indeterminate = false;
+        } else if (this._selected.size > 0) {
+            cb.checked = false;
+            cb.indeterminate = true;
+        } else {
+            cb.checked = false;
+            cb.indeterminate = false;
+        }
+    },
+
+    // ── Batch operations ────────────────────────────────────
+
+    /** Batch delete (move to trash) */
+    async batchDelete() {
+        const items = this.items;
+        if (items.length === 0) return;
+
+        const n = items.length;
+        const msg = n === 1
+            ? (window.i18n
+                ? window.i18n.t('dialogs.confirm_delete_file', { name: items[0].name })
+                : `Are you sure you want to move "${items[0].name}" to trash?`)
+            : (window.i18n
+                ? window.i18n.t('batch.confirm_delete', { count: n })
+                : `Are you sure you want to move ${n} items to trash?`);
+
+        const confirmed = await showConfirmDialog({
+            title: window.i18n ? window.i18n.t('dialogs.confirm_delete') : 'Move to trash',
+            message: msg,
+            confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Delete',
+        });
+        if (!confirmed) return;
+
+        let success = 0;
+        let errors = 0;
+
+        for (const item of items) {
+            try {
+                const endpoint = item.type === 'folder'
+                    ? `/api/trash/folders/${item.id}`
+                    : `/api/trash/files/${item.id}`;
+
+                const response = await fetch(endpoint, {
+                    method: 'DELETE',
+                    headers: getAuthHeaders()
+                });
+
+                if (response.ok) {
+                    success++;
+                } else {
+                    // Fallback to direct delete
+                    const fallback = item.type === 'folder'
+                        ? `/api/folders/${item.id}`
+                        : `/api/files/${item.id}`;
+                    const r2 = await fetch(fallback, { method: 'DELETE', headers: getAuthHeaders() });
+                    if (r2.ok) success++;
+                    else errors++;
+                }
+            } catch (e) {
+                console.error('Error deleting item:', item, e);
+                errors++;
+            }
+        }
+
+        this.clear();
+        window.loadFiles();
+
+        if (errors > 0) {
+            window.ui.showNotification('Batch delete',
+                `${success} moved to trash, ${errors} failed`);
+        } else {
+            window.ui.showNotification('Moved to trash',
+                `${success} item${success !== 1 ? 's' : ''} moved to trash`);
+        }
+    },
+
+    /** Batch move — reuse existing move dialog */
+    async batchMove() {
+        const items = this.items;
+        if (items.length === 0) return;
+
+        // Set a special batch mode flag
+        window.app.moveDialogMode = 'batch';
+        window.app.batchMoveItems = items;
+
+        // Reset selection
+        window.app.selectedTargetFolderId = "";
+
+        // Update dialog title
+        const dialog = document.getElementById('move-file-dialog');
+        const dialogHeader = dialog.querySelector('.rename-dialog-header');
+        const n = items.length;
+        const titleText = window.i18n
+            ? window.i18n.t('batch.move_title', { count: n })
+            : `Move ${n} item${n !== 1 ? 's' : ''}`;
+        dialogHeader.innerHTML = `<i class="fas fa-arrows-alt" style="color:#ff5e3a"></i> <span>${titleText}</span>`;
+
+        // Load folders, excluding selected folder IDs
+        const excludeIds = items.filter(i => i.type === 'folder').map(i => i.id);
+        await contextMenus.loadAllFolders(excludeIds[0] || null, 'batch');
+
+        dialog.style.display = 'flex';
+    },
+
+    /** Batch download — downloads each item individually */
+    async batchDownload() {
+        const items = this.items;
+        if (items.length === 0) return;
+
+        for (const item of items) {
+            if (item.type === 'folder') {
+                await window.fileOps.downloadFolder(item.id, item.name);
+            } else {
+                await window.fileOps.downloadFile(item.id, item.name);
+            }
+        }
+    },
+
+    // ── Initialization ──────────────────────────────────────
+
+    init() {
+        // Inject the select-all checkbox into the list header
+        this._injectListHeaderCheckbox();
+
+        // Override the deselect-on-empty-area handler to also clear our state
+        this._hookGlobalDeselect();
+
+        // Hook into the move dialog confirm to handle batch mode
+        // (handled in contextMenus.js — moveDialogMode === 'batch')
+
+        // Keyboard shortcut: Ctrl+A to select all, Escape to clear
+        document.addEventListener('keydown', (e) => {
+            // Don't trigger when inside an input/textarea/modal
+            if (e.target.closest('input, textarea, [contenteditable], .rename-dialog, .share-dialog, .confirm-dialog')) return;
+
+            if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+                // Only when in file view (not favorites, trash etc.)
+                const grid = document.getElementById('files-grid');
+                if (grid && grid.closest('.files-container')) {
+                    e.preventDefault();
+                    this.selectAll();
+                }
+            }
+
+            if (e.key === 'Escape' && this.hasSelection) {
+                this.clear();
+            }
+
+            if (e.key === 'Delete' && this.hasSelection) {
+                this.batchDelete();
+            }
+        });
+    },
+
+    /** Inject a checkbox into the list-header (or wire existing one) */
+    _injectListHeaderCheckbox() {
+        const cb = document.getElementById('select-all-checkbox');
+        if (!cb) return;
+
+        cb.addEventListener('change', () => {
+            this.toggleAll();
+        });
+    },
+
+    /** Override global click deselect to also clear our internal state */
+    _hookGlobalDeselect() {
+        document.addEventListener('click', (e) => {
+            // Don't deselect if clicking on batch bar, context menu, modal, or any file item
+            if (e.target.closest('.file-card, .file-item, .context-menu, .batch-action-bar, .about-modal, .rename-dialog, .share-dialog, .confirm-dialog, .modal-overlay, input, button')) return;
+
+            if (this.hasSelection) {
+                this.clear();
+            }
+        });
+    }
+};
+
+// Expose globally
+window.multiSelect = multiSelect;

static/js/ui.js

@@ -813,6 +813,7 @@ const ui = {
 
         // Improved: Structure and classes for list view
         folderListElement.innerHTML = `
+            <div class="list-item-checkbox"><input type="checkbox" class="item-checkbox"></div>
             <div class="name-cell">
                 <div class="file-icon folder-icon">
                     <i class="fas fa-folder"></i>
@@ -825,8 +826,15 @@ const ui = {
             <div class="date-cell">${formattedDate}</div>
         `;
 
+        // Checkbox click in list view
+        folderListElement.querySelector('.item-checkbox').addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggleCardSelection(folderListElement, e);
+        });
+
         // Click to navigate
-        folderListElement.addEventListener('click', () => {
+        folderListElement.addEventListener('click', (e) => {
+            if (e.target.closest('.list-item-checkbox')) return;
             window.app.currentPath = folder.id;
             this.updateBreadcrumb(folder.name);
             window.loadFiles();
@@ -1043,6 +1051,7 @@ const ui = {
         fileListElement.dataset.folderId = file.folder_id || "";
 
         fileListElement.innerHTML = `
+            <div class="list-item-checkbox"><input type="checkbox" class="item-checkbox"></div>
             <div class="name-cell">
                 <div class="file-icon ${iconSpecialClass}">
                     <i class="${iconClass}"></i>
@@ -1055,6 +1064,12 @@ const ui = {
             <div class="date-cell">${formattedDate}</div>
         `;
 
+        // Checkbox click in list view
+        fileListElement.querySelector('.item-checkbox').addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggleCardSelection(fileListElement, e);
+        });
+
         // Make draggable (list view)
         fileListElement.setAttribute('draggable', 'true');
 
@@ -1071,7 +1086,8 @@ const ui = {
         });
 
         // View or download on click
-        fileListElement.addEventListener('click', () => {
+        fileListElement.addEventListener('click', (e) => {
+            if (e.target.closest('.list-item-checkbox')) return;
             // Track this file access for recent files
             if (window.recent) {
                 document.dispatchEvent(new CustomEvent('file-accessed', {
@@ -1121,10 +1137,14 @@ const ui = {
 
 /**
  * Toggle selection state of a file/folder card.
- * Each click toggles that card independently (multi-select by default).
+ * Routes through the multiSelect module so batch actions know about selected items.
  */
 function toggleCardSelection(card, event) {
-    card.classList.toggle('selected');
+    if (window.multiSelect) {
+        window.multiSelect.handleItemClick(card, event);
+    } else {
+        card.classList.toggle('selected');
+    }
 }
 
 /**

static/sw.js

@@ -1,5 +1,5 @@
 // OxiCloud Service Worker
-const CACHE_NAME = 'oxicloud-cache-v5';
+const CACHE_NAME = 'oxicloud-cache-v6';
 const ASSETS_TO_CACHE = [
   '/',
   '/index.html',