Implements project saving and loading in Play

[gunsch]

💸 TL;DR

Implements Project-level saving and loading in Play.

Details

This includes:

• Adding the Save/Load buttons in the Project menu
• Dialogs for both Save and Load flows
• Logic that proxies the actual storage to something behind the ProjectStorageClient interface, which can be swapped out later
• Storing the current project in sessionStorage, so that it persists across reload but not across tabs
• Making sure "New" projects clear the current stored project
• Making sure we can load/save projects several times
• Using the Pen title as the project name (both when saving and loading)

[gunsch]

I'm curious what might be a good sort order to show these in. Last updated?

[AndreyChernykh]

I wonder if we can create a helper for that (and other similar operations)

function IDBRequestToPromise<SuccessPayload>(request: IDBRequest, successPayload: SuccessPayload) {
return new Promise((resolve, reject) => {
      request.onsuccess = () => {
        resolve(successPayload)
      }
      request.onerror = () => {
        reject(request.error)
      }
    })
}

return IDBRequestToPromise<Project>(store.add(project), project);

Something like that. IDK if it's better or not for readability though.