feat: note tags button for mobile (#1641)

2022-09-26 02:58:55 +05:30
parent 4985787c5d
commit fe2ce9f1e8
8 changed files with 273 additions and 93 deletions
--- a/packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
+++ b/packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
@@ -8,21 +8,23 @@ import {
  useRef,
  useState,
 } from 'react'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'

 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
+  navigationController: NavigationController
  tag: SNTag
 }

-const NoteTag = ({ viewControllerManager, tag }: Props) => {
+const NoteTag = ({ noteTagsController, navigationController, tag }: Props) => {
  const { toggleAppPane } = useResponsiveAppPane()

-  const noteTags = viewControllerManager.noteTagsController
+  const noteTags = noteTagsController

  const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags

@@ -37,9 +39,9 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
  const longTitle = noteTags.getLongTitle(tag)

  const deleteTag = useCallback(() => {
-    viewControllerManager.noteTagsController.focusPreviousTag(tag)
-    viewControllerManager.noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
-  }, [viewControllerManager, tag])
+    noteTagsController.focusPreviousTag(tag)
+    noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
+  }, [noteTagsController, tag])

  const onDeleteTagClick: MouseEventHandler = useCallback(
    (event) => {
@@ -53,30 +55,30 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
    async (event) => {
      if (tagClicked && event.target !== deleteTagRef.current) {
        setTagClicked(false)
-        await viewControllerManager.navigationController.setSelectedTag(tag)
+        await navigationController.setSelectedTag(tag)
        toggleAppPane(AppPaneId.Items)
      } else {
        setTagClicked(true)
        tagRef.current?.focus()
      }
    },
-    [viewControllerManager, tagClicked, tag, toggleAppPane],
+    [tagClicked, navigationController, tag, toggleAppPane],
  )

  const onFocus = useCallback(() => {
-    viewControllerManager.noteTagsController.setFocusedTagUuid(tag.uuid)
+    noteTagsController.setFocusedTagUuid(tag.uuid)
    setShowDeleteButton(true)
-  }, [viewControllerManager, tag])
+  }, [noteTagsController, tag])

  const onBlur: FocusEventHandler = useCallback(
    (event) => {
      const relatedTarget = event.relatedTarget as Node
      if (relatedTarget !== deleteTagRef.current) {
-        viewControllerManager.noteTagsController.setFocusedTagUuid(undefined)
+        noteTagsController.setFocusedTagUuid(undefined)
        setShowDeleteButton(false)
      }
    },
-    [viewControllerManager],
+    [noteTagsController],
  )

  const getTabIndex = useCallback(() => {
@@ -91,33 +93,33 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {

  const onKeyDown: KeyboardEventHandler = useCallback(
    (event) => {
-      const tagIndex = viewControllerManager.noteTagsController.getTagIndex(tag, tags)
+      const tagIndex = noteTagsController.getTagIndex(tag, tags)
      switch (event.key) {
        case 'Backspace':
          deleteTag()
          break
        case 'ArrowLeft':
-          viewControllerManager.noteTagsController.focusPreviousTag(tag)
+          noteTagsController.focusPreviousTag(tag)
          break
        case 'ArrowRight':
          if (tagIndex === tags.length - 1) {
-            viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+            noteTagsController.setAutocompleteInputFocused(true)
          } else {
-            viewControllerManager.noteTagsController.focusNextTag(tag)
+            noteTagsController.focusNextTag(tag)
          }
          break
        default:
          return
      }
    },
-    [viewControllerManager, deleteTag, tag, tags],
+    [noteTagsController, deleteTag, tag, tags],
  )

  useEffect(() => {
    if (focusedTagUuid === tag.uuid) {
      tagRef.current?.focus()
    }
-  }, [viewControllerManager, focusedTagUuid, tag])
+  }, [noteTagsController, focusedTagUuid, tag])

  return (
    <button
--- a/packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx
+++ b/packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx
@@ -1,31 +1,33 @@
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import AutocompleteTagInput from '@/Components/TagAutocomplete/AutocompleteTagInput'
 import NoteTag from './NoteTag'
 import { useEffect } from 'react'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'

 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
+  navigationController: NavigationController
 }

-const NoteTagsContainer = ({ viewControllerManager }: Props) => {
-  const { tags, tagsContainerMaxWidth } = viewControllerManager.noteTagsController
+const NoteTagsContainer = ({ noteTagsController, navigationController }: Props) => {
+  const { tags } = noteTagsController

  useEffect(() => {
-    viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
-  }, [viewControllerManager])
+    noteTagsController.reloadTagsContainerMaxWidth()
+  }, [noteTagsController])

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

 const MINIMUM_STATUS_DURATION = 400
 const TEXTAREA_DEBOUNCE = 100
@@ -944,6 +945,10 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                  </div>
                )}
                <div className="flex items-center gap-3">
+                  <NoteTagsPanel
+                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                    noteTagsController={this.viewControllerManager.noteTagsController}
+                  />
                  <AttachedFilesButton
                    application={this.application}
                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
@@ -974,7 +979,10 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                </div>
              </div>
            </div>
-            <NoteTagsContainer viewControllerManager={this.viewControllerManager} />
+            <NoteTagsContainer
+              noteTagsController={this.viewControllerManager.noteTagsController}
+              navigationController={this.viewControllerManager.navigationController}
+            />
          </div>
        )}

--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -71,17 +71,15 @@ const PositionedPopoverContent = ({
        }}
        data-popover={id}
      >
-        <div className={className}>
-          <div className="md:hidden">
-            <div className="flex items-center justify-end px-3">
-              <button className="rounded-full border border-border p-1" onClick={togglePopover}>
-                <Icon type="close" className="h-4 w-4" />
-              </button>
-            </div>
-            <HorizontalSeparator classes="my-2" />
+        <div className="md:hidden">
+          <div className="flex items-center justify-end px-3 pt-2">
+            <button className="rounded-full border border-border p-1" onClick={togglePopover}>
+              <Icon type="close" className="h-4 w-4" />
+            </button>
          </div>
-          {children}
+          <HorizontalSeparator classes="my-2" />
        </div>
+        <div className={className}>{children}</div>
      </div>
    </Portal>
  )
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
@@ -1,36 +1,36 @@
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { observer } from 'mobx-react-lite'
 import { useRef, useEffect, useCallback, FocusEventHandler, KeyboardEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'

 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
 }

-const AutocompleteTagHint = ({ viewControllerManager, closeOnBlur }: Props) => {
-  const { autocompleteTagHintFocused } = viewControllerManager.noteTagsController
+const AutocompleteTagHint = ({ noteTagsController, closeOnBlur }: Props) => {
+  const { autocompleteTagHintFocused } = noteTagsController

  const hintRef = useRef<HTMLButtonElement>(null)

-  const { autocompleteSearchQuery, autocompleteTagResults } = viewControllerManager.noteTagsController
+  const { autocompleteSearchQuery, autocompleteTagResults } = noteTagsController

  const onTagHintClick = useCallback(async () => {
-    await viewControllerManager.noteTagsController.createAndAddNewTag()
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
-  }, [viewControllerManager])
+    await noteTagsController.createAndAddNewTag()
+    noteTagsController.setAutocompleteInputFocused(true)
+  }, [noteTagsController])

  const onFocus = useCallback(() => {
-    viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(true)
-  }, [viewControllerManager])
+    noteTagsController.setAutocompleteTagHintFocused(true)
+  }, [noteTagsController])

  const onBlur: FocusEventHandler = useCallback(
    (event) => {
      closeOnBlur(event)
-      viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(false)
+      noteTagsController.setAutocompleteTagHintFocused(false)
    },
-    [viewControllerManager, closeOnBlur],
+    [noteTagsController, closeOnBlur],
  )

  const onKeyDown: KeyboardEventHandler = useCallback(
@@ -38,20 +38,20 @@ const AutocompleteTagHint = ({ viewControllerManager, closeOnBlur }: Props) => {
      if (event.key === 'ArrowUp') {
        if (autocompleteTagResults.length > 0) {
          const lastTagResult = autocompleteTagResults[autocompleteTagResults.length - 1]
-          viewControllerManager.noteTagsController.setFocusedTagResultUuid(lastTagResult.uuid)
+          noteTagsController.setFocusedTagResultUuid(lastTagResult.uuid)
        } else {
-          viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+          noteTagsController.setAutocompleteInputFocused(true)
        }
      }
    },
-    [viewControllerManager, autocompleteTagResults],
+    [noteTagsController, autocompleteTagResults],
  )

  useEffect(() => {
    if (autocompleteTagHintFocused) {
      hintRef.current?.focus()
    }
-  }, [viewControllerManager, autocompleteTagHintFocused])
+  }, [noteTagsController, autocompleteTagHintFocused])

  return (
    <>
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
@@ -9,19 +9,19 @@ import {
 } from 'react'
 import { Disclosure, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import AutocompleteTagResult from './AutocompleteTagResult'
 import AutocompleteTagHint from './AutocompleteTagHint'
 import { observer } from 'mobx-react-lite'
 import { SNTag } from '@standardnotes/snjs'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'

 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
 }

-const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
+const AutocompleteTagInput = ({ noteTagsController }: Props) => {
  const {
    autocompleteInputFocused,
    autocompleteSearchQuery,
@@ -29,7 +29,7 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
    autocompleteTagResults,
    tags,
    tagsContainerMaxWidth,
-  } = viewControllerManager.noteTagsController
+  } = noteTagsController

  const [dropdownVisible, setDropdownVisible] = useState(false)
  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
@@ -39,7 +39,7 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {

  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
    setDropdownVisible(visible)
-    viewControllerManager.noteTagsController.clearAutocompleteSearch()
+    noteTagsController.clearAutocompleteSearch()
  })

  const showDropdown = () => {
@@ -55,17 +55,17 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
    const query = event.target.value

    if (query === '') {
-      viewControllerManager.noteTagsController.clearAutocompleteSearch()
+      noteTagsController.clearAutocompleteSearch()
    } else {
-      viewControllerManager.noteTagsController.setAutocompleteSearchQuery(query)
-      viewControllerManager.noteTagsController.searchActiveNoteAutocompleteTags()
+      noteTagsController.setAutocompleteSearchQuery(query)
+      noteTagsController.searchActiveNoteAutocompleteTags()
    }
  }

  const onFormSubmit: FormEventHandler = async (event) => {
    event.preventDefault()
    if (autocompleteSearchQuery !== '') {
-      await viewControllerManager.noteTagsController.createAndAddNewTag()
+      await noteTagsController.createAndAddNewTag()
    }
  }

@@ -74,15 +74,15 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
      case 'Backspace':
      case 'ArrowLeft':
        if (autocompleteSearchQuery === '' && tags.length > 0) {
-          viewControllerManager.noteTagsController.setFocusedTagUuid(tags[tags.length - 1].uuid)
+          noteTagsController.setFocusedTagUuid(tags[tags.length - 1].uuid)
        }
        break
      case 'ArrowDown':
        event.preventDefault()
        if (autocompleteTagResults.length > 0) {
-          viewControllerManager.noteTagsController.setFocusedTagResultUuid(autocompleteTagResults[0].uuid)
+          noteTagsController.setFocusedTagResultUuid(autocompleteTagResults[0].uuid)
        } else if (autocompleteTagHintVisible) {
-          viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(true)
+          noteTagsController.setAutocompleteTagHintFocused(true)
        }
        break
      default:
@@ -92,19 +92,19 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {

  const onFocus = () => {
    showDropdown()
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+    noteTagsController.setAutocompleteInputFocused(true)
  }

  const onBlur: FocusEventHandler = (event) => {
    closeOnBlur(event)
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(false)
+    noteTagsController.setAutocompleteInputFocused(false)
  }

  useEffect(() => {
    if (autocompleteInputFocused) {
      inputRef.current?.focus()
    }
-  }, [viewControllerManager, autocompleteInputFocused])
+  }, [autocompleteInputFocused])

  return (
    <div ref={containerRef}>
@@ -140,14 +140,14 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
                {autocompleteTagResults.map((tagResult: SNTag) => (
                  <AutocompleteTagResult
                    key={tagResult.uuid}
-                    viewControllerManager={viewControllerManager}
+                    noteTagsController={noteTagsController}
                    tagResult={tagResult}
                    closeOnBlur={closeOnBlur}
                  />
                ))}
              </div>
              {autocompleteTagHintVisible && (
-                <AutocompleteTagHint viewControllerManager={viewControllerManager} closeOnBlur={closeOnBlur} />
+                <AutocompleteTagHint noteTagsController={noteTagsController} closeOnBlur={closeOnBlur} />
              )}
            </DisclosurePanel>
          )}
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
@@ -1,48 +1,48 @@
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { splitQueryInString } from '@/Utils/StringUtils'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FocusEventHandler, KeyboardEventHandler, useEffect, useRef } from 'react'
 import Icon from '@/Components/Icon/Icon'
+import { NoteTagsController } from '@/Controllers/NoteTagsController'

 type Props = {
-  viewControllerManager: ViewControllerManager
+  noteTagsController: NoteTagsController
  tagResult: SNTag
  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
 }

-const AutocompleteTagResult = ({ viewControllerManager, tagResult, closeOnBlur }: Props) => {
+const AutocompleteTagResult = ({ noteTagsController, tagResult, closeOnBlur }: Props) => {
  const { autocompleteSearchQuery, autocompleteTagHintVisible, autocompleteTagResults, focusedTagResultUuid } =
-    viewControllerManager.noteTagsController
+    noteTagsController

  const tagResultRef = useRef<HTMLButtonElement>(null)

  const title = tagResult.title
-  const prefixTitle = viewControllerManager.noteTagsController.getPrefixTitle(tagResult)
+  const prefixTitle = noteTagsController.getPrefixTitle(tagResult)

  const onTagOptionClick = async (tag: SNTag) => {
-    await viewControllerManager.noteTagsController.addTagToActiveNote(tag)
-    viewControllerManager.noteTagsController.clearAutocompleteSearch()
-    viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+    await noteTagsController.addTagToActiveNote(tag)
+    noteTagsController.clearAutocompleteSearch()
+    noteTagsController.setAutocompleteInputFocused(true)
  }

  const onKeyDown: KeyboardEventHandler = (event) => {
-    const tagResultIndex = viewControllerManager.noteTagsController.getTagIndex(tagResult, autocompleteTagResults)
+    const tagResultIndex = noteTagsController.getTagIndex(tagResult, autocompleteTagResults)
    switch (event.key) {
      case 'ArrowUp':
        event.preventDefault()
        if (tagResultIndex === 0) {
-          viewControllerManager.noteTagsController.setAutocompleteInputFocused(true)
+          noteTagsController.setAutocompleteInputFocused(true)
        } else {
-          viewControllerManager.noteTagsController.focusPreviousTagResult(tagResult)
+          noteTagsController.focusPreviousTagResult(tagResult)
        }
        break
      case 'ArrowDown':
        event.preventDefault()
        if (tagResultIndex === autocompleteTagResults.length - 1 && autocompleteTagHintVisible) {
-          viewControllerManager.noteTagsController.setAutocompleteTagHintFocused(true)
+          noteTagsController.setAutocompleteTagHintFocused(true)
        } else {
-          viewControllerManager.noteTagsController.focusNextTagResult(tagResult)
+          noteTagsController.focusNextTagResult(tagResult)
        }
        break
      default:
@@ -51,20 +51,20 @@ const AutocompleteTagResult = ({ viewControllerManager, tagResult, closeOnBlur }
  }

  const onFocus = () => {
-    viewControllerManager.noteTagsController.setFocusedTagResultUuid(tagResult.uuid)
+    noteTagsController.setFocusedTagResultUuid(tagResult.uuid)
  }

  const onBlur: FocusEventHandler = (event) => {
    closeOnBlur(event)
-    viewControllerManager.noteTagsController.setFocusedTagResultUuid(undefined)
+    noteTagsController.setFocusedTagResultUuid(undefined)
  }

  useEffect(() => {
    if (focusedTagResultUuid === tagResult.uuid) {
      tagResultRef.current?.focus()
-      viewControllerManager.noteTagsController.setFocusedTagResultUuid(undefined)
+      noteTagsController.setFocusedTagResultUuid(undefined)
    }
-  }, [viewControllerManager, focusedTagResultUuid, tagResult])
+  }, [noteTagsController, focusedTagResultUuid, tagResult])

  return (
    <button