[Website] Move Playground tools into a bottom dock#3796
Draft
adamziel wants to merge 30 commits into
Draft
Conversation
…ettings Checkpoint of the dock-redesign iteration: - New Playground pane is one tabbed surface (Blueprint default, plus inline WordPress/Gutenberg PR, From GitHub, Blueprint URL, Import .zip), with a Vanilla WordPress card backed by a CI-refreshable screenshot and polished blueprint tiles. Tabs are a recessed segmented control; each tab keeps a sticky section eyebrow and a single left-aligned primary action. - Autosave-restore nudge now appears as a popover on the dock save-status button, with a close affordance and a borderless "No, thanks". - "New Playground" action sits beside the Your Playgrounds header. - "This Playground" settings decluttered: fields grouped under Runtime/Network, the loud destructive box replaced by a calm note + the red reset button. - Quiet Paper design-token consistency pass across panes, forms, and buttons (field labels sentence-case, accent-primary GitHub connect, warm text ramp). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Re-themes the file editor (Files + Blueprint panes) off undefined gray tokens onto the Quiet Paper ramp with fallbacks, so the shared component still renders correctly outside the dock; warms the CodeMirror surface, gutters, and active line. Unifies the UPPERCASE eyebrows and settings field labels on one treatment; left-aligns the settings shortcuts row and makes its actions quiet tertiary controls. Replaces the Blueprint reset warning box with a calm note matching the settings pane. Brings the Logs empty state and rows, the New segmented control (active separation, one icon language, quiet Default chip), and the Database/Share button and chip treatments onto the palette. Drops the off-palette notice slabs. Verified each pane in-browser (computed styles + screenshots); lint, typecheck, and targeted Playwright e2e pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Applies adamziel's screenshot feedback plus a multi-agent design audit across all dock panels, each fix verified in-browser. Feedback fixes: - Blueprint-from-URL: drop the duplicate field label (the heading carries it). - Write your own: the editor fills the pane with the Create action pinned in view, and points to the full Blueprint tab for a roomier editor. - This Playground: tighter header->form gap; align the "Include older versions" checkbox to the select column; warmer top-level toggle labels. - Files/Blueprint: share the 24px pane-title inset used by every other pane. - Logs: replace the lone icon with a useful three-source legend (PHP / WordPress WP_DEBUG / Playground); friendlier search-miss state. - Share: each export option is its own card. - Modals: tighter title->body gap and one consistent action-row spacing. Audit fixes (on-token, verified): - Filled primaries use the surface accent, not WordPress-admin teal. - File tree re-themed off its wp-admin skin (warm selection + accent bar, wp values kept as fallbacks for non-dock consumers). - Blueprint "reset site" run is now destructive-red, matching settings. - Database tools read as one consistent set (no lone teal primary). - Subtitled pane headers tighten consistently; duplicate "Store permanently" menu item removed; dark CodeMirror tooltip, validation panel, settings notice, destructive reds, Logs <mark>, modal grays, off-scale values, field-label casing, and Blueprints/Playgrounds terminology all on-token. Also updates the adam-design-review skill with the recurring patterns (under-corrected gaps, lonely icons, label/title duplication, sub-control alignment, cross-pane consistency, section separation, pinned actions). typecheck + lint green; blueprint-reset e2e green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rename is now inline everywhere (Playgrounds list, This Playground header, site-manager) via a shared useInlineRename hook; the Rename Playground modal and its post-save auto-prompt are gone. Export to GitHub runs inline as a Share-pane sub-view instead of a modal. New pane: persist the Write-a-Blueprint draft across close/reopen, autofocus form fields, cursor in the steps array, full-height editor, labeled secondary toolbar buttons. Save status: reflect sync progress in the active Playground's list row; fold the local-fs sync action into the Saved menu as "Reload files from disk"; muted/icon-less, unbold "Autosaved". Dock polish: no active-tab underline, re-clamp on resize, cap the Playgrounds pane height, taller New pane, immediate Files-header tooltips, calmer temporary-site and stored-Playgrounds notices. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…, export polish Files panel no longer triggers a spurious save when it auto-opens a file: the file editor's debounced auto-save now reads the on-disk content first and skips the write when it's identical, so merely loading a file no longer syncs memfs->OPFS (which the dock surfaced as "Saving"). Opening the Blueprint panel now focuses the editor in the first column. New Playground and Your Playgrounds render at the same height on desktop (LIST_PANE_HEIGHT). Autosaved uses the same blue as Autosaving. Row dividers in the Playgrounds list stay straight (no bent corners) and persist on hover. Export to GitHub runs as a single-header sub-view of the Share pane: the dock's own header drops away, the content sits in its final position, and the pane resizes around it with a slow-out FLIP animation. Apply Settings & Recreate now closes the panel back to the Playground view. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
On small screens the dock becomes a full-width bottom bar: the tools row sits above the address bar, scrolls horizontally when it overflows, and can be collapsed; panels open full-screen above the bar. Free-floating drag is turned off there. The "Blueprint" group divider is now a short, vertically-centered line in the gap instead of a full-height border plus wrapper padding, so the tool's rounded hover/active highlight sits flush in its own box. The Playgrounds-list inline rename field now fills the row's available width instead of being capped at 280px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Closing the Files panel while the 1.5s debounced save was still pending (status reads "Saving…") dropped the edit: the unmount cleanup cancelled the timer instead of writing. The buffer is now flushed on unmount — it compares against disk and writes only if they differ, so closing mid-edit never loses the change. The filesystem/onSaveFile client is keyed to the running Playground, not the panel, so the write completes after unmount. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…tore permanently" In a list headed "LAST 5 AUTOSAVES" with the dock showing "Autosaved", "Save in this browser" read as a no-op — it's already in the browser. Use "Store permanently", matching the wording already used by the dock's Store- permanently pane and the Settings button, so the action clearly means promoting a transient autosave to a durable Playground. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…panels Collapse/expand (desktop): pin the default dock by a top edge derived from its expanded height so collapsing only tucks the tools row away — the address bar stays put instead of dropping. The anchor is grow-only so the address bar doesn't dip-and-rise while the tools row animates open. Mobile (<=1024px): every full-screen panel gets a consistent close X overlaid on its first content row's top-right corner (no wasted line), pinned while the body scrolls, styled as a calm ghost icon button aligned to the content gutter. The redundant in-pane "New Playground" action is hidden on mobile (the dock's bottom bar already has a New tool). The Blueprint/Files editors reorder so the sparse "Browse files / filename" row leads, with the filename reserving the X's corner; the editor breakpoints align to the dock's 1024px. Other mobile polish: New-pane creation methods become a single-column list of full-label rows instead of a clipped 3-column grid; the Blueprint toolbar gives the primary Run button its own full-width row; the Export-to-GitHub back chevron shares one clean left edge with the body. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reconcile Playwright specs with the restored dock redesign (no tests removed): - Autosave nudge copy: "Recent autosave"/"Restore autosave"/"Dismiss recent autosave" instead of the old "Recent autosave available"/"Restore Autosave"/ "No, thanks" - Save flow moved from the "Save Playground" modal to the dock's "Store permanently" pane (opened from the save-status button); radio is now "Store in this browser", submit "Store permanently" - ensureSiteManagerIsClosed closes via the click-outside scrim (the active tool no longer toggles the pane closed) - "This Playground" tool label, blueprint "Copy link" button, and the "Autosaving" status text Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
What changed
Validation
npm exec nx -- run playground-website:typechecknpm exec nx -- run playground-website:lintnpm exec nx -- run playground-website:testnpm exec nx -- run playground-website:build:standalone:productionCheckpoints
b7453c93b1560c1330db4243e7815601e1a9f9a2— dock UI polish checkpoint: tabbed New pane (Blueprint default + inline PR/GitHub/URL/zip, Vanilla WordPress card), autosave-restore popover on the dock status button, "New Playground" beside the Your Playgrounds header, decluttered "This Playground" settings (Runtime/Network groups), and a Quiet Paper design-token consistency pass. Baseline before theadam-design-reviewiteration.ace667b767679d516907d75f6de0bfb3f1bb3800—adam-design-reviewiteration: re-themed the file editor (Files + Blueprint panes) onto the Quiet Paper ramp incl. the CodeMirror surface (with fallbacks so the shared component stays correct outside the dock), unified the UPPERCASE eyebrows and settings field labels, left-aligned the settings shortcuts row as quiet tertiary actions, replaced the Blueprint reset warning box with a calm note, brought the Logs/New/Database/Share treatments on-token, and dropped the off-palette notice slabs. Verified each pane in-browser; lint, typecheck, and targeted e2e pass. Baseline before the New-pane creation-flow rethink. (Local-only until pushed.)6d6e2badce53b4593b0372d2d6e4633a5dd648f2— design-review pass across every pane (B–F feedback rounds + a multi-agent audit, each fix verified in-browser): top-tab New pane with three Blueprint sources incl. an inline "Write your own" editor that boots a Playground; single-form "This Playground" settings with the name + pencil in the title and Delete handled from My Playgrounds; an always-present stubblueprint.json; the Files/Blueprint title moved into the file-browser bar at the shared 24px inset; a useful Logs empty-state legend (PHP / WordPress WP_DEBUG / Playground); Share split into distinct export cards. The audit then brought the surface fully on-token: filled primaries use the accent (not WP-admin teal), the file tree is re-themed off its wp-admin skin, the Blueprint "reset site" run reads destructive-red, the Database tools form one consistent set, subtitled pane headers tighten consistently, and stray off-token colors / off-scale spacing / label casing / "Blueprints"/"Playgrounds" terminology are normalized.adam-design-reviewskill updated with the recurring patterns. typecheck + lint green; targeted e2e green (the one OPFS save/restore miss is pre-existing flakiness — passes on retry). (Local-only until pushed.)