chore(release): publish

- @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].0

packages/desktop/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.23.160](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.159](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.158](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-25)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.157](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.156](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.155](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
 ## [3.23.154](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
 
 **Note:** Version bump only for package @standardnotes/desktop

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.23.154",
+  "version": "3.23.160",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/mobile/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.36.13](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.36.12](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.36.11](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-25)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.36.10](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-25)
+
+### Bug Fixes
+
+* **mobile:** hide drawer on new mobile experience ([#1642](https://github.com/standardnotes/app/issues/1642)) ([8614a63](https://github.com/standardnotes/app/commit/8614a638a4bfc8fdf97020bf1fc147c62998cf3b))
+
+## [3.36.9](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.36.8](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.36.7](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+### Bug Fixes
+
+* **mobile:** accurate version number ([789a78b](https://github.com/standardnotes/app/commit/789a78bda33f12d214c12a63ae27d2ba0f39feab))
+
+## [3.36.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
 ## [3.36.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
 
 **Note:** Version bump only for package @standardnotes/mobile

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.36.5",
+  "version": "3.36.13",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",

packages/mobile/src/AppStack.tsx

@@ -121,7 +121,13 @@ export const AppStackComponent = (props: ModalStackNavigationProp<'AppStack'>) =
     [application],
   )
 
-  if (IsMobileWeb) {
+  if (!application) {
+    return null
+  }
+
+  const shouldOpenWebApp = application.getValue(AlwaysOpenWebAppOnLaunchKey, StorageValueModes.Nonwrapped) as boolean
+
+  if (IsMobileWeb || shouldOpenWebApp) {
     return (
       <AppStack.Navigator
         screenOptions={() => ({
@@ -134,12 +140,6 @@ export const AppStackComponent = (props: ModalStackNavigationProp<'AppStack'>) =
     )
   }
 
-  if (!application) {
-    return null
-  }
-
-  const shouldOpenWebApp = application.getValue(AlwaysOpenWebAppOnLaunchKey, StorageValueModes.Nonwrapped) as boolean
-
   return (
     <DrawerLayout
       ref={drawerRef}

packages/mobile/src/MobileWebAppContainer.tsx

@@ -3,7 +3,9 @@ import { IsDev } from '@Lib/Utils'
 import { ReactNativeToWebEvent } from '@standardnotes/snjs'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Keyboard, Platform } from 'react-native'
+import VersionInfo from 'react-native-version-info'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
+import pjson from '../package.json'
 import { AppStateObserverService } from './AppStateObserverService'
 
 const LoggingEnabled = IsDev
@@ -84,7 +86,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
   const WebProcessDeviceInterface = `
   class WebProcessDeviceInterface {
     constructor(messageSender) {
-      this.appVersion = '1.2.3'
+      this.appVersion = '${pjson.version} (${VersionInfo.buildVersion})'
       this.environment = 4
       this.databases = []
       this.messageSender = messageSender

packages/releases/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.85](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.84](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.83](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-25)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.82](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-25)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.81](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.80](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.79](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.78](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/releases
+
 ## [1.3.77](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/releases",
-  "version": "1.3.77",
+  "version": "1.3.85",
   "license": "AGPL-3.0-or-later",
   "main": "dist/releases.json",
   "types": "dist/index.d.ts",

packages/web/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.59.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+### Features
+
+* sticky header on mobile if plaintext note is scrolled ([#1645](https://github.com/standardnotes/app/issues/1645)) ([f8f6a52](https://github.com/standardnotes/app/commit/f8f6a5212b608c7a43957449d42b1d462134773c))
+
+## [3.58.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-26)
+
+### Bug Fixes
+
+* **web:** check for proper feature in the subscription sharing section ([507823d](https://github.com/standardnotes/app/commit/507823dc4f1a2c1db47635ac26a686d4d8f2f4e8))
+
+# [3.58.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-25)
+
+### Features
+
+* note tags button for mobile ([#1641](https://github.com/standardnotes/app/issues/1641)) ([fe2ce9f](https://github.com/standardnotes/app/commit/fe2ce9f1e8b0c027c30bcd892606e914f71d4634))
+
+## [3.57.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+### Bug Fixes
+
+* improve new note title format ([#1640](https://github.com/standardnotes/app/issues/1640)) ([59e814b](https://github.com/standardnotes/app/commit/59e814bcec8c3633b1b2baeae3e435fa2a19777d))
+
+## [3.57.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+### Bug Fixes
+
+* move prefs button next to account menu button in footer ([#1639](https://github.com/standardnotes/app/issues/1639)) ([a3611c8](https://github.com/standardnotes/app/commit/a3611c802f08817d2ba73adf6b9d48465738b1b6))
+
+## [3.57.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+### Bug Fixes
+
+* responsiveness when resizing window on web/desktop ([#1637](https://github.com/standardnotes/app/issues/1637)) ([e4b1b64](https://github.com/standardnotes/app/commit/e4b1b641194cede65b8f0413bb1c805a84585dfe))
+
 # [3.57.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
 
 ### Features

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.57.0",
+  "version": "3.59.0",
   "license": "AGPL-3.0-or-later",
   "main": "dist/app.js",
   "author": "Standard Notes.",

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

@@ -362,14 +362,6 @@ class Footer extends PureComponent<Props, State> {
                 viewControllerManager={this.viewControllerManager}
               />
             </div>
-            <div className="relative z-footer-bar-item select-none">
-              <QuickSettingsButton
-                isOpen={this.state.showQuickSettingsMenu}
-                toggleMenu={this.quickSettingsClickHandler}
-                application={this.application}
-                quickSettingsMenuController={this.viewControllerManager.quickSettingsMenuController}
-              />
-            </div>
             <div className="relative z-footer-bar-item select-none">
               <StyledTooltip label="Open preferences">
                 <button
@@ -382,6 +374,14 @@ class Footer extends PureComponent<Props, State> {
                 </button>
               </StyledTooltip>
             </div>
+            <div className="relative z-footer-bar-item select-none">
+              <QuickSettingsButton
+                isOpen={this.state.showQuickSettingsMenu}
+                toggleMenu={this.quickSettingsClickHandler}
+                application={this.application}
+                quickSettingsMenuController={this.viewControllerManager.quickSettingsMenuController}
+              />
+            </div>
             {this.state.showBetaWarning && (
               <Fragment>
                 <div className="relative z-footer-bar-item ml-3 flex select-none items-center border-l border-solid border-border pl-3">

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

@@ -62,7 +62,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
     <div
       id="navigation"
       className={classNames(
-        'sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pt-safe-top md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full',
+        'sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pt-safe-top md:h-full md:max-h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full',
         isIOS() ? 'pb-safe-bottom' : 'pb-2.5',
       )}
       ref={ref}

packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx

@@ -8,21 +8,23 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
+  navigationController: NavigationController
   tag: SNTag
 }
 
-const NoteTag = ({ viewControllerManager, tag }: Props) => {
+const NoteTag = ({ noteTagsController, navigationController, tag }: Props) => {
   const { toggleAppPane } = useResponsiveAppPane()
 
-  const noteTags = viewControllerManager.noteTagsController
+  const noteTags = noteTagsController
 
   const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags
 
@@ -37,9 +39,9 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
   const longTitle = noteTags.getLongTitle(tag)
 
   const deleteTag = useCallback(() => {
-    viewControllerManager.noteTagsController.focusPreviousTag(tag)
-    viewControllerManager.noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
-  }, [viewControllerManager, tag])
+    noteTagsController.focusPreviousTag(tag)
+    noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
+  }, [noteTagsController, tag])
 
   const onDeleteTagClick: MouseEventHandler = useCallback(
     (event) => {
@@ -53,30 +55,30 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
     async (event) => {
       if (tagClicked && event.target !== deleteTagRef.current) {
         setTagClicked(false)
-        await viewControllerManager.navigationController.setSelectedTag(tag)
+        await navigationController.setSelectedTag(tag)
         toggleAppPane(AppPaneId.Items)
       } else {
         setTagClicked(true)
         tagRef.current?.focus()
       }
     },
-    [viewControllerManager, tagClicked, tag, toggleAppPane],
+    [tagClicked, navigationController, tag, toggleAppPane],
   )
 
   const onFocus = useCallback(() => {
-    viewControllerManager.noteTagsController.setFocusedTagUuid(tag.uuid)
+    noteTagsController.setFocusedTagUuid(tag.uuid)
     setShowDeleteButton(true)
-  }, [viewControllerManager, tag])
+  }, [noteTagsController, tag])
 
   const onBlur: FocusEventHandler = useCallback(
     (event) => {
       const relatedTarget = event.relatedTarget as Node
       if (relatedTarget !== deleteTagRef.current) {
-        viewControllerManager.noteTagsController.setFocusedTagUuid(undefined)
+        noteTagsController.setFocusedTagUuid(undefined)
         setShowDeleteButton(false)
       }
     },
-    [viewControllerManager],
+    [noteTagsController],
   )
 
   const getTabIndex = useCallback(() => {
@@ -91,33 +93,33 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
 
   const onKeyDown: KeyboardEventHandler = useCallback(
     (event) => {
-      const tagIndex = viewControllerManager.noteTagsController.getTagIndex(tag, tags)
+      const tagIndex = noteTagsController.getTagIndex(tag, tags)
       switch (event.key) {
         case 'Backspace':
           deleteTag()
           break
         case 'ArrowLeft':
-          viewControllerManager.noteTagsController.focusPreviousTag(tag)
+          noteTagsController.focusPreviousTag(tag)
           break
         case 'ArrowRight':
           if (tagIndex === tags.length - 1) {
-            viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+            noteTagsController.setAutocompleteInputFocused(true)
           } else {
-            viewControllerManager.noteTagsController.focusNextTag(tag)
+            noteTagsController.focusNextTag(tag)
           }
           break
         default:
           return
       }
     },
-    [viewControllerManager, deleteTag, tag, tags],
+    [noteTagsController, deleteTag, tag, tags],
   )
 
   useEffect(() => {
     if (focusedTagUuid === tag.uuid) {
       tagRef.current?.focus()
     }
-  }, [viewControllerManager, focusedTagUuid, tag])
+  }, [noteTagsController, focusedTagUuid, tag])
 
   return (
     <button

packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx

@@ -1,31 +1,33 @@
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import AutocompleteTagInput from '@/Components/TagAutocomplete/AutocompleteTagInput'
 import NoteTag from './NoteTag'
 import { useEffect } from 'react'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
+  navigationController: NavigationController
 }
 
-const NoteTagsContainer = ({ viewControllerManager }: Props) => {
-  const { tags, tagsContainerMaxWidth } = viewControllerManager.noteTagsController
+const NoteTagsContainer = ({ noteTagsController, navigationController }: Props) => {
+  const { tags } = noteTagsController
 
   useEffect(() => {
-    viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
-  }, [viewControllerManager])
+    noteTagsController.reloadTagsContainerMaxWidth()
+  }, [noteTagsController])
 
   return (
-    <div
-      className="flex min-w-80 flex-wrap bg-transparent md:-mr-2"
-      style={{
-        maxWidth: tagsContainerMaxWidth,
-      }}
-    >
+    <div className="hidden min-w-80 max-w-full flex-wrap bg-transparent md:-mr-2 md:flex">
       {tags.map((tag) => (
-        <NoteTag key={tag.uuid} viewControllerManager={viewControllerManager} tag={tag} />
+        <NoteTag
+          key={tag.uuid}
+          noteTagsController={noteTagsController}
+          navigationController={navigationController}
+          tag={tag}
+        />
       ))}
-      <AutocompleteTagInput viewControllerManager={viewControllerManager} />
+      <AutocompleteTagInput noteTagsController={noteTagsController} />
     </div>
   )
 }

packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx

@@ -0,0 +1,170 @@
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { splitQueryInString } from '@/Utils'
+import { SNTag } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import Icon from '../Icon/Icon'
+import Popover from '../Popover/Popover'
+
+const ListItem = ({
+  tag,
+  isSearching,
+  noteTagsController,
+  autocompleteSearchQuery,
+}: {
+  tag: SNTag
+  isSearching: boolean
+  noteTagsController: NoteTagsController
+  autocompleteSearchQuery: string
+}) => {
+  const handleSearchResultClick = useCallback(async () => {
+    await noteTagsController.addTagToActiveNote(tag)
+    noteTagsController.clearAutocompleteSearch()
+    noteTagsController.setAutocompleteInputFocused(true)
+  }, [noteTagsController, tag])
+
+  const handleNoteTagRemove = useCallback(() => {
+    noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
+  }, [noteTagsController, tag])
+
+  const longTitle = noteTagsController.getLongTitle(tag)
+
+  return isSearching ? (
+    <button
+      onClick={handleSearchResultClick}
+      className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop"
+    >
+      {splitQueryInString(longTitle, autocompleteSearchQuery).map((substring, index) => (
+        <span
+          key={index}
+          className={
+            substring.toLowerCase() === autocompleteSearchQuery.toLowerCase()
+              ? 'whitespace-pre-wrap font-bold'
+              : 'whitespace-pre-wrap'
+          }
+        >
+          {substring}
+        </span>
+      ))}
+    </button>
+  ) : (
+    <div className="max-w-80 flex w-full items-center justify-between border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text">
+      <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">{longTitle}</span>
+      <button
+        onClick={handleNoteTagRemove}
+        className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-danger hover:bg-info-backdrop focus:bg-info-backdrop"
+      >
+        <Icon type="trash" size="small" />
+      </button>
+    </div>
+  )
+}
+
+const NoteTagsPanel = ({
+  noteTagsController,
+  onClickPreprocessing,
+}: {
+  noteTagsController: NoteTagsController
+  onClickPreprocessing?: () => Promise<void>
+}) => {
+  const isDesktopScreen = useMediaQuery(MediaQueryBreakpoints.md)
+
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const { tags, autocompleteTagResults, autocompleteSearchQuery, autocompleteTagHintVisible } = noteTagsController
+  const isSearching = autocompleteSearchQuery.length > 0
+  const visibleTagsList = isSearching ? autocompleteTagResults : tags
+
+  const toggleMenu = useCallback(async () => {
+    const willMenuOpen = !isOpen
+    if (willMenuOpen && onClickPreprocessing) {
+      await onClickPreprocessing()
+    }
+    setIsOpen(willMenuOpen)
+  }, [onClickPreprocessing, isOpen])
+
+  const onSearchQueryChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const query = event.target.value
+
+    if (query === '') {
+      noteTagsController.clearAutocompleteSearch()
+    } else {
+      noteTagsController.setAutocompleteSearchQuery(query)
+      noteTagsController.searchActiveNoteAutocompleteTags()
+    }
+  }
+
+  const onFormSubmit: FormEventHandler = async (event) => {
+    event.preventDefault()
+    if (autocompleteSearchQuery !== '') {
+      await noteTagsController.createAndAddNewTag()
+    }
+  }
+
+  useEffect(() => {
+    if (isDesktopScreen) {
+      setIsOpen(false)
+    }
+  }, [isDesktopScreen])
+
+  return (
+    <>
+      <button
+        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast md:hidden"
+        title="Note options menu"
+        aria-label="Note options menu"
+        onClick={toggleMenu}
+        ref={buttonRef}
+      >
+        <Icon type="hashtag" />
+      </button>
+      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="pb-2">
+        <form onSubmit={onFormSubmit} className="sticky top-0 border-b border-border bg-default px-2.5 py-2.5">
+          <input
+            type="text"
+            className="w-full rounded border border-solid border-border bg-default py-1.5 px-3 text-sm text-text"
+            placeholder="Create or search tag..."
+            value={autocompleteSearchQuery}
+            onChange={onSearchQueryChange}
+            ref={(node) => {
+              if (isOpen && node) {
+                node.focus()
+              }
+            }}
+          />
+        </form>
+        <div className="pt-2.5">
+          {visibleTagsList.map((tag) => (
+            <ListItem
+              key={tag.uuid}
+              tag={tag}
+              isSearching={isSearching}
+              noteTagsController={noteTagsController}
+              autocompleteSearchQuery={autocompleteSearchQuery}
+            />
+          ))}
+          {autocompleteTagHintVisible && (
+            <button
+              onClick={async () => {
+                await noteTagsController.createAndAddNewTag()
+              }}
+              className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop"
+            >
+              <span>Create new tag:</span>
+              <span className="ml-2 flex items-center rounded bg-contrast py-1 pl-1 pr-2 text-xs text-text">
+                <Icon type="hashtag" className="mr-1 text-neutral" size="small" />
+                <span className="max-w-40 overflow-hidden overflow-ellipsis whitespace-nowrap">
+                  {autocompleteSearchQuery}
+                </span>
+              </span>
+            </button>
+          )}
+        </div>
+      </Popover>
+    </>
+  )
+}
+
+export default observer(NoteTagsPanel)

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

@@ -14,7 +14,7 @@ import {
   PayloadEmitSource,
   WebAppEvent,
 } from '@standardnotes/snjs'
-import { debounce, isDesktopApplication } from '@/Utils'
+import { debounce, isDesktopApplication, isIOS } from '@/Utils'
 import { EditorEventSource } from '../../Types/EditorEventSource'
 import { confirmDialog, KeyboardModifier, KeyboardKey } from '@standardnotes/ui-services'
 import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, StringDeleteNote } from '@/Constants/Strings'
@@ -22,7 +22,6 @@ import { PureComponent } from '@/Components/Abstract/PureComponent'
 import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
 import PinNoteButton from '@/Components/PinNoteButton/PinNoteButton'
 import NotesOptionsPanel from '@/Components/NotesOptions/NotesOptionsPanel'
-import NoteTagsContainer from '@/Components/NoteTags/NoteTagsContainer'
 import ComponentView from '@/Components/ComponentView/ComponentView'
 import PanelResizer, { PanelSide, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
 import { ElementIds } from '@/Constants/ElementIDs'
@@ -39,10 +38,12 @@ import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import AutoresizingNoteViewTextarea from './AutoresizingTextarea'
 import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
+import NoteTagsPanel from '../NoteTags/NoteTagsPanel'
 
-const MINIMUM_STATUS_DURATION = 400
-const TEXTAREA_DEBOUNCE = 100
-const NOTE_EDITING_DISABLED_TEXT = 'Note editing disabled.'
+const MinimumStatusDuration = 400
+const TextareaDebounce = 100
+const NoteEditingDisabledText = 'Note editing disabled.'
+const StickyHeaderScrollThresholdInPx = 20
 
 type NoteStatus = {
   message?: string
@@ -80,6 +81,8 @@ type State = {
   leftResizerOffset: number
   rightResizerWidth: number
   rightResizerOffset: number
+
+  shouldStickyHeader: boolean
 }
 
 class NoteView extends PureComponent<NoteViewProps, State> {
@@ -111,7 +114,9 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
     this.debounceReloadEditorComponent = debounce(this.debounceReloadEditorComponent.bind(this), 25)
 
-    this.textAreaChangeDebounceSave = debounce(this.textAreaChangeDebounceSave, TEXTAREA_DEBOUNCE)
+    this.textAreaChangeDebounceSave = debounce(this.textAreaChangeDebounceSave, TextareaDebounce)
+
+    this.handleWindowScroll = debounce(this.handleWindowScroll, 10)
 
     this.state = {
       availableStackComponents: [],
@@ -119,7 +124,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       editorText: '',
       editorTitle: '',
       isDesktop: isDesktopApplication(),
-      lockText: NOTE_EDITING_DISABLED_TEXT,
+      lockText: NoteEditingDisabledText,
       noteStatus: undefined,
       noteLocked: this.controller.item.locked,
       showLockedIcon: true,
@@ -132,12 +137,17 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       leftResizerOffset: 0,
       rightResizerWidth: 0,
       rightResizerOffset: 0,
+      shouldStickyHeader: false,
     }
 
     this.editorContentRef = createRef<HTMLDivElement>()
+
+    window.addEventListener('scroll', this.handleWindowScroll)
   }
 
   override deinit() {
+    window.removeEventListener('scroll', this.handleWindowScroll)
+
     this.removeComponentStreamObserver?.()
     ;(this.removeComponentStreamObserver as unknown) = undefined
 
@@ -521,7 +531,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
         this.setState({
           noteStatus: status,
         })
-      }, MINIMUM_STATUS_DURATION)
+      }, MinimumStatusDuration)
     } else {
       this.setState({
         noteStatus: status,
@@ -871,6 +881,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
     }
   }
 
+  handleWindowScroll = () => {
+    this.setState({
+      shouldStickyHeader: window.scrollY > StickyHeaderScrollThresholdInPx,
+    })
+  }
+
   override render() {
     if (this.state.showProtectedWarning) {
       return (
@@ -889,7 +905,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
           <EditingDisabledBanner
             onMouseLeave={() => {
               this.setState({
-                lockText: NOTE_EDITING_DISABLED_TEXT,
+                lockText: NoteEditingDisabledText,
                 showLockedIcon: true,
               })
             }}
@@ -906,7 +922,14 @@ class NoteView extends PureComponent<NoteViewProps, State> {
         )}
 
         {this.note && (
-          <div id="editor-title-bar" className="content-title-bar section-title-bar z-editor-title-bar w-full">
+          <div
+            id="editor-title-bar"
+            className={classNames(
+              'content-title-bar section-title-bar z-editor-title-bar w-full bg-default',
+              this.state.shouldStickyHeader && 'fixed top-0',
+              this.state.shouldStickyHeader ? (isIOS() ? 'pt-safe-top' : 'pt-4') : '',
+            )}
+          >
             <div className="mb-2 flex flex-wrap items-start justify-between gap-2 md:mb-0 md:flex-nowrap md:gap-0 xl:items-center">
               <div className={classNames(this.state.noteLocked && 'locked', 'flex flex-grow items-center')}>
                 <MobileItemsListButton />
@@ -926,55 +949,62 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                   />
                 </div>
               </div>
-              <div className="flex flex-row-reverse items-center gap-3 md:flex-col-reverse md:items-end xl:flex-row xl:flex-nowrap xl:items-center">
-                {this.state.noteStatus?.message?.length && (
-                  <div id="save-status-container" className={'xl:mr-5 xl:max-w-[16ch]'}>
-                    <div id="save-status">
-                      <div
-                        className={
-                          (this.state.syncTakingTooLong ? 'font-bold text-warning ' : '') +
-                          (this.state.saveError ? 'font-bold text-danger ' : '') +
-                          'message text-xs'
-                        }
-                      >
-                        {this.state.noteStatus?.message}
+              {!this.state.shouldStickyHeader && (
+                <div className="flex flex-row-reverse items-center gap-3 md:flex-col-reverse md:items-end xl:flex-row xl:flex-nowrap xl:items-center">
+                  {this.state.noteStatus?.message?.length && (
+                    <div id="save-status-container" className={'xl:mr-5 xl:max-w-[16ch]'}>
+                      <div id="save-status">
+                        <div
+                          className={
+                            (this.state.syncTakingTooLong ? 'font-bold text-warning ' : '') +
+                            (this.state.saveError ? 'font-bold text-danger ' : '') +
+                            'message text-xs'
+                          }
+                        >
+                          {this.state.noteStatus?.message}
+                        </div>
+                        {this.state.noteStatus?.desc && (
+                          <div className="desc text-xs">{this.state.noteStatus.desc}</div>
+                        )}
                       </div>
-                      {this.state.noteStatus?.desc && <div className="desc text-xs">{this.state.noteStatus.desc}</div>}
                     </div>
+                  )}
+                  <div className="flex items-center gap-3">
+                    <NoteTagsPanel
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                      noteTagsController={this.viewControllerManager.noteTagsController}
+                    />
+                    <AttachedFilesButton
+                      application={this.application}
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                      featuresController={this.viewControllerManager.featuresController}
+                      filePreviewModalController={this.viewControllerManager.filePreviewModalController}
+                      filesController={this.viewControllerManager.filesController}
+                      navigationController={this.viewControllerManager.navigationController}
+                      notesController={this.viewControllerManager.notesController}
+                      selectionController={this.viewControllerManager.selectionController}
+                    />
+                    <ChangeEditorButton
+                      application={this.application}
+                      viewControllerManager={this.viewControllerManager}
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                    />
+                    <PinNoteButton
+                      notesController={this.viewControllerManager.notesController}
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                    />
+                    <NotesOptionsPanel
+                      application={this.application}
+                      navigationController={this.viewControllerManager.navigationController}
+                      notesController={this.viewControllerManager.notesController}
+                      noteTagsController={this.viewControllerManager.noteTagsController}
+                      historyModalController={this.viewControllerManager.historyModalController}
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                    />
                   </div>
-                )}
-                <div className="flex items-center gap-3">
-                  <AttachedFilesButton
-                    application={this.application}
-                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                    featuresController={this.viewControllerManager.featuresController}
-                    filePreviewModalController={this.viewControllerManager.filePreviewModalController}
-                    filesController={this.viewControllerManager.filesController}
-                    navigationController={this.viewControllerManager.navigationController}
-                    notesController={this.viewControllerManager.notesController}
-                    selectionController={this.viewControllerManager.selectionController}
-                  />
-                  <ChangeEditorButton
-                    application={this.application}
-                    viewControllerManager={this.viewControllerManager}
-                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                  />
-                  <PinNoteButton
-                    notesController={this.viewControllerManager.notesController}
-                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                  />
-                  <NotesOptionsPanel
-                    application={this.application}
-                    navigationController={this.viewControllerManager.navigationController}
-                    notesController={this.viewControllerManager.notesController}
-                    noteTagsController={this.viewControllerManager.noteTagsController}
-                    historyModalController={this.viewControllerManager.historyModalController}
-                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                  />
                 </div>
-              </div>
+              )}
             </div>
-            <NoteTagsContainer viewControllerManager={this.viewControllerManager} />
           </div>
         )}
 

packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts

@@ -1,3 +1,4 @@
+import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { CSSProperties } from 'react'
 import { PopoverAlignment, PopoverSide } from './Types'
 import { OppositeSide, checkCollisions, getNonCollidingSide, getNonCollidingAlignment } from './Utils/Collisions'
@@ -29,7 +30,7 @@ export const getPositionedPopoverStyles = ({
     return [null, side, align]
   }
 
-  const matchesMediumBreakpoint = matchMedia('(min-width: 768px)').matches
+  const matchesMediumBreakpoint = matchMedia(MediaQueryBreakpoints.md).matches
 
   if (!matchesMediumBreakpoint) {
     return [null, side, align]

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -9,8 +9,8 @@ import { getPositionedPopoverStyles } from './GetPositionedPopoverStyles'
 import { PopoverContentProps } from './Types'
 import { getPopoverMaxHeight, getAppRect } from './Utils/Rect'
 import { usePopoverCloseOnClickOutside } from './Utils/usePopoverCloseOnClickOutside'
-import { fitNodeToMobileScreen } from '@/Utils'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
+import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 
 const PositionedPopoverContent = ({
   align = 'end',
@@ -35,6 +35,7 @@ const PositionedPopoverContent = ({
   })
   const anchorRect = anchorPoint ? anchorPointRect : anchorElementRect
   const documentRect = useDocumentRect()
+  const isDesktopScreen = useMediaQuery(MediaQueryBreakpoints.md)
 
   const [styles, positionedSide, positionedAlignment] = getPositionedPopoverStyles({
     align,
@@ -63,24 +64,22 @@ const PositionedPopoverContent = ({
         style={{
           ...styles,
           maxHeight: getPopoverMaxHeight(getAppRect(documentRect), anchorRect, positionedSide, positionedAlignment),
+          top: !isDesktopScreen ? `${document.documentElement.scrollTop}px` : '',
         }}
         ref={(node) => {
           setPopoverElement(node)
-          fitNodeToMobileScreen(node)
         }}
         data-popover={id}
       >
-        <div className={className}>
-          <div className="md:hidden">
-            <div className="flex items-center justify-end px-3">
-              <button className="rounded-full border border-border p-1" onClick={togglePopover}>
-                <Icon type="close" className="h-4 w-4" />
-              </button>
-            </div>
-            <HorizontalSeparator classes="my-2" />
+        <div className="md:hidden">
+          <div className="flex items-center justify-end px-3 pt-2">
+            <button className="rounded-full border border-border p-1" onClick={togglePopover}>
+              <Icon type="close" className="h-4 w-4" />
+            </button>
           </div>
-          {children}
+          <HorizontalSeparator classes="my-2" />
         </div>
+        <div className={className}>{children}</div>
       </div>
     </Portal>
   )

packages/web/src/javascripts/Components/Popover/Utils/Rect.ts

@@ -1,3 +1,4 @@
+import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { PopoverSide, PopoverAlignment } from '../Types'
 
 export const getPopoverMaxHeight = (
@@ -6,7 +7,7 @@ export const getPopoverMaxHeight = (
   side: PopoverSide,
   alignment: PopoverAlignment,
 ): number | 'none' => {
-  const matchesMediumBreakpoint = matchMedia('(min-width: 768px)').matches
+  const matchesMediumBreakpoint = matchMedia(MediaQueryBreakpoints.md).matches
 
   if (!matchesMediumBreakpoint) {
     return 'none'

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -1,3 +1,4 @@
+import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { useEffect } from 'react'
 
 type Options = {
@@ -15,7 +16,7 @@ export const usePopoverCloseOnClickOutside = ({
 }: Options) => {
   useEffect(() => {
     const closeIfClickedOutside = (event: MouseEvent) => {
-      const matchesMediumBreakpoint = matchMedia('(min-width: 768px)').matches
+      const matchesMediumBreakpoint = matchMedia(MediaQueryBreakpoints.md).matches
 
       if (!matchesMediumBreakpoint) {
         return

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

@@ -26,7 +26,7 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
   const subscriptionState = viewControllerManager.subscriptionController
 
   const isSubscriptionSharingFeatureAvailable =
-    application.features.getFeatureStatus(FeatureIdentifier.TwoFactorAuth) === FeatureStatus.Entitled
+    application.features.getFeatureStatus(FeatureIdentifier.SubscriptionSharing) === FeatureStatus.Entitled
 
   return (
     <PreferencesGroup>

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

@@ -4,11 +4,14 @@ import { observer } from 'mobx-react-lite'
 import { PreferencesMenu } from './PreferencesMenu'
 import PreferencesCanvas from './PreferencesCanvas'
 import { PreferencesProps } from './PreferencesProps'
-import { fitNodeToMobileScreen, isIOS } from '@/Utils'
+import { isIOS } from '@/Utils'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
+  const isDesktopScreen = useMediaQuery(MediaQueryBreakpoints.md)
+
   const menu = useMemo(
     () => new PreferencesMenu(props.application, props.viewControllerManager.enableUnfinishedFeatures),
     [props.viewControllerManager.enableUnfinishedFeatures, props.application],
@@ -33,10 +36,12 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
   return (
     <div
       className={classNames(
-        'absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-default pt-safe-top',
+        'absolute top-0 left-0 z-preferences flex h-screen max-h-screen w-full flex-col bg-default pt-safe-top md:h-full md:max-h-full',
         isIOS() ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
       )}
-      ref={fitNodeToMobileScreen}
+      style={{
+        top: !isDesktopScreen ? `${document.documentElement.scrollTop}px` : '',
+      }}
     >
       <div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3">
         <div className="hidden h-8 w-8 md:block" />

packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx

@@ -1,36 +1,36 @@
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { observer } from 'mobx-react-lite'
 import { useRef, useEffect, useCallback, FocusEventHandler, KeyboardEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
 }
 
-const AutocompleteTagHint = ({ viewControllerManager, closeOnBlur }: Props) => {
-  const { autocompleteTagHintFocused } = viewControllerManager.noteTagsController
+const AutocompleteTagHint = ({ noteTagsController, closeOnBlur }: Props) => {
+  const { autocompleteTagHintFocused } = noteTagsController
 
   const hintRef = useRef<HTMLButtonElement>(null)
 
-  const { autocompleteSearchQuery, autocompleteTagResults } = viewControllerManager.noteTagsController
+  const { autocompleteSearchQuery, autocompleteTagResults } = noteTagsController
 
   const onTagHintClick = useCallback(async () => {
-    await viewControllerManager.noteTagsController.createAndAddNewTag()
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
-  }, [viewControllerManager])
+    await noteTagsController.createAndAddNewTag()
+    noteTagsController.setAutocompleteInputFocused(true)
+  }, [noteTagsController])
 
   const onFocus = useCallback(() => {
-    viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(true)
-  }, [viewControllerManager])
+    noteTagsController.setAutocompleteTagHintFocused(true)
+  }, [noteTagsController])
 
   const onBlur: FocusEventHandler = useCallback(
     (event) => {
       closeOnBlur(event)
-      viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(false)
+      noteTagsController.setAutocompleteTagHintFocused(false)
     },
-    [viewControllerManager, closeOnBlur],
+    [noteTagsController, closeOnBlur],
   )
 
   const onKeyDown: KeyboardEventHandler = useCallback(
@@ -38,20 +38,20 @@ const AutocompleteTagHint = ({ viewControllerManager, closeOnBlur }: Props) => {
       if (event.key === 'ArrowUp') {
         if (autocompleteTagResults.length > 0) {
           const lastTagResult = autocompleteTagResults[autocompleteTagResults.length - 1]
-          viewControllerManager.noteTagsController.setFocusedTagResultUuid(lastTagResult.uuid)
+          noteTagsController.setFocusedTagResultUuid(lastTagResult.uuid)
         } else {
-          viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+          noteTagsController.setAutocompleteInputFocused(true)
         }
       }
     },
-    [viewControllerManager, autocompleteTagResults],
+    [noteTagsController, autocompleteTagResults],
   )
 
   useEffect(() => {
     if (autocompleteTagHintFocused) {
       hintRef.current?.focus()
     }
-  }, [viewControllerManager, autocompleteTagHintFocused])
+  }, [noteTagsController, autocompleteTagHintFocused])
 
   return (
     <>

packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx

@@ -9,19 +9,19 @@ import {
 } from 'react'
 import { Disclosure, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import AutocompleteTagResult from './AutocompleteTagResult'
 import AutocompleteTagHint from './AutocompleteTagHint'
 import { observer } from 'mobx-react-lite'
 import { SNTag } from '@standardnotes/snjs'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
 }
 
-const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
+const AutocompleteTagInput = ({ noteTagsController }: Props) => {
   const {
     autocompleteInputFocused,
     autocompleteSearchQuery,
@@ -29,7 +29,7 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
     autocompleteTagResults,
     tags,
     tagsContainerMaxWidth,
-  } = viewControllerManager.noteTagsController
+  } = noteTagsController
 
   const [dropdownVisible, setDropdownVisible] = useState(false)
   const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
@@ -39,7 +39,7 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
 
   const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
     setDropdownVisible(visible)
-    viewControllerManager.noteTagsController.clearAutocompleteSearch()
+    noteTagsController.clearAutocompleteSearch()
   })
 
   const showDropdown = () => {
@@ -55,17 +55,17 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
     const query = event.target.value
 
     if (query === '') {
-      viewControllerManager.noteTagsController.clearAutocompleteSearch()
+      noteTagsController.clearAutocompleteSearch()
     } else {
-      viewControllerManager.noteTagsController.setAutocompleteSearchQuery(query)
-      viewControllerManager.noteTagsController.searchActiveNoteAutocompleteTags()
+      noteTagsController.setAutocompleteSearchQuery(query)
+      noteTagsController.searchActiveNoteAutocompleteTags()
     }
   }
 
   const onFormSubmit: FormEventHandler = async (event) => {
     event.preventDefault()
     if (autocompleteSearchQuery !== '') {
-      await viewControllerManager.noteTagsController.createAndAddNewTag()
+      await noteTagsController.createAndAddNewTag()
     }
   }
 
@@ -74,15 +74,15 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
       case 'Backspace':
       case 'ArrowLeft':
         if (autocompleteSearchQuery === '' && tags.length > 0) {
-          viewControllerManager.noteTagsController.setFocusedTagUuid(tags[tags.length - 1].uuid)
+          noteTagsController.setFocusedTagUuid(tags[tags.length - 1].uuid)
         }
         break
       case 'ArrowDown':
         event.preventDefault()
         if (autocompleteTagResults.length > 0) {
-          viewControllerManager.noteTagsController.setFocusedTagResultUuid(autocompleteTagResults[0].uuid)
+          noteTagsController.setFocusedTagResultUuid(autocompleteTagResults[0].uuid)
         } else if (autocompleteTagHintVisible) {
-          viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(true)
+          noteTagsController.setAutocompleteTagHintFocused(true)
         }
         break
       default:
@@ -92,19 +92,19 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
 
   const onFocus = () => {
     showDropdown()
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+    noteTagsController.setAutocompleteInputFocused(true)
   }
 
   const onBlur: FocusEventHandler = (event) => {
     closeOnBlur(event)
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(false)
+    noteTagsController.setAutocompleteInputFocused(false)
   }
 
   useEffect(() => {
     if (autocompleteInputFocused) {
       inputRef.current?.focus()
     }
-  }, [viewControllerManager, autocompleteInputFocused])
+  }, [autocompleteInputFocused])
 
   return (
     <div ref={containerRef}>
@@ -140,14 +140,14 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
                 {autocompleteTagResults.map((tagResult: SNTag) => (
                   <AutocompleteTagResult
                     key={tagResult.uuid}
-                    viewControllerManager={viewControllerManager}
+                    noteTagsController={noteTagsController}
                     tagResult={tagResult}
                     closeOnBlur={closeOnBlur}
                   />
                 ))}
               </div>
               {autocompleteTagHintVisible && (
-                <AutocompleteTagHint viewControllerManager={viewControllerManager} closeOnBlur={closeOnBlur} />
+                <AutocompleteTagHint noteTagsController={noteTagsController} closeOnBlur={closeOnBlur} />
               )}
             </DisclosurePanel>
           )}

packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx

@@ -1,48 +1,48 @@
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { splitQueryInString } from '@/Utils/StringUtils'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FocusEventHandler, KeyboardEventHandler, useEffect, useRef } from 'react'
 import Icon from '@/Components/Icon/Icon'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
   tagResult: SNTag
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
 }
 
-const AutocompleteTagResult = ({ viewControllerManager, tagResult, closeOnBlur }: Props) => {
+const AutocompleteTagResult = ({ noteTagsController, tagResult, closeOnBlur }: Props) => {
   const { autocompleteSearchQuery, autocompleteTagHintVisible, autocompleteTagResults, focusedTagResultUuid } =
-    viewControllerManager.noteTagsController
+    noteTagsController
 
   const tagResultRef = useRef<HTMLButtonElement>(null)
 
   const title = tagResult.title
-  const prefixTitle = viewControllerManager.noteTagsController.getPrefixTitle(tagResult)
+  const prefixTitle = noteTagsController.getPrefixTitle(tagResult)
 
   const onTagOptionClick = async (tag: SNTag) => {
-    await viewControllerManager.noteTagsController.addTagToActiveNote(tag)
-    viewControllerManager.noteTagsController.clearAutocompleteSearch()
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+    await noteTagsController.addTagToActiveNote(tag)
+    noteTagsController.clearAutocompleteSearch()
+    noteTagsController.setAutocompleteInputFocused(true)
   }
 
   const onKeyDown: KeyboardEventHandler = (event) => {
-    const tagResultIndex = viewControllerManager.noteTagsController.getTagIndex(tagResult, autocompleteTagResults)
+    const tagResultIndex = noteTagsController.getTagIndex(tagResult, autocompleteTagResults)
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault()
         if (tagResultIndex === 0) {
-          viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+          noteTagsController.setAutocompleteInputFocused(true)
         } else {
-          viewControllerManager.noteTagsController.focusPreviousTagResult(tagResult)
+          noteTagsController.focusPreviousTagResult(tagResult)
         }
         break
       case 'ArrowDown':
         event.preventDefault()
         if (tagResultIndex === autocompleteTagResults.length - 1 && autocompleteTagHintVisible) {
-          viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(true)
+          noteTagsController.setAutocompleteTagHintFocused(true)
         } else {
-          viewControllerManager.noteTagsController.focusNextTagResult(tagResult)
+          noteTagsController.focusNextTagResult(tagResult)
         }
         break
       default:
@@ -51,20 +51,20 @@ const AutocompleteTagResult = ({ viewControllerManager, tagResult, closeOnBlur }
   }
 
   const onFocus = () => {
-    viewControllerManager.noteTagsController.setFocusedTagResultUuid(tagResult.uuid)
+    noteTagsController.setFocusedTagResultUuid(tagResult.uuid)
   }
 
   const onBlur: FocusEventHandler = (event) => {
     closeOnBlur(event)
-    viewControllerManager.noteTagsController.setFocusedTagResultUuid(undefined)
+    noteTagsController.setFocusedTagResultUuid(undefined)
   }
 
   useEffect(() => {
     if (focusedTagResultUuid === tagResult.uuid) {
       tagResultRef.current?.focus()
-      viewControllerManager.noteTagsController.setFocusedTagResultUuid(undefined)
+      noteTagsController.setFocusedTagResultUuid(undefined)
     }
-  }, [viewControllerManager, focusedTagResultUuid, tagResult])
+  }, [noteTagsController, focusedTagResultUuid, tagResult])
 
   return (
     <button

packages/web/src/javascripts/Hooks/useMediaQuery.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+// Follows https://tailwindcss.com/docs/responsive-design
+export const MediaQueryBreakpoints = {
+  sm: '(min-width: 640px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 1024px)',
+  xl: '(min-width: 1280px)',
+  '2xl': '(min-width:  1536px)',
+} as const
+
+export const useMediaQuery = (mediaQuery: string) => {
+  const [matches, setMatches] = useState(() => window.matchMedia(mediaQuery).matches)
+
+  useEffect(() => {
+    const handler = (event: MediaQueryListEvent) => {
+      setMatches(event.matches)
+    }
+
+    window.matchMedia(mediaQuery).addEventListener('change', handler)
+
+    return () => window.matchMedia(mediaQuery).removeEventListener('change', handler)
+  }, [mediaQuery])
+
+  return matches
+}

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

@@ -14,6 +14,11 @@ export const formatDateForContextMenu = (date: Date | undefined) => {
 
 export const formatDateAndTimeForNote = (date: Date) => {
   return `${date.toLocaleDateString(undefined, {
-    dateStyle: 'full',
-  })} ${date.toLocaleTimeString()}`
+    weekday: 'long',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })} at ${date.toLocaleTimeString(undefined, {
+    timeStyle: 'short',
+  })}`
 }

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

@@ -1,6 +1,7 @@
 import { Platform, platformFromString } from '@standardnotes/snjs'
 import { IsDesktopPlatform, IsWebPlatform } from '@/Constants/Version'
 import { EMAIL_REGEX } from '../Constants/Constants'
+import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 declare const process: {
   env: {
@@ -202,13 +203,4 @@ export const disableIosTextFieldZoom = () => {
   }
 }
 
-export const isMobileScreen = () => !window.matchMedia('(min-width: 768px)').matches
-
-export const fitNodeToMobileScreen = (node: HTMLElement | null) => {
-  if (!node || !isMobileScreen()) {
-    return
-  }
-  node.style.height = `${visualViewport.height}px`
-  node.style.position = 'absolute'
-  node.style.top = `${document.documentElement.scrollTop}px`
-}
+export const isMobileScreen = () => !window.matchMedia(MediaQueryBreakpoints.md).matches