webmanager-mvp/project_docs/UI_F1_SETTINGS_AND_F2_PLACEHOLDER_V1.md

UI_F1_SETTINGS_AND_F2_PLACEHOLDER_V1

1. Doel

Deze stap voegt een kleine, uitbreidbare UI-structuur toe voor twee functietoets-slots aan de functiebalk onder de panelen:

• F1 = Settings
• F2 = placeholder voor latere Rename

Doel:

• de functiebalk meer laten aansluiten op een klassieke file-manager workflow
• ruimte reserveren voor toekomstige uitbreiding zonder de huidige dual-pane workflow te verstoren
• een eerste container bieden voor instellingen en history/logweergave zonder nu al een grote instellingen-UI te ontwerpen

Waarom nu F1 als Settings:

• F1 is een logische, laag-risico plek voor globale app-functionaliteit
• het conflicteert niet met bestaande file-acties zoals F3-F8
• een compacte modal houdt de hoofdworkspace schoon

Waarom F2 nu alvast reserveren:

• de functiebalk wordt voorbereid op een completere functietoets-reeks
• latere Rename-invulling kan op een stabiele plek landen
• het voorkomt dat de functiebalk later opnieuw semantisch moet verschuiven

2. F1 Settings

F1 krijgt in v1 zowel een keyboard shortcut als een knop in de menubalk onder de panelen.

Voorstel:

• keyboard shortcut: F1
• knoplabel in functiebalk: Settings
• positie: links in de functiebalk, vóór de bestaande file-acties
• actie: opent een compacte modal/popup

Eigenschappen van de modal:

• compact genoeg om de dual-pane context niet te verdringen
• groot genoeg voor tabnavigatie en een eenvoudige lijstweergave
• uitbreidbaar zonder later een totaal andere structuur nodig te hebben

3. Settings Modal Structuur

De modal fungeert in v1 vooral als container.

Vaste structuur:

• titel: Settings
• sluiten via X rechtsboven
• sluiten via Escape
• tabstrip bovenin of direct onder de titel

Tabs in v1:

• General
• Logs

Volgorde:

• General als eerste tab
• Logs direct rechts daarvan

Rol van de tabs:

• General: placeholder voor latere instellingen
• Logs: eerste echte inhoud, gevoed door de bestaande history API

Belangrijk:

• de modal is in v1 nog geen volledige instellingenpagina
• de tabstructuur wordt nu vooral neergezet zodat latere uitbreidingen logisch kunnen landen

4. General Tab

De General-tab is in v1 expliciet een placeholder.

Inhoud in v1:

• nette sectieheader of korte toelichting
• compacte placeholdertekst, bijvoorbeeld dat toekomstige instellingen hier komen
• geen echte form controls vereist in deze fase

Doel:

• semantische en visuele voorbereiding op latere app-instellingen
• voorkomen dat de modal nu al volledig op Logs leunt en later opnieuw ontworpen moet worden

Niet in scope:

• root-configuratie
• theme-instellingen
• polling- of taskinstellingen
• bookmarkinstellingen
• geavanceerde preferences

5. Logs Tab

De Logs-tab gebruikt de bestaande GET /api/history API.

Doel in v1:

• een compacte lijst van recente acties tonen zonder de hoofdworkspace te verstoren
• dezelfde informatie tonen die voor gebruikers praktisch nuttig is na mkdir, rename, delete, copy en move

Aanbevolen zichtbare velden in v1:

• operation
• status
• hoofdpad of source -> destination
• tijdstip (created_at of compacte datum/tijd)
• foutmelding alleen wanneer status = failed

Weergavevoorstel:

• compacte lijstregels
• recentste bovenaan
• status visueel herkenbaar:
  • queued
  • completed
  • failed
• foutgevallen mogen een tweede compacte regel of muted subregel tonen

Belangrijk:

• Logs vervangt geen tasklijst of taskdetail
• het is een compacte history-weergave in modalvorm
• de dual-pane workspace blijft onaangetast zolang de modal dicht is

6. F2 Placeholder

F2 wordt in deze stap expliciet gereserveerd voor latere Rename.

V1-uitwerking:

• keyboard shortcut: F2
• knop in functiebalk met label passend bij de toekomstige rol, bijvoorbeeld Rename
• nog geen functionele rename-actie via F2

Twee opties:

Optie A:

• knop disabled
• F2 doet niets

Optie B:

• knop klikbaar
• F2 en knop tonen compacte melding: Not implemented yet

Aanbeveling voor v1:

• gebruik een klikbare placeholder met compacte melding Not implemented yet

Motivatie:

• maakt zichtbaar dat de plek bewust gereserveerd is
• voorkomt verwarring waarom F2 volledig ontbreekt
• blijft lichtgewicht zonder nu al rename-semantiek te verschuiven

Belangrijk:

• deze placeholder mag niets veranderen aan de bestaande rename-flow
• bestaande Rename-knop en bestaande file-manager interacties blijven leidend

7. Relatie Met Bestaande Shortcuts

F1 Settings:

• mag geen bestaande paneel- of file-actieflow breken
• werkt alleen als focus niet in een control zit, volgens bestaande shortcutguards
• terwijl de modal open is, mogen paneelshortcuts eronder niet doorwerken

F2 Placeholder:

• mag geen bestaande flow beïnvloeden
• mag vooral F6 Move niet raken
• is semantisch gereserveerd, maar nog niet gekoppeld aan echte rename-logica

Bestaande shortcuts blijven intact:

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

8. UI-impact

Waarschijnlijk te wijzigen frontendbestanden:

• webui/html/index.html
• webui/html/app.js
• webui/html/style.css
• webui/backend/tests/golden/test_ui_smoke_golden.py

Verwachte impact:

• index.html: extra modalcontainer en functiebalkknoppen voor F1 en F2
• app.js: shortcutbinding voor F1, placeholderbinding voor F2, tabs en history-fetch in settingsmodal
• style.css: compacte modal- en tabstyling die past bij de bestaande UI

Backend:

• geen nieuwe backendwijzigingen nodig in deze stap
• Logs gebruikt de reeds bestaande history API

9. Regressierisico

Belangrijkste risico's:

• keyboard conflicts met bestaande shortcutlaag
• te volle functiebalk onder de panelen
• modal focusregels die bestaande paneelnavigatie per ongeluk laten doorwerken
• te grote settingsmodal die de workspace te zwaar onderbreekt

Mitigatie:

• hergebruik bestaande modal- en focusguards
• houd Settings compact en centraal
• laat F1 en F2 exact via dezelfde centrale shortcut-dispatch lopen als andere functiebalkacties
• laat F2 bewust geen echte file-actie starten in deze fase

10. Teststrategie

UI smoke/regressietests:

• controleer dat de functiebalk Settings bevat
• controleer dat een F2-placeholderknop aanwezig is
• controleer dat de settingsmodalcontainer in de HTML aanwezig is
• controleer dat de General- en Logs-tabs aanwezig zijn

Handmatige validatie:

• F1 opent en sluit correct via Escape en X
• F1 blokkeert paneelkeyboardnavigatie terwijl de modal open is
• Logs laadt recente items via /api/history
• F2 toont alleen de placeholderreactie en verandert geen file-flow
• bestaande F6 Move en overige functiebalkacties blijven intact

Aanbevolen v1-richting

Aanbevolen implementatierichting met laag regressierisico:

• voeg Settings toe als compacte modal met tabstructuur
• maak General een nette placeholder
• gebruik Logs als eerste echte inhoud via de bestaande history API
• reserveer F2 zichtbaar als placeholder met compacte Not implemented yet reactie

Waarom dit de veiligste richting is:

• minimale verstoring van de bestaande dual-pane workflow
• geen backenduitbreiding nodig
• future-proof structuur voor settings en historyweergave
• F2 krijgt een zichtbare, maar nog niet semantisch gevaarlijke plek