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

The /explore page speaks the home page's language, with looks before and after #9687

Merged scoutcrew opened this 2d ago

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

Merged

`/explore` now follows the home page's type and spacing. The before/after looks at 1440 and 390, light and dark, are not on this pull, because there is no Chromium in my sandbox. The measured 390 px no-sideways-scroll tests in `test/explorer-fit.test.ts` were skipped here for the same reason, so the forge's check is the first run of those. The preview of this pull will show the page, but someone n…

shipped production is serving it deploy 4cb4bc0

scoutcrew opened this 2d ago

/explore now follows the home page's type and spacing. The before/after looks at 1440 and 390, light and dark, are not on this pull, because there is no Chromium in my sandbox. The measured 390 px no-sideways-scroll tests in test/explorer-fit.test.ts were skipped here for the same reason, so the forge's check is the first run of those. The preview of this pull will show the page, but someone needs to capture the looks.

The issue named src/web/pages/explorer.ts, but that is the code browser's file column. The /explore page is src/web/studio/explore.ts, so the change is there.

What changed

The kinds (All, Apps, People, and Forges for admins) are now tabs() as on home, instead of a box-style segmented control.
Sort and time window stay as one segmented control each, in a small line below the tabs.
"Show archived" is now a muted link instead of a button. It keeps aria-pressed and the same label and URL.
The rows sit on a bare card (.card.bare), so they have no box or borders around them. "Make it yours" is still a button on each copyable row.

What I left alone

Ranking, the ?q= line, the empty states and the row wording are unchanged, so the terminal's explore search still uses the same words.
The 390 px wrapping rules ([data-explore]) are unchanged.
No new CSS class, so the area note is a short paragraph appended to docs/design/areas/home.md.

Checks

bun scripts/design-lint.ts and bun x tsc --noEmit pass.
The explore-related tests pass: explorer-fit, explore-rank, explore-speed, archive-web, web-browse and design-lint.
I added a test in test/explorer-fit.test.ts for the tabs, the bare card, "Show archived" and "Make it yours".

To try it Open /explore on the preview of this pull.

🤖 Generated with Claude Code

Closes #9645

scoutcrew commented 2d ago

The issue named src/web/pages/explorer.ts, but that is the code browser's file column. The /explore page is src/web/studio/explore.ts, so the change is there.

What changed

The kinds (All, Apps, People, and Forges for admins) are now tabs() as on home, instead of a box-style segmented control.
Sort and time window stay as one segmented control each, in a small line below the tabs.
"Show archived" is now a muted link instead of a button. It keeps aria-pressed and the same label and URL.
The rows sit on a bare card (.card.bare), so they have no box or borders around them. "Make it yours" is still a button on each copyable row.

What I left alone

Ranking, the ?q= line, the empty states and the row wording are unchanged, so the terminal's explore search still uses the same words.
The 390 px wrapping rules ([data-explore]) are unchanged.
No new CSS class, so the area note is a short paragraph appended to docs/design/areas/home.md.

Checks

bun scripts/design-lint.ts and bun x tsc --noEmit pass.
The explore-related tests pass: explorer-fit, explore-rank, explore-speed, archive-web, web-browse and design-lint.
I added a test in test/explorer-fit.test.ts for the tabs, the bare card, "Show archived" and "Make it yours".

To try it Open /explore on the preview of this pull.

🤖 Generated with Claude Code

scoutcrew commented 2d ago

The preview itself was never broken. The deploy log shows the app booting and /explore answers 200 on the preview. What failed was the gate, which requires a commit message with a Try: line (at least 10 characters) when a pull changes src/web/studio/explore.ts.

I pushed an empty commit with Try: open /explore on the preview; kinds are tabs, rows sit on a bare card. bun scripts/gate.ts is clean after it, and nothing else changed.

The earlier checks still stand. design-lint, tsc and the explore tests pass. The 390 px phone-fit tests are skipped here because there is no Chromium, so the forge's check is the first run of those. I can't capture the before and after looks at 1440 and 390, light and dark, from here, so someone needs to add them.

To try it: open /explore on the preview of this pull.

🤖 Generated with Claude Code

scoutcrew commented 2d ago

The failing test was explore > the page draws §5's row and filters in test/explore.test.ts. It asserted the old filter markup, <div class="bar mb">, which my change replaced. The test was out of date rather than the code being wrong, so I changed the test.

It now expects <nav class="tabs" aria-label="Kind"> for the kinds and <div class="bar mb small"> for the sort and time line. The rest of that test is unchanged: the row and row-title classes, no filters class, and no explore- class.

test/explore.test.ts and test/explorer-fit.test.ts pass here (35 passed, 3 skipped), and bun scripts/gate.ts is clean. The 3 skipped tests are the 390 px phone-fit measurements; they need Chromium, which this sandbox doesn't have. I only ran those two files, not the full suite. The commit carries the Try: line.

The before and after looks at 1440 and 390, light and dark, are still not on this pull, because I can't capture them from here.

To try it: open /explore on the preview of this pull.

🤖 Generated with Claude Code

junipercrew Changes requested 2d ago— before the latest push

The restyle itself is sound: kinds are tabs(), rows sit on a bare card, ranking/Make it yours/URL line are untouched, no new class, tests updated. Two things to fix. (1) Box 3 is unmet: no looks at 1440 and 390, light and dark, before and after are on the pull. Capture them (a person or a Chromium-equipped run) and attach them. This is the first thing to fix. (2) On a 360px phone, "Show archived" is now a bare muted inline link with no tap-target size, where it was a sized button; give it the same 44px hit area the home doors use (#9584) or put it inside the filter line in a way that reaches one tap comfortably. Also, the sort and time seg controls are still boxed pills (principle 6, a box around a thing); say in the area note why they stay, or drop to plain links. The new test in explorer-fit.test.ts only checks substrings; fine, but the 390 measured tests have not run anywhere yet, so confirm the check runs them green.

scoutcrew commented 2d ago

I fixed the "Show archived" tap target and wrote down why sort and time stay boxed. I did not capture the 1440/390 looks, so box 3 is still unmet.

What changed

Show archived: on /explore it now carries the existing home-doors class. That gives it the same 44px hit area and accent link style as the home doors (#9584), with no box and no new class (src/web/studio/explore.ts).
Sort and time controls: I kept them as seg pills rather than plain links. The note in docs/design/areas/home.md now says why: they are small either/or switches where the current choice has to read at a glance, and plain links would blur them with the tabs above.

What I did not do

Looks: no before/after screenshots at 1440 and 390, light and dark, are attached. This sandbox has no Chromium that starts, so I couldn't take them. They need a person or a Chromium-equipped run.
Measured 390 tests: they have not run here either. test/explorer-fit.test.ts skipped its phone-measurement tests for the same reason, so they run for the first time in the forge's check on this push. Please confirm they come back green.

What ran: the explore* and explorer-fit tests (84 pass, 3 skip), tsc --noEmit, design-lint and gate all passed.

To try it: open /explore at 360px on the preview and tap "Show archived".

junipercrew Approved 2d ago

Earlier asks: the Show archived tap target is met (it wears home-doors, 44px, no box). The reason sort and time stay boxed is written in docs/design/areas/home.md, which is met. The preview serves /explore with the Kind tabs and the Show archived link, and the page works with JavaScript off because everything is a link. Two things I would do next. First, the before/after looks at 1440 and 390, light and dark, are still not attached to the pull (box 3). Second, confirm the forge check passes explorer-fit.test.ts, since the 390px measurements were skipped in the builder sandbox. Non-blocking: the preview showed no rows, so the card bare list was not visible there. Non-blocking: the new explorer-fit test asserts markup only.

trevatoowner commented 2d ago

Left #9645 open: 1 unticked item remain (Looks at 1440 and 390, light and dark, before and after, are on the pull.).