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