From 35b21b21ce2438540d799b5a2f04fe5616bf2c3e Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Wed, 2 Nov 2022 12:07:26 -0500
Subject: [PATCH] fix: hide subscription marketing on iOS (#1929)

---
 .../javascripts/Application/Application.ts    |  8 ++++++++
 .../ContentListView/ContentListView.tsx       |  7 ++++---
 .../Header/DisplayOptionsMenu.tsx             | 19 ++++++++++--------
 .../Components/Footer/UpgradeNow.tsx          |  4 ++++
 .../Components/NotesOptions/NotesOptions.tsx  |  4 +++-
 .../Account/Subscription/NoSubscription.tsx   | 14 +++++++------
 .../SubscriptionSharing/NoProSubscription.tsx | 15 ++++++++------
 .../PremiumFeaturesModal.tsx                  | 20 ++++++++++---------
 .../QuickSettingsMenu/FocusModeSwitch.tsx     |  7 ++++++-
 .../PanelSettingsSection.tsx                  |  2 +-
 .../QuickSettingsMenu/QuickSettingsMenu.tsx   | 13 ++++++++++--
 .../QuickSettingsMenu/ThemesMenuButton.tsx    |  9 ++++++---
 .../ItemList/ItemListController.ts            | 20 +++++++++++++++++--
 13 files changed, 100 insertions(+), 42 deletions(-)

diff --git a/packages/web/src/javascripts/Application/Application.ts b/packages/web/src/javascripts/Application/Application.ts
index cf202ad79..6a9e35264 100644
--- a/packages/web/src/javascripts/Application/Application.ts
+++ b/packages/web/src/javascripts/Application/Application.ts
@@ -203,6 +203,14 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     return undefined
   }
 
+  isNativeIOS() {
+    return this.isNativeMobileWeb() && this.platform === Platform.Ios
+  }
+
+  get hideSubscriptionMarketing() {
+    return this.isNativeIOS()
+  }
+
   mobileDevice(): MobileDeviceInterface {
     if (!this.isNativeMobileWeb()) {
       throw Error('Attempting to access device as mobile device on non mobile platform')
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
index a1822d609..999cd1a00 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -110,6 +110,7 @@ const ContentListView: FunctionComponent<Props> = ({
     renderedItems,
     items,
     searchBarElement,
+    isCurrentNoteTemplate,
   } = itemListController
 
   const { selectedUuids, selectNextItem, selectPreviousItem } = selectionController
@@ -245,13 +246,13 @@ const ContentListView: FunctionComponent<Props> = ({
   )
 
   useEffect(() => {
-    const hasEditorPane = selectedUuids.size > 0
+    const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0 || isCurrentNoteTemplate
     if (!hasEditorPane) {
       itemsViewPanelRef.current?.style.removeProperty('width')
     }
-  }, [selectedUuids, itemsViewPanelRef])
+  }, [selectedUuids, itemsViewPanelRef, isCurrentNoteTemplate, renderedItems])
 
-  const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0
+  const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0 || isCurrentNoteTemplate
 
   return (
     <div
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
index 51fc917f2..746e106e4 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -212,14 +212,17 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         {!DailyEntryModeEnabled &&
           'Create powerful workflows and organizational layouts with per-tag display preferences.'}
       </p>
-      <Button
-        primary
-        small
-        className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-        onClick={() => application.openPurchaseFlow()}
-      >
-        Upgrade Features
-      </Button>
+
+      {!application.hideSubscriptionMarketing && (
+        <Button
+          primary
+          small
+          className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
+          onClick={() => application.openPurchaseFlow()}
+        >
+          Upgrade Features
+        </Button>
+      )}
     </div>
   )
 
diff --git a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
index 055479489..5c036adff 100644
--- a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
+++ b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
@@ -12,6 +12,10 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
   const shouldShowCTA = !featuresController.hasFolders
   const hasAccount = application.hasAccount()
 
+  if (hasAccount && application.hideSubscriptionMarketing) {
+    return null
+  }
+
   return shouldShowCTA ? (
     <div className="flex h-full items-center px-2">
       <button
diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
index 46a65b772..b3902ea95 100644
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -286,11 +286,13 @@ const NotesOptions = ({
 
   const switchClassNames = classNames(textClassNames, defaultClassNames, 'justify-between')
 
+  const firstItemClass = 'pt-4'
+
   return (
     <>
       {notes.length === 1 && (
         <>
-          <button className={defaultClassNames} onClick={openRevisionHistoryModal}>
+          <button className={classNames(defaultClassNames, firstItemClass)} onClick={openRevisionHistoryModal}>
             <Icon type="history" className={iconClass} />
             Note history
           </button>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
index e91a34d79..d38b7bc45 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
@@ -31,12 +31,14 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
       <Text>You don't have a Standard Notes subscription yet.</Text>
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
-      <div className="flex">
-        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-        {application.hasAccount() && (
-          <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
-        )}
-      </div>
+      {!application.hideSubscriptionMarketing && (
+        <div className="flex">
+          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+          {application.hasAccount() && (
+            <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
+          )}
+        </div>
+      )}
     </>
   )
 }
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
index 008427ad7..51f15820e 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
@@ -34,12 +34,15 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
       </Text>
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
-      <div className="flex">
-        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-        {application.hasAccount() && (
-          <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
-        )}
-      </div>
+
+      {!application.hideSubscriptionMarketing && (
+        <div className="flex">
+          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+          {application.hasAccount() && (
+            <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
+          )}
+        </div>
+      )}
     </>
   )
 }
diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
index 5afb56f18..719f24135 100644
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
@@ -61,15 +61,17 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
             To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
             upgrade your current plan.
           </AlertDialogDescription>
-          <div className="p-4">
-            <button
-              onClick={handleClick}
-              className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
-              ref={plansButtonRef}
-            >
-              Upgrade
-            </button>
-          </div>
+          {!application.hideSubscriptionMarketing && (
+            <div className="p-4">
+              <button
+                onClick={handleClick}
+                className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
+                ref={plansButtonRef}
+              >
+                Upgrade
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </AlertDialog>
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index 154de6eaf..04c4b7786 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -2,6 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, MouseEventHandler, useCallback } from 'react'
 import Switch from '@/Components/Switch/Switch'
 import { isMobileScreen } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   application: WebApplication
@@ -29,7 +30,11 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
 
   return (
     <button
-      className="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2"
+      className={classNames(
+        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left',
+        'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
+        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+      )}
       onClick={toggle}
     >
       <div className="flex items-center">Focused Writing</div>
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
index 68cb3b2db..9a5f6e1c1 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
@@ -53,7 +53,7 @@ const PanelSettingsSection = ({ application }: Props) => {
   }, [application])
 
   return (
-    <div className="hidden text-sm md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
+    <div className="hidden md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
       <MenuItem
         type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
index ae71d64a0..8438d14a3 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -21,6 +21,7 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 const focusModeAnimationDuration = 1255
 
@@ -173,7 +174,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
           <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
           {toggleableComponents.map((component) => (
             <button
-              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
+              className={classNames(
+                'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left',
+                'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+                'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+              )}
               onClick={() => {
                 toggleComponent(component)
               }}
@@ -191,7 +196,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
       )}
       <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
       <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
+        className={classNames(
+          'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left',
+          'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+          'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+        )}
         onClick={toggleDefaultTheme}
         ref={defaultThemeButtonRef}
       >
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index 5258fcc74..5c98937e2 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -8,6 +8,7 @@ import { ThemeItem } from './ThemeItem'
 import RadioIndicator from '../Radio/RadioIndicator'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   item: ThemeItem
@@ -54,9 +55,11 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
 
   return (
     <button
-      className={
-        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2 md:text-sm'
-      }
+      className={classNames(
+        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5',
+        'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
+        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+      )}
       onClick={toggleTheme}
     >
       {item.component?.isLayerable() ? (
diff --git a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
index 0fec5544c..69992c153 100644
--- a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
+++ b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
@@ -386,7 +386,12 @@ export class ItemListController
    * In some cases we want to keep the selected item open even if it doesn't appear in results,
    * for example if you are inside tag Foo and remove tag Foo from the note, we want to keep the note open.
    */
-  private shouldCloseActiveItem = (activeItem: SNNote | FileItem | undefined) => {
+  private shouldCloseActiveItem = (activeItem: SNNote | FileItem | undefined, source?: ItemsReloadSource) => {
+    if (source === ItemsReloadSource.UserTriggeredTagChange) {
+      log(LoggingDomain.Selection, 'shouldCloseActiveItem true due to ItemsReloadSource.UserTriggeredTagChange')
+      return true
+    }
+
     const activeItemExistsInUpdatedResults = this.items.find((item) => item.uuid === activeItem?.uuid)
 
     const closeBecauseActiveItemIsFileAndDoesntExistInUpdatedResults =
@@ -417,6 +422,7 @@ export class ItemListController
       return true
     }
 
+    log(LoggingDomain.Selection, 'shouldCloseActiveItem false')
     return false
   }
 
@@ -462,7 +468,7 @@ export class ItemListController
 
     const activeItem = activeController?.item
 
-    if (activeController && activeItem && this.shouldCloseActiveItem(activeItem)) {
+    if (activeController && activeItem && this.shouldCloseActiveItem(activeItem, itemsReloadSource)) {
       this.closeItemController(activeController)
 
       this.selectionController.deselectItem(activeItem)
@@ -835,6 +841,16 @@ export class ItemListController
     this.application.getDesktopService()?.searchText(this.noteFilterText)
   }
 
+  get isCurrentNoteTemplate(): boolean {
+    const controller = this.getActiveItemController()
+
+    if (!controller) {
+      return false
+    }
+
+    return controller instanceof NoteViewController && controller.isTemplateNote
+  }
+
   public async insertCurrentIfTemplate(): Promise<void> {
     const controller = this.getActiveItemController()