webmanager-mvp/project_docs/UI_VISION_MC.md

UI_VISION_MC.md

Doel

De webapp moet geleidelijk evolueren naar een web-based bestandsbeheerder met een workflow die geïnspireerd is op Midnight Commander.

Het doel is niet om Midnight Commander exact te klonen, maar om de belangrijkste werkprincipes over te nemen:

• twee panelen naast elkaar
• snel wisselen tussen panelen
• actief paneel en inactief paneel
• copy/move van actief paneel naar ander paneel
• keyboard-efficiënte bediening
• focus op snelheid en weinig muisafhankelijkheid

---

Ontwerpprincipes

• web-native uitvoering, geen letterlijke terminal-clone
• behoud van bestaande backend API-contracten
• incrementele UI-ontwikkeling in kleine stappen
• veiligheid en voorspelbaarheid blijven leidend
• bestaande werkende functionaliteit mag niet regressief kapot gaan

---

Doelbeeld

De UI moet uiteindelijk bestaan uit:

1. Dubbel paneel

• een linker paneel
• een rechter paneel
• elk paneel heeft een eigen current path
• elk paneel toont directories en files
• elk paneel heeft een eigen selectie

2. Actief paneel

• één paneel is actief
• acties worden gestart vanuit het actieve paneel
• het andere paneel is standaard de doelcontext voor copy/move

3. Navigatie

• pad boven elk paneel zichtbaar
• directorynavigatie per paneel
• later uitbreidbaar met keyboard shortcuts

4. Bestandsacties

• rename
• mkdir
• delete
• copy
• move

5. Taken

• tasklijst zichtbaar
• status polling blijft mogelijk
• copy/move blijven task-based

---

Buiten scope voor de eerstvolgende UI-stap

Deze dingen worden nu nog niet gebouwd:

• multi-select
• Insert-achtige selectie
• viewer
• editor
• menubalk zoals F9
• chmod/chown/symlink tools
• zoeken
• directory compare
• volledige keyboard mapping

---

Eerstvolgende UI-doel

De eerstvolgende UI-stap is:

Dual-pane UI v2

Deze stap bevat alleen:

• links en rechts paneel
• per paneel eigen current path
• actief paneel
• visuele actieve paneel-indicatie
• copy/move gebruiken standaard het andere paneel als destination context
• bestaande backend-endpoints blijven ongewijzigd

Nog niet in deze stap:

• multi-select
• uitgebreide keyboard controls
• viewer/editor
• history UI
• nieuwe backend features

---

Verwachte impact

Waarschijnlijk vooral wijziging in:

• webui/html/index.html
• webui/html/app.js
• webui/html/style.css

Backend hergebruik:

• GET /api/browse
• POST /api/files/mkdir
• POST /api/files/rename
• POST /api/files/delete
• POST /api/files/copy
• POST /api/files/move
• GET /api/tasks
• GET /api/tasks/{task_id}
• GET /api/bookmarks
• POST /api/bookmarks
• DELETE /api/bookmarks/{bookmark_id}

---

Acceptatiecriteria voor de volgende UI-stap

De dual-pane stap is pas klaar als:

• beide panelen onafhankelijk kunnen browsen
• elk paneel een eigen path toont
• één paneel actief is
• actief paneel visueel herkenbaar is
• copy/move logisch vanuit actief naar ander paneel werken
• bestaande functionaliteit niet stuk gaat
• bestaande tests blijven slagen
• UI smoke tests waar nodig zijn bijgewerkt