Web app redesign #1655

bgrgicak · 2024-07-31T06:01:36Z

Discussed in #1652

^{Originally posted by bgrgicak July 29, 2024}
Figma design

@WordPress/playground-maintainers Let's discuss the Web app redesign.
We have a new design that I broke it down into rough tasks and created a timeline.

Timeline

The project is broken up into smaller pieces that can be delivered individually, so we can ship things immediately and avoid feature branches. If a feature requires more PRs like the site manager, we could hide it behind a feature flag (show only in development mode or if a query string exists) until it's ready.

Phase 1: Fundamentals

Let's start by creating the fundamentals like site storage and site switching.
Alongside this, we can start replacing existing modals with new components.

Phase 2: Redesign

Let's expand the fundamentals by adding the site manager editor and support for all existing features in the current view.
After we have feature support, we can update the site header.

Phase 3: Improvements

In the end, let's tackle all non-blocking work and improvements that don't exist in the current design.

Features

A detailed list of all the features that the design includes. It will help us break down the project into tasks once we answer all questions.

Other, related issues:

Web app redesign #1655

Expand the full list of features

Site Storage

We need a way to store a list of all sites the user has created. Let's make it flexible so that we can add more data in the future.

Site manager

The site manager consists of a sidebar, site editor, site preview, and notice sections.

Sidebar

Add site

A site can be added using a site settings modal, or by importing from different sources.

Notice

When offline show a notice at the top.

Site preview

The preview can be resized by dragging a handle between the preview and the editor.
On extra large screen only the preview keeps expanding. The editor size is fixed.
Clicking on the preview will take you to the site.
The preview is hidden on small screens.

Site editor

Notice

If the current site is temporary, show a notice to save the site.

Header

Export to GitHub

Download as .zip

When clicked downloads the site zip.

Restore from .zip

A ZIP upload form. When uploaded the site content is replaced with the ZIP content.

Share feedback

A form for sharing feedback with the Playground team.
1-5 score
How can we improve (optional)
Email address (optional)

Settings

Site settings

Logs

Site view

Temporary sites show a confirmation notice if attempting to refresh
Header
- Site editor link
- Title bar

Title bar

The text was updated successfully, but these errors were encountered:

**Warning** This PR contains a lot of TODOs because I didn't want it to get too large. We can decide if it's worth shipping as is or if we need to implement some of these missing features first. ## Motivation for the change, related issues Implements #1656 Browser storage in Playground supports having multiple sites by switching by adding a `site-slug` query string. This is a powerful feature that's hard to discover. As a first step in the [Web app redesign project,](#1655) this PR implements switching sites in browser storage. Other site management features like adding and deleting sites will be added in future PRs. ![Screenshot 2024-08-01 at 12 20 55](https://github.com/user-attachments/assets/b820a040-d9a8-4eb9-aaa0-7d480385e979) ![Screenshot 2024-08-01 at 12 21 08](https://github.com/user-attachments/assets/3ace3f63-7edf-4ab5-b332-78be3ef692a9) ## Implementation details The goal of this PR is to set the groundwork for the [Web app redesign](#1655) project by allowing users to switch between views. The feature is only available while using browser storage. The current view is now called `site-view` and the new management view is called `site-manager`. In this iteration, switching is done by redirecting to a URL with a `site-manager=true` query string. A future iteration will remove the need for reloads. When in the site manager a list of sites is loaded from OPFS, clicking on a site (or preview) will redirect to that site. This is a temporary implementation that will be removed[ once we add site storage.](#1659) ## Testing Instructions (or ideally a Blueprint) - Checkout this branch - [Open Playground with browser storage](http://127.0.0.1:5400/website-server/?storage=browser) - Confirm that a new site manager icon is available in the upper left corner - Click it and confirm that the site manager loads - [Open Playground with browser storage and a custom slug](http://127.0.0.1:5400/website-server/?storage=browser&site-slug=test) - Click on the site manager icon and confirm that the site manager loads - Confirm that both sites are visible --------- Co-authored-by: Brandon Payton <[email protected]>

## Motivation for the change, related issues The site manager button looks different in production from other buttons and they should all look the same. ## Implementation details Use the button component for the site manager toolbar button. For some reason buttons a development server look different from buttons in production. [The toolbar will soon be replaced](#1655), so there is no need to fix that now. ## Testing Instructions (or ideally a Blueprint) - Open a Playground preview locally - Switch to site storage - Confirm that all toolbar buttons have the same style.

bgrgicak · 2024-08-08T10:13:03Z

The sidebar is now deployed and can be used with browser storage.

Screen.Recording.2024-08-08.at.12.11.21.mov

sfougnier · 2024-08-09T15:35:34Z

Could we please remove the branding (logo, large graphic) from the sidebar? It's not final.

@sfougnier

## Motivation for the change, related issues We are removing because branding is not finalized yet. Mentioned by @sfougnier [here](#1655 (comment)). ## Implementation details This PR hides the logo and background graphic from the site manager sidebar. ## Testing Instructions (or ideally a Blueprint) Run `npm run dev`, open the site listing, and observe the UI remains visible and functional.

brandonpayton · 2024-08-22T18:05:15Z

@sfougnier, the branding was removed from the sidebar in #1700 and the update is deploying now.

adamziel · 2024-08-29T22:13:06Z

We'll need to introduce a routing system in v1 @bgrgicak @brandonpayton. We'll need:

Access to the current query args/blueprint via redux
A single source of truth without switching between query args, react props, redux state
Support for both path-based routing and access to query args
A single function to call when switching sites that will take care of the redux state and browser history change. This is mostly for Query API. The actual UI changes, like opening site details, may for now happen based on an internal state and without any URL changes.

Gutenberg's Navigator component doesn't seem that helpful for us. A custom redux-based routing system seems like the next best thing.

bgrgicak · 2024-09-09T08:12:39Z

A custom redux-based routing system seems like the next best thing.

This will be great for the website! We have query string fetching and props for this all over the place. Redux will make it much cleaner. It should also simplify change management and ensure component state matches the URL.

adamziel · 2024-09-24T16:51:11Z

Let's remove any custom JS API code from the "import from git" and "from WordPress/Gutenberg PRs" modals and only use them as a piece of UI that produces a Blueprint. The Blueprint itself should be expressive enough to import all the right files. This issue tracks support for the features we'll need to do that: #1787

bgrgicak · 2024-10-30T07:29:46Z

The web app redesign is completed.

@adamziel should we close this issue or should we keep it around until we address the remaining features?

If we want to address the remaining features, is there a list of tasks we would still like to work on?

adamziel · 2024-10-30T09:34:23Z

@bgrgicak there's still a few remaining tasks listed in this issue's description, e.g. the modals @ajotka is working on: #1908

bgrgicak · 2024-10-31T05:18:31Z

Add Warning or new site on Blueprint Preview button and Allow renaming of stored sites are connected to the redesign we did and both seem like something we should address.

## Motivation for the change, related issues #1655 (comment) I moved wordpress.html and gutenberg.html to Playground itself. By the way, I also made a mini appearance refactor for the modal, based on Figma. And I used components from WordPress packages. ## Implementation details - [x] Add modals with input to fill PR number - [x] Move & unify logic to fetch PR by number - [x] Error handling - [x] Appearance refactor for Modals - [x] Implement new Modal to other components - [x] Fetch PR number directly from query - [x] New Dropdown Menu in main sidebar (thanks to this, we can import playground when we don't have any active one) ## Testing Instructions (or ideally a Blueprint) - Any blueprint - Go to Playground settings - Click three dots next to ~~Homepage button~~ future Logo place - Select Preview a WordPress PR or Preview a Gutenberg PR It is also possible to open modal via URL params: /?modal=preview-pr-wordpress or /?modal=preview-pr-gutenberg ![image](https://github.com/user-attachments/assets/56bf1e59-2186-47b0-8991-b55f32237289) ![image](https://github.com/user-attachments/assets/821703ed-0fe4-4a7d-a266-2981a312370c) ![image](https://github.com/user-attachments/assets/765f3b91-c42a-4635-8e6b-00d4a631291b) --------- Co-authored-by: Brandon Payton <[email protected]>

bgrgicak self-assigned this Jul 31, 2024

bgrgicak added this to Playground Board Jul 31, 2024

github-project-automation bot moved this to Inbox in Playground Board Jul 31, 2024

bgrgicak mentioned this issue Jul 31, 2024

WebApp Redesign #1561

Closed

bgrgicak moved this from Inbox to Project: In Progress in Playground Board Jul 31, 2024

This was referenced Jul 31, 2024

Design a file format to store Playground site metadata across all runtimes #1659

Open

Site manager sidebar #1656

Closed

adamziel mentioned this issue Jul 31, 2024

Playground does not load in Safari with Browser storage enabled #1239

Closed

bgrgicak mentioned this issue Aug 1, 2024

Add site manager view and sidebar #1661

Merged

bgrgicak mentioned this issue Aug 8, 2024

Fix site manager button styles #1676

Merged

bgrgicak mentioned this issue Aug 8, 2024

Explore hibernation and restoration of Playground instances #1678

Open

brandonpayton mentioned this issue Aug 22, 2024

Remove Playground branding from site list #1700

Merged

ajotka mentioned this issue Oct 24, 2024

Move WordPress & Gutenberg PR Preview to Playground website #1938

Merged

7 tasks

adamziel mentioned this issue Oct 25, 2024

Design improvements to the site settings popover #1944

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web app redesign #1655

Web app redesign #1655

bgrgicak commented Jul 31, 2024 •

edited by adamziel

Loading

Timeline

Phase 1: Fundamentals

Phase 2: Redesign

Phase 3: Improvements

Features

Site Storage

Site manager

Sidebar

Add site

Notice

Site preview

Site editor

Notice

Header

Export to GitHub

Download as .zip

Restore from .zip

Share feedback

Settings

Site settings

Logs

Site view

Title bar

bgrgicak commented Aug 8, 2024

sfougnier commented Aug 9, 2024

brandonpayton commented Aug 22, 2024

adamziel commented Aug 29, 2024 •

edited

Loading

bgrgicak commented Sep 9, 2024

adamziel commented Sep 24, 2024

bgrgicak commented Oct 30, 2024

adamziel commented Oct 30, 2024 •

edited

Loading

bgrgicak commented Oct 31, 2024 •

edited

Loading

Web app redesign #1655

Web app redesign #1655

Comments

bgrgicak commented Jul 31, 2024 • edited by adamziel Loading

Discussed in #1652

Timeline

Phase 1: Fundamentals

Phase 2: Redesign

Phase 3: Improvements

Features

Site Storage

Site manager

Sidebar

Add site

Notice

Site preview

Site editor

Notice

Header

Export to GitHub

Download as .zip

Restore from .zip

Share feedback

Settings

Site settings

Logs

Site view

Title bar

bgrgicak commented Aug 8, 2024

sfougnier commented Aug 9, 2024

brandonpayton commented Aug 22, 2024

adamziel commented Aug 29, 2024 • edited Loading

bgrgicak commented Sep 9, 2024

adamziel commented Sep 24, 2024

bgrgicak commented Oct 30, 2024

adamziel commented Oct 30, 2024 • edited Loading

bgrgicak commented Oct 31, 2024 • edited Loading

bgrgicak commented Jul 31, 2024 •

edited by adamziel

Loading

adamziel commented Aug 29, 2024 •

edited

Loading

adamziel commented Oct 30, 2024 •

edited

Loading

bgrgicak commented Oct 31, 2024 •

edited

Loading