De tweede indeling, met de eis die het verstoppen van de keuze zelf oproept

Ontwerp van de gebruiker, na het testen van de eerste indeling: vijf kleine
widgets op de bovenste rij, certificaatkeuze en uploaden naar een dialoog achter
een menu rechtsboven, activiteitenlog over de volle breedte, en het instelkader
dichtgeklapt met twee kopieerknoppen in plaats van een per clientregel.

Vastgelegd als PLAN.md 4a2 naast 4a1, want die eerste blijft de verantwoording
van wat er staat. Drie dingen staan erbij die uit de brief zelf volgen:

De harde eis. Kiezen achter een menu botst met de ergste toestand die deze app
kent, een verse installatie zonder certificaat, en dat is letterlijk de klem van
0.0.3. De foutmelding bovenaan blijft dus staan en krijgt de knop die de dialoog
opent; de hamburger is de weg terug, niet de enige weg erheen.

Twee teruggedraaide besluiten, opgeschreven zodat niemand ze later herstelt met
een verwijzing naar de oude reden: de kopieerknop per client verdwijnt, en de
afwijzing van een dropdown uit 19-08 verbiedt geen dialoog. Bij de eerste hoort
een voorwaarde: de wallets blijven gegroepeerd onder de vorm die ze willen, want
anders is er wel een adres maar niet meer bij welke wallet het hoort.

Deze indeling haalt bovendien twee koppelingen weg die er alleen waren omdat
kaders naast elkaar stonden. Een daarvan was de hele inhoud van 0.0.13.

Open punt 5 is goedgekeurd en verhuisd naar Beslist; punt 3 stond nog open
terwijl het log al twee versies draait.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harmen
2026-08-27 15:10:06 +02:00
co-authored by Claude Opus 5
parent bcd95facb7
commit decf431416
4 changed files with 150 additions and 32 deletions
@@ -198,6 +198,85 @@ Wat daarbij vastligt en niet per ongeluk mag verschuiven:
de vraag die je stelt. Het staat in `--text-sec` en niet in `--text-ter`, want die laatste is in de lichte
variant `#bbbbbb` op wit en op deze grootte niet te lezen.
### 4a2. De tweede indeling
Opgegeven door de gebruiker op 27-08-2026, nadat hij alles uit de eerste indeling had gezien en getest.
Dit vervangt §4a1 als beschrijving van hoe de pagina eruit hoort te zien; §4a1 blijft staan als
verantwoording van wat er gebouwd is en waarom, want een deel van die redenen geldt nog steeds en een deel
wordt hier bewust teruggedraaid.
**De vorm.**
- **Rij 1: vijf kleine widgets.** Electrum-server, blokhoogte, reactietijd, certificaat, en de zelfcontrole
uit open punt 5. Allemaal even groot en van hetzelfde soort: een titel, één getal of één regel, en
hooguit één onderregel.
- **De certificaatwidget** toont het gekozen certificaat: naam, en het aantal dagen tot vernieuwing. Niet
de keuze zelf.
- **Kiezen, uploaden en afhandelen verhuizen naar een dialoog**, te openen uit een hamburger- of
puntjesmenu rechtsboven.
- **Het activiteitenlog gaat over de volle breedte.**
- **"Setting up your wallet" is dichtgeklapt** en veel compacter. Er zijn feitelijk twee vormen van
hetzelfde adres, dus twee kopieerknoppen; de rest is een opsomming van de wallets die ermee werken.
- **De Electrum-serverwidget wordt kleiner** en verliest onderteksten.
**Wat dit oplevert, los van smaak.** De eerste indeling had twee koppelingen die er alleen waren omdat twee
kaders naast elkaar stonden: de statustegels moesten meerekken met de hoogte van hun buur, en het logblok
en de certificaatlijst moesten samen groeien en krimpen. Dat laatste was de hele inhoud van 0.0.13. Met een
volle-breedte log en vijf gelijke widgets vervalt allebei. Dit is dus geen laag opmaak erbovenop maar
minder mechaniek dan er nu staat.
#### Wat hier bewust teruggedraaid wordt
Twee dingen gaan tegen een eerder besluit in. Ze staan hier opgeschreven zodat een latere sessie ze niet
"herstelt" met een verwijzing naar de oude reden.
1. **De kopieerknop per clientregel wordt weer één knop per vorm.** Op 19-08-2026 is het losse
verbindingsadres met kopieerknop juist wéggehaald, met als reden dat hetzelfde adres al bij elke client
stond in de vorm die díe client wil. Dat blijft waar, maar het weegt nu anders: het kader moet compact
en dichtgeklapt, en dan is een knop per wallet een lange lijst met vrijwel identieke regels.
**Wat daarbij niet verloren mag gaan:** welke wallet welke vorm wil. Die kennis staat in
`Referenties/Clients.md` §4 en is de reden dat er twee vormen zijn. De opsomming hoort daarom
**gegroepeerd onder de twee vormen** te staan, elk met zijn eigen kopieerknop, en niet als één platte
lijst wallets naast twee losse knoppen. Anders staat er wel een adres om te kopiëren maar niet meer bij
welke wallet welk adres hoort, en dat is precies wat dit kader moet vertellen.
2. **De certificaatlijst verhuist naar een dialoog.** Op 19-08-2026 is een dropdown afgewezen omdat je bron,
naam en resterende dagen naast elkaar moet kunnen vergelijken en een verlopen certificaat rood moet
kunnen zijn. **Die reden verbiedt een dialoog niet, hij verbiedt een dropdown**, en een dialoog geeft
meer ruimte dan het kader had. De lijst blijft dus een lijst, nu in de dialoog. Vervang hem daar niet
alsnog door een dropdown omdat het in een dialoog netjes zou staan.
#### De eis die deze indeling zelf oproept
Kiezen verstoppen achter een menu botst met de ergste toestand die deze app kent: **een verse installatie
heeft nog geen certificaat, en de pagina is de enige plek waar je er een kiest.** Dat is niet theoretisch;
het is de klem van 0.0.3, waar de app niet startte omdat er geen certificaat was en je dus niet bij de
pagina kwam waarop je er een koos.
Daaruit volgt een harde eis voor deze indeling: **de bestaande foutmelding bovenaan bij "geen certificaat
actief" blijft staan, en krijgt de knop die de dialoog opent.** De hamburger is de weg terug voor wie het
later nog eens wil wijzigen, nooit de enige weg erheen. Dezelfde redenering geldt voor een verlopen of
bijna verlopen certificaat: dat staat al als waarschuwing bovenaan en die verhuist niet mee de dialoog in.
#### Details die vastliggen
- **Vijf widgets passen niet in twaalf kolommen.** Rij 1 krijgt daarom een eigen raster van vijf gelijke
kolommen in plaats van een deling van het twaalfkolomsraster. Wat er bij het versmallen moet gebeuren,
hoort erbij bepaald te worden: op mobiel stapelen ze, en daartussen zit een breedte waarop vijf te smal
zijn. Dit is de eerste indeling met een rij die niet netjes in tweeën valt, dus dit is nieuw werk en geen
variant op het bestaande.
- **De leesvolgorde in de HTML blijft de bedoelde volgorde**, zonder `order` in de CSS. Die regel uit §4a1
geldt onverkort, ook voor de vijf widgets en voor het dichtgeklapte kader.
- **Dichtklappen met `details`/`summary`**, niet met eigen JavaScript: dat is toetsenbordbereikbaar en
werkt zonder script. Let op de valkuil die 0.0.13 opleverde: een blok dat opengaat mag geen gat
achterlaten in de rij eronder.
- **De dialoog met het `dialog`-element**, om dezelfde reden: focus en Escape zitten erin. Wat er in moet
gebeuren is precies wat het certificaatkader nu doet, inclusief het uploaden en de melding dat de pagina
níet zelf zegt dat het gelukt is (§4b en fase 4b van `TAKEN.md`).
- **De zelfcontrole-widget is nieuw werk in de agent**, geen opmaak. Zie open punt 5: de agent zet een
TLS-verbinding naar zijn eigen poort op en maakt de handdruk af. Dat bewijst luisteren, certificaat en
doorverbinding in één keer.
### 4b. Waarschuwen op een aflopend certificaat
Met de einddatum in `status.json` is dit een vergelijking in de pagina zelf: onder de dertig dagen een