(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/AppHeader.ts

@@ -1,23 +1,75 @@
 import {urlState} from 'app/client/models/gristUrlState';
-import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes';
+import {getTheme} from 'app/client/ui/CustomThemes';
 import {cssLeftPane} from 'app/client/ui/PagePanels';
 import {colors, testId, vars} from 'app/client/ui2018/cssVars';
 import * as version from 'app/common/version';
-import {BindableValue, dom, styled} from "grainjs";
+import {BindableValue, Disposable, dom, styled} from "grainjs";
+import {menu, menuDivider, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
+import {getOrgName} from 'app/common/UserAPI';
+import {AppModel} from 'app/client/models/AppModel';
+import {icon} from 'app/client/ui2018/icons';
 
-export function appHeader(orgName: BindableValue<string>, productFlavor: ProductFlavor) {
-  const theme = getTheme(productFlavor);
-  return cssAppHeader(
-    urlState().setLinkUrl({}),
-    cssAppHeader.cls('-widelogo', theme.wideLogo || false),
-    // Show version when hovering over the application icon.
-    cssAppLogo({title: `Ver ${version.version} (${version.gitcommit})`}),
-    cssOrgName(dom.text(orgName)),
-    testId('dm-org'),
-  );
+
+export class AppHeader extends Disposable {
+  constructor(private _orgName: BindableValue<string>, private _appModel: AppModel) {
+    super();
+  }
+
+  public buildDom() {
+    const theme = getTheme(this._appModel.topAppModel.productFlavor);
+
+    return cssAppHeader(
+      cssAppHeader.cls('-widelogo', theme.wideLogo || false),
+      // Show version when hovering over the application icon.
+      cssAppLogo(
+        {title: `Ver ${version.version} (${version.gitcommit})`},
+        urlState().setLinkUrl({}),
+        testId('dm-logo')
+      ),
+      cssOrg(
+        cssOrgName(dom.text(this._orgName)),
+        this._orgName && cssDropdownIcon('Dropdown'),
+        menu(() => this._makeOrgMenu(), {placement: 'bottom-start'}),
+        testId('dm-org'),
+      ),
+    );
+  }
+
+  private _makeOrgMenu() {
+    const orgs = this._appModel.topAppModel.orgs;
+
+    return [
+      menuItemLink(urlState().setLinkUrl({}), 'Go to Home Page', testId('orgmenu-home-page')),
+      menuDivider(),
+      menuSubHeader('Switch Sites'),
+      dom.forEach(orgs, (org) =>
+        menuItemLink(urlState().setLinkUrl({org: org.domain || undefined}),
+          cssOrgSelected.cls('', this._appModel.currentOrg ? org.id === this._appModel.currentOrg.id : false),
+          getOrgName(org),
+          cssOrgCheckmark('Tick', testId('orgmenu-org-tick')),
+          testId('orgmenu-org'),
+        )
+      ),
+    ];
+  }
 }
 
-const cssAppHeader = styled('a', `
+export const cssOrgSelected = styled('div', `
+  background-color: ${colors.dark};
+  color: ${colors.light};
+`);
+
+export const cssOrgCheckmark = styled(icon, `
+  flex: none;
+  margin-left: 16px;
+  --icon-color: ${colors.light};
+  display: none;
+  .${cssOrgSelected.className} > & {
+    display: block;
+  }
+`);
+
+const cssAppHeader = styled('div', `
   display: flex;
   width: 100%;
   height: 100%;
@@ -29,7 +81,7 @@ const cssAppHeader = styled('a', `
   }
 `);
 
-const cssAppLogo = styled('div', `
+const cssAppLogo = styled('a', `
   flex: none;
   height: 48px;
   width: 48px;
@@ -49,8 +101,23 @@ const cssAppLogo = styled('div', `
   }
 `);
 
+const cssDropdownIcon = styled(icon, `
+  flex-shrink: 0;
+  margin-right: 8px;
+`);
+
+const cssOrg = styled('div', `
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  max-width: calc(100% - 48px);
+  cursor: pointer;
+  height: 100%;
+`);
+
 const cssOrgName = styled('div', `
-  padding: 0px 16px;
+  padding-left: 16px;
+  padding-right: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;