Add the possibility to select and delete multiple files

[giuscris]

This pull request introduces multi-file selection and bulk deletion capabilities to the files list in the panel, along with improved visual feedback for selection and enhanced internationalization support for these new features. The changes affect both the TypeScript logic and SCSS styles, as well as translation files for multiple languages.

Bulk file selection and deletion:

• Added support for selecting multiple files in the files list using Ctrl/Cmd and Shift for range selection, with visual highlighting for selected items. (panel/src/ts/components/fileslist.ts, panel/src/scss/components/_files-list.scss) [1] [2]
• Implemented bulk deletion: a modal now prompts for confirmation when multiple files are selected, and files are deleted in parallel with appropriate notifications and UI updates. (panel/src/ts/components/fileslist.ts, panel/src/ts/components/modal.ts) [1] [2] [3]

UI/UX improvements:

• Enhanced styles for selected files, including color adjustments for both light and dark modes, and improved focus/active states. (panel/src/scss/components/_files-list.scss) [1] [2] [3]
• Added a selection count indicator and logic to show/hide bulk action buttons based on selection. (panel/src/ts/components/fileslist.ts)

Internationalization:

• Updated translation files (English, German, Spanish, French, Greek, Hungarian) to include prompts and notifications for bulk file deletion, ensuring users see context-appropriate messages in their language. (panel/translations/*.yaml) [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]

[Copilot]

Pull request overview

This PR adds multi-file selection to the Panel’s file list (Ctrl/Cmd toggle, Shift range select) and introduces a bulk-delete workflow with updated UI styling and translations, enabling users to delete multiple files at once with confirmation and feedback.

Changes:

• Added multi-selection behavior in the files list, plus selection state UI updates and a selection action bar.
• Implemented bulk delete confirmation + parallel deletion flow, including dynamic modal messaging.
• Updated SCSS for selected/hover states and added new translation keys across all shipped locales.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
panel/views/partials/files/file/list.php	Adds bulk selection action UI (bulk delete button) and list-mode class.
panel/src/ts/components/modal.ts	Adds Modal.setMessage() to allow dynamic modal message updates.
panel/src/ts/components/fileslist.ts	Implements selection mechanics, bulk delete behavior, and selection action UI state.
panel/src/scss/components/_files-list.scss	Adds selected-state styling and refines hover behavior for dark mode.
panel/translations/en.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/de.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/es.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/fr.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/el.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/hu.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/it.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/nl.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/pl.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/pt.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/ro.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/ru.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/sv.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/tr.yaml	Adds bulk-delete prompt + “multiple files deleted” message.
panel/translations/uk.yaml	Adds bulk-delete prompt + “multiple files deleted” message.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.

Suppressed comments (3)

Previously missed (1) — in code that hasn't changed since the last review.

panel/src/ts/components/fileslist.ts:376

• If a selected item doesn't have a delete action (data-command=deleteFile missing/without data-action), pending is decremented but the completion path (notification/UI update) is never reached. If all selected items lack an action, the modal closes with no user feedback.

This issue also appears on line 388 of the same file.

                        if (!itemAction) {
                            pending -= 1;
                            return;
                        }

panel/src/ts/components/fileslist.ts:103

• Shift-click also triggers default link behavior (open in new window) when clicking on the file name anchor. Prevent the default action when using Shift for range selection so the click only updates selection.

                if (event.shiftKey) {
                    const items = Array.from($$(".files-item", this.element));
                    const currentIndex = items.indexOf(filesItem);

                    if (!this.selectionAnchor || !items.includes(this.selectionAnchor)) {
                        this.selectionAnchor = filesItem;
                    }

panel/src/ts/components/fileslist.ts:390

• In bulk delete, lastMessage is overwritten for every response (including successes). If any delete fails but a later request succeeds, the final notification will be an error but may show a success message from the last completed request.

                                pending -= 1;
                                lastMessage = response.message;