webmanager-mvp/project_docs/UI_FUNCTION_BAR_V2_DESIGN.md

# UI_FUNCTION_BAR_V2_DESIGN.md

## 1. Doel en scope

Deze stap beschrijft de evolutie van de huidige onderbalk onder de twee panelen naar een compactere, duidelijkere functiebalk in Midnight Commander-stijl.

Doel:
- de balk onder de panelen wordt visueel en functioneel herkenbaar als vaste actiebalk
- acties blijven direct gekoppeld aan het actieve paneel
- de balk wordt voorbereid op latere functietoets-labeling zonder nu al functietoetsen te implementeren

In scope:
- compactere horizontale functiebalk onder de twee panelen
- vaste knopvolgorde
- duidelijkere relatie tussen actie, actief paneel en selectie
- ontwerpvoorbereiding voor latere F3-F8 koppeling

Out of scope:
- geen implementatie van `View`
- geen implementatie van `Edit`
- geen functietoetsen
- geen backendwijzigingen
- geen nieuwe dependencies

---

## 2. Positie en layout

De functiebalk staat vast onder de twee panelen, op de plek van de huidige onderste actiebalk.

Layoutdoelen:
- horizontaal gecentreerd in de beschikbare breedte
- compact in hoogte
- kleine, gelijkmatige spacing tussen knoppen
- visueel duidelijk gescheiden van de paneelzone, maar zonder grote verticale band
- uitbreidbaar naar extra labels of functietoetsbadges zonder redesign

Voorstel:
- één compacte horizontale rij
- de rij krijgt een eigen container binnen de footerzone
- links en rechts geen brede utilityblokken
- status/fouttekst blijft buiten of onder de functiebalk, zodat de knoppenrij zelf compact blijft

---

## 3. Vaste volgorde van de knoppen

De functiebalk gebruikt exact deze volgorde:

1. `View`
2. `Edit`
3. `Copy`
4. `Move`
5. `Rename`
6. `MKdir`
7. `Delete`

Reden:
- sluit aan op klassieke file-manager verwachtingen
- groepeert navigatie-/inhoudsacties eerst, daarna muterende file-acties
- houdt de destructieve actie `Delete` aan het einde

---

## 4. Relatie met toekomstig functietoetsgebruik

De functiebalk moet later zonder structurele herbouw koppelbaar zijn aan:

- `F3 = View`
- `F4 = Edit`
- `F5 = Copy`
- `F6 = Move`
- `F7 = MKdir`
- `F8 = Delete`

Ontwerpimplicatie:
- elke knop moet later een compacte functietoetsbadge of prefix kunnen tonen
- `Rename` blijft voorlopig zonder vaste F-toets in deze mapping
- deze stap implementeert nog geen keyboardbindingen of badgegedrag

---

## 5. Relatie met actief paneel en selectie

Alle acties in de functiebalk werken altijd vanuit het actieve paneel.

### Geen selectie
- `View`: disabled
- `Edit`: disabled
- `Copy`: disabled
- `Move`: disabled
- `Rename`: disabled
- `MKdir`: enabled
- `Delete`: disabled

### Exact 1 selectie
- `View`: later afhankelijk van file-type; in deze stap nog niet functioneel
- `Edit`: later afhankelijk van file-type; in deze stap nog niet functioneel
- `Copy`: enabled als huidige backendactie geldig is
- `Move`: enabled als huidige backendactie geldig is
- `Rename`: enabled
- `MKdir`: enabled
- `Delete`: enabled

### Meerdere selecties
- `View`: disabled
- `Edit`: disabled
- `Copy`: enabled als alle geselecteerde items compatibel zijn met bestaande backendscope
- `Move`: enabled als alle geselecteerde items compatibel zijn met bestaande backendscope
- `Rename`: disabled
- `MKdir`: enabled
- `Delete`: enabled

### File- of directoryselectie
- `Copy` en `Move` blijven gebonden aan de huidige backendbeperking
- zolang backend `file-only` is voor copy/move:
  - selectie met directories blokkeert `Copy`
  - selectie met directories blokkeert `Move`
- `Delete` blijft werken volgens bestaande backendregels
- `Rename` volgt bestaande rename-semantiek

Belangrijk:
- de functiebalk toont niet alleen acties, maar reflecteert ook duidelijk welke acties in de huidige context geldig zijn via enabled/disabled toestand

---

## 6. Scopebeperking

Nog niet in deze stap:
- geen `View`-implementatie
- geen `Edit`-implementatie
- geen functietoetsen
- geen backendwijzigingen
- geen extra UI-frameworks

Deze ontwerpstap gaat dus alleen over de functiebalk zelf, niet over nieuwe actiecapaciteit.

---

## 7. Impactanalyse

Waarschijnlijk te wijzigen bestanden:
- `webui/html/index.html`
- `webui/html/style.css`
- `webui/html/app.js`
- `webui/backend/tests/golden/test_ui_smoke_golden.py`

### Regressierisico

Belangrijkste risico's:
- huidige actieknoppen verliezen hun correcte enabled/disabled logica
- de relatie tussen actief paneel en actiebalk wordt visueel minder duidelijk
- keyboard- en klikflows kunnen breken als knop-ids of handlers onzorgvuldig worden vervangen
- extra compactheid kan ten koste gaan van leesbaarheid op smallere schermen

Mitigatie:
- bestaande action handlers hergebruiken waar mogelijk
- ids voor bestaande werkende acties stabiel houden of gecontroleerd migreren
- disabled-logica centraal laten in plaats van per knop ad hoc
- smoke tests uitbreiden met de nieuwe functiebalkstructuur

---

## 8. Teststrategie

### Smoke/regressietests

Aan te passen:
- `test_ui_smoke_golden.py`

Nieuwe of aangepaste checks:
- functiebalkcontainer aanwezig onder de panelen
- knopvolgorde in HTML komt overeen met het ontwerp
- bestaande actieknoppen voor werkende backendacties blijven aanwezig
- assets blijven correct gemount

### Handmatige validatie

Te valideren bij implementatie:
- functiebalk blijft compact op desktop
- functiebalk blijft bruikbaar op smallere breedte
- actief paneel blijft bepalend voor de actiecontext
- disabled/enable toestand klopt bij:
  - geen selectie
  - 1 selectie
  - meerdere selecties
  - gemixte file/directory-selectie
- bestaande keyboard- en klikselectieflow blijft intact