Add new portable UI app shell (apps/ui)#2986
Merged
youknowriad merged 6 commits intotrunkfrom Apr 17, 2026
Merged
Conversation
Introduces a new UI layer that can run as both an Electron renderer and a standalone web app. Uses an injectable connector pattern for data access (IPC for Electron, Telex REST API for web), TanStack Router (code-based) and TanStack Query with localStorage persistence. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
youknowriad
force-pushed
the
new-ui-app-shell
branch
from
9793306 to
d2fe225
Compare
Focus the new UI on shipping as the Electron renderer. Removes the Telex REST connector, login route, OAuth callback handling, auth guard, and dual-mode Vite config. The Connector interface keeps its auth surface so a future REST/web connector can be added without restructuring the UI. Also renames the npm script from start:new-ui to start:new. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The new UI no longer needs 'system' as the default to make dark mode work, so keep the existing 'light' default in the desktop app. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Collaborator
📊 Performance Test ResultsComparing 59a7701 vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
Replaces custom buttons/collapsible/flex CSS with @wordpress/ui Button, Collapsible, and Stack; swaps hardcoded colors, fonts, and padding for @wordpress/theme tokens; adds a prefers-color-scheme hook that seeds ThemeProvider's bg for dark mode; adds an optional Connector.init() hook so the IPC connector can install the Electron app menu (restores DevTools).
…t types The 6.43 type update infers allowed keys from the template literal and rejects tag names containing spaces. Removes the space before `/>` in three self-closing tags so the types match.
Wires @wordpress/i18n and @wordpress/react-i18n into apps/ui using the same translation dictionary as the existing renderer. The IPC connector exposes getUserLocale(); bootstrap loads the matching translations via @studio/common/lib/locale and populates defaultI18n before render. All user-facing strings in the sidebar, onboarding, and dashboard are now wrapped in __ (with _n / sprintf for pluralization).
Contributor
Author
|
I reworked and simplified a bit this PR. Focused it more on the Studio App for now. Let the connector interface in for future work on a web UI if needed. I'm likely merging this as a hidden initial shell where I can iterate on this project with @mtias. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
How AI was used in this PR
The app shell was pair-programmed with Claude Code. All code has been reviewed and tested manually.
Proposed Changes
Introduces
apps/ui, a new UI layer intended to ship as the Electron renderer. The shell is kept deliberately portable — data access is mediated by aConnectorinterface so a non-Electron variant could be added later — but all web/REST-specific code (login page, OAuth, Telex/WP.com REST adapter) has been stripped to keep this PR focused on the Electron redesign.Architecture
apps/ui/src/data/core/types.ts) abstracts site, auth, and locale access. Only the IPC connector is included; it delegates towindow.ipcApiand exposes an optionalinit()hook that installs the Electron app menu (so View → Toggle DevTools works in the new renderer)._dashboard(sidebar) and_onboarding(full-screen).localStoragepersistence for cached site data across reloads.@wordpress/ui+@wordpress/theme—Button,Collapsible,Stackreplace hand-rolled components; colors, spacing, and typography use--wpds-*design tokens viaThemeProvider(unlocked through@wordpress/private-apis). A smallusePrefersColorSchemehook seeds ThemeProvider'sbgfor dark mode.@wordpress/i18n+@wordpress/react-i18n, sharing the translation dictionary intools/common/translations. Locale is fetched from the main process at boot via the connector and applied todefaultI18nbefore render.Dev workflow
npm run start:newlaunches the full Electron app against the new UI.npm -w @studio/ui run devruns a standalone Vite dev server (useful for iterating on pure-UI work, though most features require the IPC bridge).Incidental fix
@wordpress/element6.43 tightenedcreateInterpolateElement's types to infer allowed tag keys from the template literal — tag names containing spaces (e.g.<ArrowIcon />) are now filtered out. Removed the space before/>in three existing templates (content-tab-assistant,sync-connected-sites,studio-cli-toggle) so the types match. Translations for those strings will need to be re-submitted.Testing Instructions
npm run start:newand verify the Electron app launches with the new UI.start:new, and verify sidebar labels ("Projects", "Stop all", "Add site") render translated.npm -w @studio/ui run devand verify the Vite dev server starts on port 5200.npm run typecheck— all workspaces should pass.Pre-merge Checklist