(core) Polish upgrade button

Summary:
On mobile, clicking the upgrade button will now immediately display
the plans modal. The button margins have also been adjusted to be
smaller on mobile. Finally, some disabled options related to workspace
sharing in the left panel (on personal sites) are now hidden instead.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/client/ui/DocMenu.ts

@@ -75,7 +75,9 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
               viewSettings,
               // Hide the sort and view options when showing the intro.
               {hideSort: showIntro, hideView: showIntro && page === 'all'},
-              ['all', 'workspace'].includes(page) ? upgradeButton.showUpgradeButton() : null,
+              ['all', 'workspace'].includes(page)
+                ? upgradeButton.showUpgradeButton(css.upgradeButton.cls(''))
+                : null,
             ),
 
             // Build the pinned docs dom. Builds nothing if the selectedOrg is unloaded.
@@ -118,8 +120,6 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                   dom('div',
                     showIntro ? buildHomeIntro(home) : null,
                     buildAllDocsBlock(home, home.workspaces, showIntro, flashDocId, viewSettings),
-                    dom.maybe(use => use(isNarrowScreenObs()),
-                      () => upgradeButton.showUpgradeCard()),
                     shouldShowTemplates(home, showIntro) ? buildAllDocsTemplates(home, viewSettings) : null,
                   ) :
                 (page === 'trash') ?
@@ -147,7 +147,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
       testId('doclist')
     ),
     dom.maybe(use => !use(isNarrowScreenObs()) && ['all', 'workspace'].includes(use(home.currentPage)),
-              () => upgradeButton.showUpgradeCard()),
+              () => upgradeButton.showUpgradeCard(css.upgradeCard.cls(''))),
   );
 }
 

app/client/ui/DocMenuCss.ts

@@ -333,3 +333,17 @@ export const sortSelector = styled('div', `
     }
   }
 `);
+
+export const upgradeButton = styled('div', `
+  margin-left: 32px;
+
+  @media ${mediaSmall} {
+    & {
+      margin-left: 8px;
+    }
+  }
+`);
+
+export const upgradeCard = styled('div', `
+  margin-left: 64px;
+`);

app/client/ui/HomeLeftPane.ts

@@ -52,6 +52,7 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
       ),
       dom.forEach(home.workspaces, (ws) => {
         if (ws.isSupportWorkspace) { return null; }
+        const info = getWorkspaceInfo(home.app, ws);
         const isTrivial = computed((use) => Boolean(getWorkspaceInfo(home.app, ws).isDefault &&
                                                     use(home.singleWorkspace)));
         // TODO: Introduce a "SwitchSelector" pattern to avoid the need for N computeds (and N
@@ -65,7 +66,10 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
           cssPageLink(cssPageIcon('Folder'), cssLinkText(workspaceName(home.app, ws)),
             dom.hide(isRenaming),
             urlState().setLinkUrl({ws: ws.id}),
-            cssMenuTrigger(icon('Dots'),
+            // Don't show menu if workspace is personal and shared by another user; we could
+            // be a bit more nuanced here, but as of today the menu isn't particularly useful
+            // as all the menu options are disabled.
+            !info.self && info.owner ? null : cssMenuTrigger(icon('Dots'),
               menu(() => workspaceMenu(home, ws, renaming),
                 {placement: 'bottom-start', parentSelectorToMark: '.' + cssPageEntry.className}),
 
@@ -223,12 +227,11 @@ function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Work
     upgradableMenuItem(needUpgrade, deleteWorkspace, "Delete",
       dom.cls('disabled', user => !roles.canEdit(ws.access)),
       testId('dm-delete-workspace')),
-    upgradableMenuItem(needUpgrade, manageWorkspaceUsers,
+    // TODO: Personal plans can't currently share workspaces, but that restriction
+    // should formally be documented and defined in `Features`, with this check updated
+    // to look there instead.
+    home.app.isPersonal ? null : upgradableMenuItem(needUpgrade, manageWorkspaceUsers,
       roles.canEditAccess(ws.access) ? "Manage Users" : "Access Details",
-      // TODO: Personal plans can't currently share workspaces, but that restriction
-      // should formally be documented and defined in `Features`, with this check updated
-      // to look there instead.
-      dom.cls('disabled', () => home.app.isPersonal),
       testId('dm-workspace-access')),
     upgradeText(needUpgrade, () => home.app.showUpgradeModal()),
   ];

app/client/ui/ProductUpgradesStub.ts

@@ -1,6 +1,6 @@
 import type {AppModel} from 'app/client/models/AppModel';
 import {commonUrls} from 'app/common/gristUrls';
-import {Disposable, DomContents, IDisposableOwner, Observable, observable} from 'grainjs';
+import {Disposable, DomArg, DomContents, IDisposableOwner, Observable, observable} from 'grainjs';
 
 export function buildNewSiteModal(context: Disposable, options: {
   planName: string,
@@ -18,8 +18,8 @@ export function showTeamUpgradeConfirmation(owner: Disposable) {
 }
 
 export interface UpgradeButton  {
-  showUpgradeCard(): DomContents;
+  showUpgradeCard(...args: DomArg<HTMLElement>[]): DomContents;
-  showUpgradeButton(): DomContents;
+  showUpgradeButton(...args: DomArg<HTMLElement>[]): DomContents;
 }
 
 export function buildUpgradeButton(owner: IDisposableOwner, app: AppModel): UpgradeButton {