webmanager-mvp/project_docs/UI_MULTISELECT_V1_DESIGN.md

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.