Skip to content

Major revamp of the Playground#138

Merged
josephschorr merged 25 commits into
mainfrom
new-play
May 11, 2026
Merged

Major revamp of the Playground#138
josephschorr merged 25 commits into
mainfrom
new-play

Conversation

@josephschorr
Copy link
Copy Markdown
Member

@josephschorr josephschorr commented Apr 28, 2026

Summary

Rebuilds the playground UI on shadcn / Tailwind, replaces the Material UI / Reflex chrome with a cloud-style layout (editor groups, bottom drawer, status strip), adds shareable +
persistable check watches, and ships a settings dialog.

What changes

Foundation

  • shadcn primitives (Dialog, Tooltip, Dropdown, Tabs, …), Inter font, cloud-dashboard Tailwind tokens, Zustand
  • Unified Monaco theme + multi-editor support + manual layout observer
  • Datastore baseline tracking for "modified" detection
  • New hooks: useDocumentIdentity, useResolvedTheme

Layout & redesign

  • New top-bar chrome (auth-slot, breadcrumb-pill, document-link, theme-toggle)
  • Editor groups (split panes, tab strip), bottom drawer with summaries, status strip, polished terminal
  • FullPlayground restructured around the new chrome
  • InlinePlayground redesigned as a docs-first viewer
  • Material UI ThemeProvider scoped to embedded mode (/e/) only
    Check watches: share / persist / load
  • Share API + lookup-share API accept and validate check_watches
  • Validation YAML round-trips an optional checkWatches field
  • Watches persist to localStorage when opt-in; hydrate on load; apply on share-load
  • Mirrored across FullPlayground and EmbeddedPlayground

Editor-groups follow-ups

  • Right-click tab menu (split / move / close)
  • Per-document error/warning badges in tab headers
  • 5-state watch traffic light in the status strip with breakdown tooltip

Schema

  • Visualize button + showDocument editor action

Settings dialog

  • Settings cog in the top-right opens a dialog with theme picker (light/dark/system), minimap toggle (default off, persisted), and a destructive "Clear all data" with confirmation
  • EditorDisplay reads minimap from settings only when hideMinimap is undefined; embedded override preserved

Polish & fixes

  • Light-mode chrome inverted (gray strips, white content); panel surfaces use a light-gray background
  • Tooltip uses the radix triangle arrow instead of a rotated bordered square
  • ValidateButton height aligned with the rest of the toolbar
  • DialogOverlay wrapped in forwardRef so DialogPortal's Slot.cloneElement doesn't warn
  • Sharing-enabled state logged on startup

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 28, 2026

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

Project Deployment Actions Updated (UTC)
playground Ready Ready Preview, Comment May 11, 2026 8:43pm

Request Review

@josephschorr josephschorr changed the title Playground redo Major revamp of the Playground Apr 30, 2026
@josephschorr josephschorr marked this pull request as ready for review April 30, 2026 17:19
@tstirrat15 tstirrat15 force-pushed the new-play branch 3 times, most recently from c8409ea to a2f09c3 Compare May 8, 2026 21:50
…ore baselines, core hooks

- Install shadcn/ui primitives (Dialog, Tooltip, Dropdown, Tabs, etc.), Zustand, jsdom, Inter font
- Add cloud-dashboard Tailwind tokens; drop CRA boilerplate; switch to Inter
- Unify Monaco editor: shared theme, multi-editor instance support, manual layout observer
- Track datastore baseline for "modified" detection
- Add useDocumentIdentity + useResolvedTheme hooks
- Add top-bar chrome components (auth-slot, breadcrumb-pill, document-link, theme-toggle)
…ed wrapper to shadcn

- Migrate panels and old coordinator to shadcn primitives
- Migrate relationship editor cells + grid to shadcn
- Migrate playground-ui internals to shadcn; delete PlaygroundUIThemed and theme.ts
- Migrate misc components to shadcn / Tailwind
- Scope the Material UI ThemeProvider to embedded mode (/e/) only
tstirrat15
tstirrat15 previously approved these changes May 11, 2026
Copy link
Copy Markdown
Contributor

@tstirrat15 tstirrat15 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Copy Markdown
Contributor

@tstirrat15 tstirrat15 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments

Comment on lines -26 to -27
- name: "Run Typescript type checking"
run: "yarn run typecheck"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The lint step already does typechecking

test:
name: "Run Tests"
runs-on: "depot-ubuntu-24.04-small"
runs-on: "depot-ubuntu-24.04-4"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More beef since we're running chrome

Comment on lines -18 to -20
- uses: "authzed/action-spicedb@v1"
with:
version: "latest"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed when everything is wasm

Comment thread cypress/integration/basic.spec.js Outdated
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved things to vite browser tests

<TooltipTrigger asChild>
<PanelButton
id="problems"
aria-label="problems panel trigger"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a label for testing purposes

Copy link
Copy Markdown
Contributor

@tstirrat15 tstirrat15 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@josephschorr josephschorr merged commit 94105e2 into main May 11, 2026
5 checks passed
@josephschorr josephschorr deleted the new-play branch May 11, 2026 21:14
@github-actions github-actions Bot locked and limited conversation to collaborators May 11, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants