(core) Revealing hidden pages with visible children.

Summary:
When a page is hidden, all its nested pages are shown as children of
a different page that happens to be before (as in pagePos) that page.

This diff shows those pages as CENSORED.

Test Plan: Updated

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: alexmojaki

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

app/client/ui2018/pages.ts

@@ -4,6 +4,7 @@ import { cssEditorInput } from "app/client/ui/HomeLeftPane";
 import { itemHeader, itemHeaderWrapper, treeViewContainer } from "app/client/ui/TreeViewComponentCss";
 import { theme } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
+import { hoverTooltip } from 'app/client/ui/tooltips';
 import { menu, menuItem, menuText } from "app/client/ui2018/menus";
 import { dom, domComputed, DomElementArg, makeTestId, observable, Observable, styled } from "grainjs";
 
@@ -106,6 +107,20 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
     ));
 }
 
+export function buildCensoredPage() {
+  return cssPageItem(
+    cssPageInitial(
+      testId('initial'),
+      dom.text('C'),
+    ),
+    cssCensoredPageName(
+      dom.text('CENSORED'),
+      testId('label'),
+    ),
+    hoverTooltip('This page is censored due to access rules.'),
+  );
+}
+
 const cssPageItem = styled('a', `
   display: flex;
   flex-direction: row;
@@ -143,6 +158,10 @@ const cssPageName = styled('div', `
   }
 `);
 
+const cssCensoredPageName = styled(cssPageName, `
+  color: ${theme.disabledPageFg};
+`);
+
 function onHoverSupport(yesNo: boolean) {
   // On desktop, we show page menu button on hover over page link. This isn't usable on mobile,
   // and interferes with clicks on iOS; so instead we show the button when the page is selected.