The browse and org pages' filters draw §5's filters, and .filters leaves their markup #4342

The filter bars in src/web/pages/browse.ts (an origin repository's issues and pulls lists) and src/web/pages/org.ts (the org page) no longer use .filters. I did not touch the stylesheet or docs/DESIGN.md; part two does that.

• Component used: §5's .bar (with .mb/.mt) draws each bar, and the search forms are <form class="bar">. The state seg, btn, labelChip and empty calls were already §5 and are unchanged.
• Unchanged: every form still submits by GET with the same field names (q, plus hidden state, label and author). The current state and label stay marked, and "Clear filters" and the label chips are still there.
• Not changed: the .break wrapping and the page-local .search class on the input.
• Tests: test/web-browse.test.ts now asserts that the issues list page has no .filters class, still has the bar form with name="q", and still shows the Open / Closed / All / Search words. The new test/filters-markup.test.ts does the same for the org page.
• Checks: tsc, design-lint.ts, test/design-lint.test.ts and the page tests all pass.

I left .filters in apps.ts, origins.ts, search.ts and studio/* because they are outside the files this issue names. A native repository's issues list (studio/lists.ts) is one of them, so it still draws .filters. That means .filters can't be dropped from the stylesheet until they move too.

To try it, open /<org> and /<owner>/<origin-repo>/issues?state=closed&q=x and check that the bar looks and submits as before.

Closes #4294

The filter bars in src/web/pages/browse.ts (an origin repository's issues and pulls lists) and src/web/pages/org.ts (the org page) no longer use .filters. I did not touch the stylesheet or docs/DESIGN.md; part two does that.

• Component used: §5's .bar (with .mb/.mt) draws each bar, and the search forms are <form class="bar">. The state seg, btn, labelChip and empty calls were already §5 and are unchanged.
• Unchanged: every form still submits by GET with the same field names (q, plus hidden state, label and author). The current state and label stay marked, and "Clear filters" and the label chips are still there.
• Not changed: the .break wrapping and the page-local .search class on the input.
• Tests: test/web-browse.test.ts now asserts that the issues list page has no .filters class, still has the bar form with name="q", and still shows the Open / Closed / All / Search words. The new test/filters-markup.test.ts does the same for the org page.
• Checks: tsc, design-lint.ts, test/design-lint.test.ts and the page tests all pass.

I left .filters in apps.ts, origins.ts, search.ts and studio/* because they are outside the files this issue names. A native repository's issues list (studio/lists.ts) is one of them, so it still draws .filters. That means .filters can't be dropped from the stylesheet until they move too.

To try it, open /<org> and /<owner>/<origin-repo>/issues?state=closed&q=x and check that the bar looks and submits as before.

The browse and org filter bars now keep their phone styling after .filters left their markup. I haven't checked it at 360px, because the sandbox has no browser. I only confirmed the new rules sit in src/web/style/content.ts and that the type check and design lint pass. The browse and design-lint tests also pass, along with the new org-page test.

You were right that the search input and the Open/Closed/All segment lost three rules that only the .filters ancestor gave them. I added the matching rules for .bar next to the old ones:

• .bar .search: minimum width 180px, flexible, maximum 320px.
• .bar .seg: capped at the container width and scrolls sideways instead of pushing the page.
• .bar .seg > a at 420px and narrower: smaller padding.

The old .filters rules and docs/DESIGN.md are untouched. Part two can delete the .filters copies once no page uses them.

I kept the org-page test. It builds a server for one assertion, but the web-browse assertions only cover the issues list, so without it nothing checks the org page's markup.

What changed

• The filter bars on a repository's browse issues and pulls lists and on an org's page are drawn with §5's .bar (plus .mb/.mt) instead of .filters.
• The search forms are <form class="bar">.
• The forms still submit by GET with the same fields (q, plus hidden state, label, author). The current filter stays marked, "Clear filters" and the label chips are still there, and nothing a person reads or taps was removed.

Left out

• .filters is still used in apps.ts, origins.ts, search.ts and studio/*, including a native repository's issues list in studio/lists.ts. Those pages are outside the files this issue names.

Try it

• Open /<org> and /<owner>/<origin-repo>/issues?state=closed&q=x.
• At 360px the search input should stay wide, and the segment should scroll rather than widen the page.