Various local explorer UI fixes

[emily-shen]

Fixes #13559

• Add scrolling to the D1 table selector, instead of cutting off the table list. This is also now a kumo dropdown component instead of a base-ui select.

• Show table headers in R2 empty states. In the future this could be an upload drop zone.

• Persist the delimiter search param when navigating to R2 object details
• Hide breadcrumb path segments when viewing R2 objects in ungrouped mode. So when we're not in grouped mode, the breadcrumb shows 'foo/index.js' instead of 'foo > index.js'.

---

• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because:
• Public documentation
  • Cloudflare docs PR(s):
  • Documentation not necessary because: ui updates

A picture of a cute animal (not mandatory, but encouraged)

[changeset-bot]

🦋 Changeset detected

Latest commit: d668364

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

Changeset Review

File: .changeset/local-explorer-ui-refinements.md

✅ Version Type: patch is appropriate - these are UI refinements and small improvements

✅ Changelog Quality: Meaningful description with specific bullet points explaining each refinement

✅ Markdown Headers: No h1/h2/h3 headers found

✅ Analytics: No analytics changes

✅ Experimental Features: Not applicable

---

✅ All changesets look good

[ask-bonk]

I've now thoroughly reviewed all the changes. Let me verify one more thing about the R2ObjectTable empty state - the colSpan={6} to make sure it matches the number of columns:

Looking at the table headers in R2ObjectTable.tsx:

1. Checkbox column (line 283)
2. Objects (line 293)
3. Type (line 294)
4. Size (line 295)
5. Modified (line 296)
6. Actions/BulkActionMenu column (line 297)

That's 6 columns, matching colSpan={6}. Good.

After thorough review, I found one issue worth flagging:

In object.$.tsx, the useRouterState() hook is called at line 185, after function declarations (handleDownload at line 143 and handleDelete at line 153). While this technically doesn't violate the Rules of Hooks (there are no conditional returns before it), it's fragile and unconventional. React hooks should be grouped together at the top of the component. If someone later adds an early return between the hooks and this useRouterState() call, it would silently become a hooks violation. But this is a style concern and not actionable per my guidelines (not a logic bug, security issue, or backward compatibility violation).

The validateSearch on the parent route ($bucketName.tsx) only allows { worker?: string }, which means delimiter is not formally part of the object route's search schema. Using useRouterState() with raw URLSearchParams to read it is a workaround. This works, but if the parent route's validateSearch were ever made strict enough to strip unknown params, this would break. However, TanStack Router preserves extra search params by default, so this is fine in practice.

Everything else looks solid: the theme mode simplification handles legacy "system" values gracefully, the empty state renders inside the table correctly, the breadcrumb changes are consistent, the e2e test is well-structured, and the changeset is appropriate.

LGTM

github run

[pkg-pr-new]

create-cloudflare

npm i https://pkg.pr.new/create-cloudflare@13562

@cloudflare/kv-asset-handler

npm i https://pkg.pr.new/@cloudflare/kv-asset-handler@13562

miniflare

npm i https://pkg.pr.new/miniflare@13562

@cloudflare/pages-shared

npm i https://pkg.pr.new/@cloudflare/pages-shared@13562

@cloudflare/unenv-preset

npm i https://pkg.pr.new/@cloudflare/unenv-preset@13562

@cloudflare/vite-plugin

npm i https://pkg.pr.new/@cloudflare/vite-plugin@13562

@cloudflare/vitest-pool-workers

npm i https://pkg.pr.new/@cloudflare/vitest-pool-workers@13562

@cloudflare/workers-editor-shared

npm i https://pkg.pr.new/@cloudflare/workers-editor-shared@13562

wrangler

npm i https://pkg.pr.new/wrangler@13562

commit: d668364

[workers-devprod]

Codeowners approval required for this PR:

• ✅ @cloudflare/wrangler

Show detailed file reviewers

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 5 additional findings.

[emily-shen]

@NuroDev removed any sidebar fixes, this PR is now just the TableSelect scroll fix and some minor R2 fixes.

[workers-devprod]

Codeowners reviews satisfied