kodi
142 lines
3.0 KiB
Markdown
142 lines
3.0 KiB
Markdown
# 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
|