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

@@ -2,6 +2,7 @@ import {transientInput} from 'app/client/ui/transientInput';
 import {colors, mediaSmall, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {styled} from 'grainjs';
+import {bigBasicButton} from 'app/client/ui2018/buttons';
 
 // The "&:after" clause forces some padding below all docs.
 export const docList = styled('div', `
@@ -40,6 +41,8 @@ export const featuredTemplatesHeader = styled(docListHeader, `
   align-items: center;
 `);
 
+export const otherSitesHeader = templatesHeader;
+
 export const docBlock = styled('div', `
   max-width: 550px;
   min-width: 300px;
@@ -54,6 +57,23 @@ export const templatesDocBlock = styled(docBlock, `
   margin-top: 32px;
 `);
 
+export const otherSitesBlock = styled('div', `
+  margin-bottom: 32px;
+`);
+
+export const otherSitesButtons = styled('div', `
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 16px;
+  margin-top: 16px;
+  margin-bottom: 28px;
+  gap: 16px;
+`);
+
+export const siteButton = styled(bigBasicButton, `
+  flex: 0 0 auto;
+`);
+
 export const docHeaderIconDark = styled(icon, `
   margin-right: 8px;
   margin-top: -3px;
@@ -74,6 +94,8 @@ export const templatesHeaderIcon = styled(docHeaderIcon, `
   height: 24px;
 `);
 
+export const otherSitesHeaderIcon = templatesHeaderIcon;
+
 const docBlockHeader = `
   display: flex;
   align-items: center;