Devices list — add a per-page-size selector (10/25/50/100/200)

[bdunncompany]

Why

/devices paginates client-side at a fixed 10 rows per page
(apps/web/src/components/devices/DeviceList.tsx:95 — pageSize = 10
default, no consumer overrides). For a partner with several hundred
endpoints, that's a lot of clicking. The data is already fetched in one
shot (fetchWithAuth('/devices?includeDecommissioned=true') returns the
full list with no limit param), so the gating is purely the UI default.

What I built

A working POC running on my own deploy. Behavior:

Before	After
Fixed 10 rows/page, no way to change	"Per page" selector with options 10 / 25 / 50 / 100 / 200, persists to localStorage

Implementation summary:

• State: new effectivePageSize initialized from
  localStorage['breeze.devices.pageSize'], falling back to the prop
  default if the stored value is missing, malformed, or not in the allowed
  set.
• Persistence: localStorage write-through on every change, wrapped
  in try/catch (private mode / quota safe).
• UI: standard <select> next to the existing "Showing X to Y of Z"
  indicator, styled to match the page's other selects (h-10 text-sm rounded-md border). Visible whenever there is at least one device, so
  users can pick 25/page even when 10 fit on one page.
• Page reset: switching size resets currentPage to 1 so the user
  doesn't land on an out-of-range page.
• Backward compat: the existing pageSize?: number prop on
  DeviceList still acts as the default for new browsers; no consumer
  outside DevicesPage passes it, so the public surface is unchanged.

Scope is intentionally minimal:

• Single file (DeviceList.tsx)
• No server change
• No new dependencies
• No new migration

Why localStorage instead of users.settings.devicesPageSize

• Zero round-trip (selector responds instantly).
• No migration / no schema change.
• Per-browser is the right default for "this is how I like to see things
  on this machine"; if a user wants the choice to follow them across
  browsers, that's a follow-up.

Happy to switch to a server-side preference instead if you'd prefer
account-level persistence.

Accessibility

Uses a native <select> element, so keyboard nav, screen-reader labels
(aria-label="Devices per page"), and OS-level form control behavior all
come for free. No custom appearance overrides.

Tests

The POC patch is a single-file change so I have not added a dedicated
DeviceList.test.tsx yet (there is no existing test file for this
component — only its children — so adding one would be the first). Happy
to land a small unit test covering the localStorage read/write helper
along with the PR.

Open questions

• Default: keep 10 as the default, or bump to 25? Asking before I PR.
• Other list pages (Sites, Users, Alerts, Scripts): worth extending
  the same pattern? Easy follow-up; keeping this discussion scoped to
  devices for now.
• Virtualization would beat pagination for 500+ device shops; not in
  scope here.

Patches

One patch against latest main: feat(web): devices list per-page-size selector (10/25/50/100/200, localStorage-persisted) plus a chevron/height
fix folded in.

PR is ready to open whenever you give the nod.

[ToddHebebrand]

Green light — PR welcome.

Answers to your open questions:

• Default: keep 10. Don't want to surprise existing users on first render, and the selector is right there.
• Persistence: localStorage is fine for v1. If a user later wants the choice to follow them across browsers, we can lift it to users.settings.devicesPageSize as a follow-up — no need to over-engineer this PR.
• Other list pages (Sites, Users, Alerts, Scripts): worth extending the same pattern, but keep it out of this PR. Open a follow-up discussion once this lands and we can decide whether to do it as one sweep or piecemeal.
• Virtualization for 500+ device shops: out of scope here, agreed. The fact that we already fetch the full list in one shot is the real ceiling — that's a separate conversation about server-side pagination.

A small unit test for the localStorage read/write helper would be appreciated since DeviceList.tsx doesn't have a test file yet.

[ToddHebebrand]

Shipped — the per-page-size selector (10/25/50/100/200) on the Devices list landed on main in #705 (merged 2026-05-15).

Thanks @bdunncompany. Closing as resolved — reopen if it misbehaves.