fix: hide subscription marketing on iOS (#1929)

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')

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

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
+      {!application.hideSubscriptionMarketing && (
-        small
+        <Button
-        className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
+          primary
-        onClick={() => application.openPurchaseFlow()}
+          small
-      >
+          className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-        Upgrade Features
+          onClick={() => application.openPurchaseFlow()}
-      </Button>
+        >
+          Upgrade Features
+        </Button>
+      )}
     </div>
   )
 

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

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>

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">
+      {!application.hideSubscriptionMarketing && (
-        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+        <div className="flex">
-        {application.hasAccount() && (
+          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-          <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
+          {application.hasAccount() && (
-        )}
+            <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
-      </div>
+          )}
+        </div>
+      )}
     </>
   )
 }

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.hideSubscriptionMarketing && (
-        {application.hasAccount() && (
+        <div className="flex">
-          <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
+          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-        )}
+          {application.hasAccount() && (
-      </div>
+            <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
+          )}
+        </div>
+      )}
     </>
   )
 }

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">
+          {!application.hideSubscriptionMarketing && (
-            <button
+            <div className="p-4">
-              onClick={handleClick}
+              <button
-              className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
+                onClick={handleClick}
-              ref={plansButtonRef}
+                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>
+                Upgrade
-          </div>
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </AlertDialog>

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>

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"

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}
       >

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={
+      className={classNames(
-        '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'
+        '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() ? (

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()