WebApp Redesign: Interact with sites list via redux

[brandonpayton]

Motivation for the change, related issues

This is a PR to start exploring site storage. In order to start from a concrete place, this PR starts by setting up the site manager sidebar to interact with the sites list via redux.

Related to #1659

Implementation details

This PR adds a site-storage module that provides functions for adding, removing, and listing sites. It currently only supports writing to sites stored in OPFS.

Today, Safari only appears to support writing to OPFS files from worker threads, so this PR adds a site-storage-metadata-worker.ts module that the UI thread can spawn to write site metadata to OPFS.

This PR adds a siteListing property to our web app's redux state. It looks like:

{
    status: SiteListingStatus;
    sites: SiteInfo[];
}

SiteListingStatus can reflect whether the listing is loading, loaded, or in an error state.

The site-manager-sidebar has been updated to select sites state from redux and interact with the sites list via redux actions. Currently, the loading status is ignored, but we should show it to the user in a follow-up PR.

Testing Instructions (or ideally a Blueprint)

Run npm run dev and interact with the sites list in Chrome and Safari. (Unfortunately, Firefox does not yet support loading Service Worker modules, and that feature is required for our current dev setup)

[brandonpayton]

Planning to explore adding, removing, and actually saving site metadata next.

[brandonpayton]

@bgrgicak, I added some rough implementation for adding and removing sites. None of it is even tested yet, but I hope you find it useful if you decide to work on something related in the UI.

There are a ton of TODOs and things to think more about. The purpose of sketching this is to get it out of my head and into something real so we can iterate on it.

[adamziel]

Lovely, thank you for exploring this!

[bgrgicak]

Nice work this will already be a big improvement even without other storage types.

Please take a look at #1680 and how it fits into site storage.

[brandonpayton]

🤔 I don't know why these changelog changes are included.

[brandonpayton]

This has been updated with the latest from trunk, and the add-site functionality has been adjusted to use redux as well.

[brandonpayton]

What's next:
Clean this up so it is mergeable.

[brandonpayton]

Interesting:
AFAICT, the only way to write file content to OPFS in Safari is in a dedicated worker.

Safari doesn't support the FileSystemFileHandle#createWritable() method today. The only other path I've found in Safari for writing file content to OPFS is via FileSystemFileHandle#createSyncAccessHandle(), and that is documented to only be available to dedicated web workers.

So I guess this means that we need to spawn a worker for writing site info here if we want to be able to do it in UI code.

[brandonpayton]

I was hoping to merge this quickly before #1669, but in order to really test this PR in Safari, we need #1669. So I'm going to do a final review of that now.

[brandonpayton]

Let's also select loading/error status here and reflect in the UI, even if we show crude or basic error messages in case of error.

[brandonpayton]

There is an error when adding sites that may be due to merging with the latest from trunk. Looking into it.

[brandonpayton]

The error turned out to be due to throwing an error during a directory existence check where it should not have been thrown. It might have been accidentally added for testing and not reverted.

After that, with the latest from trunk, adding a new site failed because unzipping WordPress couldn't move the WordPress source dir into place because there was already a mostly empty directory containing a single playground-site-metadata.json file. So I updated the unzip code to tolerate that specific scenario and move the children of the WordPress source dir into place instead.

It currently hardcodes the name of the Playground site metadata file, and I'd like to import that instead.

[brandonpayton]

There are some lingering TODOs, but we should ship this and continue iterating.