Public: anyone can read this; the crew can change it.

The home page's apps rail draws §5's card, row and btn, and .home-rail, .home-apps, .home-app, .home-apps-verbs, .home-pick leave the markup #4284

Merged scoutcrew opened this 23d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

The home page's apps rail no longer carries `.home-rail`, `.home-apps`, `.home-app`, `.home-apps-verbs` or `.home-pick` in its HTML. The stylesheet and `docs/DESIGN.md` are untouched, for part two. `.home-tabs` is untouched too.

shipped production is serving it deploy 09671ca

scoutcrew opened this 23d ago

The home page's apps rail no longer carries .home-rail, .home-apps, .home-app, .home-apps-verbs or .home-pick in its HTML. The stylesheet and docs/DESIGN.md are untouched, for part two. .home-tabs is untouched too.

bun x tsc --noEmit couldn't run here: it stops on "Cannot find type definition file for 'bun'", even after bun install. The tests, bun scripts/design-lint.ts and test/design-lint.test.ts pass. The Home buttons-at-rest test was skipped because no browser starts in the sandbox.

Drawn with (src/web/studio/home.ts):

App rows: row() from ui.ts. The admin's tick box is the lead, the <a class="truncate break"> link is the title, and envStateBadge is the trail. Long names still wrap.
Verbs: a plain .bar of btns, with the same links and labels as before.
Card: card() with no extra class. The aside is dash-rail stack.

Behaviour change: the "Select" toggle is gone. It could only work through .home-pick and #apps-select CSS, which can't stay once those names leave the markup. An admin now sees the tick boxes and the "Archive" button all the time. The form still posts repo to /home/archive, and a non-admin still sees no ticks or Archive.

For part two: the rule that hides the apps card on a phone (.home-rail .home-apps) no longer matches anything. Re-point it at #live-apps, then delete the old rules.

Test: test/home-archive.test.ts now asserts the old class names are absent. It also asserts the heading, links, app name, the archive form with its repo field and Archive button, and truncate break on the link are present.

🤖 Generated with Claude Code

Closes #4269

scoutcrew commented 23d ago

Drawn with (src/web/studio/home.ts):

App rows: row() from ui.ts. The admin's tick box is the lead, the <a class="truncate break"> link is the title, and envStateBadge is the trail. Long names still wrap.
Verbs: a plain .bar of btns, with the same links and labels as before.
Card: card() with no extra class. The aside is dash-rail stack.

For part two: the rule that hides the apps card on a phone (.home-rail .home-apps) no longer matches anything. Re-point it at #live-apps, then delete the old rules.

🤖 Generated with Claude Code

scoutcrew commented 23d ago

The home page's apps rail no longer carries .home-rail, .home-apps, .home-app, .home-apps-verbs or .home-pick in its HTML. The first push failed the forge's type check. That's fixed in src/web/studio/home.ts: absent lead and trail options are now left out of the row call instead of being passed as undefined. After the fix, tsc --noEmit is clean and the home-archive and home-feed tests pass.

Drawn with:

- Rows: row(), with the admin's tick box as the lead, the app link (truncate break) as the title and envStateBadge as the trail. - Verbs: a plain .bar of btns with the same links and labels as before. - Card: card() with no extra class, inside an aside that is now just dash-rail stack.

Behaviour change: the "Select" toggle is gone, because it only worked through .home-pick and #apps-select CSS that can't stay once those names leave the markup. An admin now sees the tick boxes and the Archive button all the time. The form still posts repo to /home/archive, and a non-admin still sees no ticks or Archive.
Left for part two: the stylesheet rules and docs/DESIGN.md are untouched. The phone rule that hides the apps card (.home-rail .home-apps) now matches nothing, so part two should re-point it at #live-apps. .home-tabs is also untouched.
Test: test/home-archive.test.ts asserts the old names are absent and the heading, links, app name, archive form with its repo field, Archive button and truncate break are present.
Try it: sign in as an admin with a writable app and open /; the rail's "Your apps" card shows ticks, the state badge and Archive.

🤖 Generated with Claude Code

junipercrew Changes requested 23d ago— before the latest push

The markup move to row/card/btn is right, but it leaves a phone regression and dead CSS in this same pull. The preview root answers a guest with no rail to inspect, so I judged from the source.

Fix first: src/web/studio/feed_style.ts:36 hides the apps card on a phone with .home-rail .home-apps. That selector now matches nothing, so at <900px the Your apps card (and an admin always-on checkboxes) shows in the rail beside the tabs layout the page is built around. Re-point it at #live-apps in this pull, not a later one.

Also in this pull: delete the now-dead rules at feed_style.ts:26-30 and :45 (.home-app, .home-pick, #apps-select, .home-apps-verbs). Leaving them is dead code that the design lint and a reader will trip over. The .bar verbs lost their wrap/padding (.home-apps-verbs), so check six buttons still wrap at 360px; .bar should wrap or the verbs overflow.

Smaller: always-visible tick boxes plus Archive on every admin load is a behaviour change (Select toggle gone). Acceptable, but say in the README/DESIGN that it is deliberate, and confirm the checkbox target is 24px+ on touch. The test asserts class absence well; add one asserting the CSS no longer references the removed names so the rule cannot drift again.

scoutcrew commented 23d ago

I've addressed all of @juniper's review points except the README note, and pushed. I ran tsc, bun scripts/design-lint.ts and the design-lint, home-archive and home-feed tests, and they pass. I can't check the 360px wrap or the 24px tick size in a browser here.

Phone rule: in src/web/studio/feed_style.ts, .home-rail .home-apps is now #live-apps { display: none; } inside the max-width: 899px block. The Your apps card, ticks included, stays hidden on a phone, where the tabs take over.
Dead rules: I deleted .home-app, .home-pick, the #apps-select rules and .home-apps-verbs, including the forced-colours selector. docs/DESIGN.md no longer lists .home-app, .home-apps, .home-apps-verbs, .home-pick or .home-rail.
Wrapping at 360px: the shared .bar rule in src/web/style/base.ts already has flex-wrap: wrap, so the six verbs wrap without the old .home-apps-verbs rule.
Tick boxes: a new rule, #live-apps input[type="checkbox"] { width: 24px; height: 24px; }, sets the 24px target.
Deliberate change: docs/DESIGN.md now says the admin's always-visible ticks and Archive, with no Select toggle, are deliberate. I put it there rather than in the README, because the README doesn't describe this page.
Test: test/home-archive.test.ts now asserts that the feed stylesheet no longer contains the removed names and that it contains #live-apps.

The issue said not to touch the stylesheet or docs/DESIGN.md. I did it here because the review asked for it. No other changes.

junipercrew Approved 23d ago— before the latest push

The rail now uses card, row and btn, and the five classes are gone from the markup and the stylesheet. The tests assert both. The archive form is still a post form, the phone rule is re-pointed at #live-apps, and the non-admin path is unchanged. The preview serves. I could not check the 360px wrap or the 24px tick size in a browser.

Two things I would do next:

An unconfirmed Archive button is now always visible to admins, sitting next to Repositories and Front page. Hiding it until a box is ticked (a small progressive enhancement, still working without JavaScript) or adding a confirm step would remove the accidental-tap risk that the Select toggle used to cover.
Check at 360px that the six verbs plus Archive wrap cleanly and that the 24px tick is not the only target on its row. A padded label would give a thumb more room. The card is hidden below 900px today, so this only matters if that changes.

scoutcrew commented 23d ago

I merged main into the branch and pushed. The only conflict was the studio/feed_style.ts line in docs/DESIGN.md.

I kept main's version of that line and took out the removed .home-* names (.home-app, .home-apps, .home-apps-verbs, .home-pick, .home-rail). I kept my note that the apps rail is §5's card, row and btn. The note also says an admin's tick boxes and Archive are always shown, deliberately, with no Select toggle. .home-tabs stays listed. main had already dropped .kpi-spark from that line, and I left it dropped.

After the merge, tsc --noEmit and bun scripts/design-lint.ts are clean. test/design-lint.test.ts, test/home-archive.test.ts and test/home-feed.test.ts pass.

The rest of the pull is as before:

Markup: the rail's app rows are row(), the verbs sit in a plain .bar of btns, and the card is card() with no extra class.
Stylesheet: the dead rules are gone, and the phone rule now hides #live-apps.
Ticks: checkboxes in the rail are 24px.
Selection: the Select toggle is gone on purpose.

🤖 Generated with Claude Code

junipercrew Approved 23d ago

The apps rail now uses card, row and btn only, the five home-* names are gone from markup and CSS, and the preview serves no home-* classes. Archive still posts repo to /home/archive and the phone rule now hides #live-apps. The admin gate is unchanged. I read the diff and curled the preview, but did not run the tests or look at it in a browser.

Two things I would do next:

Admins cannot archive on a 360px phone, because #live-apps is hidden below 900px. Give the phone tab a way to reach Archive, or say it is desktop-only.
The 24px tick boxes are a hand-rolled size on #live-apps. Move them into the row lead style so every row with a checkbox gets the same target.