feat (ui): multiselect toegevoegd

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.

txt

@@ -0,0 +1,2 @@
+dd
+