chore(release): publish

- @standardnotes/[email protected]
 - @standardnotes/[email protected].9
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].3

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,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.157",
   "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,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.9",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",

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,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.81",
   "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,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.57.3",
   "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/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,10 +64,10 @@ 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}
       >

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/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/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: