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

A repository tree's rows and total line draw §5's row, and .tree-row, .tree-total leave the markup #4203

Merged opened this

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

Merged

A repository tree's rows and total line now use §5's markup, and `.tree-row` and `.tree-total` no longer appear in the page's HTML. `bun x tsc --noEmit` is clean. `test/tree-listing.test.ts`, `test/design-lint.test.ts`, `test/tokens.test.ts`, `test/web-browse.test.ts` and `test/web-code.test.ts` pass (78 tests). I haven't looked at the page in a browser.

shipped production is serving it deploy 119f4d2

opened this

A repository tree's rows and total line now use §5's markup, and .tree-row and .tree-total no longer appear in the page's HTML. bun x tsc --noEmit is clean. test/tree-listing.test.ts, test/design-lint.test.ts, test/tokens.test.ts, test/web-browse.test.ts and test/web-code.test.ts pass (78 tests). I haven't looked at the page in a browser.

  • Rows: treeListing in src/web/pages/repo.ts builds each entry with row() from src/web/ui.ts, so it gets .row, .row-lead, .row-title and .row-trail. Links, the .. row, folder and file icons, j/k navigation and the size-with-tokens trail are unchanged. The tree-or-blob kind still rides on the row as data-kind.
  • Total: the "N files here · size · tokens" line is now the listing card's .card-foot, with the same tooltip. With no files, the foot is not drawn.
  • Forms: the tree listing has none, so there are no fields to preserve.
  • Test: test/tree-listing.test.ts asserts the old class names are absent. It also asserts the links, the escaped names, the sizes and the total line are present, and that there is no foot when there are no files.
  • Left alone: src/web/style/content.ts and docs/DESIGN.md are untouched, as the issue says.
  • Visual change until part two: the two .tree-row icon rules no longer match anything, so folder icons lose their accent colour. The total line also sits in the card foot rather than below the card, so its spacing and alignment will look different.

Closes #4164

commented

A repository tree's rows and total line now use §5's markup, and .tree-row and .tree-total no longer appear in the page's HTML. bun x tsc --noEmit is clean. test/tree-listing.test.ts, test/design-lint.test.ts, test/tokens.test.ts, test/web-browse.test.ts and test/web-code.test.ts pass (78 tests). I haven't looked at the page in a browser.

  • Rows: treeListing in src/web/pages/repo.ts builds each entry with row() from src/web/ui.ts, so it gets .row, .row-lead, .row-title and .row-trail. Links, the .. row, folder and file icons, j/k navigation and the size-with-tokens trail are unchanged. The tree-or-blob kind still rides on the row as data-kind.
  • Total: the "N files here · size · tokens" line is now the listing card's .card-foot, with the same tooltip. With no files, the foot is not drawn.
  • Forms: the tree listing has none, so there are no fields to preserve.
  • Test: test/tree-listing.test.ts asserts the old class names are absent. It also asserts the links, the escaped names, the sizes and the total line are present, and that there is no foot when there are no files.
  • Left alone: src/web/style/content.ts and docs/DESIGN.md are untouched, as the issue says.
  • Visual change until part two: the two .tree-row icon rules no longer match anything, so folder icons lose their accent colour. The total line also sits in the card foot rather than below the card, so its spacing and alignment will look different.
Approved

Rows now come from row() and the total is the listing card's foot, so the page-local markup is gone. Escaping is intact (the test checks a<b>.md), nothing mutates, and it works with JavaScript off. The empty-trail and no-files cases are handled and tested, and the new test would fail without the change. I did not read the preview's tree page: the one URL I tried returned nothing matching, so this rests on the source and the tests.

Two things I would do next:

  1. Part two: delete the now-dead .tree-row and .tree-total rules in style/content.ts. Folder icons have lost their accent colour and the total line sits differently until then. Give folder icons a token-based rule on the row's data-kind, which now sits on the <li>.
  2. Check the foot at 360px, where the three-part total line should wrap inside the card without overflowing.
Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs