From fef21d9d5a65c6d28bd6292959cf508f148fc751 Mon Sep 17 00:00:00 2001 From: Mick <103085050+Apolloccrypt@users.noreply.github.com> Date: Fri, 4 Sep 2026 12:18:05 +0200 Subject: [PATCH] The signed-in homepage opens on the work, not on three buttons Signed in, the homepage was a band, a heading, one paragraph and three buttons over an empty screen down to the footer. Read on a phone it looked like a page that had failed to load rather than the front of a product. It now opens the way BeerWeer does. One large figure with a small drawn object beside it: the open requests when there are any, otherwise the signature balance for the month, which the buyer review of 5 September found nowhere on the site while the route already carried it. Under it a mono strip of secondary readings, a card of the requests still waiting with who each one waits on and since when, a card of the last documents with their state and date, and one line about the plan with its end date and a Renew from seven days out. The three actions stay, under the work instead of instead of it, and the paragraph that described them in prose is gone. A new account gets its own card with its own object and the two first steps, at the same weight as the rest, so the first screen is full rather than a hole; the action row is dropped in that one state because the card already carries both buttons and the nav keeps carrying Documents. Every route being down gives one calm sentence in the place the figure would have been, no number invented and no status code shown. Everything comes from the routes /dashboard and /account already read, on the session cookie. No key reaches the browser, no new route was needed and none was added. One thing this deliberately does NOT say: "waiting for your signature". /api/user/documents is the sent list. relay/envelope.js indexes an envelope under its creator only, there is no reverse index from a party to the envelopes it appears in, and an invited signer reaches his document by the link in the mail. So the figure counts requests waiting ON a signature and says exactly that. An inbound worklist needs a party index written at create() time; that is a data-model change and not this PR. tests/signed-in-home.test.mjs pins the four states with the API mocked the way navigation-shell mocks it: the figure equals the number in the mock, no state leaves a gap over 120px between the last thing drawn and the footer, no document is printed twice on one screen, and no relay vocabulary reaches the words. --- frontend/index.html | 174 +++++++++++++- frontend/js/home-auth.js | 420 ++++++++++++++++++++++++++++++++-- tests/README.md | 9 +- tests/signed-in-home.test.mjs | 259 +++++++++++++++++++++ 4 files changed, 841 insertions(+), 21 deletions(-) create mode 100644 tests/signed-in-home.test.mjs diff --git a/frontend/index.html b/frontend/index.html index 391ea329..6cc9b570 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -97,6 +97,104 @@ .hp-proof{font-size:14.5px;line-height:1.5;color:var(--fg-mid);margin:10px 0 0;max-width:40ch} @media (min-width:900px){.hp-proof{display:none}} +/* ---------- signed in: the work, not a page of buttons ---------- + Mick read this on his phone on 4 September and got a band, his name, one + paragraph and three buttons over an empty screen: "I see ONLY 3 buttons, as + if it were a test page." The yardstick he set is BeerWeer, which opens on the + one reading that matters (22 degrees), draws a small object next to it, and + lays the rest out in quiet cards underneath. + + So this hero carries the same rhythm: + + one figure, large, with a small drawn object beside it + a hairline strip of secondary readings under it, in mono + a card of the requests that are still open, one row each + a card of the last three documents, with a way to all of them + one line about the plan + the three buttons, UNDER the work rather than instead of it + + Every card holds its height whether or not it has data, so a new account gets + a page that looks intended rather than a page with a hole in it. The figures + come from the routes /dashboard already reads; js/home-auth.js fills them and + hides whatever did not arrive. */ +.hw{margin-top:22px;max-width:40rem} +.hw-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:16px 16px 18px;margin-top:16px} +.hw-kicker{font-family:var(--hp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:0;font-weight:500;display:flex;align-items:center;gap:8px} +.hw-kicker::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ochre)} + +/* the figure card. The number is cream and the qualifier next to it is dim, + the same weighting BeerWeer gives 22 and the degree sign. */ +.hw-figure{min-height:208px;display:flex;flex-direction:column} +.hw-figure-body{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex:1 1 auto} +.hw-figure-words{min-width:0} +.hw-read{display:flex;align-items:baseline;gap:10px;margin-top:10px} +.hw-num{font-size:clamp(3.4rem,16vw,4.8rem);line-height:.9;font-weight:700;letter-spacing:-.045em;color:var(--fg)} +.hw-of{font-family:var(--hp-mono);font-size:clamp(1rem,4.2vw,1.3rem);color:var(--fg-dim)} +.hw-cap{font-size:16px;line-height:1.35;font-weight:600;color:var(--fg);margin:12px 0 0;max-width:20ch} +.hw-sub{font-size:14px;line-height:1.5;color:var(--fg-mid);margin:6px 0 0;max-width:34ch} + +/* the small drawn object: the band's own hand, one sheet with a seal. */ +.hw-obj{flex:0 0 auto;width:88px;height:88px;display:block;margin-top:4px} +@media (max-width:359px){.hw-obj{width:68px;height:68px}} + +/* the strip of secondary readings, the H / L / humidity row of this page. */ +.hw-strip{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--hp-mono);font-size:12px;letter-spacing:.04em} +.hw-strip-item{display:inline-flex;align-items:baseline;gap:7px} +.hw-strip-lab{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px} +.hw-strip-val{color:var(--fg);font-weight:600} + +/* the two lists. One row per document: a status dot, the name, the date in + mono, and the progress. Rows read; they do not pretend to be buttons. */ +.hw-list-card{min-height:150px;display:flex;flex-direction:column} +.hw-list{list-style:none;margin:12px 0 0;padding:0;flex:1 1 auto} +.hw-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)} +.hw-row:first-child{padding-top:2px} +.hw-row:last-child{border-bottom:0} +.hw-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--fg-dim);margin-top:6px} +.hw-dot.wait{background:var(--ochre)} +.hw-dot.busy{background:var(--teal)} +.hw-dot.done{background:rgba(var(--tint),.42)} +.hw-row-main{min-width:0;flex:1 1 auto} +.hw-name{display:block;font-size:15px;font-weight:600;color:var(--fg);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.hw-meta{display:block;font-family:var(--hp-mono);font-size:11.5px;letter-spacing:.06em;color:var(--fg-mid);margin-top:3px} +.hw-tail{flex:0 0 auto;font-size:12.5px;color:var(--fg-mid);text-align:right;line-height:1.35;padding-top:1px} +.hw-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--fg-mid);text-decoration:underline;text-underline-offset:4px} +.hw-more:hover,.hw-more:focus-visible{color:var(--fg)} + +/* a new account. The same card, the same height, its own object: nothing here + is allowed to read as a page that failed to load. */ +.hw-empty{min-height:196px;display:flex;flex-direction:column;justify-content:center} +.hw-empty-body{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} +.hw-empty strong{display:block;font-size:17px;line-height:1.3;color:var(--fg);margin:10px 0 6px} +.hw-empty p{font-size:14.5px;line-height:1.6;color:var(--fg-mid);margin:0;max-width:34ch} +.hw-empty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} + +/* the plan, one line, and a way to renew only once the term is close. */ +.hw-plan{font-size:14px;line-height:1.55;color:var(--fg-mid);margin:18px 0 0} +.hw-plan b{color:var(--fg);font-weight:600} +.hw-renew{color:var(--ochre);text-decoration:underline;text-underline-offset:4px;margin-left:8px;font-weight:600;white-space:nowrap} +.hw-renew:hover,.hw-renew:focus-visible{color:var(--ochre-2)} + +/* a route did not answer. One calm line inside the card that would have held + the reading, so the shape of the page does not change under a reader. */ +.hw-quiet{font-size:15px;line-height:1.6;color:var(--fg-mid);margin:14px 0 0;max-width:34ch} + +html[data-session="in"] [data-home="in"] .home-actions{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} +/* A new account already has both first steps inside its own card, so the row + underneath would be the same two buttons a second time. js/home-auth.js sets + data-hw-state="empty" and this takes the repeat away; Documents stays one tap + away in the nav's user menu, which every signed-in page carries. */ +.hw[data-hw-state="empty"] + .home-actions{display:none} + +@media (min-width:900px){ + .hw{max-width:none} + .hw-figure{min-height:236px} + .hw-num{font-size:5.4rem} + .hw-obj{width:108px;height:108px} + .hw-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} + .hw-cols > .hw-card{margin-top:0} +} + /* the art: a document that gets signed, sealed, and then is gone. Desktop only; on a phone the band is the picture. */ .hp-art{position:relative;z-index:1;height:150px;pointer-events:none;user-select:none} .hp-art-glow{position:absolute;inset:-40% -20%;background: @@ -426,7 +524,78 @@

Get documents signed and send files safely, from your browser.