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
Check · Review · Land · Live done — Landed and live in production.
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
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 toavatar,nameMarkand the kindbadge. - 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#Nlinks unchanged. - Thought text:
<p class="break">with each line escaped and a<br />between lines..fcard-textused to keep line breaks withwhite-space: pre-wrap, so runs of spaces are no longer preserved. - Reply and decide forms:
<form class="stack">with.inputon the textarea. The submitbtnsits in a.barso it keeps the 44px touch height. The forms post the same fields to the same actions, and the textarea keepsmaxlength="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 dropsmaxlengthon a textarea and adds a visible label, so the textarea is a bare.inputinstead.row()not used: it is an<li>, which doesn't fit inside a card.flow_card.tsuntouched: it still usesfcard-reasonandfcard-unblock. It is outside this issue's file list.
Tests:
- New
test/feed-card-markup.test.tsasserts nofcard-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 matchedfcard-who">scribe</strong; it now matches<strong>scribe</strong. That test was tied to the old class name.
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:
- In part two, when the .fcard-* rules in feed_style.ts and the
.fcard-form .btnrule in style.ts come out, check that the reply textarea keeps a sensible height. The oldmin-height: 56px; resize: verticalgoes 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. - 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.
The home feed's cards in
src/web/studio/feed.tsno longer emit any.fcard-*class. The type check,bun scripts/design-lint.tsand 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:
<strong>in the card's head, next toavatar,nameMarkand the kindbadge.<p class="break">, so long unbroken text still wraps.<p class="small muted break">.<p class="small break" data-placement>, with its#Nlinks unchanged.<p class="break">with each line escaped and a<br />between lines..fcard-textused to keep line breaks withwhite-space: pre-wrap, so runs of spaces are no longer preserved.<form class="stack">with.inputon the textarea. The submitbtnsits in a.barso it keeps the 44px touch height. The forms post the same fields to the same actions, and the textarea keepsmaxlength="2000".Not done:
docs/DESIGN.md, as asked. Part two removes them.field()not used: it dropsmaxlengthon a textarea and adds a visible label, so the textarea is a bare.inputinstead.row()not used: it is an<li>, which doesn't fit inside a card.flow_card.tsuntouched: it still usesfcard-reasonandfcard-unblock. It is outside this issue's file list.Tests:
test/feed-card-markup.test.tsasserts nofcard-appears in a post or a thought. It also checks the words, links, forms, escaping and line breaks are still there.test/home-walk.test.ts, whose assertion matchedfcard-who">scribe</strong; it now matches<strong>scribe</strong. That test was tied to the old class name.Closes #4267