Skip to content

Add new portable UI app shell (apps/ui)#2986

Draft
youknowriad wants to merge 1 commit intotrunkfrom
new-ui-app-shell
Draft

Add new portable UI app shell (apps/ui)#2986
youknowriad wants to merge 1 commit intotrunkfrom
new-ui-app-shell

Conversation

@youknowriad
Copy link
Copy Markdown
Contributor

Related issues

  • Related to the new UI initiative

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 portable UI layer that runs as both an Electron renderer and a standalone web app:

  • Connector pattern: Injectable data adapter (Connector interface) with two implementations — IPC for Electron (window.ipcApi) and REST for web (Telex API at telex.automattic.ai + WordPress.com OAuth)
  • TanStack Router (code-based, following wp-calypso patterns) with auth-guarded routes and layout routes for dashboard (sidebar) and onboarding (full-screen)
  • TanStack Query with localStorage persistence (24h max age), mirroring the wp-calypso api-core setup
  • WordPress Design System: @wordpress/ui, @wordpress/theme (ThemeProvider via private APIs), @wordpress/icons
  • Component structure: Folder-per-component with CSS Modules, dark/light mode via prefers-color-scheme
  • Dual dev modes: npm -w @studio/ui run dev:web (port 5200) and npm run start:new-ui (full Electron app)
  • Default color scheme: Changed from 'light' to 'system' so prefers-color-scheme works correctly

Testing Instructions

  • Run npm -w @studio/ui run dev:web and verify the login page appears at localhost:5200
  • Log in with WordPress.com OAuth and verify redirect back to dashboard
  • Run npm run start:new-ui to verify the Electron app launches with the new UI
  • Toggle system dark/light mode and verify the UI follows

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant