Consolidate current Playground identity and status

Author: adamziel

packages/playground/website/design-explorations/playground-ui-directions.md

@@ -61,7 +61,7 @@ button.
 The latest pass tightens the information architecture further so categories do
 not overlap:
 
-- **Site switcher** owns saved and autosaved Playgrounds only.
+- **Current Playground** owns identity, save status, and nearby saved/autosaved Playgrounds.
 - **Workbench** owns the discoverable map of actions and groups them by intent.
 - **Runtime** is promoted both as a chip and a Workbench priority action.
 - **Share** owns save/share/export handoffs.
@@ -73,9 +73,8 @@ entry point a distinct job.
 
 ## What is always visible
 
-- Playground identity and active site name.
+- Current Playground cluster: name, save status, Save, and entry to other Playgrounds.
 - Address/command field.
-- Site switcher via the active site name.
 - Runtime.
 - Workbench.
 - Share.
@@ -113,8 +112,9 @@ site visible behind them.
   settings, Files, Your Playgrounds, and Import; lower-density groups expose
   Start or restore, Inspect and edit, and Keep or move without crowding the
   top chrome.
-- **Playgrounds** opens from the site name or Workbench and shows saved and
-  autosaved sites without repeating Create actions.
+- **Current Playground** opens from the top-left cluster or Workbench and shows
+  the active Playground, save status, plain-language persistence explanation,
+  nearby Playgrounds, and a link to the full saved-sites list.
 - **Files** embeds the real file browser/editor for the active site and opens
   in a focused mode by default so file trees and code are both readable. A
   compact toggle is available in-panel for users who want more viewport
@@ -183,14 +183,126 @@ as another visual skin. The concrete iteration checklist was:
 25. validate the desktop breakpoint in Chrome with the real iframe and real
     production components.
 
+## Current Playground consolidation pass
+
+This pass consolidates the semi-technical user's orientation problem into one
+place. The top-left cluster now says what is open, whether it is saved, and how
+to save it. Opening it shows a plain-language Current Playground sheet with the
+current site, save state, a short explanation, nearby Playgrounds, and the next
+safe actions. Workbench no longer repeats the current-site status; it points
+back to Current info when the user needs orientation.
+
+### 100 remapping and self-feedback iterations
+
+1. The user first asks “what am I looking at?” before asking for tools.
+2. The site name by itself is not enough; it needs a container label.
+3. “Current Playground” is clearer than “Playground” because WordPress also has a site name.
+4. Save status belongs next to the site name, not on the opposite side of the chrome.
+5. The Save button must remain visible when the status moves.
+6. A top-level Playgrounds button would solve access but add more chrome clutter.
+7. The site name can be the switcher because users already look there for identity.
+8. The switcher should open details first, not immediately jump to a list.
+9. Details need plain words, not only storage labels like OPFS or local-fs.
+10. The current sheet should answer “Will I lose this?” immediately.
+11. “Temporary until you save it” is clearer than only “Unsaved.”
+12. “Saved locally” is clearer than “local-fs.”
+13. “Saved in this browser” is clearer than “opfs.”
+14. A semi-technical user may know WordPress but not Playground storage.
+15. The explanation should say Playground is the container around the WordPress site.
+16. The other Playgrounds list should not be hidden behind Share.
+17. Showing a short list beats making users recall that a full list exists.
+18. The full saved-sites overlay still matters for rename/delete; keep it one click away.
+19. The current sheet should not become a full site manager replacement.
+20. Put only the most orienting saved-site rows in the sheet.
+21. “Open all Playgrounds” is clearer than “Manage.”
+22. “New blank site” is a safe action from the current context.
+23. Current info should not have a Back to Workbench arrow because it is a top-level identity surface.
+24. Workbench secondary panels still keep Back to Workbench.
+25. Modal workflows should preserve panel context after closing.
+26. Workbench should stop duplicating current site name and status.
+27. Workbench’s first card should explain the tool map, not the current site.
+28. A “Current info” affordance inside Workbench helps lost users recover orientation.
+29. A priority card named “Current Playground” is more useful than another “Your Playgrounds” card.
+30. “Orient” is an appropriate action group for status and switching.
+31. Runtime remains important but is not identity; keep it separate.
+32. Share remains handoff; do not mix it with basic orientation.
+33. The top-left cluster should visually feel like one object, even with Save next to it.
+34. Do not nest the Save button inside the site button; nested buttons are invalid.
+35. Use a grid cluster: site button plus status/save indicator.
+36. Remove the right-side save status in Workbench to avoid split identity.
+37. Keep the current cluster width large enough for real site names.
+38. Do not let the current cluster crush the address bar at desktop widths.
+39. At smaller widths, hide status details before hiding the address bar.
+40. The address bar stays visually dominant for navigation.
+41. Current info panel width should match other non-editor sheets.
+42. The sheet should use the same border, radius, and scrim language as Workbench.
+43. The current summary card needs hierarchy: label, name, status action.
+44. Status action on the card should reuse the real `SaveStatusIndicator`.
+45. The current explanation should be short enough to read at a glance.
+46. “What am I looking at?” is a better heading than “Details.”
+47. The list of other Playgrounds should use site names as primary labels.
+48. Storage/date details are secondary metadata.
+49. Rows should switch sites directly because that is the expected list behavior.
+50. The full overlay remains available when users need rename/delete menus.
+51. Current info should expose Runtime as a next step because version confusion is common.
+52. Current info should expose Save/share because preservation confusion is common.
+53. Avoid putting every Workbench tool inside Current info.
+54. Keep Files out of Current info; it belongs to Workbench.
+55. Keep Database out of Current info; it is an inspect tool.
+56. Keep Blueprint source out of Current info; it is a developer tool.
+57. The current panel should remain understandable even with no other saved sites.
+58. Empty state wording should explain there are no other saved Playgrounds yet.
+59. A saved current site should not show “Save” as the urgent action.
+60. A saving current site should still keep the user in context.
+61. A save error should show as status, not as a mystery elsewhere.
+62. The current control should maintain the Playground logo for brand continuity.
+63. The label “Current Playground” separates Playground from WordPress admin.
+64. The WordPress iframe remains full-page under the sheet.
+65. The current sheet must not become an always-on sidebar.
+66. It should be dismissible by outside click like other sheets.
+67. The Escape behavior should still close transient UI.
+68. Command search should remain a fallback for “Your Playgrounds.”
+69. Workbench should still expose the full surface for feature discovery.
+70. Current info should reduce, not increase, top-level buttons.
+71. Visual clutter is reduced when related facts are adjacent.
+72. Visual clutter increases when identity, save, and switching are far apart.
+73. The status icon and Save button should use the same styling as PR 3655.
+74. The site switcher should not use a generic settings gear.
+75. A chevron communicates there is more behind the site name.
+76. The active state should highlight the whole current cluster button.
+77. Avoid a surprising full-screen switcher from a compact identity click.
+78. A right-side sheet is consistent with the rest of this shell.
+79. The sheet title “Current Playground” should match the chrome label exactly.
+80. Other Playgrounds should be in the current sheet, not buried in Share.
+81. Saved Playgrounds should still be reachable from the command palette.
+82. The Current Playground priority card helps users recover from tool overwhelm.
+83. Avoid using “Site Manager” language; it implies an admin sidebar.
+84. Avoid “Inspect” as a broad bucket for preservation or switching.
+85. Avoid “Storage” as the first word users see.
+86. Use “save,” “return,” and “current” because they describe outcomes.
+87. The panel should be useful to someone who only knows WordPress basics.
+88. The panel should be useful to someone testing PRs or Blueprints.
+89. Direct row switching must close transient UI so the site change is obvious.
+90. The full list must remain available for longer saved-site inventories.
+91. Current info should not replace Workbench; it should anchor it.
+92. The first Workbench card should no longer repeat the exact same current summary.
+93. The top-right area is now lighter because status moved left.
+94. Runtime still remains visible, preserving the last round’s feedback.
+95. Share remains top-level, preserving the earlier “Save and share was hidden” feedback.
+96. Files and Blueprint remain focused, preserving editor usability.
+97. The approach preserves PR 3655’s explicit save intent.
+98. The approach keeps Playground full-page with no permanent sidebar.
+99. The approach gives confused users a safe place to start.
+100. The final check is whether a user can point at one place and say: this is the current Playground, this is whether it is saved, and these are my other Playgrounds.
+
 ## PR 3655 fit
 
 The shell treats autosave as recovery and Save as intent:
 
 - the save status is visible in the top chrome;
 - Save is present even when the user is mostly focused on the WordPress site;
-- Your Playgrounds is one click from the site name and visible inside
-  Workbench;
+- Current Playground consolidates the site name, save state, Save action, and
+  nearby Playgrounds;
 - Share explains why Autosaved, Saved, and Unsaved are different states;
 - storage does not become the app's primary navigation model.