feat: handle basic routes (#1784)

packages/web/src/javascripts/App.tsx

@@ -1,7 +1,5 @@
 'use strict'
 
-import { disableIosTextFieldZoom, isDev } from '@/Utils'
-
 declare global {
   interface Window {
     dashboardUrl?: string
@@ -25,8 +23,9 @@ declare global {
   }
 }
 
+import { disableIosTextFieldZoom } from '@/Utils'
 import { IsWebPlatform, WebAppVersion } from '@/Constants/Version'
-import { DesktopManagerInterface, Environment, Platform, SNLog } from '@standardnotes/snjs'
+import { DesktopManagerInterface, Environment, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Application/Device/WebDevice'
 import { StartApplication } from './Application/Device/StartApplication'
@@ -36,44 +35,14 @@ import { WebApplication } from './Application/Application'
 import { createRoot, Root } from 'react-dom/client'
 import { ElementIds } from './Constants/ElementIDs'
 import { MediaQueryBreakpoints } from './Hooks/useMediaQuery'
+import { setViewportHeightWithFallback } from './setViewportHeightWithFallback'
+import { setDefaultMonospaceFont } from './setDefaultMonospaceFont'
 
 let keyCount = 0
 const getKey = () => {
   return keyCount++
 }
 
-const ViewportHeightKey = '--viewport-height'
-
-export const setViewportHeightWithFallback = () => {
-  const currentHeight = parseInt(document.documentElement.style.getPropertyValue(ViewportHeightKey))
-  const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
-
-  if (isDev) {
-    // eslint-disable-next-line no-console
-    console.log(`currentHeight: ${currentHeight}, newValue: ${newValue}`)
-  }
-
-  if (currentHeight && newValue < currentHeight) {
-    return
-  }
-
-  if (!newValue) {
-    document.documentElement.style.setProperty(ViewportHeightKey, '100vh')
-    return
-  }
-
-  document.documentElement.style.setProperty(ViewportHeightKey, `${newValue}px`)
-}
-
-const setDefaultMonospaceFont = (platform?: Platform) => {
-  if (platform === Platform.Android) {
-    document.documentElement.style.setProperty(
-      '--sn-stylekit-monospace-font',
-      '"Roboto Mono", "Droid Sans Mono", monospace',
-    )
-  }
-}
-
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
   device: WebOrDesktopDevice,

packages/web/src/javascripts/Application/Application.ts

@@ -19,25 +19,25 @@ import {
   WebApplicationInterface,
   MobileDeviceInterface,
   MobileUnlockTiming,
+  InternalEventBus,
 } from '@standardnotes/snjs'
 import { makeObservable, observable } from 'mobx'
 import { PanelResizedData } from '@/Types/PanelResizedData'
 import { isDesktopApplication } from '@/Utils'
 import { DesktopManager } from './Device/DesktopManager'
-import { ArchiveManager, AutolockService, IOService, WebAlertService, ThemeManager } from '@standardnotes/ui-services'
+import {
+  ArchiveManager,
+  AutolockService,
+  IOService,
+  RouteService,
+  ThemeManager,
+  WebAlertService,
+} from '@standardnotes/ui-services'
 import { MobileWebReceiver } from './MobileWebReceiver'
 import { AndroidBackHandler } from '@/NativeMobileWeb/AndroidBackHandler'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { setViewportHeightWithFallback } from '@/App'
-
-type WebServices = {
-  viewControllerManager: ViewControllerManager
-  desktopService?: DesktopManager
-  autolockService?: AutolockService
-  archiveService: ArchiveManager
-  themeService: ThemeManager
-  io: IOService
-}
+import { setViewportHeightWithFallback } from '@/setViewportHeightWithFallback'
+import { WebServices } from './WebServices'
 
 export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void
 
@@ -49,6 +49,7 @@ export class WebApplication extends SNApplication implements WebApplicationInter
   private onVisibilityChange: () => void
   private mobileWebReceiver?: MobileWebReceiver
   private androidBackHandler?: AndroidBackHandler
+  public readonly routeService: RouteService
 
   constructor(
     deviceInterface: WebOrDesktopDevice,
@@ -75,8 +76,25 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     })
 
     deviceInterface.setApplication(this)
+    const internalEventBus = new InternalEventBus()
+
     this.itemControllerGroup = new ItemGroupController(this)
     this.iconsController = new IconsController()
+    this.routeService = new RouteService(this, internalEventBus)
+
+    const viewControllerManager = new ViewControllerManager(this, deviceInterface)
+    const archiveService = new ArchiveManager(this)
+    const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
+    const themeService = new ThemeManager(this, internalEventBus)
+
+    this.setWebServices({
+      viewControllerManager,
+      archiveService,
+      desktopService: isDesktopDevice(deviceInterface) ? new DesktopManager(this, deviceInterface) : undefined,
+      io,
+      autolockService: this.isNativeMobileWeb() ? undefined : new AutolockService(this, internalEventBus),
+      themeService,
+    })
 
     if (this.isNativeMobileWeb()) {
       this.mobileWebReceiver = new MobileWebReceiver(this)
@@ -121,6 +139,9 @@ export class WebApplication extends SNApplication implements WebApplicationInter
       ;(this.itemControllerGroup as unknown) = undefined
       ;(this.mobileWebReceiver as unknown) = undefined
 
+      this.routeService.deinit()
+      ;(this.routeService as unknown) = undefined
+
       this.webEventObservers.length = 0
 
       document.removeEventListener('visibilitychange', this.onVisibilityChange)

packages/web/src/javascripts/Application/ApplicationGroup.ts

@@ -1,17 +1,7 @@
 import { WebApplication } from './Application'
-import {
-  ApplicationDescriptor,
-  SNApplicationGroup,
-  Platform,
-  InternalEventBus,
-  isDesktopDevice,
-} from '@standardnotes/snjs'
-import { ArchiveManager, IOService, AutolockService, ThemeManager } from '@standardnotes/ui-services'
-
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
+import { ApplicationDescriptor, SNApplicationGroup } from '@standardnotes/snjs'
 import { getPlatform, isDesktopApplication } from '@/Utils'
 import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
-import { DesktopManager } from './Device/DesktopManager'
 
 const createApplication = (
   descriptor: ApplicationDescriptor,
@@ -30,21 +20,6 @@ const createApplication = (
     webSocketUrl,
   )
 
-  const viewControllerManager = new ViewControllerManager(application, device)
-  const archiveService = new ArchiveManager(application)
-  const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
-  const internalEventBus = new InternalEventBus()
-  const themeService = new ThemeManager(application, internalEventBus)
-
-  application.setWebServices({
-    viewControllerManager,
-    archiveService,
-    desktopService: isDesktopDevice(device) ? new DesktopManager(application, device) : undefined,
-    io,
-    autolockService: application.isNativeMobileWeb() ? undefined : new AutolockService(application, internalEventBus),
-    themeService,
-  })
-
   return application
 }
 

packages/web/src/javascripts/Application/WebServices.ts

@@ -0,0 +1,12 @@
+import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
+import { DesktopManager } from './Device/DesktopManager'
+import { ArchiveManager, AutolockService, IOService, ThemeManager } from '@standardnotes/ui-services'
+
+export type WebServices = {
+  viewControllerManager: ViewControllerManager
+  desktopService?: DesktopManager
+  autolockService?: AutolockService
+  archiveService: ArchiveManager
+  themeService: ThemeManager
+  io: IOService
+}

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -1,8 +1,8 @@
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
-import { getPlatformString, getWindowUrlParams } from '@/Utils'
+import { getPlatformString } from '@/Utils'
 import { ApplicationEvent, Challenge, removeFromArray, WebAppEvent } from '@standardnotes/snjs'
 import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/Constants/Constants'
-import { alertDialog } from '@standardnotes/ui-services'
+import { alertDialog, RouteType } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/Application'
 import Navigation from '@/Components/Navigation/Navigation'
 import NoteGroupView from '@/Components/NoteGroupView/NoteGroupView'
@@ -79,8 +79,13 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
     setNeedsUnlock(application.hasPasscode())
   }, [application])
 
-  const handleDemoSignInFromParams = useCallback(() => {
-    const token = getWindowUrlParams().get('demo-token')
+  const handleDemoSignInFromParamsIfApplicable = useCallback(() => {
+    const route = application.routeService.getRoute()
+    if (route.type !== RouteType.Demo) {
+      return
+    }
+
+    const token = route.demoParams.token
     if (!token || application.hasAccount()) {
       return
     }
@@ -91,8 +96,8 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
   const onAppLaunch = useCallback(() => {
     setLaunched(true)
     setNeedsUnlock(false)
-    handleDemoSignInFromParams()
-  }, [handleDemoSignInFromParams])
+    handleDemoSignInFromParamsIfApplicable()
+  }, [handleDemoSignInFromParamsIfApplicable])
 
   useEffect(() => {
     if (application.isStarted()) {

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -25,7 +25,7 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
           application.getViewControllerManager().purchaseFlowController.openPurchaseFlow()
         }}
       >
-        Upgrade now
+        {hasAccount ? 'Unlock features' : 'Sign up to sync'}
       </button>
     </div>
   ) : null

packages/web/src/javascripts/Components/NoAccountWarning/NoAccountWarningContent.tsx

@@ -26,7 +26,9 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
   return (
     <div className="mt-4 grid grid-cols-1 rounded-md border border-border p-4">
       <h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
-      <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">Sign in or register to back up your notes.</p>
+      <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">
+        Sign in or register to sync your notes to your other devices with end-to-end encryption.
+      </p>
       <Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>
         Open Account menu
       </Button>

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx

@@ -46,7 +46,7 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
   }
 
   if (usedInvitationsCount === 0) {
-    return <Text className="mt-1 mb-3">Make your first subscription invitation below.</Text>
+    return <Text className="mt-1 mb-3">Make your first subscription invite below.</Text>
   }
 
   return (

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx

@@ -30,7 +30,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
     <>
       <Text>
         Subscription sharing is available only on the <span className="font-bold">Professional</span> plan. Please
-        upgrade in order to share subscription.
+        upgrade in order to share your subscription.
       </Text>
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}

packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts

@@ -3,21 +3,7 @@ import { IconType } from '@standardnotes/snjs'
 import { WebApplication } from '@/Application/Application'
 import { PackageProvider } from './Panes/General/Advanced/Packages/Provider/PackageProvider'
 import { securityPrefsHasBubble } from './Panes/Security/securityPrefsHasBubble'
-
-const PREFERENCE_IDS = [
-  'general',
-  'account',
-  'security',
-  'appearance',
-  'backups',
-  'listed',
-  'shortcuts',
-  'accessibility',
-  'get-free-month',
-  'help-feedback',
-] as const
-
-export type PreferenceId = typeof PREFERENCE_IDS[number]
+import { PreferenceId } from '@standardnotes/ui-services'
 
 interface PreferencesMenuItem {
   readonly id: PreferenceId

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -4,7 +4,8 @@ import styled from 'styled-components'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
-import { PreferenceId, PreferencesMenu } from './PreferencesMenu'
+import { PreferencesMenu } from './PreferencesMenu'
+import { PreferenceId } from '@standardnotes/ui-services'
 
 type Props = {
   menu: PreferencesMenu

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowFunctions.ts

@@ -1,24 +1,30 @@
 import { WebApplication } from '@/Application/Application'
-import { getWindowUrlParams, isDesktopApplication } from '@/Utils'
+import { isDesktopApplication } from '@/Utils'
+import { RouteType } from '@standardnotes/ui-services'
 
 export const getPurchaseFlowUrl = async (application: WebApplication): Promise<string | undefined> => {
   const currentUrl = window.location.origin
   const successUrl = isDesktopApplication() ? 'standardnotes://' : currentUrl
+
   if (application.noAccount()) {
     return `${window.purchaseUrl}/offline?&success_url=${successUrl}`
   }
+
   const token = await application.getNewSubscriptionToken()
   if (token) {
     return `${window.purchaseUrl}?subscription_token=${token}&success_url=${successUrl}`
   }
+
   return undefined
 }
 
 export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<boolean> => {
   const url = await getPurchaseFlowUrl(application)
-  const params = getWindowUrlParams()
-  const period = params.get('period') ? `&period=${params.get('period')}` : ''
-  const plan = params.get('plan') ? `&plan=${params.get('plan')}` : ''
+  const route = application.routeService.getRoute()
+  const params = route.type === RouteType.Purchase ? route.purchaseParams : { period: null, plan: null }
+  const period = params.period ? `&period=${params.period}` : ''
+  const plan = params.plan ? `&plan=${params.plan}` : ''
+
   if (url) {
     const finalUrl = `${url}${period}${plan}`
 
@@ -31,5 +37,6 @@ export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<
 
     return true
   }
+
   return false
 }

packages/web/src/javascripts/Controllers/PreferencesController.ts

@@ -1,13 +1,18 @@
-import { PreferenceId } from '@/Components/Preferences/PreferencesMenu'
+import { InternalEventBus } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable } from 'mobx'
+import { PreferenceId } from '@standardnotes/ui-services'
+import { AbstractViewController } from './Abstract/AbstractViewController'
+import { WebApplication } from '@/Application/Application'
 
-const DEFAULT_PANE = 'account'
+const DEFAULT_PANE: PreferenceId = 'account'
 
-export class PreferencesController {
+export class PreferencesController extends AbstractViewController {
   private _open = false
   currentPane: PreferenceId = DEFAULT_PANE
 
-  constructor() {
+  constructor(application: WebApplication, eventBus: InternalEventBus) {
+    super(application, eventBus)
+
     makeObservable<PreferencesController, '_open'>(this, {
       _open: observable,
       currentPane: observable,
@@ -29,18 +34,10 @@ export class PreferencesController {
   closePreferences = (): void => {
     this._open = false
     this.currentPane = DEFAULT_PANE
-    this.removePreferencesToggleFromURLQueryParameters()
+    this.application.routeService.removeSettingsFromURLQueryParameters()
   }
 
   get isOpen(): boolean {
     return this._open
   }
-
-  private removePreferencesToggleFromURLQueryParameters() {
-    const urlSearchParams = new URLSearchParams(window.location.search)
-    urlSearchParams.delete('settings')
-
-    const newUrl = `${window.location.origin}${window.location.pathname}${urlSearchParams.toString()}`
-    window.history.replaceState(null, document.title, newUrl)
-  }
 }

packages/web/src/javascripts/Controllers/ViewControllerManager.ts

@@ -1,4 +1,4 @@
-import { storage, StorageKey } from '@standardnotes/ui-services'
+import { RouteType, storage, StorageKey } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/Application'
 import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
 import { destroyAllObjectProperties } from '@/Utils'
@@ -28,7 +28,6 @@ import { NavigationController } from './Navigation/NavigationController'
 import { FilePreviewModalController } from './FilePreviewModalController'
 import { SelectedItemsController } from './SelectedItemsController'
 import { HistoryModalController } from './NoteHistory/HistoryModalController'
-import { PreferenceId } from '@/Components/Preferences/PreferencesMenu'
 import { AccountMenuPane } from '@/Components/AccountMenu/AccountMenuPane'
 import { LinkingController } from './LinkingController'
 
@@ -47,7 +46,7 @@ export class ViewControllerManager {
   readonly noAccountWarningController: NoAccountWarningController
   readonly notesController: NotesController
   readonly itemListController: ItemListController
-  readonly preferencesController = new PreferencesController()
+  readonly preferencesController: PreferencesController
   readonly purchaseFlowController: PurchaseFlowController
   readonly quickSettingsMenuController = new QuickSettingsController()
   readonly searchOptionsController: SearchOptionsController
@@ -72,6 +71,8 @@ export class ViewControllerManager {
 
     this.subscriptionManager = application.subscriptions
 
+    this.preferencesController = new PreferencesController(application, this.eventBus)
+
     this.selectionController = new SelectedItemsController(application, this.eventBus)
 
     this.featuresController = new FeaturesController(application, this.eventBus)
@@ -220,30 +221,34 @@ export class ViewControllerManager {
 
   addAppEventObserver() {
     this.unsubAppEventObserver = this.application.addEventObserver(async (eventName) => {
-      const urlSearchParams = new URLSearchParams(window.location.search)
-
       switch (eventName) {
         case ApplicationEvent.Launched:
-          if (urlSearchParams.get('purchase')) {
-            this.purchaseFlowController.openPurchaseFlow()
-          }
-          if (urlSearchParams.get('settings')) {
-            const user = this.application.getUser()
-            if (user === undefined) {
-              this.accountMenuController.setShow(true)
-              this.accountMenuController.setCurrentPane(AccountMenuPane.SignIn)
-
-              break
+          {
+            const route = this.application.routeService.getRoute()
+            if (route.type === RouteType.Purchase) {
+              this.purchaseFlowController.openPurchaseFlow()
             }
+            if (route.type === RouteType.Settings) {
+              const user = this.application.getUser()
+              if (user === undefined) {
+                this.accountMenuController.setShow(true)
+                this.accountMenuController.setCurrentPane(AccountMenuPane.SignIn)
 
-            this.preferencesController.openPreferences()
-            this.preferencesController.setCurrentPane(urlSearchParams.get('settings') as PreferenceId)
+                break
+              }
+
+              this.preferencesController.openPreferences()
+              this.preferencesController.setCurrentPane(route.settingsParams.panel)
+            }
           }
           break
         case ApplicationEvent.SignedIn:
-          if (urlSearchParams.get('settings')) {
-            this.preferencesController.openPreferences()
-            this.preferencesController.setCurrentPane(urlSearchParams.get('settings') as PreferenceId)
+          {
+            const route = this.application.routeService.getRoute()
+            if (route.type === RouteType.Settings) {
+              this.preferencesController.openPreferences()
+              this.preferencesController.setCurrentPane(route.settingsParams.panel)
+            }
           }
           break
         case ApplicationEvent.SyncStatusChanged:

packages/web/src/javascripts/Utils/Utils.ts

@@ -160,10 +160,6 @@ export const isEmailValid = (email: string): boolean => {
   return EMAIL_REGEX.test(email)
 }
 
-export const getWindowUrlParams = (): URLSearchParams => {
-  return new URLSearchParams(window.location.search)
-}
-
 export const openInNewTab = (url: string) => {
   const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
   if (newWindow) {

packages/web/src/javascripts/setDefaultMonospaceFont.tsx

@@ -0,0 +1,10 @@
+import { Platform } from '@standardnotes/snjs'
+
+export const setDefaultMonospaceFont = (platform?: Platform) => {
+  if (platform === Platform.Android) {
+    document.documentElement.style.setProperty(
+      '--sn-stylekit-monospace-font',
+      '"Roboto Mono", "Droid Sans Mono", monospace',
+    )
+  }
+}

packages/web/src/javascripts/setViewportHeightWithFallback.tsx

@@ -0,0 +1,24 @@
+import { isDev } from '@/Utils'
+
+export const ViewportHeightKey = '--viewport-height'
+
+export const setViewportHeightWithFallback = () => {
+  const currentHeight = parseInt(document.documentElement.style.getPropertyValue(ViewportHeightKey))
+  const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
+
+  if (isDev) {
+    // eslint-disable-next-line no-console
+    console.log(`currentHeight: ${currentHeight}, newValue: ${newValue}`)
+  }
+
+  if (currentHeight && newValue < currentHeight) {
+    return
+  }
+
+  if (!newValue) {
+    document.documentElement.style.setProperty(ViewportHeightKey, '100vh')
+    return
+  }
+
+  document.documentElement.style.setProperty(ViewportHeightKey, `${newValue}px`)
+}