# 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.