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

The home feed's cards draw §5's card, row and btn, and the .fcard-* classes leave feed.ts's markup #4279

Merged opened this

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

Merged

The home feed's cards in `src/web/studio/feed.ts` no longer emit any `.fcard-*` class. The type check, `bun scripts/design-lint.ts` and the design-lint, home-walk, feed-page, home-feed and studio tests pass, as does the new test. I did not run the full suite; the forge runs it on this push.

shipped production is serving it deploy 23f74da

opened this

The home feed's cards in src/web/studio/feed.ts no longer emit any .fcard-* class. The type check, bun scripts/design-lint.ts and the design-lint, home-walk, feed-page, home-feed and studio tests pass, as does the new test. I did not run the full suite; the forge runs it on this push.

Each part now uses the §5 component that fits:

  • Who: a plain <strong> in the card's head, next to avatar, nameMark and the kind badge.
  • Text: a <p class="break">, so long unbroken text still wraps.
  • Why: <p class="small muted break">.
  • Reply: <p class="small break" data-placement>, with its #N links unchanged.
  • Thought text: <p class="break"> with each line escaped and a <br /> between lines. .fcard-text used to keep line breaks with white-space: pre-wrap, so runs of spaces are no longer preserved.
  • Reply and decide forms: <form class="stack"> with .input on the textarea. The submit btn sits in a .bar so it keeps the 44px touch height. The forms post the same fields to the same actions, and the textarea keeps maxlength="2000".
  • Dismiss and mute: unchanged.

Not done:

  • Not touched: the stylesheet rules and docs/DESIGN.md, as asked. Part two removes them.
  • field() not used: it drops maxlength on a textarea and adds a visible label, so the textarea is a bare .input instead.
  • row() not used: it is an <li>, which doesn't fit inside a card.
  • flow_card.ts untouched: it still uses fcard-reason and fcard-unblock. It is outside this issue's file list.

Tests:

  • New test/feed-card-markup.test.ts asserts no fcard- appears in a post or a thought. It also checks the words, links, forms, escaping and line breaks are still there.
  • I changed test/home-walk.test.ts, whose assertion matched fcard-who">scribe</strong; it now matches <strong>scribe</strong. That test was tied to the old class name.

Closes #4267

commented

The home feed's cards in src/web/studio/feed.ts no longer emit any .fcard-* class. The type check, bun scripts/design-lint.ts and the design-lint, home-walk, feed-page, home-feed and studio tests pass, as does the new test. I did not run the full suite; the forge runs it on this push.

Each part now uses the §5 component that fits:

  • Who: a plain <strong> in the card's head, next to avatar, nameMark and the kind badge.
  • Text: a <p class="break">, so long unbroken text still wraps.
  • Why: <p class="small muted break">.
  • Reply: <p class="small break" data-placement>, with its #N links unchanged.
  • Thought text: <p class="break"> with each line escaped and a <br /> between lines. .fcard-text used to keep line breaks with white-space: pre-wrap, so runs of spaces are no longer preserved.
  • Reply and decide forms: <form class="stack"> with .input on the textarea. The submit btn sits in a .bar so it keeps the 44px touch height. The forms post the same fields to the same actions, and the textarea keeps maxlength="2000".
  • Dismiss and mute: unchanged.

Not done:

  • Not touched: the stylesheet rules and docs/DESIGN.md, as asked. Part two removes them.
  • field() not used: it drops maxlength on a textarea and adds a visible label, so the textarea is a bare .input instead.
  • row() not used: it is an <li>, which doesn't fit inside a card.
  • flow_card.ts untouched: it still uses fcard-reason and fcard-unblock. It is outside this issue's file list.

Tests:

  • New test/feed-card-markup.test.ts asserts no fcard- appears in a post or a thought. It also checks the words, links, forms, escaping and line breaks are still there.
  • I changed test/home-walk.test.ts, whose assertion matched fcard-who">scribe</strong; it now matches <strong>scribe</strong. That test was tied to the old class name.
Approved

Approved. The feed cards in feed.ts emit no .fcard-* class. They use .break, .stack, .bar, .small, .muted and the btn/badge/avatar parts, which all exist in the base and content styles. Output is still escaped, including thought lines joined with <br />. The forms stay plain POST forms with the same actions, so they work with JavaScript off. The submit button sits in .bar, so the existing .feed .bar .btn rule keeps its 44px touch height. The preview answers 200 and its home page has no fcard markup for me, a guest. The new test would fail without the change, and the home-walk assertion was rightly updated.

Two things I would do next:

  1. In part two, when the .fcard-* rules in feed_style.ts and the .fcard-form .btn rule in style.ts come out, check that the reply textarea keeps a sensible height. The old min-height: 56px; resize: vertical goes with .fcard-form, so rows=2 now decides it. Also move flow_card.ts (fcard-reason, fcard-who, fcard-unblock) off the old classes before those rules are deleted, or its cards lose their styling.
  2. Thought text no longer preserves runs of spaces, because pre-wrap was dropped. That is fine for prose, but say so in the part-two description.
Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs