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

The inbox's ask cards draw §5's card and buttons #4658

Merged opened this

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

Merged

The inbox's ask cards no longer use any `ask-*` class, and the stylesheet rules for them are gone. The focused tests pass (`test/asks-rank.test.ts`, `test/asks-waiting.test.ts`, `test/design-lint.test.ts`) and `bun scripts/design-lint.ts` is clean. `bun x tsc --noEmit` reported a missing `bun` type definition, so the type check did not run.

shipped production is serving it deploy 1d071fd

opened this

The inbox's ask cards no longer use any ask-* class, and the stylesheet rules for them are gone. The focused tests pass (test/asks-rank.test.ts, test/asks-waiting.test.ts, test/design-lint.test.ts) and bun scripts/design-lint.ts is clean. bun x tsc --noEmit reported a missing bun type definition, so the type check did not run.

What changed

  • The ask markup lives in src/web/studio/asks_page.ts, not asks.ts, so the change is there. Each ask is a plain §5 .card with §5 buttons.
  • The ask's kind is now always shown, as "Ready to ship · owner/repo", and its wait chip is a .badge outline.
  • The select boxes are .check labels, and an ask's actions sit in a .bar mt line.
  • A grouped card is now a plain .list of .rows.
  • The ask- rules are deleted from src/web/style/content.ts, and the .ask- line is removed from docs/DESIGN.md §5d. .live-toggle stays in that line.
  • docs/design/baseline.json is unchanged because the lint reported no counts to lower.
  • test/asks-rank.test.ts has a new test that fetches the inbox and asserts the card, the primary button in the .bar, and that no ask-* class appears in the markup or the stylesheet. I removed the old phone-layout test and the "Show all" disclosure assertions, since they tested the removed rules.
  • test/asks-waiting.test.ts has one regex updated to match the .check label instead of class="ask-pick".

What I left out

  • The phone-only treatment is gone: edge-to-edge rows, the 44px actions, the "More" disclosure, and the "Show all N" group fold. On every width the ask now shows all its actions in a line, its rows are always open, and the kind and its short sentence both appear.
  • ask_to_live.ts and milestones.ts are untouched. Their "ask-to-live" is a different thing from the card.

To try it: open /asks with a green pull waiting.

Closes #4615

commented

The inbox's ask cards no longer use any ask-* class, and the stylesheet rules for them are gone. The focused tests pass (test/asks-rank.test.ts, test/asks-waiting.test.ts, test/design-lint.test.ts) and bun scripts/design-lint.ts is clean. bun x tsc --noEmit reported a missing bun type definition, so the type check did not run.

What changed

  • The ask markup lives in src/web/studio/asks_page.ts, not asks.ts, so the change is there. Each ask is a plain §5 .card with §5 buttons.
  • The ask's kind is now always shown, as "Ready to ship · owner/repo", and its wait chip is a .badge outline.
  • The select boxes are .check labels, and an ask's actions sit in a .bar mt line.
  • A grouped card is now a plain .list of .rows.
  • The ask- rules are deleted from src/web/style/content.ts, and the .ask- line is removed from docs/DESIGN.md §5d. .live-toggle stays in that line.
  • docs/design/baseline.json is unchanged because the lint reported no counts to lower.
  • test/asks-rank.test.ts has a new test that fetches the inbox and asserts the card, the primary button in the .bar, and that no ask-* class appears in the markup or the stylesheet. I removed the old phone-layout test and the "Show all" disclosure assertions, since they tested the removed rules.
  • test/asks-waiting.test.ts has one regex updated to match the .check label instead of class="ask-pick".

What I left out

  • The phone-only treatment is gone: edge-to-edge rows, the 44px actions, the "More" disclosure, and the "Show all N" group fold. On every width the ask now shows all its actions in a line, its rows are always open, and the kind and its short sentence both appear.
  • ask_to_live.ts and milestones.ts are untouched. Their "ask-to-live" is a different thing from the card.

To try it: open /asks with a green pull waiting.

commented

The inbox's ask cards now draw §5's .card, .btn and .badge, and no ask-* class is left in the markup or the stylesheet. After main moved, the check failed on a merge conflict in docs/DESIGN.md. I merged origin/main and pushed again; I haven't seen the forge's re-run yet.

I kept main's version of the apps/runs line and dropped the ask-card classes from the search-results line, leaving .live-toggle. The three tests I ran pass (test/asks-rank.test.ts, test/asks-waiting.test.ts, test/design-lint.test.ts), and bun scripts/design-lint.ts is clean. I did not run bun x tsc --noEmit again after the merge; the earlier run reported a missing bun type definition.

What changed

  • Each ask is a plain card; its kind always shows ("Ready to ship · owner/repo") and its wait chip is a .badge. The select boxes are .check labels and the actions sit in a .bar line.
  • The ask- rules are gone from src/web/style/content.ts, and the .ask- classes are gone from docs/DESIGN.md §5d.
  • The markup lives in src/web/studio/asks_page.ts, not asks.ts.
  • docs/design/baseline.json is unchanged because the lint reported no counts to lower.
  • The new test in test/asks-rank.test.ts fetches the inbox with a waiting ask and asserts the §5 card, the primary button, and that no ask-* class appears in the markup or the stylesheet. I removed the old phone-layout and "Show all" assertions, since they tested the deleted rules. One regex in test/asks-waiting.test.ts now matches the .check label.

What I left out

  • The phone-only layout is gone. That means edge-to-edge rows, 44px actions, the "More" disclosure and the "Show all N" fold. Every width now shows all of an ask's actions and rows.
  • ask_to_live.ts and milestones.ts are untouched, since their "ask-to-live" is not the card.

To try it: open /asks with a green pull waiting.

Approved — before the latest push

Approved. Ask cards now use §5 .card, .btn, .badge, .check and .bar, with no ask-* class left in the markup or the stylesheet. DESIGN.md §5d is updated to match. The new test asserts the §5 card, the primary button inside .bar and that no ask-* class remains. The deleted phone-layout assertions tested only the deleted rules. §5 still gives 44px touch targets under pointer: coarse (.check and buttons), and .bar wraps. I could not see the preview body: /asks answers 303 without a session. I read the diff only.

Two things to do next:

  1. The phone fold is gone: a grouped ask card now always lists every row, so a few groups can push the composer past the fold on a 360px screen. If that bites, use §5 disclosure() for the group instead of a bespoke details element.
  2. The kind and short sentence now show on every width, which makes phone rows longer. Check them at 360px and trim the sentence if the title wraps badly.

The PR body says tsc was not run because of a missing bun type definition. Run bun install first so the check does not surprise you.

commented

I merged main into the branch and pushed it. The conflict was in docs/DESIGN.md, on the "search results" line of §5d.

  • Resolution: I kept this branch's removal of the ask-* classes and main's removal of .live-toggle, so that line is gone entirely. Keeping either side's version would have listed classes the stylesheet no longer defines.
  • Tests: I ran bun test test/design and bun scripts/design-lint.ts, and both pass. A full bun test ran in the background and never printed a result. I did not run the rest of the suite here, so the forge's check on this push is the full-suite verdict.

The inbox's ask cards draw §5's card and buttons, and the ask-* rules leave the stylesheet.

Approved

Approved. The ask cards now use §5 .card, .btn, .badge, .check and .bar. No ask-* class is left in the markup or the stylesheet, and the DESIGN.md line is gone. The new test asserts that and would fail without the change. The ask-* rules are removed. Touch targets still come from the shared rules: .btn and .check are 44px under pointer: coarse (DESIGN.md:121, components.ts:120). I did not get a signed-in view of /asks on the preview, because it answered 303 to me, so I judged the phone layout from the source only. Next, two things: (1) check /asks at 360px with a signed-in session and many actions per ask. The old More fold is gone, so .bar must wrap cleanly and not push the card wider. (2) Run bun x tsc --noEmit after bun install. The builder says it never ran.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs