(core) Add additional org items to AppHeader

Summary:
Adds links to manage team and go to billing account in
the org menu (opened by clicking the dropdown in the
top-left corner of Grist). Tweaks some wording of items
in both AppHeader and AccountWidget, and adds a link
to create a new team site to the Site Switcher in both
menus.

Also tweaks the UI of UserManager by adding
an animation when the manager is opened from the
doc access dialog.

Test Plan: Browser tests.

Reviewers: dsagal

Reviewed By: dsagal

Subscribers: dsagal

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

app/client/ui/SiteSwitcher.ts

@@ -0,0 +1,53 @@
+import {commonUrls} from 'app/common/gristUrls';
+import {getOrgName} from 'app/common/UserAPI';
+import {dom, makeTestId, styled} from 'grainjs';
+import {AppModel} from 'app/client/models/AppModel';
+import {urlState} from 'app/client/models/gristUrlState';
+import {menuIcon, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
+import {icon} from 'app/client/ui2018/icons';
+import {colors} from 'app/client/ui2018/cssVars';
+
+const testId = makeTestId('test-site-switcher-');
+
+/**
+ * Builds a menu sub-section that displays a list of orgs/sites that the current
+ * valid user has access to, with buttons to navigate to them.
+ *
+ * Used by AppHeader and AccountWidget.
+ */
+export function buildSiteSwitcher(appModel: AppModel) {
+  const orgs = appModel.topAppModel.orgs;
+
+  return [
+    menuSubHeader('Switch Sites'),
+    dom.forEach(orgs, (org) =>
+      menuItemLink(urlState().setLinkUrl({ org: org.domain || undefined }),
+        cssOrgSelected.cls('', appModel.currentOrg ? org.id === appModel.currentOrg.id : false),
+        getOrgName(org),
+        cssOrgCheckmark('Tick', testId('org-tick')),
+        testId('org'),
+      )
+    ),
+    menuItemLink(
+      { href: commonUrls.createTeamSite },
+      menuIcon('Plus'),
+      'Create new team site',
+      testId('create-new-site'),
+    ),
+  ];
+}
+
+const cssOrgSelected = styled('div', `
+  background-color: ${colors.dark};
+  color: ${colors.light};
+`);
+
+const cssOrgCheckmark = styled(icon, `
+  flex: none;
+  margin-left: 16px;
+  --icon-color: ${colors.light};
+  display: none;
+  .${cssOrgSelected.className} > & {
+    display: block;
+  }
+`);