(core) Make side panels responsive and start closed on small screens.

Summary:
- Add isNarrowScreenObs() observable.
- Remove optimizeNarrowScreen flag (now assumed always true).
- Added viewport support and mobile tweaks to Error/Billing/Welcome pages.
- Fix responsiveness of panel transitions, and of side panel state.
- Close left panel on navigation to another page or workspace.
- Start panels collapsed in both doc and docmenu cases.

Test Plan: Tested manually, and fixed tests to accept the new behavior.

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/ui/AppUI.ts

@@ -15,7 +15,7 @@ import {pagePanels} from 'app/client/ui/PagePanels';
 import {RightPanel} from 'app/client/ui/RightPanel';
 import {createTopBarDoc, createTopBarHome} from 'app/client/ui/TopBar';
 import {WelcomePage} from 'app/client/ui/WelcomePage';
-import {isNarrowScreen, testId} from 'app/client/ui2018/cssVars';
+import {testId} from 'app/client/ui2018/cssVars';
 import {Computed, dom, IDisposable, IDisposableOwner, Observable, replaceContent, subscribe} from 'grainjs';
 
 // When integrating into the old app, we might in theory switch between new-style and old-style
@@ -100,28 +100,18 @@ function pagePanelsHome(owner: IDisposableOwner, appModel: AppModel) {
     },
     headerMain: createTopBarHome(appModel),
     contentMain: createDocMenu(pageModel),
-    optimizeNarrowScreen: true,
   });
 }
 
-// Create session observable. But if device is a narrow screen create a regular observable.
-function createPanelObs<T>(owner: IDisposableOwner, key: string, _default: T, isValid: (val: any) => val is T) {
-  if (isNarrowScreen()) {
-    return Observable.create(owner, _default);
-  }
-  return createSessionObs<T>(owner, key, _default, isValid);
-}
-
 function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App) {
   const pageModel = DocPageModelImpl.create(owner, appObj, appModel);
   // To simplify manual inspection in the common case, keep the most recently created
   // DocPageModel available as a global variable.
   (window as any).gristDocPageModel = pageModel;
-  const leftPanelOpen = createPanelObs<boolean>(owner, "leftPanelOpen", isNarrowScreen() ? false : true,
-                                                       isBoolean);
-  const rightPanelOpen = createPanelObs<boolean>(owner, "rightPanelOpen", false, isBoolean);
-  const leftPanelWidth = createPanelObs<number>(owner, "leftPanelWidth", 240, isNumber);
-  const rightPanelWidth = createPanelObs<number>(owner, "rightPanelWidth", 240, isNumber);
+  const leftPanelOpen = createSessionObs<boolean>(owner, "leftPanelOpen", true, isBoolean);
+  const rightPanelOpen = createSessionObs<boolean>(owner, "rightPanelOpen", false, isBoolean);
+  const leftPanelWidth = createSessionObs<number>(owner, "leftPanelWidth", 240, isNumber);
+  const rightPanelWidth = createSessionObs<number>(owner, "rightPanelWidth", 240, isNumber);
 
   // The RightPanel component gets created only when an instance of GristDoc is set in pageModel.
   // use.owner is a feature of grainjs to make the new RightPanel owned by the computed itself:
@@ -146,7 +136,7 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
       panelWidth: leftPanelWidth,
       panelOpen: leftPanelOpen,
       header: appHeader(appModel.currentOrgName || pageModel.currentOrgName, appModel.topAppModel.productFlavor),
-      content: pageModel.createLeftPane(isNarrowScreen() ? Observable.create(null, true) : leftPanelOpen),
+      content: pageModel.createLeftPane(leftPanelOpen),
     },
     rightPanel: {
       panelWidth: rightPanelWidth,
@@ -158,7 +148,6 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
     contentMain: dom.maybe(pageModel.gristDoc, (gristDoc) => gristDoc.buildDom()),
     onResize,
     testId,
-    optimizeNarrowScreen: true,
     contentBottom: dom.create(createBottomBarDoc, pageModel, leftPanelOpen, rightPanelOpen)
   });
 }