(core) Redesign examples and templates UI

Summary:
The old Examples and Templates workspace is now
a page that pulls templates from a new public Grist Templates org.
The All Documents view will pull featured templates from that org, where
featured templates are simply pinned documents in Grist Templates. The
Examples and Templates page will also show the featured templates, as
well as the rest of the available templates organized by category. The
categories are equivalent to workspaces in Grist Templates, and are
generated dynamically.

Test Plan: Browser tests.

Reviewers: paulfitz, dsagal

Reviewed By: paulfitz, dsagal

Subscribers: dsagal, paulfitz, jarek

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

app/client/ui/DocMenuCss.ts

@@ -31,6 +31,15 @@ export const docListHeader = styled('div', `
   font-weight: ${vars.headerControlTextWeight};
 `);
 
+export const templatesHeader = styled(docListHeader, `
+  cursor: pointer;
+`);
+
+export const featuredTemplatesHeader = styled(docListHeader, `
+  display: flex;
+  align-items: center;
+`);
+
 export const docBlock = styled('div', `
   max-width: 550px;
   min-width: 300px;
@@ -41,6 +50,10 @@ export const docBlock = styled('div', `
   }
 `);
 
+export const templatesDocBlock = styled(docBlock, `
+  margin-top: 32px;
+`);
+
 export const docHeaderIconDark = styled(icon, `
   margin-right: 8px;
   margin-top: -3px;
@@ -50,7 +63,18 @@ export const docHeaderIcon = styled(docHeaderIconDark, `
   --icon-color: ${colors.slate};
 `);
 
-export const docBlockHeaderLink = styled('a', `
+export const featuredTemplatesIcon = styled(icon, `
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+`);
+
+export const templatesHeaderIcon = styled(docHeaderIcon, `
+  width: 24px;
+  height: 24px;
+`);
+
+const docBlockHeader = `
   display: flex;
   align-items: center;
   height: 40px;
@@ -65,7 +89,11 @@ export const docBlockHeaderLink = styled('a', `
     outline: none;
     color: inherit;
   }
-`);
+`;
+
+export const docBlockHeaderLink = styled('a', docBlockHeader);
+
+export const templateBlockHeader = styled('div', docBlockHeader);
 
 export const wsLeft = styled('div', `
   flex: 1 0 50%;