fix(webapp): move Queues search and pagination above the table

[claude]

Requested by Matt Aitken, James Ritchie · Slack thread

✅ Checklist

• I have followed every step in the contributing guide
• The PR title follows the convention.
• I ran and tested the code works

---

Testing

Ran the webapp locally against Postgres + Redis with the Queue Metrics UI enabled for the org, seeded 38 queues in one Development environment (two pages at 25 per page) and loaded the Queues page in a browser at 1600×1000.

Checked that:

• Period is the only control left in the top bar's left cluster, and the Pause environment button stays on the right.
• 搜索 and the prev/next arrows render in the new bar between the charts and the table, search left and pagination right.
• The prev/next arrows still page the table (they render because 38 queues span two pages; with a single page the arrows are disabled as before).
• Typing in search still resets to page 1 and filters only the table.
• The classic, non-metrics Queues view is untouched.

Checks run: pnpm --filter webapp run lint, pnpm --filter webapp run typecheck, pnpm run knip, oxfmt --check, and the queue-related webapp tests (queueListPagination, queueMetricsMapping, queueSparklineGrid, queueDepthSeries) — all green.

---

Changelog

Before: the "搜索 queues…" input and the prev/next pagination arrows lived in the toolbar row above the metrics panel, alongside the Period control. Everything above a block reads as controlling that block, so their position implied they filtered the Queued / Running / Allocated / Environment limit tiles and the charts. They never did — they only affect the queue table further down the page. The confusion was sharpest because Period, sitting in the same row, genuinely does drive those tiles and charts, so there was no cue that its neighbours had a different scope.

After: the top bar is page-wide scope only. Period is left-aligned at the start of the row and the Pause environment button stays at the end. 搜索 and pagination move into their own bar placed between the charts and the table — search on the left, pagination on the right — so each control now sits next to the surface it acts on. That costs one extra row of vertical space, which is the right trade for making the scope of each control legible.

How: the queues route stops rendering QueueFilters and PaginationControls inside MetricsLayout.Filters and passes them to a new toolbar prop on MetricsLayout.Content instead. The prop bakes the bar chrome (justify-between, top border, page insets) so it sits flush on the content it scopes and pages can't drift on spacing — the same left/right bar the classic, non-metrics Queues view already renders above its table. No loader, query-param or pagination behaviour changed.

---

Screenshots

Verified in a local browser. The new layout, top to bottom:

1. Top bar: Period: 1 hr at the far left, Pause Development environment… at the far right.
2. Metrics panel: the four stat tiles (Queued / Running / Allocated / Environment limit), then the four charts (Env saturation / Backlog / Scheduling delay p95 / Throttled) — unchanged.
3. 新建 filter bar: 搜索 queues… at the left, the prev/next arrows at the right, sitting directly on top of the table.
4. Queue table: unchanged.

💯

[changeset-bot]

⚠️ No Changeset found

Latest commit: d4b7ad6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR