feat: Added command palette for quick actions and switching between items (#2933) [skip e2e]

* wip: command palette * use code instead of key * show recent items above commands * refactor * fix command * add placeholder * Tab/Shift-Tab to switch tabs * Fix test * Add menu item to general account menu * if shortcut_id is available, use that as the id * make toggle fn more stable * small naming changes * fix name * Close open modals and popovers when opening command palette * use stable ids + make sure selectedNotesCount only changes when the count actually changes * display all commands, even ones in recents list
2026-01-16 19:04:58 -05:00 · 2025-09-25 18:36:09 +05:30
parent cb92c10625
commit efba7c682d
61 changed files with 1381 additions and 522 deletions
--- a/.yarn/cache/@ariakit-core-npm-0.3.8-0e10e529aa-e416596efe.zip
+++ b/.yarn/cache/@ariakit-core-npm-0.3.8-0e10e529aa-e416596efe.zip
--- a/.yarn/cache/@ariakit-core-npm-0.4.15-411f831ec8-add800c855.zip
+++ b/.yarn/cache/@ariakit-core-npm-0.4.15-411f831ec8-add800c855.zip
--- a/.yarn/cache/@ariakit-react-core-npm-0.3.9-cb7b09428e-ef44543aec.zip
+++ b/.yarn/cache/@ariakit-react-core-npm-0.3.9-cb7b09428e-ef44543aec.zip
--- a/.yarn/cache/@ariakit-react-core-npm-0.4.18-d72e68fa75-53a012f087.zip
+++ b/.yarn/cache/@ariakit-react-core-npm-0.4.18-d72e68fa75-53a012f087.zip
--- a/.yarn/cache/@ariakit-react-npm-0.3.9-b5ae09b712-901424a4e4.zip
+++ b/.yarn/cache/@ariakit-react-npm-0.3.9-b5ae09b712-901424a4e4.zip
--- a/.yarn/cache/@ariakit-react-npm-0.4.18-26fc12aa5e-e8bc2df82f.zip
+++ b/.yarn/cache/@ariakit-react-npm-0.4.18-26fc12aa5e-e8bc2df82f.zip
--- a/packages/services/src/Domain/Item/ItemManagerInterface.ts
+++ b/packages/services/src/Domain/Item/ItemManagerInterface.ts
@@ -128,6 +128,8 @@ export interface ItemManagerInterface extends AbstractService {
  getDisplayableFiles(): FileItem[]
  setVaultDisplayOptions(options: VaultDisplayOptions): void
  numberOfNotesWithConflicts(): number
+  /** Returns all notes, files, tags and views */
+  getInteractableItems(): DecryptedItemInterface[]
  getDisplayableNotes(): SNNote[]
  getDisplayableNotesAndFiles(): (SNNote | FileItem)[]
  setPrimaryItemDisplayOptions(options: NotesAndFilesDisplayControllerOptions): void
--- a/packages/snjs/lib/Services/Items/ItemManager.ts
+++ b/packages/snjs/lib/Services/Items/ItemManager.ts
@@ -220,6 +220,17 @@ export class ItemManager extends Services.AbstractService implements Services.It
    this.itemCounter.setVaultDisplayOptions(options)
  }

+  public getInteractableItems(): Models.DecryptedItemInterface[] {
+    return (this.systemSmartViews as Models.DecryptedItemInterface[]).concat(
+      this.collection.all([
+        ContentType.TYPES.Note,
+        ContentType.TYPES.File,
+        ContentType.TYPES.Tag,
+        ContentType.TYPES.SmartView,
+      ]) as Models.DecryptedItemInterface[],
+    )
+  }
+
  public getDisplayableNotes(): Models.SNNote[] {
    assert(this.navigationDisplayController.contentTypes.length === 2)

--- a/packages/ui-services/src/Keyboard/KeyboardCommands.ts
+++ b/packages/ui-services/src/Keyboard/KeyboardCommands.ts
@@ -41,3 +41,4 @@ export const OPEN_PREFERENCES_COMMAND = createKeyboardCommand('OPEN_PREFERENCES_
 export const CHANGE_EDITOR_WIDTH_COMMAND = createKeyboardCommand('CHANGE_EDITOR_WIDTH_COMMAND')

 export const TOGGLE_KEYBOARD_SHORTCUTS_MODAL = createKeyboardCommand('TOGGLE_KEYBOARD_SHORTCUTS_MODAL')
+export const TOGGLE_COMMAND_PALETTE = createKeyboardCommand('TOGGLE_COMMAND_PALETTE')
--- a/packages/ui-services/src/Keyboard/KeyboardService.ts
+++ b/packages/ui-services/src/Keyboard/KeyboardService.ts
@@ -1,4 +1,4 @@
-import { Environment, Platform } from '@standardnotes/snjs'
+import { Environment, Platform, UuidGenerator } from '@standardnotes/snjs'
 import { eventMatchesKeyAndModifiers } from './eventMatchesKeyAndModifiers'
 import { KeyboardCommand } from './KeyboardCommands'
 import { KeyboardKeyEvent } from './KeyboardKeyEvent'
@@ -28,6 +28,20 @@ export class KeyboardService {
    }
  }

+  private isDisabled = false
+  /**
+   * When called, the service will stop triggering command handlers
+   * on keydown/keyup events. Useful when you need to handle events
+   * yourself while keeping the rest of behaviours inert.
+   * Make sure to call {@link enableEventHandling} once done.
+   */
+  public disableEventHandling() {
+    this.isDisabled = true
+  }
+  public enableEventHandling() {
+    this.isDisabled = false
+  }
+
  get isMac() {
    return this.platform === Platform.MacDesktop || this.platform === Platform.MacWeb
  }
@@ -116,6 +130,9 @@ export class KeyboardService {
  }

  private handleKeyboardEvent(event: KeyboardEvent, keyEvent: KeyboardKeyEvent): void {
+    if (this.isDisabled) {
+      return
+    }
    for (const command of this.commandMap.keys()) {
      const shortcut = this.commandMap.get(command)
      if (!shortcut) {
@@ -243,6 +260,7 @@ export class KeyboardService {
      ...shortcut,
      category: handler.category,
      description: handler.description,
+      id: UuidGenerator.GenerateUuid(),
    }
  }

@@ -250,11 +268,12 @@ export class KeyboardService {
   * Register help item for a keyboard shortcut that is handled outside of the KeyboardService,
   * for example by a library like Lexical.
   */
-  registerExternalKeyboardShortcutHelpItem(item: KeyboardShortcutHelpItem): () => void {
-    this.keyboardShortcutHelpItems.add(item)
+  registerExternalKeyboardShortcutHelpItem(item: Omit<KeyboardShortcutHelpItem, 'id'>): () => void {
+    const itemWithId = { ...item, id: UuidGenerator.GenerateUuid() }
+    this.keyboardShortcutHelpItems.add(itemWithId)

    return () => {
-      this.keyboardShortcutHelpItems.delete(item)
+      this.keyboardShortcutHelpItems.delete(itemWithId)
    }
  }

@@ -262,7 +281,7 @@ export class KeyboardService {
   * Register help item for a keyboard shortcut that is handled outside of the KeyboardService,
   * for example by a library like Lexical.
   */
-  registerExternalKeyboardShortcutHelpItems(items: KeyboardShortcutHelpItem[]): () => void {
+  registerExternalKeyboardShortcutHelpItems(items: Omit<KeyboardShortcutHelpItem, 'id'>[]): () => void {
    const disposers = items.map((item) => this.registerExternalKeyboardShortcutHelpItem(item))

    return () => {
--- a/packages/ui-services/src/Keyboard/KeyboardShortcut.ts
+++ b/packages/ui-services/src/Keyboard/KeyboardShortcut.ts
@@ -21,8 +21,9 @@ export type PlatformedKeyboardShortcut = KeyboardShortcut & {

 export type KeyboardShortcutCategory = 'General' | 'Notes list' | 'Current note' | 'Super notes' | 'Formatting'

-export type KeyboardShortcutHelpItem = Omit<PlatformedKeyboardShortcut, 'command'> & {
+export interface KeyboardShortcutHelpItem extends Omit<PlatformedKeyboardShortcut, 'command'> {
  command?: KeyboardCommand
  category: KeyboardShortcutCategory
  description: string
+  id: string
 }
--- a/packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts
+++ b/packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts
@@ -31,6 +31,7 @@ import {
  CHANGE_EDITOR_WIDTH_COMMAND,
  SUPER_TOGGLE_TOOLBAR,
  TOGGLE_KEYBOARD_SHORTCUTS_MODAL,
+  TOGGLE_COMMAND_PALETTE,
 } from './KeyboardCommands'
 import { KeyboardKey } from './KeyboardKey'
 import { KeyboardModifier, getPrimaryModifier } from './KeyboardModifier'
@@ -108,7 +109,7 @@ export function getKeyboardShortcuts(platform: Platform, _environment: Environme
    },
    {
      command: CHANGE_EDITOR_COMMAND,
-      key: '/',
+      key: '?',
      modifiers: [primaryModifier, KeyboardModifier.Shift],
      preventDefault: true,
    },
@@ -200,5 +201,10 @@ export function getKeyboardShortcuts(platform: Platform, _environment: Environme
      key: '/',
      modifiers: [primaryModifier],
    },
+    {
+      command: TOGGLE_COMMAND_PALETTE,
+      code: 'Semicolon',
+      modifiers: [primaryModifier, KeyboardModifier.Shift],
+    },
  ]
 }
--- a/packages/ui-services/src/Keyboard/keyboardCharacterForKey.ts
+++ b/packages/ui-services/src/Keyboard/keyboardCharacterForKey.ts
@@ -1,4 +1,4 @@
-export function keyboardCharacterForKeyOrCode(keyOrCode: string) {
+export function keyboardCharacterForKeyOrCode(keyOrCode: string, shiftKey = false) {
  if (keyOrCode.startsWith('Digit')) {
    return keyOrCode.replace('Digit', '')
  }
@@ -14,6 +14,8 @@ export function keyboardCharacterForKeyOrCode(keyOrCode: string) {
      return '←'
    case 'ArrowRight':
      return '→'
+    case 'Semicolon':
+      return shiftKey ? ':' : ';'
    default:
      return keyOrCode
  }
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -107,7 +107,7 @@
    "app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
  },
  "dependencies": {
-    "@ariakit/react": "^0.3.9",
+    "@ariakit/react": "^0.4.18",
    "@lexical/clipboard": "0.32.1",
    "@lexical/headless": "0.32.1",
    "@lexical/link": "0.32.1",
--- a/packages/web/src/javascripts/Application/Dependencies/Types.ts
+++ b/packages/web/src/javascripts/Application/Dependencies/Types.ts
@@ -9,6 +9,7 @@ export const Web_TYPES = {
  Importer: Symbol.for('Importer'),
  ItemGroupController: Symbol.for('ItemGroupController'),
  KeyboardService: Symbol.for('KeyboardService'),
+  CommandService: Symbol.for('CommandService'),
  MobileWebReceiver: Symbol.for('MobileWebReceiver'),
  MomentsService: Symbol.for('MomentsService'),
  PersistenceService: Symbol.for('PersistenceService'),
--- a/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts
+++ b/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts
@@ -14,7 +14,6 @@ import {
  ThemeManager,
  ToastService,
  VaultDisplayService,
-  WebApplicationInterface,
 } from '@standardnotes/ui-services'
 import { DependencyContainer } from '@standardnotes/utils'
 import { Web_TYPES } from './Types'
@@ -50,9 +49,11 @@ import { LoadPurchaseFlowUrl } from '../UseCase/LoadPurchaseFlowUrl'
 import { GetPurchaseFlowUrl } from '../UseCase/GetPurchaseFlowUrl'
 import { OpenSubscriptionDashboard } from '../UseCase/OpenSubscriptionDashboard'
 import { HeadlessSuperConverter } from '@/Components/SuperEditor/Tools/HeadlessSuperConverter'
+import { WebApplication } from '../WebApplication'
+import { CommandService } from '../../Components/CommandPalette/CommandService'

 export class WebDependencies extends DependencyContainer {
-  constructor(private application: WebApplicationInterface) {
+  constructor(private application: WebApplication) {
    super()

    this.bind(Web_TYPES.SuperConverter, () => {
@@ -124,6 +125,9 @@ export class WebDependencies extends DependencyContainer {
    this.bind(Web_TYPES.KeyboardService, () => {
      return new KeyboardService(application.platform, application.environment)
    })
+    this.bind(Web_TYPES.CommandService, () => {
+      return new CommandService(this.get<KeyboardService>(Web_TYPES.KeyboardService), application.generateUuid)
+    })

    this.bind(Web_TYPES.ArchiveManager, () => {
      return new ArchiveManager(application)
@@ -199,6 +203,7 @@ export class WebDependencies extends DependencyContainer {
      return new PaneController(
        application.preferences,
        this.get<KeyboardService>(Web_TYPES.KeyboardService),
+        application.commands,
        this.get<IsTabletOrMobileScreen>(Web_TYPES.IsTabletOrMobileScreen),
        this.get<PanesForLayout>(Web_TYPES.PanesForLayout),
        application.events,
@@ -233,7 +238,7 @@ export class WebDependencies extends DependencyContainer {
      return new NavigationController(
        this.get<FeaturesController>(Web_TYPES.FeaturesController),
        this.get<VaultDisplayService>(Web_TYPES.VaultDisplayService),
-        this.get<KeyboardService>(Web_TYPES.KeyboardService),
+        this.get<CommandService>(Web_TYPES.CommandService),
        this.get<PaneController>(Web_TYPES.PaneController),
        application.sync,
        application.mutator,
@@ -241,25 +246,16 @@ export class WebDependencies extends DependencyContainer {
        application.preferences,
        application.alerts,
        application.changeAndSaveItem,
+        application.recents,
        application.events,
      )
    })

    this.bind(Web_TYPES.NotesController, () => {
      return new NotesController(
-        this.get<ItemListController>(Web_TYPES.ItemListController),
-        this.get<NavigationController>(Web_TYPES.NavigationController),
-        this.get<ItemGroupController>(Web_TYPES.ItemGroupController),
-        this.get<KeyboardService>(Web_TYPES.KeyboardService),
-        application.preferences,
-        application.items,
-        application.mutator,
-        application.sync,
-        application.protections,
-        application.alerts,
+        application,
        this.get<IsGlobalSpellcheckEnabled>(Web_TYPES.IsGlobalSpellcheckEnabled),
        this.get<GetItemTags>(Web_TYPES.GetItemTags),
-        application.events,
      )
    })

@@ -304,6 +300,7 @@ export class WebDependencies extends DependencyContainer {
        application.options,
        this.get<IsNativeMobileWeb>(Web_TYPES.IsNativeMobileWeb),
        application.changeAndSaveItem,
+        application.recents,
        application.events,
      )
    })
@@ -374,6 +371,7 @@ export class WebDependencies extends DependencyContainer {
        application.platform,
        application.mobileDevice,
        this.get<IsNativeMobileWeb>(Web_TYPES.IsNativeMobileWeb),
+        application.recents,
        application.events,
      )
    })
@@ -381,7 +379,7 @@ export class WebDependencies extends DependencyContainer {
    this.bind(Web_TYPES.HistoryModalController, () => {
      return new HistoryModalController(
        this.get<NotesController>(Web_TYPES.NotesController),
-        this.get<KeyboardService>(Web_TYPES.KeyboardService),
+        this.get<CommandService>(Web_TYPES.CommandService),
        application.events,
      )
    })
--- a/packages/web/src/javascripts/Application/Recents.ts
+++ b/packages/web/src/javascripts/Application/Recents.ts
@@ -0,0 +1,33 @@
+const MaxCommands = 5
+const MaxItems = 10
+
+export class RecentActionsState {
+  #commandUuids: string[] = []
+  #itemUuids: string[] = []
+
+  /**
+   * Recently used commands, most recent at the start
+   */
+  get commandUuids() {
+    return this.#commandUuids
+  }
+  /**
+   * Recently opened items, most recent at the start
+   */
+  get itemUuids() {
+    return this.#itemUuids
+  }
+
+  add(id: string, action_type: 'item' | 'command' = 'item') {
+    const action_array = action_type === 'item' ? this.#itemUuids : this.#commandUuids
+    const existing = action_array.findIndex((uuid) => uuid === id)
+    if (existing !== -1) {
+      action_array.splice(existing, 1)
+    }
+    const max = action_type === 'item' ? MaxItems : MaxCommands
+    if (action_array.length == max) {
+      action_array.pop()
+    }
+    action_array.unshift(id)
+  }
+}
--- a/packages/web/src/javascripts/Application/WebApplication.spec.ts
+++ b/packages/web/src/javascripts/Application/WebApplication.spec.ts
@@ -2,6 +2,19 @@ import { Environment, namespacedKey, Platform, RawStorageKey, SNLog } from '@sta
 import { WebApplication } from '@/Application/WebApplication'
 import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'

+jest.mock('@standardnotes/sncrypto-web', () => {
+  return {
+    SNWebCrypto: class {
+      initialize() {
+        return Promise.resolve()
+      }
+      generateUUID() {
+        return 'mock-uuid'
+      }
+    },
+  }
+})
+
 describe('web application', () => {
  let application: WebApplication

--- a/packages/web/src/javascripts/Application/WebApplication.ts
+++ b/packages/web/src/javascripts/Application/WebApplication.ts
@@ -80,6 +80,8 @@ import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
 import { PersistenceService } from '@/Controllers/Abstract/PersistenceService'
 import { removeFromArray } from '@standardnotes/utils'
 import { FileItemActionType } from '@/Components/AttachedFilesPopover/PopoverFileItemAction'
+import { RecentActionsState } from './Recents'
+import { CommandService } from '../Components/CommandPalette/CommandService'

 export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void

@@ -95,6 +97,7 @@ export class WebApplication extends SNApplication implements WebApplicationInter
  public isSessionsModalVisible = false

  public devMode?: DevMode
+  public recents = new RecentActionsState()

  constructor(
    deviceInterface: WebOrDesktopDevice,
@@ -597,6 +600,10 @@ export class WebApplication extends SNApplication implements WebApplicationInter
    return this.deps.get<KeyboardService>(Web_TYPES.KeyboardService)
  }

+  get commands(): CommandService {
+    return this.deps.get<CommandService>(Web_TYPES.CommandService)
+  }
+
  get featuresController(): FeaturesController {
    return this.deps.get<FeaturesController>(Web_TYPES.FeaturesController)
  }
--- a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -13,7 +13,7 @@ import Spinner from '@/Components/Spinner/Spinner'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import { useApplication } from '../ApplicationProvider'
 import MenuSection from '../Menu/MenuSection'
-import { TOGGLE_KEYBOARD_SHORTCUTS_MODAL, isMobilePlatform } from '@standardnotes/ui-services'
+import { TOGGLE_COMMAND_PALETTE, TOGGLE_KEYBOARD_SHORTCUTS_MODAL, isMobilePlatform } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'

 type Props = {
@@ -95,6 +95,9 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
  const keyboardShortcutsHelpShortcut = useMemo(() => {
    return application.keyboardService.keyboardShortcutForCommand(TOGGLE_KEYBOARD_SHORTCUTS_MODAL)
  }, [application.keyboardService])
+  const commandPaletteShortcut = useMemo(() => {
+    return application.keyboardService.keyboardShortcutForCommand(TOGGLE_COMMAND_PALETTE)
+  }, [application.keyboardService])

  return (
    <>
@@ -194,17 +197,30 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
            <span className="text-neutral">v{application.version}</span>
          </MenuItem>
          {!isMobilePlatform(application.platform) && (
-            <MenuItem
-              onClick={() => {
-                application.keyboardService.triggerCommand(TOGGLE_KEYBOARD_SHORTCUTS_MODAL)
-              }}
-            >
-              <Icon type="keyboard" className={iconClassName} />
-              Keyboard shortcuts
-              {keyboardShortcutsHelpShortcut && (
-                <KeyboardShortcutIndicator shortcut={keyboardShortcutsHelpShortcut} className="ml-auto" />
-              )}
-            </MenuItem>
+            <>
+              <MenuItem
+                onClick={() => {
+                  application.keyboardService.triggerCommand(TOGGLE_KEYBOARD_SHORTCUTS_MODAL)
+                }}
+              >
+                <Icon type="keyboard" className={iconClassName} />
+                Keyboard shortcuts
+                {keyboardShortcutsHelpShortcut && (
+                  <KeyboardShortcutIndicator shortcut={keyboardShortcutsHelpShortcut} className="ml-auto" />
+                )}
+              </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  application.keyboardService.triggerCommand(TOGGLE_COMMAND_PALETTE)
+                }}
+              >
+                <Icon type="info" className={iconClassName} />
+                Command palette
+                {commandPaletteShortcut && (
+                  <KeyboardShortcutIndicator shortcut={commandPaletteShortcut} className="ml-auto" />
+                )}
+              </MenuItem>
+            </>
          )}
        </MenuSection>
        {user ? (
--- a/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
@@ -23,7 +23,7 @@ import ResponsivePaneProvider from '../Panes/ResponsivePaneProvider'
 import AndroidBackHandlerProvider from '@/NativeMobileWeb/useAndroidBackHandler'
 import ConfirmDeleteAccountContainer from '@/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal'
 import ApplicationProvider from '../ApplicationProvider'
-import CommandProvider from '../CommandProvider'
+import KeyboardServiceProvider from '../KeyboardServiceProvider'
 import PanesSystemComponent from '../Panes/PanesSystemComponent'
 import DotOrgNotice from './DotOrgNotice'
 import LinkingControllerProvider from '@/Controllers/LinkingControllerProvider'
@@ -32,6 +32,8 @@ import IosKeyboardClose from '../IosKeyboardClose/IosKeyboardClose'
 import EditorWidthSelectionModalWrapper from '../EditorWidthSelectionModal/EditorWidthSelectionModal'
 import { ProtectionEvent } from '@standardnotes/services'
 import KeyboardShortcutsModal from '../KeyboardShortcutsHelpModal/KeyboardShortcutsHelpModal'
+import CommandPalette from '../CommandPalette/CommandPalette'
+import SuperExportModal from '../NotesOptions/SuperExportModal'

 type Props = {
  application: WebApplication
@@ -212,7 +214,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
  if (route.type === RouteType.AppViewRoute && route.appViewRouteParam === 'extension') {
    return (
      <ApplicationProvider application={application}>
-        <CommandProvider service={application.keyboardService}>
+        <KeyboardServiceProvider service={application.keyboardService}>
          <AndroidBackHandlerProvider application={application}>
            <ResponsivePaneProvider paneController={application.paneController}>
              <PremiumModalProvider application={application}>
@@ -227,14 +229,14 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
              </PremiumModalProvider>
            </ResponsivePaneProvider>
          </AndroidBackHandlerProvider>
-        </CommandProvider>
+        </KeyboardServiceProvider>
      </ApplicationProvider>
    )
  }

  return (
    <ApplicationProvider application={application}>
-      <CommandProvider service={application.keyboardService}>
+      <KeyboardServiceProvider service={application.keyboardService}>
        <AndroidBackHandlerProvider application={application}>
          <ResponsivePaneProvider paneController={application.paneController}>
            <PremiumModalProvider application={application}>
@@ -269,6 +271,8 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                    <ConfirmDeleteAccountContainer application={application} />
                    <ImportModal importModalController={application.importModalController} />
                    <KeyboardShortcutsModal keyboardService={application.keyboardService} />
+                    <SuperExportModal />
+                    <CommandPalette />
                  </>
                  {application.routeService.isDotOrg && <DotOrgNotice />}
                  {isIOS() && <IosKeyboardClose />}
@@ -277,7 +281,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
            </PremiumModalProvider>
          </ResponsivePaneProvider>
        </AndroidBackHandlerProvider>
-      </CommandProvider>
+      </KeyboardServiceProvider>
    </ApplicationProvider>
  )
 }
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -55,14 +55,15 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
  }, [isOpen, onClickPreprocessing, onClick])

  useEffect(() => {
-    return application.keyboardService.addCommandHandler({
-      command: CHANGE_EDITOR_COMMAND,
-      category: 'Current note',
-      description: 'Change note type',
-      onKeyDown: () => {
+    return application.commands.addWithShortcut(
+      CHANGE_EDITOR_COMMAND,
+      'Current note',
+      'Change note type',
+      () => {
        void toggleMenu()
      },
-    })
+      'notes',
+    )
  }, [application, toggleMenu])

  const shortcut = useMemo(
--- a/packages/web/src/javascripts/Components/CommandPalette/CommandPalette.tsx
+++ b/packages/web/src/javascripts/Components/CommandPalette/CommandPalette.tsx
@@ -0,0 +1,425 @@
+import { observer } from 'mobx-react-lite'
+import { startTransition, useCallback, useEffect, useState } from 'react'
+import { useKeyboardService } from '../KeyboardServiceProvider'
+import { PlatformedKeyboardShortcut, TOGGLE_COMMAND_PALETTE } from '@standardnotes/ui-services'
+import {
+  Combobox,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxProvider,
+  Dialog,
+  Tab,
+  TabList,
+  TabPanel,
+  TabProvider,
+  useDialogStore,
+  useTabContext,
+} from '@ariakit/react'
+import {
+  classNames,
+  DecryptedItemInterface,
+  FileItem,
+  SmartView,
+  SNNote,
+  SNTag,
+  UuidGenerator,
+} from '@standardnotes/snjs'
+import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import { useApplication } from '../ApplicationProvider'
+import Icon from '../Icon/Icon'
+import { getIconForItem } from '../../Utils/Items/Icons/getIconForItem'
+import { FileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
+import type { CommandService } from './CommandService'
+import { requestCloseAllOpenModalsAndPopovers } from '../../Utils/CloseOpenModalsAndPopovers'
+
+type CommandPaletteItem = {
+  id: string
+  description: string
+  icon: JSX.Element
+  shortcut?: PlatformedKeyboardShortcut
+  resultRange?: [number, number]
+} & ({ section: 'notes' | 'files' | 'tags'; itemUuid: string } | { section: 'commands' })
+
+function ListItemDescription({ item }: { item: CommandPaletteItem }) {
+  const range = item.resultRange
+  if (!range) {
+    return item.description
+  }
+  return (
+    <>
+      {item.description.slice(0, range[0])}
+      <span className="rounded-sm bg-[color-mix(in_srgb,var(--sn-stylekit-accessory-tint-color-1),rgba(255,255,255,.1))] p-px">
+        {item.description.slice(range[0], range[1])}
+      </span>
+      {item.description.slice(range[1])}
+    </>
+  )
+}
+
+const Tabs = ['all', 'commands', 'notes', 'files', 'tags'] as const
+type TabId = (typeof Tabs)[number]
+
+function CommandPaletteListItem({
+  id,
+  item,
+  index,
+  handleClick,
+  selectedTab,
+}: {
+  id: string
+  item: CommandPaletteItem
+  index: number
+  handleClick: (item: CommandPaletteItem) => void
+  selectedTab: TabId
+}) {
+  if (selectedTab !== 'all' && selectedTab !== item.section) {
+    return null
+  }
+  return (
+    <ComboboxItem
+      id={id}
+      value={item.id}
+      hideOnClick={true}
+      focusOnHover={true}
+      blurOnHoverEnd={false}
+      className={classNames(
+        'flex scroll-m-2 items-center gap-2 whitespace-nowrap rounded-md px-2 py-2.5 text-[0.95rem] data-[active-item]:bg-info data-[active-item]:text-info-contrast [&>svg]:flex-shrink-0',
+        index === 0 && 'scroll-m-8',
+      )}
+      onClick={() => handleClick(item)}
+    >
+      {item.icon}
+      <div className="mr-auto overflow-hidden text-ellipsis whitespace-nowrap leading-none">
+        <ListItemDescription item={item} />
+      </div>
+      {item.shortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={item.shortcut} small={false} />}
+    </ComboboxItem>
+  )
+}
+
+function ComboboxInput() {
+  const tab = useTabContext()
+  return (
+    <Combobox
+      autoSelect="always"
+      className="h-10 w-full appearance-none bg-transparent px-1 text-base focus:shadow-none focus:outline-none"
+      placeholder="Search notes, files, commands, etc..."
+      onKeyDown={(event) => {
+        if (event.key !== 'Tab') {
+          return
+        }
+        const activeId = tab?.getState().selectedId
+        const options = { activeId }
+        const nextId = event.shiftKey ? tab?.previous(options) : tab?.next(options)
+        if (nextId) {
+          event.preventDefault()
+          tab?.select(nextId)
+        }
+      }}
+    />
+  )
+}
+
+// Future TODO, nice to have: A way to expose items like the current note's options
+// directly in the command palette rather than only having a way to open the menu
+function CommandPalette() {
+  const application = useApplication()
+  const keyboardService = useKeyboardService()
+  const [isOpen, setIsOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [recents, setRecents] = useState<CommandPaletteItem[]>([])
+  const [items, setItems] = useState<CommandPaletteItem[]>([])
+  // Storing counts as separate state to avoid iterating items multiple times
+  const [itemCountsPerTab, setItemCounts] = useState({
+    commands: 0,
+    notes: 0,
+    files: 0,
+    tags: 0,
+  })
+  const [selectedTab, setSelectedTab] = useState<TabId>('all')
+  const dialog = useDialogStore({
+    open: isOpen,
+    setOpen: setIsOpen,
+  })
+
+  useEffect(() => {
+    if (isOpen) {
+      keyboardService.disableEventHandling()
+      requestCloseAllOpenModalsAndPopovers()
+    } else {
+      keyboardService.enableEventHandling()
+    }
+  }, [keyboardService, isOpen])
+
+  useEffect(() => {
+    return keyboardService.addCommandHandler({
+      command: TOGGLE_COMMAND_PALETTE,
+      category: 'General',
+      description: 'Toggle command palette',
+      onKeyDown: (e) => {
+        e.preventDefault()
+        setIsOpen((open) => !open)
+        setQuery('')
+      },
+    })
+  }, [keyboardService])
+
+  const handleItemClick = useCallback(
+    (item: CommandPaletteItem) => {
+      if (item.section === 'commands') {
+        application.commands.triggerCommand(item.id)
+        application.recents.add(item.id, 'command')
+      } else {
+        const decryptedItem = application.items.findItem<DecryptedItemInterface>(item.itemUuid)
+        if (!decryptedItem) {
+          return
+        }
+        if (decryptedItem instanceof SNNote) {
+          void application.itemListController.selectItemUsingInstance(decryptedItem, true)
+        } else if (decryptedItem instanceof FileItem) {
+          void application.filesController.handleFileAction({
+            type: FileItemActionType.PreviewFile,
+            payload: { file: decryptedItem },
+          })
+        } else if (decryptedItem instanceof SNTag || decryptedItem instanceof SmartView) {
+          void application.navigationController.setSelectedTag(decryptedItem, 'all', {
+            userTriggered: true,
+          })
+        }
+      }
+    },
+    [
+      application.commands,
+      application.filesController,
+      application.itemListController,
+      application.items,
+      application.navigationController,
+      application.recents,
+    ],
+  )
+
+  const createItemForInteractableItem = useCallback(
+    (item: DecryptedItemInterface): CommandPaletteItem => {
+      const icon = getIconForItem(item, application)
+      let section: 'notes' | 'files' | 'tags'
+      if (item instanceof SNNote) {
+        section = 'notes'
+      } else if (item instanceof FileItem) {
+        section = 'files'
+      } else if (item instanceof SNTag || item instanceof SmartView) {
+        section = 'tags'
+      } else {
+        throw new Error('Item is not a note, file or tag')
+      }
+      return {
+        section,
+        id: UuidGenerator.GenerateUuid(),
+        itemUuid: item.uuid,
+        description: item.title || '<no title>',
+        icon: <Icon type={icon[0]} className={item instanceof SNNote ? icon[1] : ''} />,
+      }
+    },
+    [application],
+  )
+
+  const createItemForCommand = useCallback(
+    (command: ReturnType<CommandService['getCommandDescriptions']>[0]): CommandPaletteItem => {
+      const shortcut = command.shortcut_id
+        ? application.keyboardService.keyboardShortcutForCommand(command.shortcut_id)
+        : undefined
+      return {
+        id: command.id,
+        description: command.description,
+        section: 'commands',
+        icon: <Icon type={command.icon} />,
+        shortcut,
+      }
+    },
+    [application.keyboardService],
+  )
+
+  useEffect(
+    function updateCommandPaletteItems() {
+      if (!isOpen) {
+        setSelectedTab('all')
+        setItems([])
+        return
+      }
+
+      const recents: CommandPaletteItem[] = []
+      const items: CommandPaletteItem[] = []
+      const itemCounts: typeof itemCountsPerTab = {
+        commands: 0,
+        notes: 0,
+        files: 0,
+        tags: 0,
+      }
+
+      const searchQuery = query.toLowerCase()
+      const hasQuery = searchQuery.length > 0
+
+      if (hasQuery) {
+        const commands = application.commands.getCommandDescriptions()
+        for (let i = 0; i < commands.length; i++) {
+          const command = commands[i]
+          if (!command) {
+            continue
+          }
+          if (items.length >= 50) {
+            break
+          }
+          const index = command.description.toLowerCase().indexOf(searchQuery)
+          if (index === -1) {
+            continue
+          }
+          const item = createItemForCommand(command)
+          item.resultRange = [index, index + searchQuery.length]
+          items.push(item)
+          itemCounts[item.section]++
+        }
+
+        const interactableItems = application.items.getInteractableItems()
+        for (let i = 0; i < interactableItems.length; i++) {
+          if (items.length >= 50) {
+            break
+          }
+          const decryptedItem = interactableItems[i]
+          if (!decryptedItem || !decryptedItem.title) {
+            continue
+          }
+          const index = decryptedItem.title.toLowerCase().indexOf(searchQuery)
+          if (index === -1) {
+            continue
+          }
+          const item = createItemForInteractableItem(decryptedItem)
+          item.resultRange = [index, index + searchQuery.length]
+          items.push(item)
+          itemCounts[item.section]++
+        }
+      } else {
+        const recentCommands = application.recents.commandUuids
+        for (let i = 0; i < recentCommands.length; i++) {
+          const command = application.commands.getCommandDescription(recentCommands[i])
+          if (!command) {
+            continue
+          }
+          const item = createItemForCommand(command)
+          recents.push(item)
+          itemCounts[item.section]++
+        }
+        const recentItems = application.recents.itemUuids
+        for (let i = 0; i < recentItems.length; i++) {
+          const decryptedItem = application.items.findItem(recentItems[i])
+          if (!decryptedItem) {
+            continue
+          }
+          const item = createItemForInteractableItem(decryptedItem)
+          recents.push(item)
+          itemCounts[item.section]++
+        }
+
+        const commands = application.commands.getCommandDescriptions()
+        for (let i = 0; i < commands.length; i++) {
+          const command = commands[i]
+          if (!command) {
+            continue
+          }
+          const item = createItemForCommand(command)
+          items.push(item)
+          itemCounts[item.section]++
+        }
+        items.sort((a, b) => (a.description.toLowerCase() < b.description.toLowerCase() ? -1 : 1))
+      }
+
+      setItems(items)
+      setRecents(recents)
+      setItemCounts(itemCounts)
+    },
+    [application, createItemForCommand, createItemForInteractableItem, isOpen, query],
+  )
+
+  const hasNoItemsAtAll = items.length === 0
+  const hasNoItemsInSelectedTab = selectedTab !== 'all' && itemCountsPerTab[selectedTab] === 0
+
+  return (
+    <Dialog
+      store={dialog}
+      className="fixed inset-3 bottom-[10vh] top-[10vh] z-modal m-auto mt-0 flex h-fit max-h-[70vh] w-[min(45rem,90vw)] flex-col gap-3 overflow-auto rounded-xl border border-[--popover-border-color] bg-[--popover-background-color] px-3 py-3 shadow-main [backdrop-filter:var(--popover-backdrop-filter)]"
+      backdrop={<div className="bg-passive-5 opacity-50 transition-opacity duration-75 data-[enter]:opacity-85" />}
+    >
+      <ComboboxProvider
+        disclosure={dialog}
+        includesBaseElement={false}
+        resetValueOnHide={true}
+        setValue={(value) => {
+          startTransition(() => setQuery(value))
+        }}
+      >
+        <TabProvider selectedId={selectedTab} setSelectedId={(id) => setSelectedTab((id as TabId) || 'all')}>
+          <div className="flex rounded-lg border border-[--popover-border-color] bg-[--popover-background-color] px-2">
+            <ComboboxInput />
+          </div>
+          <TabList className="flex items-center gap-1">
+            {Tabs.map((id) => (
+              <Tab
+                key={id}
+                id={id}
+                className="rounded-full px-3 py-1 capitalize disabled:opacity-65 aria-selected:bg-info aria-selected:text-info-contrast data-[active-item]:ring-1 data-[active-item]:ring-info data-[active-item]:ring-offset-1 data-[active-item]:ring-offset-transparent"
+                disabled={hasNoItemsAtAll || (id !== 'all' && itemCountsPerTab[id] === 0)}
+                accessibleWhenDisabled={false}
+              >
+                {id}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanel className="flex flex-col gap-1.5 overflow-y-auto" tabId={selectedTab}>
+            {query.length > 0 && (hasNoItemsAtAll || hasNoItemsInSelectedTab) && (
+              <div className="mx-auto px-2 text-sm font-semibold opacity-75">No items found</div>
+            )}
+            <ComboboxList className="focus:shadow-none focus:outline-none">
+              {recents.length > 0 && (
+                <ComboboxGroup>
+                  <ComboboxGroupLabel className="px-2 font-semibold opacity-75">Recent</ComboboxGroupLabel>
+                  {recents.map((item, index) => (
+                    <CommandPaletteListItem
+                      key={item.id}
+                      id={
+                        /* ariakit doesn't like multiple items with the same id in the same combobox list */
+                        item.id + 'recent'
+                      }
+                      index={index}
+                      item={item}
+                      handleClick={handleItemClick}
+                      selectedTab={selectedTab}
+                    />
+                  ))}
+                </ComboboxGroup>
+              )}
+              {!hasNoItemsAtAll && (
+                <ComboboxGroup>
+                  {recents.length > 0 && (
+                    <ComboboxGroupLabel className="mt-2 px-2 font-semibold opacity-75">All commands</ComboboxGroupLabel>
+                  )}
+                  {items.map((item, index) => (
+                    <CommandPaletteListItem
+                      key={item.id}
+                      id={item.id}
+                      index={index}
+                      item={item}
+                      handleClick={handleItemClick}
+                      selectedTab={selectedTab}
+                    />
+                  ))}
+                </ComboboxGroup>
+              )}
+            </ComboboxList>
+          </TabPanel>
+        </TabProvider>
+      </ComboboxProvider>
+    </Dialog>
+  )
+}
+
+export default observer(CommandPalette)
--- a/packages/web/src/javascripts/Components/CommandPalette/CommandService.ts
+++ b/packages/web/src/javascripts/Components/CommandPalette/CommandService.ts
@@ -0,0 +1,66 @@
+import { GenerateUuid, IconType } from '@standardnotes/snjs'
+import { KeyboardCommand, KeyboardService, KeyboardShortcutCategory } from '@standardnotes/ui-services'
+import mergeRegister from '../../Hooks/mergeRegister'
+
+type CommandInfo = {
+  description: string
+  icon: IconType
+  shortcut_id?: KeyboardCommand
+}
+
+type CommandDescription = { id: string } & CommandInfo
+
+export class CommandService {
+  #commandInfo = new Map<string, CommandInfo>()
+  #commandHandlers = new Map<string, () => void>()
+
+  constructor(
+    private keyboardService: KeyboardService,
+    private generateUuid: GenerateUuid,
+  ) {}
+
+  public add(id: string, description: string, handler: () => void, icon?: IconType, shortcut_id?: KeyboardCommand) {
+    this.#commandInfo.set(id, { description, icon: icon ?? 'info', shortcut_id })
+    this.#commandHandlers.set(id, handler)
+    return () => {
+      this.#commandInfo.delete(id)
+      this.#commandHandlers.delete(id)
+    }
+  }
+
+  public addWithShortcut(
+    id: KeyboardCommand,
+    category: KeyboardShortcutCategory,
+    description: string,
+    handler: (event?: KeyboardEvent, data?: unknown) => void,
+    icon?: IconType,
+  ) {
+    return mergeRegister(
+      this.add(id.description ?? this.generateUuid.execute().getValue(), description, handler, icon, id),
+      this.keyboardService.addCommandHandler({ command: id, category, description, onKeyDown: handler }),
+    )
+  }
+
+  public triggerCommand(id: string) {
+    const handler = this.#commandHandlers.get(id)
+    if (handler) {
+      handler()
+    }
+  }
+
+  public getCommandDescriptions() {
+    const descriptions: CommandDescription[] = []
+    for (const [id, { description, icon, shortcut_id }] of this.#commandInfo) {
+      descriptions.push({ id, description, icon, shortcut_id })
+    }
+    return descriptions
+  }
+
+  public getCommandDescription(id: string): CommandDescription | undefined {
+    const command = this.#commandInfo.get(id)
+    if (!command) {
+      return
+    }
+    return { id, ...command }
+  }
+}
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -175,15 +175,6 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
       * probably better to be consistent.
       */
      return application.keyboardService.addCommandHandlers([
-        {
-          command: CREATE_NEW_NOTE_KEYBOARD_COMMAND,
-          category: 'General',
-          description: 'Create new note',
-          onKeyDown: (event) => {
-            event.preventDefault()
-            void addNewItem()
-          },
-        },
        {
          command: NEXT_LIST_ITEM_KEYBOARD_COMMAND,
          category: 'Notes list',
@@ -262,11 +253,28 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
    )

    const addButtonLabel = useMemo(() => {
-      return isFilesSmartView
-        ? 'Upload file'
-        : `Create a new note in the selected tag (${shortcutForCreate && keyboardStringForShortcut(shortcutForCreate)})`
+      let shortcut = keyboardStringForShortcut(shortcutForCreate)
+      if (shortcut) {
+        shortcut = '(' + shortcut + ')'
+      }
+      return isFilesSmartView ? `Upload file ${shortcut}` : `Create a new note in the selected tag ${shortcut}`
    }, [isFilesSmartView, shortcutForCreate])

+    useEffect(
+      () =>
+        application.commands.addWithShortcut(
+          CREATE_NEW_NOTE_KEYBOARD_COMMAND,
+          'General',
+          isFilesSmartView ? 'Upload file' : 'Create new note',
+          (event) => {
+            event?.preventDefault()
+            void addNewItem()
+          },
+          isFilesSmartView ? 'upload' : 'add',
+        ),
+      [addNewItem, application.commands, isFilesSmartView],
+    )
+
    const dailyMode = selectedAsTag?.isDailyEntry

    const handleDailyListSelection = useCallback(
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -103,6 +103,17 @@ const ContentListHeader = ({
    setShowDisplayOptionsMenu((show) => !show)
  }, [])

+  useEffect(
+    () =>
+      application.commands.add(
+        'open-display-opts-menu',
+        'Open display options menu',
+        toggleDisplayOptionsMenu,
+        'sort-descending',
+      ),
+    [application.commands, toggleDisplayOptionsMenu],
+  )
+
  const OptionsMenu = useMemo(() => {
    return (
      <div className="flex">
--- a/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx
+++ b/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx
@@ -178,11 +178,11 @@ const EditorWidthSelectionModalWrapper = () => {
  }, [])

  useEffect(() => {
-    return application.keyboardService.addCommandHandler({
-      command: CHANGE_EDITOR_WIDTH_COMMAND,
-      category: 'Current note',
-      description: 'Change editor width',
-      onKeyDown: (_, data) => {
+    return application.commands.addWithShortcut(
+      CHANGE_EDITOR_WIDTH_COMMAND,
+      'Current note',
+      'Change editor width',
+      (_, data) => {
        if (typeof data === 'boolean' && data) {
          setIsGlobal(data)
        } else {
@@ -190,7 +190,8 @@ const EditorWidthSelectionModalWrapper = () => {
        }
        toggle()
      },
-    })
+      'line-width',
+    )
  }, [application, toggle])

  return (
--- a/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
@@ -1,11 +1,12 @@
 import { classNames } from '@standardnotes/utils'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import { observer } from 'mobx-react-lite'
 import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
+import { useApplication } from '../ApplicationProvider'

 type Props = AccountMenuProps & {
  controller: AccountMenuController
@@ -15,9 +16,15 @@ type Props = AccountMenuProps & {
 }

 const AccountMenuButton = ({ hasError, controller, mainApplicationGroup, onClickOutside, toggleMenu, user }: Props) => {
+  const application = useApplication()
  const buttonRef = useRef<HTMLButtonElement>(null)
  const { show: isOpen } = controller

+  useEffect(
+    () => application.commands.add('open-acc-menu', 'Open account menu', toggleMenu, 'account-circle'),
+    [application.commands, toggleMenu],
+  )
+
  return (
    <>
      <StyledTooltip label="Open account menu">
--- a/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
@@ -2,7 +2,7 @@ import { compareSemVersions, StatusServiceEvent } from '@standardnotes/snjs'
 import { keyboardStringForShortcut, OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useApplication } from '../ApplicationProvider'
-import { useCommandService } from '../CommandProvider'
+import { useKeyboardService } from '../KeyboardServiceProvider'
 import Icon from '../Icon/Icon'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
@@ -16,10 +16,10 @@ type Props = {
 const PreferencesButton = ({ openPreferences }: Props) => {
  const application = useApplication()

-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()
  const shortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(OPEN_PREFERENCES_COMMAND)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(OPEN_PREFERENCES_COMMAND)),
+    [keyboardService],
  )

  const [changelogLastReadVersion, setChangelogLastReadVersion] = useState(() =>
--- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
@@ -2,13 +2,14 @@ import { WebApplication } from '@/Application/WebApplication'
 import { UIFeature, GetDarkThemeFeature } from '@standardnotes/snjs'
 import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
 import { classNames } from '@standardnotes/utils'
-import { useEffect, useRef, useState } from 'react'
-import { useCommandService } from '../CommandProvider'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useKeyboardService } from '../KeyboardServiceProvider'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import RoundIconButton from '../Button/RoundIconButton'
+import mergeRegister from '../../Hooks/mergeRegister'

 type Props = {
  application: WebApplication
@@ -17,30 +18,37 @@ type Props = {

 const QuickSettingsButton = ({ application, isMobileNavigation = false }: Props) => {
  const buttonRef = useRef<HTMLButtonElement>(null)
-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()

  const [isOpen, setIsOpen] = useState(false)
-  const toggleMenu = () => setIsOpen(!isOpen)
+  const toggleMenu = useCallback(() => setIsOpen((isOpen) => !isOpen), [])

  useEffect(() => {
+    if (isMobileNavigation) {
+      return
+    }
+
    const darkThemeFeature = new UIFeature(GetDarkThemeFeature())

-    return commandService.addCommandHandler({
-      command: TOGGLE_DARK_MODE_COMMAND,
-      category: 'General',
-      description: 'Toggle dark mode',
-      onKeyDown: () => {
+    return mergeRegister(
+      application.commands.addWithShortcut(TOGGLE_DARK_MODE_COMMAND, 'General', 'Toggle dark mode', () => {
        void application.componentManager.toggleTheme(darkThemeFeature)
        return true
-      },
-    })
-  }, [application, commandService])
+      }),
+      application.commands.add('open-quick-settings-menu', 'Open quick settings menu', toggleMenu, 'themes'),
+    )
+  }, [application, isMobileNavigation, keyboardService, toggleMenu])

  return (
    <>
      <StyledTooltip label="Open quick settings menu">
        {isMobileNavigation ? (
-          <RoundIconButton className="ml-2.5 bg-default" onClick={toggleMenu} label="Go to vaults menu" icon="themes" />
+          <RoundIconButton
+            className="ml-2.5 bg-default"
+            onClick={toggleMenu}
+            label="Go to quick settings menu"
+            icon="themes"
+          />
        ) : (
          <button
            onClick={toggleMenu}
--- a/packages/web/src/javascripts/Components/KeyboardServiceProvider.tsx
+++ b/packages/web/src/javascripts/Components/KeyboardServiceProvider.tsx
@@ -3,13 +3,13 @@ import { ReactNode, createContext, useContext, memo } from 'react'
 import { observer } from 'mobx-react-lite'
 import { KeyboardService } from '@standardnotes/ui-services'

-const CommandServiceContext = createContext<KeyboardService | undefined>(undefined)
+const KeyboardServiceContext = createContext<KeyboardService | undefined>(undefined)

-export const useCommandService = () => {
-  const value = useContext(CommandServiceContext)
+export const useKeyboardService = () => {
+  const value = useContext(KeyboardServiceContext)

  if (!value) {
-    throw new Error('Component must be a child of <CommandServiceProvider />')
+    throw new Error('Component must be a child of <KeyboardServiceProvider />')
  }

  return value
@@ -25,12 +25,12 @@ type ProviderProps = {

 const MemoizedChildren = memo(({ children }: ChildrenProps) => <>{children}</>)

-const CommandServiceProvider = ({ service, children }: ProviderProps) => {
+const KeyboardServiceProvider = ({ service, children }: ProviderProps) => {
  return (
-    <CommandServiceContext.Provider value={service}>
+    <KeyboardServiceContext.Provider value={service}>
      <MemoizedChildren children={children} />
-    </CommandServiceContext.Provider>
+    </KeyboardServiceContext.Provider>
  )
 }

-export default observer(CommandServiceProvider)
+export default observer(KeyboardServiceProvider)
--- a/packages/web/src/javascripts/Components/KeyboardShortcutIndicator/KeyboardShortcutIndicator.tsx
+++ b/packages/web/src/javascripts/Components/KeyboardShortcutIndicator/KeyboardShortcutIndicator.tsx
@@ -4,6 +4,7 @@ import {
  keyboardCharacterForModifier,
  isMobilePlatform,
  keyboardCharacterForKeyOrCode,
+  KeyboardModifier,
 } from '@standardnotes/ui-services'
 import { useMemo } from 'react'

@@ -20,7 +21,7 @@ export const KeyboardShortcutIndicator = ({ shortcut, small = true, dimmed = tru
    const primaryKey = shortcut.key
      ? keyboardCharacterForKeyOrCode(shortcut.key)
      : shortcut.code
-      ? keyboardCharacterForKeyOrCode(shortcut.code)
+      ? keyboardCharacterForKeyOrCode(shortcut.code, modifiers.includes(KeyboardModifier.Shift))
      : undefined

    const results: string[] = []
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
 import { LinkingController } from '@/Controllers/LinkingController'
 import LinkedItemBubble from './LinkedItemBubble'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
@@ -10,12 +10,13 @@ import { ContentType, DecryptedItemInterface } from '@standardnotes/snjs'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { ItemLink } from '@/Utils/Items/Search/ItemLink'
 import { FOCUS_TAGS_INPUT_COMMAND, keyboardStringForShortcut } from '@standardnotes/ui-services'
-import { useCommandService } from '../CommandProvider'
 import { useItemLinks } from '@/Hooks/useItemLinks'
 import RoundIconButton from '../Button/RoundIconButton'
 import VaultNameBadge from '../Vaults/VaultNameBadge'
 import LastEditedByBadge from '../Vaults/LastEditedByBadge'
 import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo'
+import mergeRegister from '../../Hooks/mergeRegister'
+import { useApplication } from '../ApplicationProvider'

 type Props = {
  linkingController: LinkingController
@@ -39,7 +40,8 @@ const LinkedItemBubblesContainer = ({
 }: Props) => {
  const { toggleAppPane } = useResponsiveAppPane()

-  const commandService = useCommandService()
+  const application = useApplication()
+  const keyboardService = application.keyboardService

  const { unlinkItems, activateItem } = linkingController
  const unlinkItem = useCallback(
@@ -57,23 +59,28 @@ const LinkedItemBubblesContainer = ({
    [filesLinkedToItem, notesLinkedToItem, tagsLinkedToItem],
  )

+  const linkInputRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
-    return commandService.addCommandHandler({
-      command: FOCUS_TAGS_INPUT_COMMAND,
-      category: 'Current note',
-      description: 'Link tags, notes, files',
-      onKeyDown: () => {
-        const input = document.getElementById(ElementIds.ItemLinkAutocompleteInput)
-        if (input) {
-          input.focus()
-        }
-      },
-    })
-  }, [commandService])
+    const focusInput = () => {
+      const input = linkInputRef.current
+      if (input) {
+        setTimeout(() => input.focus())
+      }
+    }
+    return mergeRegister(
+      keyboardService.addCommandHandler({
+        command: FOCUS_TAGS_INPUT_COMMAND,
+        category: 'Current note',
+        description: 'Link tags, notes, files',
+        onKeyDown: focusInput,
+      }),
+      application.commands.add('link-items-current', 'Link items to current note', focusInput, 'link'),
+    )
+  }, [application.commands, keyboardService])

  const shortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(FOCUS_TAGS_INPUT_COMMAND)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(FOCUS_TAGS_INPUT_COMMAND)),
+    [keyboardService],
  )

  const [focusedId, setFocusedId] = useState<string>()
@@ -209,6 +216,7 @@ const LinkedItemBubblesContainer = ({
        {isCollapsed && nonVisibleItems > 0 && <span className="flex-shrink-0">and {nonVisibleItems} more...</span>}
        {!readonly && (
          <ItemLinkAutocompleteInput
+            ref={linkInputRef}
            focusedId={focusedId}
            linkingController={linkingController}
            focusPreviousItem={focusPreviousItem}
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
@@ -1,9 +1,10 @@
 import { LinkingController } from '@/Controllers/LinkingController'
 import { observer } from 'mobx-react-lite'
-import { useRef, useCallback } from 'react'
+import { useRef, useCallback, useEffect } from 'react'
 import RoundIconButton from '../Button/RoundIconButton'
 import Popover from '../Popover/Popover'
 import LinkedItemsPanel from './LinkedItemsPanel'
+import { useApplication } from '../ApplicationProvider'

 type Props = {
  linkingController: LinkingController
@@ -12,6 +13,7 @@ type Props = {
 }

 const LinkedItemsButton = ({ linkingController, onClick, onClickPreprocessing }: Props) => {
+  const application = useApplication()
  const { activeItem, isLinkingPanelOpen, setIsLinkingPanelOpen } = linkingController
  const buttonRef = useRef<HTMLButtonElement>(null)

@@ -26,6 +28,8 @@ const LinkedItemsButton = ({ linkingController, onClick, onClickPreprocessing }:
    }
  }, [isLinkingPanelOpen, onClick, onClickPreprocessing, setIsLinkingPanelOpen])

+  useEffect(() => application.commands.add('open-linked-items-panel', 'Open linked items panel', toggleMenu, 'link'))
+
  if (!activeItem) {
    return null
  }
--- a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
+++ b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
@@ -44,7 +44,6 @@ const ModalOverlay = forwardRef(
          close()
        }
      },
-      animated: !isMobileScreen,
    })

    const portalId = useId()
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -93,11 +93,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {

  onEditorComponentLoad?: () => void

-  private removeTrashKeyObserver?: () => void
-  private removeNoteStreamObserver?: () => void
-  private removeComponentManagerObserver?: () => void
-  private removeInnerNoteObserver?: () => void
-  private removeVaultUsersEventHandler?: () => void
+  #observers: (() => void)[] = []

  private protectionTimeoutId: ReturnType<typeof setTimeout> | null = null
  private noteViewElementRef: RefObject<HTMLDivElement>
@@ -147,20 +143,12 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
    super.deinit()
    ;(this.controller as unknown) = undefined

-    this.removeNoteStreamObserver?.()
-    ;(this.removeNoteStreamObserver as unknown) = undefined
-
-    this.removeInnerNoteObserver?.()
-    ;(this.removeInnerNoteObserver as unknown) = undefined
-
-    this.removeComponentManagerObserver?.()
-    ;(this.removeComponentManagerObserver as unknown) = undefined
-
-    this.removeTrashKeyObserver?.()
-    this.removeTrashKeyObserver = undefined
-
-    this.removeVaultUsersEventHandler?.()
-    this.removeVaultUsersEventHandler = undefined
+    for (let i = 0; i < this.#observers.length; i++) {
+      const cleanup = this.#observers[i]
+      cleanup()
+    }
+    this.#observers.length = 0
+    ;(this.#observers as unknown) = undefined

    this.clearNoteProtectionInactivityTimer()
    ;(this.ensureNoteIsInsertedBeforeUIAction as unknown) = undefined
@@ -213,23 +201,27 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
  override componentDidMount(): void {
    super.componentDidMount()

-    this.removeVaultUsersEventHandler = this.application.vaultUsers.addEventObserver((event, data) => {
-      if (event === VaultUserServiceEvent.InvalidatedUserCacheForVault) {
-        const vault = this.application.vaults.getItemVault(this.note)
-        if ((data as string) !== vault?.sharing?.sharedVaultUuid) {
-          return
+    this.#observers.push(
+      this.application.vaultUsers.addEventObserver((event, data) => {
+        if (event === VaultUserServiceEvent.InvalidatedUserCacheForVault) {
+          const vault = this.application.vaults.getItemVault(this.note)
+          if ((data as string) !== vault?.sharing?.sharedVaultUuid) {
+            return
+          }
+          this.setState({
+            readonly: vault ? this.application.vaultUsers.isCurrentUserReadonlyVaultMember(vault) : undefined,
+          })
        }
-        this.setState({
-          readonly: vault ? this.application.vaultUsers.isCurrentUserReadonlyVaultMember(vault) : undefined,
-        })
-      }
-    })
+      }),
+    )

    this.registerKeyboardShortcuts()

-    this.removeInnerNoteObserver = this.controller.addNoteInnerValueChangeObserver((note, source) => {
-      this.onNoteInnerChange(note, source)
-    })
+    this.#observers.push(
+      this.controller.addNoteInnerValueChangeObserver((note, source) => {
+        this.onNoteInnerChange(note, source)
+      }),
+    )

    this.autorun(() => {
      const syncStatus = this.controller.syncStatus
@@ -463,15 +455,17 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
  }

  streamItems() {
-    this.removeNoteStreamObserver = this.application.items.streamItems<SNNote>(ContentType.TYPES.Note, async () => {
-      if (!this.note) {
-        return
-      }
+    this.#observers.push(
+      this.application.items.streamItems<SNNote>(ContentType.TYPES.Note, async () => {
+        if (!this.note) {
+          return
+        }

-      this.setState({
-        conflictedNotes: this.application.items.conflictsOf(this.note.uuid) as SNNote[],
-      })
-    })
+        this.setState({
+          conflictedNotes: this.application.items.conflictsOf(this.note.uuid) as SNNote[],
+        })
+      }),
+    )
  }

  private createComponentViewer(component: UIFeature<IframeComponentFeatureDescription>) {
@@ -766,14 +760,18 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
  }

  registerKeyboardShortcuts() {
-    this.removeTrashKeyObserver = this.application.keyboardService.addCommandHandler({
-      command: DELETE_NOTE_KEYBOARD_COMMAND,
-      notTags: ['INPUT', 'TEXTAREA'],
-      notElementIds: [SuperEditorContentId],
-      onKeyDown: () => {
-        this.deleteNote(false).catch(console.error)
-      },
-    })
+    const moveNoteToTrash = () => {
+      this.deleteNote(false).catch(console.error)
+    }
+
+    this.#observers.push(
+      this.application.keyboardService.addCommandHandler({
+        command: DELETE_NOTE_KEYBOARD_COMMAND,
+        notTags: ['INPUT', 'TEXTAREA'],
+        notElementIds: [SuperEditorContentId],
+        onKeyDown: moveNoteToTrash,
+      }),
+    )
  }

  ensureNoteIsInsertedBeforeUIAction = async () => {
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -1,7 +1,7 @@
 import Icon from '@/Components/Icon/Icon'
 import { observer } from 'mobx-react-lite'
 import { useState, useEffect, useMemo, useCallback } from 'react'
-import { NoteType, Platform, SNNote, pluralize } from '@standardnotes/snjs'
+import { NoteType, Platform } from '@standardnotes/snjs'
 import {
  CHANGE_EDITOR_WIDTH_COMMAND,
  OPEN_NOTE_HISTORY_COMMAND,
@@ -12,7 +12,6 @@ import {
 import ChangeEditorOption from './ChangeEditorOption'
 import ListedActionsOption from './Listed/ListedActionsOption'
 import AddTagOption from './AddTagOption'
-import { addToast, dismissToast, ToastType } from '@standardnotes/toast'
 import { NotesOptionsProps } from './NotesOptionsProps'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { AppPaneId } from '../Panes/AppPaneMetadata'
@@ -27,13 +26,10 @@ import { iconClass } from './ClassNames'
 import SuperNoteOptions from './SuperNoteOptions'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuItem from '../Menu/MenuItem'
-import ModalOverlay from '../Modal/ModalOverlay'
-import SuperExportModal from './SuperExportModal'
 import { useApplication } from '../ApplicationProvider'
 import { MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption'
 import MenuSection from '../Menu/MenuSection'
-import { downloadOrShareBlobBasedOnPlatform } from '@/Utils/DownloadOrShareBasedOnPlatform'
 import { shareBlobOnMobile } from '@/NativeMobileWeb/ShareBlobOnMobile'

 const iconSize = MenuItemIconSize
@@ -43,26 +39,13 @@ const iconClassSuccess = `text-success mr-2 ${iconSize}`

 const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
  const application = useApplication()
+  const notesController = application.notesController

  const [altKeyDown, setAltKeyDown] = useState(false)
  const { toggleAppPane } = useResponsiveAppPane()

-  const toggleOn = (condition: (note: SNNote) => boolean) => {
-    const notesMatchingAttribute = notes.filter(condition)
-    const notesNotMatchingAttribute = notes.filter((note) => !condition(note))
-    return notesMatchingAttribute.length > notesNotMatchingAttribute.length
-  }
-
-  const hidePreviews = toggleOn((note) => note.hidePreview)
-  const locked = toggleOn((note) => note.locked)
-  const protect = toggleOn((note) => note.protected)
-  const archived = notes.some((note) => note.archived)
-  const unarchived = notes.some((note) => !note.archived)
-  const trashed = notes.some((note) => note.trashed)
-  const notTrashed = notes.some((note) => !note.trashed)
-  const pinned = notes.some((note) => note.pinned)
-  const unpinned = notes.some((note) => !note.pinned)
-  const starred = notes.some((note) => note.starred)
+  const { trashed, notTrashed, pinned, unpinned, starred, archived, unarchived, locked, protect, hidePreviews } =
+    notesController.getNotesInfo(notes)

  const editorForNote = useMemo(
    () => (notes[0] ? application.componentManager.editorForNote(notes[0]) : undefined),
@@ -85,55 +68,6 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
    }
  }, [application])

-  const [showExportSuperModal, setShowExportSuperModal] = useState(false)
-  const closeSuperExportModal = useCallback(() => {
-    setShowExportSuperModal(false)
-  }, [])
-
-  const downloadSelectedItems = useCallback(async () => {
-    if (notes.length === 0) {
-      return
-    }
-    const toast = addToast({
-      type: ToastType.Progress,
-      message: `Exporting ${notes.length} ${pluralize(notes.length, 'note', 'notes')}...`,
-    })
-    try {
-      const result = await createNoteExport(application, notes)
-      if (!result) {
-        return
-      }
-      const { blob, fileName } = result
-      void downloadOrShareBlobBasedOnPlatform({
-        archiveService: application.archiveService,
-        platform: application.platform,
-        mobileDevice: application.mobileDevice,
-        blob: blob,
-        filename: fileName,
-        isNativeMobileWeb: application.isNativeMobileWeb(),
-      })
-      dismissToast(toast)
-    } catch (error) {
-      console.error(error)
-      addToast({
-        type: ToastType.Error,
-        message: 'Could not export notes',
-      })
-      dismissToast(toast)
-    }
-  }, [application, notes])
-
-  const exportSelectedItems = useCallback(() => {
-    const hasSuperNote = notes.some((note) => note.noteType === NoteType.Super)
-
-    if (hasSuperNote) {
-      setShowExportSuperModal(true)
-      return
-    }
-
-    downloadSelectedItems().catch(console.error)
-  }, [downloadSelectedItems, notes])
-
  const shareSelectedItems = useCallback(() => {
    createNoteExport(application, notes)
      .then((result) => {
@@ -158,37 +92,14 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
    closeMenu()
  }, [closeMenu, toggleAppPane])

-  const duplicateSelectedItems = useCallback(async () => {
-    await Promise.all(
-      notes.map((note) =>
-        application.mutator
-          .duplicateItem(note)
-          .then((duplicated) =>
-            addToast({
-              type: ToastType.Regular,
-              message: `Duplicated note "${duplicated.title}"`,
-              actions: [
-                {
-                  label: 'Open',
-                  handler: (toastId) => {
-                    application.itemListController.selectUuids([duplicated.uuid], true).catch(console.error)
-                    dismissToast(toastId)
-                  },
-                },
-              ],
-              autoClose: true,
-            }),
-          )
-          .catch(console.error),
-      ),
-    )
-    void application.sync.sync()
+  const duplicateSelectedNotes = useCallback(async () => {
+    await notesController.duplicateSelectedNotes()
    closeMenuAndToggleNotesList()
-  }, [application.mutator, application.itemListController, application.sync, closeMenuAndToggleNotesList, notes])
+  }, [closeMenuAndToggleNotesList, notesController])

  const openRevisionHistoryModal = useCallback(() => {
-    application.historyModalController.openModal(application.notesController.firstSelectedNote)
-  }, [application.historyModalController, application.notesController.firstSelectedNote])
+    application.historyModalController.openModal(notesController.firstSelectedNote)
+  }, [application.historyModalController, notesController.firstSelectedNote])

  const historyShortcut = useMemo(
    () => application.keyboardService.keyboardShortcutForCommand(OPEN_NOTE_HISTORY_COMMAND),
@@ -259,7 +170,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        <MenuSwitchButtonItem
          checked={locked}
          onChange={(locked) => {
-            application.notesController.setLockSelectedNotes(locked)
+            notesController.setLockSelectedNotes(locked)
          }}
          disabled={areSomeNotesInReadonlySharedVault}
        >
@@ -269,7 +180,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        <MenuSwitchButtonItem
          checked={!hidePreviews}
          onChange={(hidePreviews) => {
-            application.notesController.setHideSelectedNotePreviews(!hidePreviews)
+            notesController.setHideSelectedNotePreviews(!hidePreviews)
          }}
          disabled={areSomeNotesInReadonlySharedVault}
        >
@@ -279,7 +190,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        <MenuSwitchButtonItem
          checked={protect}
          onChange={(protect) => {
-            application.notesController.setProtectSelectedNotes(protect).catch(console.error)
+            notesController.setProtectSelectedNotes(protect).catch(console.error)
          }}
          disabled={areSomeNotesInReadonlySharedVault}
        >
@@ -318,7 +229,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        )}
        <MenuItem
          onClick={() => {
-            application.notesController.setStarSelectedNotes(!starred)
+            notesController.setStarSelectedNotes(!starred)
          }}
          disabled={areSomeNotesInReadonlySharedVault}
        >
@@ -330,7 +241,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        {unpinned && (
          <MenuItem
            onClick={() => {
-              application.notesController.setPinSelectedNotes(true)
+              notesController.setPinSelectedNotes(true)
            }}
            disabled={areSomeNotesInReadonlySharedVault}
          >
@@ -342,7 +253,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        {pinned && (
          <MenuItem
            onClick={() => {
-              application.notesController.setPinSelectedNotes(false)
+              notesController.setPinSelectedNotes(false)
            }}
            disabled={areSomeNotesInReadonlySharedVault}
          >
@@ -351,7 +262,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
            {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
          </MenuItem>
        )}
-        <MenuItem onClick={exportSelectedItems}>
+        <MenuItem onClick={notesController.exportSelectedNotes}>
          <Icon type="download" className={iconClass} />
          Export
        </MenuItem>
@@ -361,14 +272,14 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
            Share
          </MenuItem>
        )}
-        <MenuItem onClick={duplicateSelectedItems} disabled={areSomeNotesInReadonlySharedVault}>
+        <MenuItem onClick={duplicateSelectedNotes} disabled={areSomeNotesInReadonlySharedVault}>
          <Icon type="copy" className={iconClass} />
          Duplicate
        </MenuItem>
        {unarchived && (
          <MenuItem
            onClick={async () => {
-              await application.notesController.setArchiveSelectedNotes(true).catch(console.error)
+              await notesController.setArchiveSelectedNotes(true).catch(console.error)
              closeMenuAndToggleNotesList()
            }}
            disabled={areSomeNotesInReadonlySharedVault}
@@ -380,7 +291,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
        {archived && (
          <MenuItem
            onClick={async () => {
-              await application.notesController.setArchiveSelectedNotes(false).catch(console.error)
+              await notesController.setArchiveSelectedNotes(false).catch(console.error)
              closeMenuAndToggleNotesList()
            }}
            disabled={areSomeNotesInReadonlySharedVault}
@@ -394,7 +305,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
            <MenuItem
              disabled={areSomeNotesInReadonlySharedVault}
              onClick={async () => {
-                await application.notesController.deleteNotesPermanently()
+                await notesController.deleteNotesPermanently()
                closeMenuAndToggleNotesList()
              }}
            >
@@ -404,7 +315,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
          ) : (
            <MenuItem
              onClick={async () => {
-                await application.notesController.setTrashSelectedNotes(true)
+                await notesController.setTrashSelectedNotes(true)
                closeMenuAndToggleNotesList()
              }}
              disabled={areSomeNotesInReadonlySharedVault}
@@ -417,7 +328,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
          <>
            <MenuItem
              onClick={async () => {
-                await application.notesController.setTrashSelectedNotes(false)
+                await notesController.setTrashSelectedNotes(false)
                closeMenuAndToggleNotesList()
              }}
              disabled={areSomeNotesInReadonlySharedVault}
@@ -428,7 +339,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
            <MenuItem
              disabled={areSomeNotesInReadonlySharedVault}
              onClick={async () => {
-                await application.notesController.deleteNotesPermanently()
+                await notesController.deleteNotesPermanently()
                closeMenuAndToggleNotesList()
              }}
            >
@@ -437,7 +348,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
            </MenuItem>
            <MenuItem
              onClick={async () => {
-                await application.notesController.emptyTrash()
+                await notesController.emptyTrash()
                closeMenuAndToggleNotesList()
              }}
              disabled={areSomeNotesInReadonlySharedVault}
@@ -446,7 +357,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
                <Icon type="trash-sweep" className="mr-2 text-danger" />
                <div className="flex-row">
                  <div className="text-danger">Empty Trash</div>
-                  <div className="text-xs">{application.notesController.trashedNotesCount} notes in Trash</div>
+                  <div className="text-xs">{notesController.trashedNotesCount} notes in Trash</div>
                </div>
              </div>
            </MenuItem>
@@ -468,7 +379,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
            <MenuSection>
              <SpellcheckOptions
                editorForNote={editorForNote}
-                notesController={application.notesController}
+                notesController={notesController}
                note={notes[0]}
                disabled={areSomeNotesInReadonlySharedVault}
              />
@@ -480,10 +391,6 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
          <NoteSizeWarning note={notes[0]} />
        </>
      )}
-
-      <ModalOverlay isOpen={showExportSuperModal} close={closeSuperExportModal} className="md:max-w-[25vw]">
-        <SuperExportModal notes={notes} exportNotes={downloadSelectedItems} close={closeSuperExportModal} />
-      </ModalOverlay>
    </>
  )
 }
--- a/packages/web/src/javascripts/Components/NotesOptions/SuperExportModal.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/SuperExportModal.tsx
@@ -1,4 +1,4 @@
-import { PrefKey, PrefValue, SNNote } from '@standardnotes/snjs'
+import { PrefKey, PrefValue } from '@standardnotes/snjs'
 import { useApplication } from '../ApplicationProvider'
 import Modal from '../Modal/Modal'
 import usePreference from '@/Hooks/usePreference'
@@ -6,15 +6,13 @@ import { useEffect } from 'react'
 import Switch from '../Switch/Switch'
 import { noteHasEmbeddedFiles } from '@/Utils/NoteExportUtils'
 import Dropdown from '../Dropdown/Dropdown'
+import ModalOverlay from '../Modal/ModalOverlay'
+import { observer } from 'mobx-react-lite'

-type Props = {
-  notes: SNNote[]
-  exportNotes: () => void
-  close: () => void
-}
-
-const SuperExportModal = ({ notes, exportNotes, close }: Props) => {
+const ModalContent = observer(() => {
  const application = useApplication()
+  const notesController = application.notesController
+  const notes = notesController.selectedNotes

  const superNoteExportFormat = usePreference(PrefKey.SuperNoteExportFormat)
  const superNoteExportEmbedBehavior = usePreference(PrefKey.SuperNoteExportEmbedBehavior)
@@ -53,8 +51,8 @@ const SuperExportModal = ({ notes, exportNotes, close }: Props) => {
          label: 'Export',
          type: 'primary',
          onClick: () => {
-            close()
-            exportNotes()
+            void notesController.downloadSelectedNotes()
+            notesController.closeSuperExportModal()
          },
          mobileSlot: 'right',
        },
@@ -157,6 +155,21 @@ const SuperExportModal = ({ notes, exportNotes, close }: Props) => {
      )}
    </Modal>
  )
+})
+
+const SuperExportModal = () => {
+  const application = useApplication()
+  const notesController = application.notesController
+
+  return (
+    <ModalOverlay
+      isOpen={notesController.shouldShowSuperExportModal}
+      close={notesController.closeSuperExportModal}
+      className="md:max-w-[25vw]"
+    >
+      <ModalContent />
+    </ModalOverlay>
+  )
 }

-export default SuperExportModal
+export default observer(SuperExportModal)
--- a/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
@@ -5,30 +5,30 @@ import { iconClass } from './ClassNames'
 import MenuSection from '../Menu/MenuSection'
 import { SUPER_SHOW_MARKDOWN_PREVIEW, SUPER_TOGGLE_SEARCH } from '@standardnotes/ui-services'
 import { useMemo, useCallback } from 'react'
-import { useCommandService } from '../CommandProvider'
+import { useKeyboardService } from '../KeyboardServiceProvider'

 type Props = {
  closeMenu: () => void
 }

 const SuperNoteOptions = ({ closeMenu }: Props) => {
-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()

  const markdownShortcut = useMemo(
-    () => commandService.keyboardShortcutForCommand(SUPER_SHOW_MARKDOWN_PREVIEW),
-    [commandService],
+    () => keyboardService.keyboardShortcutForCommand(SUPER_SHOW_MARKDOWN_PREVIEW),
+    [keyboardService],
  )

-  const findShortcut = useMemo(() => commandService.keyboardShortcutForCommand(SUPER_TOGGLE_SEARCH), [commandService])
+  const findShortcut = useMemo(() => keyboardService.keyboardShortcutForCommand(SUPER_TOGGLE_SEARCH), [keyboardService])

  const enableSuperMarkdownPreview = useCallback(() => {
-    commandService.triggerCommand(SUPER_SHOW_MARKDOWN_PREVIEW)
-  }, [commandService])
+    keyboardService.triggerCommand(SUPER_SHOW_MARKDOWN_PREVIEW)
+  }, [keyboardService])

  const findInNote = useCallback(() => {
-    commandService.triggerCommand(SUPER_TOGGLE_SEARCH)
+    keyboardService.triggerCommand(SUPER_TOGGLE_SEARCH)
    closeMenu()
-  }, [closeMenu, commandService])
+  }, [closeMenu, keyboardService])

  return (
    <MenuSection>
--- a/packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
+++ b/packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
@@ -4,7 +4,7 @@ import Icon from '@/Components/Icon/Icon'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { classNames } from '@standardnotes/utils'
 import { keyboardStringForShortcut, PIN_NOTE_COMMAND } from '@standardnotes/ui-services'
-import { useCommandService } from '../CommandProvider'
+import { useKeyboardService } from '../KeyboardServiceProvider'
 import { VisuallyHidden } from '@ariakit/react'

 type Props = {
@@ -24,11 +24,11 @@ const PinNoteButton: FunctionComponent<Props> = ({ className = '', notesControll
    notesController.togglePinSelectedNotes()
  }, [onClickPreprocessing, notesController])

-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()

  const shortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(PIN_NOTE_COMMAND)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(PIN_NOTE_COMMAND)),
+    [keyboardService],
  )

  const label = pinned ? `Unpin note (${shortcut})` : `Pin note (${shortcut})`
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
@@ -2,7 +2,6 @@ import { FunctionComponent, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import PreferencesView from './PreferencesView'
 import { PreferencesViewWrapperProps } from './PreferencesViewWrapperProps'
-import { useCommandService } from '../CommandProvider'
 import { OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
 import ModalOverlay from '../Modal/ModalOverlay'
 import { usePaneSwipeGesture } from '../Panes/usePaneGesture'
@@ -10,16 +9,15 @@ import { performSafariAnimationFix } from '../Panes/PaneAnimator'
 import { IosModalAnimationEasing } from '../Modal/useModalAnimation'

 const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = ({ application }) => {
-  const commandService = useCommandService()
-
  useEffect(() => {
-    return commandService.addCommandHandler({
-      command: OPEN_PREFERENCES_COMMAND,
-      category: 'General',
-      description: 'Open preferences',
-      onKeyDown: () => application.preferencesController.openPreferences(),
-    })
-  }, [commandService, application])
+    return application.commands.addWithShortcut(
+      OPEN_PREFERENCES_COMMAND,
+      'General',
+      'Open preferences',
+      () => application.preferencesController.openPreferences(),
+      'tune',
+    )
+  }, [application.commands, application.preferencesController])

  const [setElement] = usePaneSwipeGesture('right', async (element) => {
    const animation = element.animate(
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
@@ -2,23 +2,23 @@ import { TOGGLE_LIST_PANE_KEYBOARD_COMMAND, TOGGLE_NAVIGATION_PANE_KEYBOARD_COMM
 import { useMemo } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
-import { useCommandService } from '../CommandProvider'
+import { useKeyboardService } from '../KeyboardServiceProvider'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'

 const PanelSettingsSection = () => {
  const { isListPaneCollapsed, isNavigationPaneCollapsed, toggleListPane, toggleNavigationPane } =
    useResponsiveAppPane()

-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()

  const navigationShortcut = useMemo(
-    () => commandService.keyboardShortcutForCommand(TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND),
-    [commandService],
+    () => keyboardService.keyboardShortcutForCommand(TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND),
+    [keyboardService],
  )

  const listShortcut = useMemo(
-    () => commandService.keyboardShortcutForCommand(TOGGLE_LIST_PANE_KEYBOARD_COMMAND),
-    [commandService],
+    () => keyboardService.keyboardShortcutForCommand(TOGGLE_LIST_PANE_KEYBOARD_COMMAND),
+    [keyboardService],
  )

  return (
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -7,7 +7,7 @@ import { isMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
-import { useCommandService } from '../CommandProvider'
+import { useKeyboardService } from '../KeyboardServiceProvider'
 import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 import { useApplication } from '../ApplicationProvider'
@@ -18,7 +18,7 @@ type Props = {

 const ThemesMenuButton: FunctionComponent<Props> = ({ uiFeature }) => {
  const application = useApplication()
-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()
  const premiumModal = usePremiumModal()

  const isThirdPartyTheme = useMemo(
@@ -59,9 +59,9 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ uiFeature }) => {

  const darkThemeShortcut = useMemo(() => {
    if (uiFeature.featureIdentifier === NativeFeatureIdentifier.TYPES.DarkTheme) {
-      return commandService.keyboardShortcutForCommand(TOGGLE_DARK_MODE_COMMAND)
+      return keyboardService.keyboardShortcutForCommand(TOGGLE_DARK_MODE_COMMAND)
    }
-  }, [commandService, uiFeature.featureIdentifier])
+  }, [keyboardService, uiFeature.featureIdentifier])

  if (shouldHideButton) {
    return null
--- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
+++ b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
@@ -20,6 +20,7 @@ const StyledTooltip = ({
  side,
  documentElement,
  closeOnClick = true,
+  portal = true,
  ...props
 }: {
  children: ReactNode
@@ -41,7 +42,6 @@ const StyledTooltip = ({
    hideTimeout: 0,
    skipTimeout: 0,
    open: forceOpen,
-    animated: true,
    type,
  })

@@ -156,9 +156,11 @@ const StyledTooltip = ({
            return
          }

-          Object.assign(popoverElement.style, styles)
+          for (const [key, value] of Object.entries(styles)) {
+            popoverElement.style.setProperty(key, value)
+          }

-          if (!props.portal) {
+          if (!portal) {
            const adjustedStyles = getAdjustedStylesForNonPortalPopover(
              popoverElement,
              styles,
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchPlugin.tsx
@@ -15,7 +15,7 @@ import { useLifecycleAnimation } from '../../../../Hooks/useLifecycleAnimation'
 import { classNames, debounce } from '@standardnotes/utils'
 import DecoratedInput from '../../../Input/DecoratedInput'
 import { searchInElement } from './searchInElement'
-import { useCommandService } from '../../../CommandProvider'
+import { useKeyboardService } from '../../../KeyboardServiceProvider'
 import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon, CloseIcon } from '@standardnotes/icons'
 import Button from '../../../Button/Button'
 import { canUseCSSHiglights, SearchHighlightRenderer, SearchHighlightRendererMethods } from './SearchHighlightRenderer'
@@ -272,18 +272,18 @@ export function SearchPlugin() {
    }
  }, [])

-  const commandService = useCommandService()
+  const keyboardService = useKeyboardService()
  const searchToggleShortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(SUPER_TOGGLE_SEARCH)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(SUPER_TOGGLE_SEARCH)),
+    [keyboardService],
  )
  const toggleReplaceShortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(SUPER_SEARCH_TOGGLE_REPLACE_MODE)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(SUPER_SEARCH_TOGGLE_REPLACE_MODE)),
+    [keyboardService],
  )
  const caseSensitivityShortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(SUPER_SEARCH_TOGGLE_CASE_SENSITIVE)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(SUPER_SEARCH_TOGGLE_CASE_SENSITIVE)),
+    [keyboardService],
  )

  if (!isMounted) {
@@ -447,7 +447,6 @@ export function SearchPlugin() {
                label="May lead to performance degradation, especially on large documents."
                className="!z-modal"
                showOnMobile
-                portal={false}
              >
                <button className="cursor-default">
                  <Icon type="info" size="medium" />
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -135,7 +135,6 @@ const ToolbarButton = forwardRef(
        showOnHover
        label={name}
        side="top"
-        portal={false}
        portalElement={isMobile ? parentElement : undefined}
        documentElement={parentElement}
      >
--- a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
@@ -27,7 +27,6 @@ import {
  ChangeContentCallbackPlugin,
  ChangeEditorFunction,
 } from './Plugins/ChangeContentCallback/ChangeContentCallback'
-import { useCommandService } from '@/Components/CommandProvider'
 import { SUPER_SHOW_MARKDOWN_PREVIEW, getPrimaryModifier } from '@standardnotes/ui-services'
 import { SuperNoteMarkdownPreview } from './SuperNoteMarkdownPreview'
 import GetMarkdownPlugin, { GetMarkdownPluginInterface } from './Plugins/GetMarkdownPlugin/GetMarkdownPlugin'
@@ -83,22 +82,23 @@ export const SuperEditor: FunctionComponent<Props> = ({
    )
  }, [application.features])

-  const commandService = useCommandService()
+  const keyboardService = application.keyboardService

  useEffect(() => {
-    return commandService.addCommandHandler({
-      command: SUPER_SHOW_MARKDOWN_PREVIEW,
-      category: 'Super notes',
-      description: 'Show markdown preview for current note',
-      onKeyDown: () => setShowMarkdownPreview(true),
-    })
-  }, [commandService])
+    return application.commands.addWithShortcut(
+      SUPER_SHOW_MARKDOWN_PREVIEW,
+      'Super notes',
+      'Show markdown preview for current note',
+      () => setShowMarkdownPreview((s) => !s),
+      'markdown',
+    )
+  }, [application.commands])

  useEffect(() => {
    const platform = application.platform
    const primaryModifier = getPrimaryModifier(application.platform)

-    return commandService.registerExternalKeyboardShortcutHelpItems([
+    return keyboardService.registerExternalKeyboardShortcutHelpItems([
      {
        key: 'b',
        modifiers: [primaryModifier],
@@ -128,7 +128,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
        platform: platform,
      },
    ])
-  }, [application.platform, commandService])
+  }, [application.platform, keyboardService])

  const closeMarkdownPreview = useCallback(() => {
    setShowMarkdownPreview(false)
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -41,7 +41,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEdit
  const inputRef = useRef<HTMLInputElement>(null)

  const level = 0
-  const isSelected = tagsState.selected === view
+  const isSelected = tagsState.selected?.uuid === view.uuid
  const isEditing = tagsState.editingTag === view

  useEffect(() => {
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
@@ -4,7 +4,7 @@ import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useMemo } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo } from 'react'
 import IconButton from '../Button/IconButton'
 import EditSmartViewModal from '../Preferences/Panes/General/SmartViews/EditSmartViewModal'
 import { EditSmartViewModalController } from '../Preferences/Panes/General/SmartViews/EditSmartViewModalController'
@@ -33,6 +33,11 @@ const SmartViewsSection: FunctionComponent<Props> = ({ application, navigationCo
    addSmartViewModalController.setIsAddingSmartView(true)
  }, [addSmartViewModalController, premiumModal, featuresController.hasSmartViews])

+  useEffect(
+    () => application.commands.add('create-smart-view', 'Create a new smart view', createNewSmartView, 'add'),
+    [application.commands, createNewSmartView],
+  )
+
  return (
    <section>
      <div className={'section-title-bar'}>
--- a/packages/web/src/javascripts/Components/Tags/TagsSection.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsSection.tsx
@@ -27,9 +27,7 @@ const TagsSection: FunctionComponent = () => {
        <div className={'section-title-bar'}>
          <div className="section-title-bar-header">
            <TagsSectionTitle features={application.featuresController} />
-            {!application.navigationController.isSearching && (
-              <TagsSectionAddButton tags={application.navigationController} features={application.featuresController} />
-            )}
+            {!application.navigationController.isSearching && <TagsSectionAddButton />}
          </div>
        </div>
        <TagsList type="all" />
--- a/packages/web/src/javascripts/Components/Tags/TagsSectionAddButton.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsSectionAddButton.tsx
@@ -1,22 +1,22 @@
 import IconButton from '@/Components/Button/IconButton'
-import { FeaturesController } from '@/Controllers/FeaturesController'
-import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { CREATE_NEW_TAG_COMMAND, keyboardStringForShortcut } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useMemo } from 'react'
-import { useCommandService } from '../CommandProvider'
+import { useCallback, useMemo } from 'react'
+import { useKeyboardService } from '../KeyboardServiceProvider'
+import { useApplication } from '../ApplicationProvider'

-type Props = {
-  tags: NavigationController
-  features: FeaturesController
-}
+function TagsSectionAddButton() {
+  const application = useApplication()
+  const keyboardService = useKeyboardService()

-const TagsSectionAddButton: FunctionComponent<Props> = ({ tags }) => {
-  const commandService = useCommandService()
+  const addNewTag = useCallback(
+    () => application.navigationController.createNewTemplate(),
+    [application.navigationController],
+  )

  const shortcut = useMemo(
-    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(CREATE_NEW_TAG_COMMAND)),
-    [commandService],
+    () => keyboardStringForShortcut(keyboardService.keyboardShortcutForCommand(CREATE_NEW_TAG_COMMAND)),
+    [keyboardService],
  )

  return (
@@ -25,7 +25,7 @@ const TagsSectionAddButton: FunctionComponent<Props> = ({ tags }) => {
      icon="add"
      title={`Create a new tag (${shortcut})`}
      className="p-0 text-neutral"
-      onClick={() => tags.createNewTemplate()}
+      onClick={addNewTag}
    />
  )
 }
--- a/packages/web/src/javascripts/Controllers/FilesController.ts
+++ b/packages/web/src/javascripts/Controllers/FilesController.ts
@@ -41,6 +41,7 @@ import { AbstractViewController } from './Abstract/AbstractViewController'
 import { NotesController } from './NotesController/NotesController'
 import { downloadOrShareBlobBasedOnPlatform } from '@/Utils/DownloadOrShareBasedOnPlatform'
 import { truncateString } from '@/Components/SuperEditor/Utils'
+import { RecentActionsState } from '../Application/Recents'

 const UnprotectedFileActions = [FileItemActionType.ToggleFileProtection]
 const NonMutatingFileActions = [FileItemActionType.DownloadFile, FileItemActionType.PreviewFile]
@@ -105,6 +106,7 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
    private platform: Platform,
    private mobileDevice: MobileDeviceInterface | undefined,
    private _isNativeMobileWeb: IsNativeMobileWeb,
+    private recents: RecentActionsState,
    eventBus: InternalEventBusInterface,
  ) {
    super(eventBus)
@@ -278,6 +280,7 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
        break
      case FileItemActionType.PreviewFile:
        this.filePreviewModalController.activate(file, action.payload.otherFiles)
+        this.recents.add(file.uuid)
        break
    }

--- a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.spec.ts
+++ b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.spec.ts
@@ -46,6 +46,7 @@ describe('item list controller', () => {
      application.options,
      application.isNativeMobileWebUseCase,
      application.changeAndSaveItem,
+      application.recents,
      eventBus,
    )
  })
--- a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
+++ b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
@@ -61,6 +61,7 @@ import { Persistable } from '../Abstract/Persistable'
 import { PaneController } from '../PaneController/PaneController'
 import { requestCloseAllOpenModalsAndPopovers } from '@/Utils/CloseOpenModalsAndPopovers'
 import { PaneLayout } from '../PaneController/PaneLayout'
+import { RecentActionsState } from '../../Application/Recents'

 const MinNoteCellHeight = 51.0
 const DefaultListNumNotes = 20
@@ -129,6 +130,7 @@ export class ItemListController
    private options: FullyResolvedApplicationOptions,
    private _isNativeMobileWeb: IsNativeMobileWeb,
    private _changeAndSaveItem: ChangeAndSaveItem,
+    private recents: RecentActionsState,
    eventBus: InternalEventBusInterface,
  ) {
    super(eventBus)
@@ -1120,9 +1122,7 @@ export class ItemListController
  }

  replaceSelection = (item: ListableContentItem): void => {
-    this.deselectAll()
-    runInAction(() => this.setSelectedUuids(this.selectedUuids.add(item.uuid)))
-
+    runInAction(() => this.setSelectedUuids(new Set([item.uuid])))
    this.lastSelectedItem = item
  }

@@ -1150,6 +1150,7 @@ export class ItemListController
      } else if (item.content_type === ContentType.TYPES.File) {
        await this.openFile(item.uuid)
      }
+      this.recents.add(item.uuid)

      if (!this.paneController.isInMobileView || userTriggered) {
        void this.paneController.setPaneLayout(PaneLayout.Editing)
@@ -1165,21 +1166,13 @@ export class ItemListController
    this.isMultipleSelectionMode = true
  }

-  selectItem = async (
-    uuid: UuidString,
+  selectItemUsingInstance = async (
+    item: ListableContentItem,
    userTriggered?: boolean,
-  ): Promise<{
-    didSelect: boolean
-  }> => {
-    const item = this.itemManager.findItem<ListableContentItem>(uuid)
+  ): Promise<{ didSelect: boolean }> => {
+    const uuid = item.uuid

-    if (!item) {
-      return {
-        didSelect: false,
-      }
-    }
-
-    log(LoggingDomain.Selection, 'Select item', item.uuid)
+    log(LoggingDomain.Selection, 'Select item', uuid)

    const hasShift = this.keyboardService.activeModifiers.has(KeyboardModifier.Shift)
    const hasMoreThanOneSelected = this.selectedItemsCount > 1
@@ -1208,6 +1201,23 @@ export class ItemListController
    }
  }

+  selectItem = async (
+    uuid: UuidString,
+    userTriggered?: boolean,
+  ): Promise<{
+    didSelect: boolean
+  }> => {
+    const item = this.itemManager.findItem<ListableContentItem>(uuid)
+
+    if (!item) {
+      return {
+        didSelect: false,
+      }
+    }
+
+    return this.selectItemUsingInstance(item, userTriggered)
+  }
+
  selectItemWithScrollHandling = async (
    item: {
      uuid: ListableContentItem['uuid']
--- a/packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts
+++ b/packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts
@@ -1,7 +1,6 @@
 import {
  confirmDialog,
  CREATE_NEW_TAG_COMMAND,
-  KeyboardService,
  NavigationControllerPersistableValue,
  VaultDisplayService,
  VaultDisplayServiceEvent,
@@ -43,6 +42,8 @@ import { TagListSectionType } from '@/Components/Tags/TagListSection'
 import { PaneLayout } from '../PaneController/PaneLayout'
 import { TagsCountsState } from './TagsCountsState'
 import { PaneController } from '../PaneController/PaneController'
+import { RecentActionsState } from '../../Application/Recents'
+import { CommandService } from '../../Components/CommandPalette/CommandService'

 export class NavigationController
  extends AbstractViewController
@@ -73,7 +74,7 @@ export class NavigationController
  constructor(
    private featuresController: FeaturesController,
    private vaultDisplayService: VaultDisplayService,
-    private keyboardService: KeyboardService,
+    private commands: CommandService,
    private paneController: PaneController,
    private sync: SyncServiceInterface,
    private mutator: MutatorClientInterface,
@@ -81,6 +82,7 @@ export class NavigationController
    private preferences: PreferenceServiceInterface,
    private alerts: AlertService,
    private _changeAndSaveItem: ChangeAndSaveItem,
+    private recents: RecentActionsState,
    eventBus: InternalEventBusInterface,
  ) {
    super(eventBus)
@@ -197,14 +199,13 @@ export class NavigationController
    )

    this.disposers.push(
-      this.keyboardService.addCommandHandler({
-        command: CREATE_NEW_TAG_COMMAND,
-        category: 'General',
-        description: 'Create new tag',
-        onKeyDown: () => {
-          this.createNewTemplate()
-        },
-      }),
+      this.commands.addWithShortcut(
+        CREATE_NEW_TAG_COMMAND,
+        'General',
+        'Create new tag',
+        () => this.createNewTemplate(),
+        'add',
+      ),
    )

    this.setDisplayOptionsAndReloadTags = debounce(this.setDisplayOptionsAndReloadTags, 50)
@@ -511,6 +512,10 @@ export class NavigationController
        return
      }

+      if (tag) {
+        this.recents.add(tag.uuid)
+      }
+
      await this.eventBus.publishSync(
        {
          type: CrossControllerEvent.TagChanged,
--- a/packages/web/src/javascripts/Controllers/NoteHistory/HistoryModalController.ts
+++ b/packages/web/src/javascripts/Controllers/NoteHistory/HistoryModalController.ts
@@ -1,8 +1,9 @@
 import { InternalEventBusInterface, SNNote } from '@standardnotes/snjs'
-import { KeyboardService, OPEN_NOTE_HISTORY_COMMAND } from '@standardnotes/ui-services'
+import { OPEN_NOTE_HISTORY_COMMAND } from '@standardnotes/ui-services'
 import { action, makeObservable, observable } from 'mobx'
 import { AbstractViewController } from '../Abstract/AbstractViewController'
 import { NotesControllerInterface } from '../NotesController/NotesControllerInterface'
+import { CommandService } from '../../Components/CommandPalette/CommandService'

 export class HistoryModalController extends AbstractViewController {
  note?: SNNote = undefined
@@ -14,7 +15,7 @@ export class HistoryModalController extends AbstractViewController {

  constructor(
    notesController: NotesControllerInterface,
-    keyboardService: KeyboardService,
+    commandService: CommandService,
    eventBus: InternalEventBusInterface,
  ) {
    super(eventBus)
@@ -25,14 +26,9 @@ export class HistoryModalController extends AbstractViewController {
    })

    this.disposers.push(
-      keyboardService.addCommandHandler({
-        command: OPEN_NOTE_HISTORY_COMMAND,
-        category: 'Current note',
-        description: 'Open note history',
-        onKeyDown: () => {
-          this.openModal(notesController.firstSelectedNote)
-          return true
-        },
+      commandService.addWithShortcut(OPEN_NOTE_HISTORY_COMMAND, 'Current note', 'Open note history', () => {
+        this.openModal(notesController.firstSelectedNote)
+        return true
      }),
    )
  }
--- a/packages/web/src/javascripts/Controllers/NotesController/NotesController.ts
+++ b/packages/web/src/javascripts/Controllers/NotesController/NotesController.ts
@@ -3,7 +3,6 @@ import {
  confirmDialog,
  GetItemTags,
  IsGlobalSpellcheckEnabled,
-  KeyboardService,
  PIN_NOTE_COMMAND,
  STAR_NOTE_COMMAND,
 } from '@standardnotes/ui-services'
@@ -16,29 +15,25 @@ import {
  PrefKey,
  ApplicationEvent,
  EditorLineWidth,
-  InternalEventBusInterface,
  MutationType,
  PrefDefaults,
-  PreferenceServiceInterface,
  InternalEventHandlerInterface,
  InternalEventInterface,
-  ItemManagerInterface,
-  MutatorClientInterface,
-  SyncServiceInterface,
-  AlertService,
-  ProtectionsClientInterface,
  LocalPrefKey,
  NoteContent,
  noteTypeForEditorIdentifier,
  ContentReference,
+  pluralize,
+  NoteType,
 } from '@standardnotes/snjs'
-import { makeObservable, observable, action, computed, runInAction } from 'mobx'
+import { makeObservable, observable, action, computed, runInAction, reaction } from 'mobx'
 import { AbstractViewController } from '../Abstract/AbstractViewController'
-import { NavigationController } from '../Navigation/NavigationController'
 import { NotesControllerInterface } from './NotesControllerInterface'
-import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupController'
 import { CrossControllerEvent } from '../CrossControllerEvent'
-import { ItemListController } from '../ItemList/ItemListController'
+import { addToast, dismissToast, ToastType } from '@standardnotes/toast'
+import { createNoteExport } from '../../Utils/NoteExportUtils'
+import { WebApplication } from '../../Application/WebApplication'
+import { downloadOrShareBlobBasedOnPlatform } from '../../Utils/DownloadOrShareBasedOnPlatform'

 export class NotesController
  extends AbstractViewController
@@ -50,27 +45,21 @@ export class NotesController
  contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 }
  contextMenuMaxHeight: number | 'auto' = 'auto'
  showProtectedWarning = false
+  shouldShowSuperExportModal = false
+
+  commandRegisterDisposers: (() => void)[] = []

  constructor(
-    private itemListController: ItemListController,
-    private navigationController: NavigationController,
-    private itemControllerGroup: ItemGroupController,
-    private keyboardService: KeyboardService,
-    private preferences: PreferenceServiceInterface,
-    private items: ItemManagerInterface,
-    private mutator: MutatorClientInterface,
-    private sync: SyncServiceInterface,
-    private protections: ProtectionsClientInterface,
-    private alerts: AlertService,
+    private application: WebApplication,
    private _isGlobalSpellcheckEnabled: IsGlobalSpellcheckEnabled,
    private _getItemTags: GetItemTags,
-    eventBus: InternalEventBusInterface,
  ) {
-    super(eventBus)
+    super(application.events)

    makeObservable(this, {
      contextMenuOpen: observable,
      showProtectedWarning: observable,
+      shouldShowSuperExportModal: observable,

      selectedNotes: computed,
      firstSelectedNote: computed,
@@ -81,38 +70,121 @@ export class NotesController
      setContextMenuClickLocation: action,
      setShowProtectedWarning: action,
      unselectNotes: action,
+      showSuperExportModal: action,
+      closeSuperExportModal: action,
    })

-    this.shouldLinkToParentFolders = preferences.getValue(
+    this.shouldLinkToParentFolders = application.preferences.getValue(
      PrefKey.NoteAddToParentFolders,
      PrefDefaults[PrefKey.NoteAddToParentFolders],
    )

-    eventBus.addEventHandler(this, ApplicationEvent.PreferencesChanged)
-    eventBus.addEventHandler(this, CrossControllerEvent.UnselectAllNotes)
+    application.events.addEventHandler(this, ApplicationEvent.PreferencesChanged)
+    application.events.addEventHandler(this, CrossControllerEvent.UnselectAllNotes)

    this.disposers.push(
-      this.keyboardService.addCommandHandler({
+      reaction(
+        () => this.selectedNotesCount,
+        (notes_count) => {
+          console.log('hello')
+          this.disposeCommandRegisters()
+
+          const descriptionSuffix = `${pluralize(notes_count, 'current', 'selected')} ${pluralize(
+            notes_count,
+            'note',
+            'note(s)',
+          )}`
+
+          this.commandRegisterDisposers.push(
+            application.commands.add(
+              'pin-current',
+              `Pin ${descriptionSuffix}`,
+              () => this.setPinSelectedNotes(true),
+              'unpin',
+            ),
+            application.commands.add(
+              'unpin-current',
+              `Unpin ${descriptionSuffix}`,
+              () => this.setPinSelectedNotes(false),
+              'pin',
+            ),
+            application.commands.add(
+              'star-current',
+              `Star ${descriptionSuffix}`,
+              () => this.setStarSelectedNotes(true),
+              'star',
+            ),
+            application.commands.add(
+              'unstar-current',
+              `Unstar ${descriptionSuffix}`,
+              () => this.setStarSelectedNotes(false),
+              'star',
+            ),
+            application.commands.add(
+              'archive-current',
+              `Archive ${descriptionSuffix}`,
+              () => this.setArchiveSelectedNotes(true),
+              'archive',
+            ),
+            application.commands.add(
+              'unarchive-current',
+              `Unarchive ${descriptionSuffix}`,
+              () => this.setArchiveSelectedNotes(false),
+              'unarchive',
+            ),
+            application.commands.add(
+              'restore-current',
+              `Restore ${descriptionSuffix}`,
+              () => this.setTrashSelectedNotes(false),
+              'restore',
+            ),
+            application.commands.add(
+              'trash-current',
+              `Trash ${descriptionSuffix}`,
+              () => this.setTrashSelectedNotes(true),
+              'trash',
+            ),
+            application.commands.add(
+              'delete-current',
+              `Delete ${descriptionSuffix} permanently`,
+              () => this.deleteNotesPermanently(),
+              'trash',
+            ),
+            application.commands.add(
+              'export-current',
+              `Export ${descriptionSuffix}`,
+              this.exportSelectedNotes,
+              'download',
+            ),
+            application.commands.add(
+              'duplicate-current',
+              `Duplicate ${descriptionSuffix}`,
+              this.duplicateSelectedNotes,
+              'copy',
+            ),
+          )
+        },
+      ),
+    )
+
+    this.disposers.push(
+      application.keyboardService.addCommandHandler({
        command: PIN_NOTE_COMMAND,
        category: 'Current note',
-        description: 'Pin current note',
-        onKeyDown: () => {
-          this.togglePinSelectedNotes()
-        },
+        description: 'Pin/unpin selected note(s)',
+        onKeyDown: this.togglePinSelectedNotes,
      }),
-      this.keyboardService.addCommandHandler({
+      application.keyboardService.addCommandHandler({
        command: STAR_NOTE_COMMAND,
        category: 'Current note',
-        description: 'Star current note',
-        onKeyDown: () => {
-          this.toggleStarSelectedNotes()
-        },
+        description: 'Star/unstar selected note(s)',
+        onKeyDown: this.toggleStarSelectedNotes,
      }),
    )

    this.disposers.push(
-      this.itemControllerGroup.addActiveControllerChangeObserver(() => {
-        const controllers = this.itemControllerGroup.itemControllers
+      application.itemControllerGroup.addActiveControllerChangeObserver(() => {
+        const controllers = application.itemControllerGroup.itemControllers

        const activeNoteUuids = controllers.map((controller) => controller.item.uuid)

@@ -120,7 +192,7 @@ export class NotesController

        for (const selectedId of selectedUuids) {
          if (!activeNoteUuids.includes(selectedId)) {
-            this.itemListController.deselectItem({ uuid: selectedId })
+            application.itemListController.deselectItem({ uuid: selectedId })
          }
        }
      }),
@@ -129,7 +201,7 @@ export class NotesController

  async handleEvent(event: InternalEventInterface): Promise<void> {
    if (event.type === ApplicationEvent.PreferencesChanged) {
-      this.shouldLinkToParentFolders = this.preferences.getValue(
+      this.shouldLinkToParentFolders = this.application.preferences.getValue(
        PrefKey.NoteAddToParentFolders,
        PrefDefaults[PrefKey.NoteAddToParentFolders],
      )
@@ -138,17 +210,23 @@ export class NotesController
    }
  }

+  private disposeCommandRegisters() {
+    if (this.commandRegisterDisposers.length > 0) {
+      for (const dispose of this.commandRegisterDisposers) {
+        dispose()
+      }
+    }
+  }
+
  override deinit() {
    super.deinit()
    ;(this.lastSelectedNote as unknown) = undefined
-    ;(this.itemListController as unknown) = undefined
-    ;(this.navigationController as unknown) = undefined

    destroyAllObjectProperties(this)
  }

  public get selectedNotes(): SNNote[] {
-    return this.itemListController.getFilteredSelectedItems<SNNote>(ContentType.TYPES.Note)
+    return this.application.itemListController.getFilteredSelectedItems<SNNote>(ContentType.TYPES.Note)
  }

  get firstSelectedNote(): SNNote | undefined {
@@ -164,7 +242,7 @@ export class NotesController
  }

  get trashedNotesCount(): number {
-    return this.items.trashedItems.length
+    return this.application.items.trashedItems.length
  }

  setContextMenuOpen = (open: boolean) => {
@@ -176,8 +254,8 @@ export class NotesController
  }

  async changeSelectedNotes(mutate: (mutator: NoteMutator) => void): Promise<void> {
-    await this.mutator.changeItems(this.getSelectedNotesList(), mutate, MutationType.NoUpdateUserTimestamps)
-    this.sync.sync().catch(console.error)
+    await this.application.mutator.changeItems(this.getSelectedNotesList(), mutate, MutationType.NoUpdateUserTimestamps)
+    this.application.sync.sync().catch(console.error)
  }

  setHideSelectedNotePreviews(hide: boolean): void {
@@ -217,7 +295,7 @@ export class NotesController
  async deleteNotes(permanently: boolean): Promise<boolean> {
    if (this.getSelectedNotesList().some((note) => note.locked)) {
      const text = StringUtils.deleteLockedNotesAttempt(this.selectedNotesCount)
-      this.alerts.alert(text).catch(console.error)
+      this.application.alerts.alert(text).catch(console.error)
      return false
    }

@@ -236,10 +314,10 @@ export class NotesController
        confirmButtonStyle: 'danger',
      })
    ) {
-      this.itemListController.selectNextItem()
+      this.application.itemListController.selectNextItem()
      if (permanently) {
-        await this.mutator.deleteItems(this.getSelectedNotesList())
-        void this.sync.sync()
+        await this.application.mutator.deleteItems(this.getSelectedNotesList())
+        void this.application.sync.sync()
      } else {
        await this.changeSelectedNotes((mutator) => {
          mutator.trashed = true
@@ -251,7 +329,7 @@ export class NotesController
    return false
  }

-  togglePinSelectedNotes(): void {
+  togglePinSelectedNotes = () => {
    const notes = this.selectedNotes
    const pinned = notes.some((note) => note.pinned)

@@ -262,7 +340,7 @@ export class NotesController
    }
  }

-  toggleStarSelectedNotes(): void {
+  toggleStarSelectedNotes = () => {
    const notes = this.selectedNotes
    const starred = notes.some((note) => note.starred)

@@ -287,7 +365,9 @@ export class NotesController

  async setArchiveSelectedNotes(archived: boolean): Promise<void> {
    if (this.getSelectedNotesList().some((note) => note.locked)) {
-      this.alerts.alert(StringUtils.archiveLockedNotesAttempt(archived, this.selectedNotesCount)).catch(console.error)
+      this.application.alerts
+        .alert(StringUtils.archiveLockedNotesAttempt(archived, this.selectedNotesCount))
+        .catch(console.error)
      return
    }

@@ -296,7 +376,7 @@ export class NotesController
    })

    runInAction(() => {
-      this.itemListController.deselectAll()
+      this.application.itemListController.deselectAll()
      this.contextMenuOpen = false
    })
  }
@@ -315,18 +395,18 @@ export class NotesController
  async setProtectSelectedNotes(protect: boolean): Promise<void> {
    const selectedNotes = this.getSelectedNotesList()
    if (protect) {
-      await this.protections.protectNotes(selectedNotes)
+      await this.application.protections.protectNotes(selectedNotes)
      this.setShowProtectedWarning(true)
    } else {
-      await this.protections.unprotectNotes(selectedNotes)
+      await this.application.protections.unprotectNotes(selectedNotes)
      this.setShowProtectedWarning(false)
    }

-    void this.sync.sync()
+    void this.application.sync.sync()
  }

  unselectNotes(): void {
-    this.itemListController.deselectAll()
+    this.application.itemListController.deselectAll()
  }

  getSpellcheckStateForNote(note: SNNote) {
@@ -334,52 +414,55 @@ export class NotesController
  }

  async toggleGlobalSpellcheckForNote(note: SNNote) {
-    await this.mutator.changeItem<NoteMutator>(
+    await this.application.mutator.changeItem<NoteMutator>(
      note,
      (mutator) => {
        mutator.toggleSpellcheck()
      },
      MutationType.NoUpdateUserTimestamps,
    )
-    this.sync.sync().catch(console.error)
+    this.application.sync.sync().catch(console.error)
  }

  getEditorWidthForNote(note: SNNote) {
    return (
      note.editorWidth ??
-      this.preferences.getLocalValue(LocalPrefKey.EditorLineWidth, PrefDefaults[LocalPrefKey.EditorLineWidth])
+      this.application.preferences.getLocalValue(
+        LocalPrefKey.EditorLineWidth,
+        PrefDefaults[LocalPrefKey.EditorLineWidth],
+      )
    )
  }

  async setNoteEditorWidth(note: SNNote, editorWidth: EditorLineWidth) {
-    await this.mutator.changeItem<NoteMutator>(
+    await this.application.mutator.changeItem<NoteMutator>(
      note,
      (mutator) => {
        mutator.editorWidth = editorWidth
      },
      MutationType.NoUpdateUserTimestamps,
    )
-    this.sync.sync().catch(console.error)
+    this.application.sync.sync().catch(console.error)
  }

  async addTagToSelectedNotes(tag: SNTag): Promise<void> {
    const selectedNotes = this.getSelectedNotesList()
    await Promise.all(
      selectedNotes.map(async (note) => {
-        await this.mutator.addTagToNote(note, tag, this.shouldLinkToParentFolders)
+        await this.application.mutator.addTagToNote(note, tag, this.shouldLinkToParentFolders)
      }),
    )
-    this.sync.sync().catch(console.error)
+    this.application.sync.sync().catch(console.error)
  }

  async removeTagFromSelectedNotes(tag: SNTag): Promise<void> {
    const selectedNotes = this.getSelectedNotesList()
-    await this.mutator.changeItem(tag, (mutator) => {
+    await this.application.mutator.changeItem(tag, (mutator) => {
      for (const note of selectedNotes) {
        mutator.removeItemAsRelationship(note)
      }
    })
-    this.sync.sync().catch(console.error)
+    this.application.sync.sync().catch(console.error)
  }

  isTagInSelectedNotes(tag: SNTag): boolean {
@@ -403,8 +486,8 @@ export class NotesController
        confirmButtonStyle: 'danger',
      })
    ) {
-      await this.mutator.emptyTrash()
-      this.sync.sync().catch(console.error)
+      await this.application.mutator.emptyTrash()
+      this.application.sync.sync().catch(console.error)
    }
  }

@@ -419,19 +502,174 @@ export class NotesController
    references: ContentReference[] = [],
  ): Promise<SNNote> {
    const noteType = noteTypeForEditorIdentifier(editorIdentifier)
-    const selectedTag = this.navigationController.selected
-    const templateNote = this.items.createTemplateItem<NoteContent, SNNote>(ContentType.TYPES.Note, {
+    const selectedTag = this.application.navigationController.selected
+    const templateNote = this.application.items.createTemplateItem<NoteContent, SNNote>(ContentType.TYPES.Note, {
      title,
      text,
      references,
      noteType,
      editorIdentifier,
    })
-    const note = await this.mutator.insertItem<SNNote>(templateNote)
+    const note = await this.application.mutator.insertItem<SNNote>(templateNote)
    if (selectedTag instanceof SNTag) {
-      const shouldAddTagHierarchy = this.preferences.getValue(PrefKey.NoteAddToParentFolders, true)
-      await this.mutator.addTagToNote(templateNote, selectedTag, shouldAddTagHierarchy)
+      const shouldAddTagHierarchy = this.application.preferences.getValue(PrefKey.NoteAddToParentFolders, true)
+      await this.application.mutator.addTagToNote(templateNote, selectedTag, shouldAddTagHierarchy)
    }
    return note
  }
+
+  showSuperExportModal = () => {
+    this.shouldShowSuperExportModal = true
+  }
+  closeSuperExportModal = () => {
+    this.shouldShowSuperExportModal = false
+  }
+
+  // gets attribute info about the given notes in a single loop
+  getNotesInfo = (notes: SNNote[]) => {
+    let pinned = false,
+      unpinned = false,
+      starred = false,
+      unstarred = false,
+      trashed = false,
+      notTrashed = false,
+      archived = false,
+      unarchived = false,
+      hiddenPreviews = 0,
+      unhiddenPreviews = 0,
+      locked = 0,
+      unlocked = 0,
+      protecteds = 0,
+      unprotected = 0
+
+    for (let i = 0; i < notes.length; i++) {
+      const note = notes[i]
+      if (!note) {
+        continue
+      }
+      if (note.pinned) {
+        pinned = true
+      } else {
+        unpinned = true
+      }
+      if (note.starred) {
+        starred = true
+      } else {
+        unstarred = true
+      }
+      if (note.trashed) {
+        trashed = true
+      } else {
+        notTrashed = true
+      }
+      if (note.archived) {
+        archived = true
+      } else {
+        unarchived = true
+      }
+      if (note.hidePreview) {
+        hiddenPreviews++
+      } else {
+        unhiddenPreviews++
+      }
+      if (note.locked) {
+        locked++
+      } else {
+        unlocked++
+      }
+      if (note.protected) {
+        protecteds++
+      } else {
+        unprotected++
+      }
+    }
+
+    return {
+      pinned,
+      unpinned,
+      starred,
+      unstarred,
+      trashed,
+      notTrashed,
+      archived,
+      unarchived,
+      hidePreviews: hiddenPreviews > unhiddenPreviews,
+      locked: locked > unlocked,
+      protect: protecteds > unprotected,
+    }
+  }
+
+  downloadSelectedNotes = async () => {
+    const notes = this.selectedNotes
+    if (notes.length === 0) {
+      return
+    }
+    const toast = addToast({
+      type: ToastType.Progress,
+      message: `Exporting ${notes.length} ${pluralize(notes.length, 'note', 'notes')}...`,
+    })
+    try {
+      const result = await createNoteExport(this.application, notes)
+      if (!result) {
+        return
+      }
+      const { blob, fileName } = result
+      void downloadOrShareBlobBasedOnPlatform({
+        archiveService: this.application.archiveService,
+        platform: this.application.platform,
+        mobileDevice: this.application.mobileDevice,
+        blob: blob,
+        filename: fileName,
+        isNativeMobileWeb: this.application.isNativeMobileWeb(),
+      })
+      dismissToast(toast)
+    } catch (error) {
+      console.error(error)
+      addToast({
+        type: ToastType.Error,
+        message: 'Could not export notes',
+      })
+      dismissToast(toast)
+    }
+  }
+
+  exportSelectedNotes = () => {
+    const notes = this.selectedNotes
+    const hasSuperNote = notes.some((note) => note.noteType === NoteType.Super)
+
+    if (hasSuperNote) {
+      this.showSuperExportModal()
+      return
+    }
+
+    this.downloadSelectedNotes().catch(console.error)
+  }
+
+  duplicateSelectedNotes = async () => {
+    const notes = this.selectedNotes
+    await Promise.all(
+      notes.map((note) =>
+        this.application.mutator
+          .duplicateItem(note)
+          .then((duplicated) =>
+            addToast({
+              type: ToastType.Regular,
+              message: `Duplicated note "${duplicated.title}"`,
+              actions: [
+                {
+                  label: 'Open',
+                  handler: (toastId) => {
+                    this.application.itemListController.selectUuids([duplicated.uuid], true).catch(console.error)
+                    dismissToast(toastId)
+                  },
+                },
+              ],
+              autoClose: true,
+            }),
+          )
+          .catch(console.error),
+      ),
+    )
+    void this.application.sync.sync()
+  }
 }
--- a/packages/web/src/javascripts/Controllers/PaneController/PaneController.ts
+++ b/packages/web/src/javascripts/Controllers/PaneController/PaneController.ts
@@ -28,6 +28,7 @@ import { AbstractViewController } from '../Abstract/AbstractViewController'
 import { log, LoggingDomain } from '@/Logging'
 import { PaneLayout } from './PaneLayout'
 import { IsTabletOrMobileScreen } from '@/Application/UseCase/IsTabletOrMobileScreen'
+import { CommandService } from '../../Components/CommandPalette/CommandService'

 const MinimumNavPanelWidth = PrefDefaults[PrefKey.TagsPanelWidth]
 const MinimumNotesPanelWidth = PrefDefaults[PrefKey.NotesPanelWidth]
@@ -56,7 +57,8 @@ export class PaneController extends AbstractViewController implements InternalEv

  constructor(
    private preferences: PreferenceServiceInterface,
-    private keyboardService: KeyboardService,
+    keyboardService: KeyboardService,
+    commands: CommandService,
    private _isTabletOrMobileScreen: IsTabletOrMobileScreen,
    private _panesForLayout: PanesForLayout,
    eventBus: InternalEventBusInterface,
@@ -104,33 +106,17 @@ export class PaneController extends AbstractViewController implements InternalEv
    eventBus.addEventHandler(this, ApplicationEvent.LocalPreferencesChanged)

    this.disposers.push(
-      keyboardService.addCommandHandler({
-        command: TOGGLE_FOCUS_MODE_COMMAND,
-        category: 'General',
-        description: 'Toggle focus mode',
-        onKeyDown: (event) => {
-          event.preventDefault()
-          this.setFocusModeEnabled(!this.focusModeEnabled)
-          return true
-        },
+      commands.addWithShortcut(TOGGLE_FOCUS_MODE_COMMAND, 'General', 'Toggle focus mode', (event) => {
+        event?.preventDefault()
+        this.toggleFocusMode()
      }),
-      keyboardService.addCommandHandler({
-        command: TOGGLE_LIST_PANE_KEYBOARD_COMMAND,
-        category: 'General',
-        description: 'Toggle notes panel',
-        onKeyDown: (event) => {
-          event.preventDefault()
-          this.toggleListPane()
-        },
+      commands.addWithShortcut(TOGGLE_LIST_PANE_KEYBOARD_COMMAND, 'General', 'Toggle notes panel', (event) => {
+        event?.preventDefault()
+        this.toggleListPane()
      }),
-      keyboardService.addCommandHandler({
-        command: TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND,
-        category: 'General',
-        description: 'Toggle tags panel',
-        onKeyDown: (event) => {
-          event.preventDefault()
-          this.toggleNavigationPane()
-        },
+      commands.addWithShortcut(TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND, 'General', 'Toggle tags panel', (event) => {
+        event?.preventDefault()
+        this.toggleNavigationPane()
      }),
    )
  }
@@ -332,4 +318,8 @@ export class PaneController extends AbstractViewController implements InternalEv
      }, FOCUS_MODE_ANIMATION_DURATION)
    }
  }
+
+  toggleFocusMode = () => {
+    this.setFocusModeEnabled(!this.focusModeEnabled)
+  }
 }
--- a/packages/web/src/javascripts/Hooks/mergeRegister.ts
+++ b/packages/web/src/javascripts/Hooks/mergeRegister.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+type Func = () => void
+
+/**
+ * Returns a function that will execute all functions passed when called. It is generally used
+ * to register multiple lexical listeners and then tear them down with a single function call, such
+ * as React's useEffect hook.
+ * @example
+ * ```ts
+ * useEffect(() => {
+ *   return mergeRegister(
+ *     editor.registerCommand(...registerCommand1 logic),
+ *     editor.registerCommand(...registerCommand2 logic),
+ *     editor.registerCommand(...registerCommand3 logic)
+ *   )
+ * }, [editor])
+ * ```
+ * In this case, useEffect is returning the function returned by mergeRegister as a cleanup
+ * function to be executed after either the useEffect runs again (due to one of its dependencies
+ * updating) or the component it resides in unmounts.
+ * Note the functions don't necessarily need to be in an array as all arguments
+ * are considered to be the func argument and spread from there.
+ * The order of cleanup is the reverse of the argument order. Generally it is
+ * expected that the first "acquire" will be "released" last (LIFO order),
+ * because a later step may have some dependency on an earlier one.
+ * @param func - An array of cleanup functions meant to be executed by the returned function.
+ * @returns the function which executes all the passed cleanup functions.
+ */
+export default function mergeRegister(...func: Array<Func>): () => void {
+  return () => {
+    for (let i = func.length - 1; i >= 0; i--) {
+      func[i]()
+    }
+    // Clean up the references and make future calls a no-op
+    func.length = 0
+  }
+}
--- a/packages/web/src/javascripts/Utils/Items/Icons/getIconForItem.ts
+++ b/packages/web/src/javascripts/Utils/Items/Icons/getIconForItem.ts
@@ -1,4 +1,4 @@
-import { IconType, FileItem, SNNote, SNTag, DecryptedItemInterface } from '@standardnotes/snjs'
+import { IconType, FileItem, SNNote, SNTag, DecryptedItemInterface, SmartView } from '@standardnotes/snjs'
 import { getIconAndTintForNoteType } from './getIconAndTintForNoteType'
 import { getIconForFileType } from './getIconForFileType'
 import { WebApplicationInterface } from '@standardnotes/ui-services'
@@ -12,7 +12,7 @@ export function getIconForItem(item: DecryptedItemInterface, application: WebApp
  } else if (item instanceof FileItem) {
    const icon = getIconForFileType(item.mimeType)
    return [icon, 'text-info']
-  } else if (item instanceof SNTag) {
+  } else if (item instanceof SNTag || item instanceof SmartView) {
    return [item.iconString as IconType, 'text-info']
  }

--- a/yarn.lock
+++ b/yarn.lock
@@ -36,36 +36,36 @@ __metadata:
  languageName: node
  linkType: hard

-"@ariakit/core@npm:0.3.8":
-  version: 0.3.8
-  resolution: "@ariakit/core@npm:0.3.8"
-  checksum: e416596efe7783cba033efcf212119e228b3707006f294745d8beedb09388f4ceebe70d7e936362979d2ff98ec50a16ecc24c988b0825abd68d3a2367e96c1e0
+"@ariakit/core@npm:0.4.15":
+  version: 0.4.15
+  resolution: "@ariakit/core@npm:0.4.15"
+  checksum: add800c855c04f94a26e223ccb50f4c390182062848fb69717130ab25c33d755e4137ef5dd334194e4594c5852d64d52cd96b0d288ad9ade84bd24562cb97922
  languageName: node
  linkType: hard

-"@ariakit/react-core@npm:0.3.9":
-  version: 0.3.9
-  resolution: "@ariakit/react-core@npm:0.3.9"
+"@ariakit/react-core@npm:0.4.18":
+  version: 0.4.18
+  resolution: "@ariakit/react-core@npm:0.4.18"
  dependencies:
-    "@ariakit/core": 0.3.8
+    "@ariakit/core": 0.4.15
    "@floating-ui/dom": ^1.0.0
    use-sync-external-store: ^1.2.0
  peerDependencies:
-    react: ^17.0.0 || ^18.0.0
-    react-dom: ^17.0.0 || ^18.0.0
-  checksum: ef44543aecf10d69ea63cb4c68d340f88a8f17a4e0b0dc25a508665a7591126a42731522f97a984268c1d0927738ad2002d702f6bfd40f272090174d56a5ffb4
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 53a012f087c20ccd3d36e13af2fceb8928f280cf57c1c0e6e79088e81c53475f3ec8330be8ee465d3e270c089f80d3a98950bd103645190889f565f0184d2221
  languageName: node
  linkType: hard

-"@ariakit/react@npm:^0.3.9":
-  version: 0.3.9
-  resolution: "@ariakit/react@npm:0.3.9"
+"@ariakit/react@npm:^0.4.18":
+  version: 0.4.18
+  resolution: "@ariakit/react@npm:0.4.18"
  dependencies:
-    "@ariakit/react-core": 0.3.9
+    "@ariakit/react-core": 0.4.18
  peerDependencies:
-    react: ^17.0.0 || ^18.0.0
-    react-dom: ^17.0.0 || ^18.0.0
-  checksum: 901424a4e47d36c97a35cab016249b22bfe20519cc87ffa0420c14b3547751ca282cfaa9e770937af413c96776106f1f3d2c4b08434f15abca08abd2ab94d73e
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: e8bc2df82f74dab00a0d950fb3236c78838af4f6c814ce459145c37457716133c924ccb302f29a4106ccbf04b9b0e2156e9490e641925a0465d4a6813f652491
  languageName: node
  linkType: hard

@@ -8795,7 +8795,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@standardnotes/web@workspace:packages/web"
  dependencies:
-    "@ariakit/react": ^0.3.9
+    "@ariakit/react": ^0.4.18
    "@babel/core": "*"
    "@babel/plugin-proposal-class-properties": ^7.18.6
    "@babel/plugin-transform-react-jsx": ^7.19.0