(core) Site Switcher and Other Sites

Summary:
A new section, Other Sites, will now be shown on the All Documents page when:

 - A user is on a personal site and has access to other team sites.
 - A user is on a public site with view access only.

In addition, a site switcher is now available by clicking
the site name in the top-left section of the UI next to the
Grist logo. It works much like the switcher in the Account
menu.

Test Plan: Browser tests.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2979

app/client/ui/DocMenu.ts

@@ -84,6 +84,7 @@ function createLoadedDocMenu(home: HomeModel) {
           ]),
 
           dom.maybe(home.available, () => [
+            buildOtherSites(home),
             (showIntro && page === 'all' ?
               null :
               css.docListHeader(
@@ -232,6 +233,48 @@ function buildAllTemplates(home: HomeModel, templateWorkspaces: Observable<Works
   });
 }
 
+/**
+ * Builds the Other Sites section if there are any to show. Otherwise, builds nothing.
+ */
+function buildOtherSites(home: HomeModel) {
+  return dom.domComputed(home.otherSites, sites => {
+    if (sites.length === 0) { return null; }
+
+    const hideOtherSitesObs = Observable.create(null, false);
+    return css.otherSitesBlock(
+      dom.autoDispose(hideOtherSitesObs),
+      css.otherSitesHeader(
+        'Other Sites',
+        dom.domComputed(hideOtherSitesObs, (collapsed) =>
+          collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse')
+        ),
+        dom.on('click', () => hideOtherSitesObs.set(!hideOtherSitesObs.get())),
+        testId('other-sites-header'),
+      ),
+      dom.maybe((use) => !use(hideOtherSitesObs), () => {
+        const onPersonalSite = Boolean(home.app.currentOrg?.owner);
+        const siteName = onPersonalSite ? 'your personal site' : `the ${home.app.currentOrgName} site`;
+        return [
+          dom('div',
+            `You are on ${siteName}. You also have access to the following sites:`,
+            testId('other-sites-message')
+          ),
+          css.otherSitesButtons(
+            dom.forEach(sites, s =>
+              css.siteButton(
+                s.name,
+                urlState().setLinkUrl({org: s.domain ?? undefined}),
+                testId('other-sites-button')
+              )
+            ),
+            testId('other-sites-buttons')
+          )
+        ];
+      })
+    );
+  });
+}
+
 /**
  * Build the widget for selecting sort and view mode options.
  * If hideSort is true, will hide the sort dropdown: it has no effect on the list of examples, so