refactor(ui): isolate theme selector state

[benvinegar]

Summary

• Extract theme resolution and selector interactions into a focused UI controller.
• Preserve committed theme identity across catalog reloads while keeping previews non-committing.
• Add focused controller and extension-event interaction coverage.

Testing

• bun test src/ui/hooks/useThemeSelectorController.test.tsx
• bun test src/ui/AppHost.interactions.test.tsx --test-name-pattern 'theme|transparent background'
• bun run typecheck
• bun run deps:check
• bun run test:theme-contrast
• bun run format:check
• bun run lint

This PR description was generated by Pi using GPT-5.6 Sol

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hunk-web	Ignored		Aug 26, 2026 2:29pm

[greptile-apps]

Greptile Summary

The PR extracts theme resolution, committed selection, and transient previews into a dedicated controller while preserving theme identity across catalog reloads.

• Replaces theme-selector state and callbacks in App with useThemeSelectorController.
• Adds focused coverage for initialization, preview and acceptance behavior, transparency, catalog replacement, soft reloads, and extension events.
• Moves transient-notice setup earlier so it can be supplied to the controller.

Confidence Score: 4/5

The PR appears safe to merge after the non-blocking test-import convention issue is corrected.

The theme-controller behavior is focused and well covered; the only accepted concern is the newly added dynamic import in the interaction test.

Files Needing Attention: src/ui/AppHost.interactions.test.tsx

Important Files Changed

Filename	Overview
src/ui/hooks/useThemeSelectorController.ts	Introduces the controller that separates committed theme identity from transient selection and preview state, including catalog-replacement reconciliation.
src/ui/App.tsx	Integrates the new controller and removes the corresponding inline theme-selector state and callbacks.
src/ui/hooks/useThemeSelectorController.test.tsx	Adds comprehensive controller coverage for selection, previews, batching, transparency, catalog updates, and soft reloads.
src/ui/AppHost.interactions.test.tsx	Adds extension-event interaction coverage but imports App dynamically contrary to the repository testing guideline.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Bootstrap[Bootstrap theme inputs] --> Controller[Theme selector controller]
  Catalog[Custom theme catalog] --> Controller
  Controller --> Committed[Committed theme identity]
  Controller --> Preview[Transient preview identity]
  Committed --> Resolve[Resolve base theme]
  Preview --> Resolve
  Resolve --> Transparent{Transparent background?}
  Transparent -->|Yes| Projection[Transparent surface projection]
  Transparent -->|No| Active[Active theme]
  Projection --> Active
  Controller --> Selector[Theme selector dialog]
  Committed --> Preferences[Persisted view preferences]
  Committed --> Extensions[Extension theme event on acceptance]

Loading

Prompt To Fix All With AI

### Issue 1
src/ui/AppHost.interactions.test.tsx:23
**Avoid dynamic test imports**

The newly added `await import("./App")` conflicts with the repository testing guideline requiring imports to be hoisted to the top level, making module initialization order less explicit; use a static top-level import instead.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "refactor(ui): isolate theme selector sta..." | Re-trigger Greptile}

[greptile-apps]

Avoid dynamic test imports

The newly added await import("./App") conflicts with the repository testing guideline requiring imports to be hoisted to the top level, making module initialization order less explicit; use a static top-level import instead.

Context Used: testing.mdc Cursor rule (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/ui/AppHost.interactions.test.tsx
Line: 23

Comment:
**Avoid dynamic test imports**

The newly added `await import("./App")` conflicts with the repository testing guideline requiring imports to be hoisted to the top level, making module initialization order less explicit; use a static top-level import instead.

**Context Used:** testing.mdc Cursor rule ([source](https://github.com/modem-dev/modem/blob/main/.cursor/rules/testing.mdc))

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!