From bad3f3cf42f1bce20ea53a40c7c0cb71f2a22253 Mon Sep 17 00:00:00 2001 From: kodi Date: Wed, 11 Mar 2026 10:17:29 +0100 Subject: [PATCH] feat (ui): multiselect toegevoegd --- project_docs/UI_MULTISELECT_V1_DESIGN.md | 147 +++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 project_docs/UI_MULTISELECT_V1_DESIGN.md diff --git a/project_docs/UI_MULTISELECT_V1_DESIGN.md b/project_docs/UI_MULTISELECT_V1_DESIGN.md new file mode 100644 index 0000000..d756595 --- /dev/null +++ b/project_docs/UI_MULTISELECT_V1_DESIGN.md @@ -0,0 +1,147 @@ +# UI_MULTISELECT_V1_DESIGN.md + +## Doel + +Deze notitie beschrijft een **multi-select v1** ontwerp voor de bestaande dual-pane UI. + +Randvoorwaarden: +- nog geen implementatie +- geen backendwijzigingen in deze stap +- geen nieuwe dependencies +- veiligheid en voorspelbare semantiek eerst + +--- + +## 1) State model + +## Kernstate per paneel + +Voor elk paneel (`left`, `right`): +- `currentPath: string` +- `showHidden: boolean` +- `selectedItems: Array<{ path: string, name: string, kind: "file" | "directory" }>` +- `selectedPrimary: string | null` (path van primaire selectie; optioneel afleidbaar) + +Globaal: +- `activePane: "left" | "right"` +- `inactivePane`: afgeleid + +## Active pane vs selected items +- `activePane` bepaalt **waar acties worden gestart**. +- `selectedItems` zijn **per paneel lokaal**. +- Alleen `selectedItems` van `activePane` tellen mee voor Rename/Delete/Copy/Move. + +## Selectie bij navigatie +- Navigatie binnen hetzelfde paneel (`directory open`, `breadcrumb`, `../`) wist selectie van dat paneel. +- Selectie in het andere paneel blijft behouden. +- Reden: voorkomt dat verborgen/niet-zichtbare selectie per ongeluk acties triggert. + +--- + +## 2) Gebruikersgedrag + +## Klikregels +- Klik op checkbox: toggle selectie van dat item. +- Klik op rij (behalve naam): zet single selectie op dat item. +- Klik op directorynaam: open directory (navigatie), geen selectie-expansie. +- Klik op filenaam: zet single selectie op dat item. + +## Gedrag met bestaande multi-select +- Als meerdere items geselecteerd zijn en gebruiker klikt op checkbox van een item: + - alleen dat item toggelt, rest blijft. +- Als meerdere items geselecteerd zijn en gebruiker klikt op rij/filenaam: + - selectie wordt gereset naar precies dat ene item. +- Als meerdere items geselecteerd zijn en gebruiker opent directorynaam: + - paneelnavigatie gebeurt en selectie van dat paneel wordt gewist. + +Dit houdt gedrag simpel en voorspelbaar zonder ctrl/shift-logica. + +--- + +## 3) Actiegedrag + +## Rename +- Exact 1 selectie: toegestaan (bestaand gedrag). +- >1 selectie: niet toegestaan in v1 UI. + - knop disabled of duidelijke foutmelding: "Rename requires exactly one selected item". + +## Delete +- 1 of meer selecties: UI verwerkt items sequentieel via bestaand endpoint (`POST /api/files/delete` per item). +- Resultaatrapportage in UI: + - success count + - fail count met eerste foutmelding (compact) +- Veiligheid: + - geen impliciete force/recursive uitbreiding buiten bestaand backendgedrag. + +## Copy / Move +- Als backend alleen single-item endpoint semantiek heeft: + - UI maakt per geselecteerd item een aparte copy/move-aanroep (en dus aparte task(s)). +- Destination-semantiek blijft ongewijzigd: + - volledige doelpad per item + - default op basis van inactief paneel + itemnaam +- Resultaat: + - meerdere tasks mogelijk + - task polling/read blijft bestaand gedrag. + +## Tijdelijk niet ondersteund +- Eén atomische batch-operatie in backend. +- Transactionele rollback over meerdere items. +- Geavanceerde conflict-resolution over complete selectie. + +--- + +## 4) Scopebeperking + +In multi-select v1 expliciet niet doen: +- geen keyboard multi-select +- geen shift/ctrl selectie +- geen rubber-band / range selectie +- geen nieuwe batch-backend API tenzij al aanwezig +- geen contractwijzigingen in bestaande endpoints + +Focus: +- helder UI-selectiemodel +- veilige, voorspelbare actie-semantiek boven bestaande backend + +--- + +## 5) Impactanalyse + +## Waarschijnlijk te wijzigen frontendbestanden +- `webui/html/app.js` + - selectie-state per paneel + - klikregels en action-enabling + - sequentiële multi-item actie-afhandeling +- `webui/html/index.html` + - eventueel kleine status/feedback placeholders +- `webui/html/style.css` + - selectievisuals geschikt voor meerdere geselecteerde rijen + +## Backendimpact +- Voor ontwerpstap: geen. +- Voor implementatie v1: kan zonder backendwijziging als UI sequentieel bestaande endpoints gebruikt. + +--- + +## 6) Teststrategie + +## UI smoke/regressie (lichtgewicht) +- structuur blijft aanwezig (`left-pane`, `right-pane`, `footer-bar`). +- selectie-UI elementen aanwezig (checkbox kolom/markers). + +## Gedragsgevallen die afgedekt moeten worden +1. Checkbox toggles selectie zonder andere geselecteerde items te resetten. +2. Rij-klik reset selectie naar exact één item. +3. Directorynaam-klik navigeert en wist selectie van dat paneel. +4. Filenaam-klik selecteert item en navigeert niet. +5. Rename enabled alleen bij exact één selectie. +6. Delete enabled bij >=1 selectie. +7. Copy/Move enabled afhankelijk van selectie en itemtypes (conform huidige backend-scope). +8. Bij multi-select actie wordt per item een request/task gestart (geen stille drop). +9. Navigatie in actief paneel wist alleen dat paneel; inactief paneel selectie blijft. + +## Opmerking testbaarheid +- Echte klik-eventvolgorde (checkbox vs rij vs naam) is beperkt headless te valideren met huidige server-side smoke tests. +- Aanbevolen bij implementatie: + - kleine browsergerichte regressietests (indien aanwezig in stack), of + - expliciete handmatige verificatiechecklist met reproduceerbare stappen.