chore(release): publish

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

packages/api/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.8.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/api
+
 ## [1.8.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/api

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/api",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/desktop/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.
 
+## [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
+
+## [3.23.153](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.152](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **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.152",
+  "version": "3.23.160",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/encryption/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.15.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/encryption
+
 ## [1.15.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/encryption

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/encryption",
-  "version": "1.15.4",
+  "version": "1.15.5",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/filepicker/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.23.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/filepicker
+
 ## [1.23.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/filepicker

packages/filepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/filepicker",
-  "version": "1.23.4",
+  "version": "1.23.5",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/files/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/files
+
 ## [1.10.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/files

packages/files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/files",
-  "version": "1.10.4",
+  "version": "1.10.5",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/mobile/CHANGELOG.md

@@ -3,6 +3,50 @@
 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
+
+## [3.36.4](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.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 ### Bug Fixes

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.36.3",
+  "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/models/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.19.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+### Features
+
+* new note title format w/ prefs ([#1629](https://github.com/standardnotes/app/issues/1629)) ([d3621d7](https://github.com/standardnotes/app/commit/d3621d70b1a34537417b06830275467055b753cb))
+
 ## [1.18.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 ### Bug Fixes

packages/models/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/models",
-  "version": "1.18.4",
+  "version": "1.19.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -32,6 +32,13 @@ export enum PrefKey {
   MobileDoNotShowAgainUnsupportedEditors = 'mobileDoNotShowAgainUnsupportedEditors',
   MobileSelectedTagUuid = 'mobileSelectedTagUuid',
   MobileNotesHideEditorIcon = 'mobileHideEditorIcon',
+  NewNoteTitleFormat = 'newNoteTitleFormat',
+}
+
+export enum NewNoteTitleFormat {
+  CurrentDateAndTime = 'CurrentDateAndTime',
+  CurrentNoteCount = 'CurrentNoteCount',
+  Empty = 'Empty',
 }
 
 export type PrefValue = {
@@ -65,4 +72,5 @@ export type PrefValue = {
   [PrefKey.MobileDoNotShowAgainUnsupportedEditors]: boolean
   [PrefKey.MobileSelectedTagUuid]: string | undefined
   [PrefKey.MobileNotesHideEditorIcon]: boolean
+  [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
 }

packages/releases/CHANGELOG.md

@@ -3,6 +3,46 @@
 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
+
+## [1.3.76](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.75](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

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

packages/services/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.21.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/services
+
 ## [1.21.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 ### Bug Fixes

packages/services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/services",
-  "version": "1.21.3",
+  "version": "1.21.4",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/snjs/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.132.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/snjs
+
 ## [2.132.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/snjs

packages/snjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/snjs",
-  "version": "2.132.4",
+  "version": "2.132.5",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/ui-services/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
 ## [1.3.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 ### Bug Fixes

packages/ui-services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/ui-services",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/web/CHANGELOG.md

@@ -3,6 +3,54 @@
 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
+
+* new note title format w/ prefs ([#1629](https://github.com/standardnotes/app/issues/1629)) ([d3621d7](https://github.com/standardnotes/app/commit/d3621d70b1a34537417b06830275467055b753cb))
+
+# [3.56.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-24)
+
+### Features
+
+* flatten quick settings menu and add separate prefs button ([#1631](https://github.com/standardnotes/app/issues/1631)) ([97835e6](https://github.com/standardnotes/app/commit/97835e64ac0ebea829a923af082880b269a2965e))
+
 ## [3.55.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-09-23)
 
 **Note:** Version bump only for package @standardnotes/web

packages/web/package.json

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

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

@@ -3,6 +3,7 @@ import { useRef } from 'react'
 import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = AccountMenuProps & {
   isOpen: boolean
@@ -25,18 +26,20 @@ const AccountMenuButton = ({
 
   return (
     <>
-      <button
-        ref={buttonRef}
-        onClick={toggleMenu}
-        className={classNames(
-          isOpen ? 'bg-border' : '',
-          'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
-        )}
-      >
-        <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
-          <Icon type="account-circle" className="h-5 w-5 hover:text-info" />
-        </div>
-      </button>
+      <StyledTooltip label="Open account menu">
+        <button
+          ref={buttonRef}
+          onClick={toggleMenu}
+          className={classNames(
+            isOpen ? 'bg-border' : '',
+            'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
+          )}
+        >
+          <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
+            <Icon type="account-circle" className="h-5 w-5 hover:text-info" />
+          </div>
+        </button>
+      </StyledTooltip>
       <Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">
         <AccountMenu
           onClickOutside={onClickOutside}

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

@@ -18,6 +18,7 @@ import { AccountMenuPane } from '../AccountMenu/AccountMenuPane'
 import { EditorEventSource } from '@/Types/EditorEventSource'
 import QuickSettingsButton from './QuickSettingsButton'
 import AccountMenuButton from './AccountMenuButton'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   application: WebApplication
@@ -336,6 +337,11 @@ class Footer extends PureComponent<Props, State> {
     this.viewControllerManager.quickSettingsMenuController.closeQuickSettingsMenu()
   }
 
+  openPreferences = () => {
+    this.clickOutsideQuickSettingsMenu()
+    this.viewControllerManager.preferencesController.openPreferences()
+  }
+
   override render() {
     return (
       <div className="sn-component">
@@ -356,12 +362,23 @@ class Footer extends PureComponent<Props, State> {
                 viewControllerManager={this.viewControllerManager}
               />
             </div>
+            <div className="relative z-footer-bar-item select-none">
+              <StyledTooltip label="Open preferences">
+                <button
+                  onClick={this.openPreferences}
+                  className="flex h-full w-8 cursor-pointer items-center justify-center"
+                >
+                  <div className="h-5">
+                    <Icon type="tune" className="rounded hover:text-info" />
+                  </div>
+                </button>
+              </StyledTooltip>
+            </div>
             <div className="relative z-footer-bar-item select-none">
               <QuickSettingsButton
                 isOpen={this.state.showQuickSettingsMenu}
                 toggleMenu={this.quickSettingsClickHandler}
                 application={this.application}
-                preferencesController={this.viewControllerManager.preferencesController}
                 quickSettingsMenuController={this.viewControllerManager.quickSettingsMenuController}
               />
             </div>
@@ -417,14 +434,16 @@ class Footer extends PureComponent<Props, State> {
               </div>
             )}
             {this.state.hasPasscode && (
-              <div
-                id="lock-item"
-                onClick={this.lockClickHandler}
-                title="Locks application and wipes unencrypted data from memory."
-                className="relative z-footer-bar-item ml-3 flex cursor-pointer select-none items-center border-l border-solid border-border pl-2 hover:text-info"
-              >
-                <Icon type="lock-filled" size="custom" className="h-4.5 w-4.5" />
-              </div>
+              <StyledTooltip label="Lock application">
+                <div
+                  id="lock-item"
+                  onClick={this.lockClickHandler}
+                  title="Locks application and wipes unencrypted data from memory."
+                  className="relative z-footer-bar-item ml-3 flex cursor-pointer select-none items-center border-l border-solid border-border pl-2 hover:text-info"
+                >
+                  <Icon type="lock-filled" size="custom" className="h-4.5 w-4.5" />
+                </div>
+              </StyledTooltip>
             )}
           </div>
         </footer>

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

@@ -1,40 +1,35 @@
 import { WebApplication } from '@/Application/Application'
-import { PreferencesController } from '@/Controllers/PreferencesController'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useRef } from 'react'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   isOpen: boolean
   toggleMenu: () => void
   application: WebApplication
-  preferencesController: PreferencesController
   quickSettingsMenuController: QuickSettingsController
 }
 
-const QuickSettingsButton = ({
-  application,
-  isOpen,
-  toggleMenu,
-  preferencesController,
-  quickSettingsMenuController,
-}: Props) => {
+const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMenuController }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
 
   return (
     <>
-      <button
-        onClick={toggleMenu}
-        className="flex h-full w-8 cursor-pointer items-center justify-center"
-        ref={buttonRef}
-      >
-        <div className="h-5">
-          <Icon type="tune" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
-        </div>
-      </button>
+      <StyledTooltip label="Open quick settings menu">
+        <button
+          onClick={toggleMenu}
+          className="flex h-full w-8 cursor-pointer items-center justify-center"
+          ref={buttonRef}
+        >
+          <div className="h-5">
+            <Icon type="themes" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
+          </div>
+        </button>
+      </StyledTooltip>
       <Popover
         togglePopover={toggleMenu}
         anchorElement={buttonRef.current}
@@ -43,11 +38,7 @@ const QuickSettingsButton = ({
         align="start"
         className="py-2"
       >
-        <QuickSettingsMenu
-          preferencesController={preferencesController}
-          quickSettingsMenuController={quickSettingsMenuController}
-          application={application}
-        />
+        <QuickSettingsMenu quickSettingsMenuController={quickSettingsMenuController} application={application} />
       </Popover>
     </>
   )

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/Panes/General/Defaults.tsx

@@ -7,6 +7,7 @@ import {
   ComponentMutator,
   SNComponent,
   StorageValueModes,
+  NewNoteTitleFormat,
 } from '@standardnotes/snjs'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/Application/Application'
@@ -61,6 +62,14 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
 
   const [spellcheck, setSpellcheck] = useState(() => application.getPreference(PrefKey.EditorSpellcheck, true))
 
+  const [newNoteTitleFormat, setNewNoteTitleFormat] = useState(() =>
+    application.getPreference(PrefKey.NewNoteTitleFormat, NewNoteTitleFormat.CurrentDateAndTime),
+  )
+  const handleNewNoteTitleFormatChange = (value: string) => {
+    setNewNoteTitleFormat(value as NewNoteTitleFormat)
+    application.setPreference(PrefKey.NewNoteTitleFormat, value as NewNoteTitleFormat)
+  }
+
   const [addNoteToParentFolders, setAddNoteToParentFolders] = useState(() =>
     application.getPreference(PrefKey.NoteAddToParentFolders, true),
   )
@@ -138,7 +147,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
         )}
         <div>
           <Subtitle>Default Note Type</Subtitle>
-          <Text>New notes will be created using this type.</Text>
+          <Text>New notes will be created using this type</Text>
           <div className="mt-2">
             <Dropdown
               id="def-editor-dropdown"
@@ -150,6 +159,33 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
           </div>
         </div>
         <HorizontalSeparator classes="my-4" />
+        <div>
+          <Subtitle>Default Note Title Format</Subtitle>
+          <Text>New notes will be created with a title in this format</Text>
+          <div className="mt-2">
+            <Dropdown
+              id="def-new-note-title-format"
+              label="Select the default note type"
+              items={[
+                {
+                  label: 'Current date and time',
+                  value: NewNoteTitleFormat.CurrentDateAndTime,
+                },
+                {
+                  label: 'Current note count',
+                  value: NewNoteTitleFormat.CurrentNoteCount,
+                },
+                {
+                  label: 'Empty',
+                  value: NewNoteTitleFormat.Empty,
+                },
+              ]}
+              value={newNoteTitleFormat}
+              onChange={handleNewNoteTitleFormatChange}
+            />
+          </div>
+        </div>
+        <HorizontalSeparator classes="my-4" />
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>

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/QuickSettingsMenu/EventHandlers.ts

@@ -1,70 +0,0 @@
-import { Dispatch, RefObject, SetStateAction } from 'react'
-
-export const quickSettingsKeyDownHandler = (
-  closeQuickSettingsMenu: () => void,
-  event: React.KeyboardEvent,
-  quickSettingsMenuRef: RefObject<HTMLDivElement>,
-  themesMenuOpen: boolean,
-) => {
-  if (quickSettingsMenuRef?.current) {
-    const items: NodeListOf<HTMLButtonElement> = quickSettingsMenuRef.current.querySelectorAll(':scope > button')
-    const currentFocusedIndex = Array.from(items).findIndex((btn) => btn === document.activeElement)
-
-    if (!themesMenuOpen) {
-      switch (event.key) {
-        case 'Escape':
-          closeQuickSettingsMenu()
-          break
-        case 'ArrowDown':
-          if (items[currentFocusedIndex + 1]) {
-            items[currentFocusedIndex + 1].focus()
-          } else {
-            items[0].focus()
-          }
-          break
-        case 'ArrowUp':
-          if (items[currentFocusedIndex - 1]) {
-            items[currentFocusedIndex - 1].focus()
-          } else {
-            items[items.length - 1].focus()
-          }
-          break
-      }
-    }
-  }
-}
-
-export const themesMenuKeyDownHandler = (
-  event: React.KeyboardEvent<HTMLDivElement>,
-  themesMenuRef: RefObject<HTMLDivElement>,
-  setThemesMenuOpen: Dispatch<SetStateAction<boolean>>,
-  themesButtonRef: RefObject<HTMLButtonElement>,
-) => {
-  if (themesMenuRef?.current) {
-    const themes = themesMenuRef.current.querySelectorAll('button')
-    const currentFocusedIndex = Array.from(themes).findIndex((themeBtn) => themeBtn === document.activeElement)
-
-    switch (event.key) {
-      case 'Escape':
-      case 'ArrowLeft':
-        event.stopPropagation()
-        setThemesMenuOpen(false)
-        themesButtonRef.current?.focus()
-        break
-      case 'ArrowDown':
-        if (themes[currentFocusedIndex + 1]) {
-          themes[currentFocusedIndex + 1].focus()
-        } else {
-          themes[0].focus()
-        }
-        break
-      case 'ArrowUp':
-        if (themes[currentFocusedIndex - 1]) {
-          themes[currentFocusedIndex - 1].focus()
-        } else {
-          themes[themes.length - 1].focus()
-        }
-        break
-    }
-  }
-}

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

@@ -1,24 +1,20 @@
 import { WebApplication } from '@/Application/Application'
 import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
-import { quickSettingsKeyDownHandler } from './EventHandlers'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { ThemeItem } from './ThemeItem'
 import { sortThemes } from '@/Utils/SortThemes'
 import RadioIndicator from '../RadioIndicator/RadioIndicator'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
-import Popover from '../Popover/Popover'
-import { PreferencesController } from '@/Controllers/PreferencesController'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 
 const focusModeAnimationDuration = 1255
 
 type MenuProps = {
-  preferencesController: PreferencesController
   quickSettingsMenuController: QuickSettingsController
   application: WebApplication
 }
@@ -37,20 +33,13 @@ const toggleFocusMode = (enabled: boolean) => {
   }
 }
 
-const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
-  application,
-  preferencesController,
-  quickSettingsMenuController,
-}) => {
+const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSettingsMenuController }) => {
   const { closeQuickSettingsMenu, focusModeEnabled, setFocusModeEnabled } = quickSettingsMenuController
   const [themes, setThemes] = useState<ThemeItem[]>([])
   const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
-  const [themesMenuOpen, setThemesMenuOpen] = useState(false)
   const [defaultThemeOn, setDefaultThemeOn] = useState(false)
 
-  const themesButtonRef = useRef<HTMLButtonElement>(null)
   const prefsButtonRef = useRef<HTMLButtonElement>(null)
-  const quickSettingsMenuRef = useRef<HTMLDivElement>(null)
   const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
   const mainRef = useRef<HTMLDivElement>(null)
@@ -126,25 +115,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
     }
   }, [application, reloadToggleableComponents])
 
-  useEffect(() => {
-    if (themesMenuOpen) {
-      defaultThemeButtonRef.current?.focus()
-    }
-  }, [themesMenuOpen])
-
   useEffect(() => {
     prefsButtonRef.current?.focus()
   }, [])
 
-  const toggleThemesMenu = useCallback(() => {
-    setThemesMenuOpen((isOpen) => !isOpen)
-  }, [])
-
-  const openPreferences = useCallback(() => {
-    closeQuickSettingsMenu()
-    preferencesController.openPreferences()
-  }, [closeQuickSettingsMenu, preferencesController])
-
   const toggleComponent = useCallback(
     (component: SNComponent) => {
       if (component.isTheme()) {
@@ -156,29 +130,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
     [application],
   )
 
-  const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = useCallback(
-    (event) => {
-      switch (event.key) {
-        case 'Escape':
-          setThemesMenuOpen(false)
-          themesButtonRef.current?.focus()
-          break
-        case 'ArrowRight':
-          if (!themesMenuOpen) {
-            toggleThemesMenu()
-          }
-      }
-    },
-    [themesMenuOpen, toggleThemesMenu],
-  )
-
-  const handleQuickSettingsKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
-    },
-    [closeQuickSettingsMenu, themesMenuOpen],
-  )
-
   const toggleDefaultTheme = useCallback(() => {
     const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
     if (activeTheme) {
@@ -187,41 +138,21 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
   }, [application, themes])
 
   return (
-    <div ref={mainRef} onKeyDown={handleQuickSettingsKeyDown}>
-      <div className="mt-1 mb-2 px-3 text-sm font-semibold uppercase text-text">Quick Settings</div>
+    <div ref={mainRef}>
+      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
       <button
-        onClick={toggleThemesMenu}
-        onKeyDown={handleBtnKeyDown}
-        ref={themesButtonRef}
-        className="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"
+        className="flex w-full cursor-pointer items-center 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"
+        onClick={toggleDefaultTheme}
+        ref={defaultThemeButtonRef}
       >
-        <div className="flex items-center">
-          <Icon type="themes" className="mr-2 text-neutral" />
-          Themes
-        </div>
-        <Icon type="chevron-right" className="text-neutral" />
+        <RadioIndicator checked={defaultThemeOn} className="mr-2" />
+        Default
       </button>
-      <Popover
-        togglePopover={toggleThemesMenu}
-        anchorElement={themesButtonRef.current}
-        open={themesMenuOpen}
-        side="right"
-        align="end"
-        className="py-2"
-      >
-        <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
-        <button
-          className="flex w-full cursor-pointer items-center 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"
-          onClick={toggleDefaultTheme}
-          ref={defaultThemeButtonRef}
-        >
-          <RadioIndicator checked={defaultThemeOn} className="mr-2" />
-          Default
-        </button>
-        {themes.map((theme) => (
-          <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
-        ))}
-      </Popover>
+      {themes.map((theme) => (
+        <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
+      ))}
+      <HorizontalSeparator classes="my-2" />
+      <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-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
@@ -243,15 +174,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
         onClose={closeQuickSettingsMenu}
         isEnabled={focusModeEnabled}
       />
-      <HorizontalSeparator classes="my-2" />
-      <button
-        className="flex w-full cursor-pointer items-center 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"
-        onClick={openPreferences}
-        ref={prefsButtonRef}
-      >
-        <Icon type="more" className="mr-2 text-neutral" />
-        Open Preferences
-      </button>
     </div>
   )
 }

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

@@ -0,0 +1,14 @@
+import Tooltip from '@reach/tooltip'
+import styled from 'styled-components'
+
+export default styled(Tooltip)`
+  &[data-reach-tooltip] {
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    padding: 0.375rem 0.75rem;
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-foreground-color);
+    border-color: var(--sn-stylekit-border-color);
+    z-index: var(--z-index-tooltip);
+  }
+`

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/Controllers/ItemList/ItemListController.ts

@@ -18,6 +18,7 @@ import {
   FileViewController,
   FileItem,
   WebAppEvent,
+  NewNoteTitleFormat,
 } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'
 import { WebApplication } from '../../Application/Application'
@@ -29,6 +30,7 @@ import { SearchOptionsController } from '../SearchOptionsController'
 import { SelectedItemsController } from '../SelectedItemsController'
 import { NotesController } from '../NotesController'
 import { NoteTagsController } from '../NoteTagsController'
+import { formatDateAndTimeForNote } from '@/Utils/DateUtils'
 
 const MinNoteCellHeight = 51.0
 const DefaultListNumNotes = 20
@@ -485,7 +487,19 @@ export class ItemListController extends AbstractViewController implements Intern
       await this.navigationController.selectHomeNavigationView()
     }
 
-    let title = `Note ${this.notes.length + 1}`
+    const titleFormat = this.application.getPreference(
+      PrefKey.NewNoteTitleFormat,
+      NewNoteTitleFormat.CurrentDateAndTime,
+    )
+
+    let title = formatDateAndTimeForNote(new Date())
+
+    if (titleFormat === NewNoteTitleFormat.CurrentNoteCount) {
+      title = `Note ${this.notes.length + 1}`
+    } else if (titleFormat === NewNoteTitleFormat.Empty) {
+      title = ''
+    }
+
     if (this.isFiltering) {
       title = this.noteFilterText
     }

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

@@ -11,3 +11,14 @@ export const formatDateForContextMenu = (date: Date | undefined) => {
 
   return `${date.toDateString()} ${date.toLocaleTimeString()}`
 }
+
+export const formatDateAndTimeForNote = (date: Date) => {
+  return `${date.toLocaleDateString(undefined, {
+    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

packages/web/src/stylesheets/_main.scss

@@ -13,6 +13,7 @@
   --z-index-lock-screen: 10000;
   --z-index-modal: 10000;
   --z-index-toast: 11000;
+  --z-index-tooltip: 12000;
 
   --sn-stylekit-base-font-size: 0.813rem;
   --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体';

packages/web/tailwind.config.js

@@ -73,6 +73,7 @@ module.exports = {
         'lock-screen': 'var(--z-index-lock-screen)',
         modal: 'var(--z-index-modal)',
         toast: 'var(--z-index-toast)',
+        tooltip: 'var(--z-index-tooltip)',
       },
       boxShadow: {
         inner: