feat: item linking (#1779)

2022-10-11 23:54:00 +05:30
parent d22c164e5d
commit e3f28421ff
68 changed files with 2064 additions and 1277 deletions
--- a/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
@@ -209,7 +209,6 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                  itemListController={viewControllerManager.itemListController}
                  navigationController={viewControllerManager.navigationController}
                  noAccountWarningController={viewControllerManager.noAccountWarningController}
-                  noteTagsController={viewControllerManager.noteTagsController}
                  notesController={viewControllerManager.notesController}
                  selectionController={viewControllerManager.selectionController}
                  searchOptionsController={viewControllerManager.searchOptionsController}
@@ -238,7 +237,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                application={application}
                navigationController={viewControllerManager.navigationController}
                notesController={viewControllerManager.notesController}
-                noteTagsController={viewControllerManager.noteTagsController}
+                linkingController={viewControllerManager.linkingController}
                historyModalController={viewControllerManager.historyModalController}
              />
              <TagContextMenuWrapper
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -144,7 +144,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
          }
        }}
      >
-        <Icon type="attachment-file" />
+        <Icon type="folder" />
        {attachedFilesCount > 0 && <span className="ml-2 text-sm">{attachedFilesCount}</span>}
      </button>
      <Popover
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -11,6 +11,8 @@ import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverTabs } from './PopoverTabs'
 import { FilesController } from '@/Controllers/FilesController'
 import { StreamingFileReader } from '@standardnotes/filepicker'
+import ClearInputButton from '../ClearInputButton/ClearInputButton'
+import DecoratedInput from '../Input/DecoratedInput'

 type Props = {
  application: WebApplication
@@ -116,29 +118,24 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
      <div className="max-h-110 min-h-0 overflow-y-auto">
        {filteredList.length > 0 || searchQuery.length > 0 ? (
          <div className="sticky top-0 left-0 border-b border-solid border-border bg-default p-3">
-            <div className="relative">
-              <input
-                type="text"
-                className="w-full rounded border border-solid border-border bg-default py-1.5 px-3 text-sm text-text"
-                placeholder="Search files..."
-                value={searchQuery}
-                onInput={(e) => {
-                  setSearchQuery((e.target as HTMLInputElement).value)
-                }}
-                ref={searchInputRef}
-              />
-              {searchQuery.length > 0 && (
-                <button
-                  className="absolute right-2 top-1/2 flex -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0"
-                  onClick={() => {
-                    setSearchQuery('')
-                    searchInputRef.current?.focus()
-                  }}
-                >
-                  <Icon type="clear-circle-filled" className="text-neutral" />
-                </button>
-              )}
-            </div>
+            <DecoratedInput
+              type="text"
+              className={{ container: searchQuery.length < 1 ? 'py-1.5 px-0.5' : 'py-0' }}
+              placeholder="Search items..."
+              value={searchQuery}
+              onChange={setSearchQuery}
+              ref={searchInputRef}
+              right={[
+                searchQuery.length > 0 && (
+                  <ClearInputButton
+                    onClick={() => {
+                      setSearchQuery('')
+                      searchInputRef.current?.focus()
+                    }}
+                  />
+                ),
+              ]}
+            />
          </div>
        ) : null}
        {filteredList.length > 0 ? (
--- a/packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx
+++ b/packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx
@@ -0,0 +1,15 @@
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { ComponentPropsWithoutRef } from 'react'
+import Icon from '../Icon/Icon'
+
+type Props = ComponentPropsWithoutRef<'button'>
+
+const ClearInputButton = ({ className, ...props }: Props) => {
+  return (
+    <button className={classNames('flex cursor-pointer border-0 bg-transparent p-0', className)} {...props}>
+      <Icon type="clear-circle-filled" className="text-neutral" />
+    </button>
+  )
+}
+
+export default ClearInputButton
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -11,7 +11,6 @@ import { ItemListController } from '@/Controllers/ItemList/ItemListController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { FilesController } from '@/Controllers/FilesController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController'
 import { NotesController } from '@/Controllers/NotesController'
 import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
@@ -33,7 +32,6 @@ type Props = {
  itemListController: ItemListController
  navigationController: NavigationController
  noAccountWarningController: NoAccountWarningController
-  noteTagsController: NoteTagsController
  notesController: NotesController
  selectionController: SelectedItemsController
  searchOptionsController: SearchOptionsController
@@ -46,7 +44,6 @@ const ContentListView: FunctionComponent<Props> = ({
  itemListController,
  navigationController,
  noAccountWarningController,
-  noteTagsController,
  notesController,
  selectionController,
  searchOptionsController,
@@ -167,16 +164,11 @@ const ContentListView: FunctionComponent<Props> = ({
  const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
      application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
-      noteTagsController.reloadTagsContainerMaxWidth()
      application.publishPanelDidResizeEvent(PANEL_NAME_NOTES, isCollapsed)
    },
-    [application, noteTagsController],
+    [application],
  )

-  const panelWidthEventCallback = useCallback(() => {
-    noteTagsController.reloadTagsContainerMaxWidth()
-  }, [noteTagsController])
-
  const addButtonLabel = useMemo(
    () => (isFilesSmartView ? 'Upload file' : 'Create a new note in the selected tag'),
    [isFilesSmartView],
@@ -259,7 +251,6 @@ const ContentListView: FunctionComponent<Props> = ({
          side={PanelSide.Right}
          type={PanelResizeType.WidthOnly}
          resizeFinishCallback={panelResizeFinishCallback}
-          widthEventCallback={panelWidthEventCallback}
          width={panelWidth}
          left={0}
        />
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
@@ -32,7 +32,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
  const editorForNote = application.componentManager.editorForNote(item as SNNote)
  const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
  const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
-  const hasFiles = application.items.getFilesForNote(item as SNNote).length > 0
+  const hasFiles = application.items.getSortedFilesForItem(item).length > 0

  const openNoteContextMenu = (posX: number, posY: number) => {
    notesController.setContextMenuOpen(false)
--- a/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
+++ b/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
@@ -5,6 +5,8 @@ import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileViewProps } from './FileViewProps'
 import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
+import LinkedItemsButton from '../LinkedItems/LinkedItemsButton'
+import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import FilePreviewInfoPanel from '../FilePreview/FilePreviewInfoPanel'
@@ -63,6 +65,10 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
              </div>
            </div>
            <div className="flex items-center gap-3">
+              <LinkedItemsButton
+                filesController={viewControllerManager.filesController}
+                linkingController={viewControllerManager.linkingController}
+              />
              <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"
                title="File information panel"
@@ -87,6 +93,7 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
              />
            </div>
          </div>
+          <LinkedItemBubblesContainer linkingController={viewControllerManager.linkingController} />
        </div>
      </div>
      <div className="flex min-h-0 flex-grow flex-col">
--- a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
@@ -0,0 +1,172 @@
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  FormEventHandler,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { Disclosure, DisclosurePanel } from '@reach/disclosure'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { observer } from 'mobx-react-lite'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import LinkedItemSearchResults from './LinkedItemSearchResults'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { ElementIds } from '@/Constants/ElementIDs'
+import Menu from '../Menu/Menu'
+
+type Props = {
+  linkingController: LinkingController
+  focusPreviousItem: () => void
+  focusedId: string | undefined
+  setFocusedId: (id: string) => void
+}
+
+const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focusedId, setFocusedId }: Props) => {
+  const {
+    tags,
+    getTitleForLinkedTag,
+    getLinkedItemIcon,
+    getSearchResults,
+    linkItemToSelectedItem,
+    createAndAddNewTag,
+    isEntitledToNoteLinking,
+  } = linkingController
+
+  const [searchQuery, setSearchQuery] = useState('')
+  const { unlinkedResults, shouldShowCreateTag } = getSearchResults(searchQuery)
+
+  const [dropdownVisible, setDropdownVisible] = useState(false)
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const searchResultsMenuRef = useRef<HTMLMenuElement>(null)
+
+  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
+    setDropdownVisible(visible)
+    setSearchQuery('')
+  })
+
+  const showDropdown = () => {
+    const { clientHeight } = document.documentElement
+    const inputRect = inputRef.current?.getBoundingClientRect()
+    if (inputRect) {
+      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2)
+      setDropdownVisible(true)
+    }
+  }
+
+  const onSearchQueryChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    setSearchQuery(event.currentTarget.value)
+  }
+
+  const onFormSubmit: FormEventHandler = async (event) => {
+    event.preventDefault()
+    if (searchQuery !== '') {
+      await createAndAddNewTag(searchQuery)
+    }
+  }
+
+  const handleFocus = () => {
+    if (focusedId !== ElementIds.ItemLinkAutocompleteInput) {
+      setFocusedId(ElementIds.ItemLinkAutocompleteInput)
+    }
+    showDropdown()
+  }
+
+  const onBlur: FocusEventHandler = (event) => {
+    closeOnBlur(event)
+  }
+
+  const onKeyDown: KeyboardEventHandler = (event) => {
+    switch (event.key) {
+      case KeyboardKey.Left:
+        if (searchQuery.length === 0) {
+          focusPreviousItem()
+        }
+        break
+      case KeyboardKey.Down:
+        if (searchQuery.length > 0) {
+          searchResultsMenuRef.current?.focus()
+        }
+        break
+    }
+  }
+
+  useEffect(() => {
+    if (focusedId === ElementIds.ItemLinkAutocompleteInput) {
+      inputRef.current?.focus()
+    }
+  }, [focusedId])
+
+  const areSearchResultsVisible = dropdownVisible && (unlinkedResults.length > 0 || shouldShowCreateTag)
+
+  const handleMenuKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback((event) => {
+    if (event.key === KeyboardKey.Escape) {
+      inputRef.current?.focus()
+    }
+  }, [])
+
+  return (
+    <div ref={containerRef}>
+      <form onSubmit={onFormSubmit}>
+        <Disclosure open={dropdownVisible} onChange={showDropdown}>
+          <input
+            ref={inputRef}
+            className={`${tags.length > 0 ? 'w-80' : 'mr-10 w-70'} no-border h-7
+            bg-transparent text-xs text-text focus:border-b-2 focus:border-solid focus:border-info focus:shadow-none focus:outline-none`}
+            value={searchQuery}
+            onChange={onSearchQueryChange}
+            type="text"
+            placeholder="Link tags, notes, files..."
+            onBlur={onBlur}
+            onFocus={handleFocus}
+            onKeyDown={onKeyDown}
+            id={ElementIds.ItemLinkAutocompleteInput}
+            autoComplete="off"
+          />
+          {areSearchResultsVisible && (
+            <DisclosurePanel
+              className={classNames(
+                tags.length > 0 ? 'w-80' : 'mr-10 w-70',
+                'absolute z-dropdown-menu flex flex-col overflow-y-auto rounded bg-default py-2 shadow-main',
+              )}
+              style={{
+                maxHeight: dropdownMaxHeight,
+              }}
+              onBlur={closeOnBlur}
+              tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+            >
+              <Menu
+                isOpen={areSearchResultsVisible}
+                a11yLabel="Unlinked items search results"
+                onKeyDown={handleMenuKeyDown}
+                ref={searchResultsMenuRef}
+                shouldAutoFocus={false}
+              >
+                <LinkedItemSearchResults
+                  createAndAddNewTag={createAndAddNewTag}
+                  getLinkedItemIcon={getLinkedItemIcon}
+                  getTitleForLinkedTag={getTitleForLinkedTag}
+                  linkItemToSelectedItem={linkItemToSelectedItem}
+                  results={unlinkedResults}
+                  searchQuery={searchQuery}
+                  shouldShowCreateTag={shouldShowCreateTag}
+                  onClickCallback={() => setSearchQuery('')}
+                  isEntitledToNoteLinking={isEntitledToNoteLinking}
+                />
+              </Menu>
+            </DisclosurePanel>
+          )}
+        </Disclosure>
+      </form>
+    </div>
+  )
+}
+
+export default observer(ItemLinkAutocompleteInput)
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedFileMenuOptions.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedFileMenuOptions.tsx
@@ -0,0 +1,98 @@
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { FilesController } from '@/Controllers/FilesController'
+import { FileItem } from '@standardnotes/snjs'
+import { useState } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
+import Icon from '../Icon/Icon'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import Switch from '../Switch/Switch'
+
+type Props = {
+  file: FileItem
+  closeMenu: () => void
+  handleFileAction: FilesController['handleFileAction']
+  setIsRenamingFile: (set: boolean) => void
+}
+
+const LinkedFileMenuOptions = ({ file, closeMenu, handleFileAction, setIsRenamingFile }: Props) => {
+  const [isFileProtected, setIsFileProtected] = useState(file.protected)
+
+  return (
+    <>
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          void handleFileAction({
+            type: PopoverFileItemActionType.PreviewFile,
+            payload: {
+              file,
+              otherFiles: [],
+            },
+          })
+          closeMenu()
+        }}
+      >
+        <Icon type="file" className="mr-2 text-neutral" />
+        Preview file
+      </button>
+      <HorizontalSeparator classes="my-1" />
+      <button
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          handleFileAction({
+            type: PopoverFileItemActionType.ToggleFileProtection,
+            payload: { file },
+            callback: (isProtected: boolean) => {
+              setIsFileProtected(isProtected)
+            },
+          }).catch(console.error)
+        }}
+      >
+        <span className="flex items-center">
+          <Icon type="password" className="mr-2 text-neutral" />
+          Password protection
+        </span>
+        <Switch className="pointer-events-none px-0" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} checked={isFileProtected} />
+      </button>
+      <HorizontalSeparator classes="my-1" />
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          handleFileAction({
+            type: PopoverFileItemActionType.DownloadFile,
+            payload: { file },
+          }).catch(console.error)
+          closeMenu()
+        }}
+      >
+        <Icon type="download" className="mr-2 text-neutral" />
+        Download
+      </button>
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          setIsRenamingFile(true)
+          closeMenu()
+        }}
+      >
+        <Icon type="pencil" className="mr-2 text-neutral" />
+        Rename
+      </button>
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          handleFileAction({
+            type: PopoverFileItemActionType.DeleteFile,
+            payload: { file },
+          }).catch(console.error)
+          closeMenu()
+        }}
+      >
+        <Icon type="trash" className="mr-2 text-danger" />
+        <span className="text-danger">Delete permanently</span>
+      </button>
+    </>
+  )
+}
+
+export default LinkedFileMenuOptions
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
@@ -0,0 +1,118 @@
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { observer } from 'mobx-react-lite'
+import { KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'
+import Icon from '../Icon/Icon'
+
+type Props = {
+  item: LinkableItem
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  activateItem: (item: LinkableItem) => Promise<void>
+  unlinkItem: (item: LinkableItem) => void
+  focusPreviousItem: () => void
+  focusNextItem: () => void
+  focusedId: string | undefined
+  setFocusedId: (id: string) => void
+}
+
+const LinkedItemBubble = ({
+  item,
+  getItemIcon,
+  getTitleForLinkedTag,
+  activateItem,
+  unlinkItem,
+  focusPreviousItem,
+  focusNextItem,
+  focusedId,
+  setFocusedId,
+}: Props) => {
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const [showUnlinkButton, setShowUnlinkButton] = useState(false)
+  const unlinkButtonRef = useRef<HTMLAnchorElement | null>(null)
+
+  const [wasClicked, setWasClicked] = useState(false)
+
+  const handleFocus = () => {
+    if (focusedId !== item.uuid) {
+      setFocusedId(item.uuid)
+    }
+    setShowUnlinkButton(true)
+  }
+
+  const onBlur = () => {
+    setShowUnlinkButton(false)
+    setWasClicked(false)
+  }
+
+  const onClick: MouseEventHandler = (event) => {
+    if (wasClicked && event.target !== unlinkButtonRef.current) {
+      setWasClicked(false)
+      void activateItem(item)
+    } else {
+      setWasClicked(true)
+    }
+  }
+
+  const onUnlinkClick: MouseEventHandler = (event) => {
+    event.stopPropagation()
+    unlinkItem(item)
+  }
+
+  const onKeyDown: KeyboardEventHandler = (event) => {
+    switch (event.key) {
+      case KeyboardKey.Backspace: {
+        focusPreviousItem()
+        unlinkItem(item)
+        break
+      }
+      case KeyboardKey.Left:
+        focusPreviousItem()
+        break
+      case KeyboardKey.Right:
+        focusNextItem()
+        break
+    }
+  }
+
+  const [icon, iconClassName] = getItemIcon(item)
+  const tagTitle = getTitleForLinkedTag(item)
+
+  useEffect(() => {
+    if (item.uuid === focusedId) {
+      ref.current?.focus()
+    }
+  }, [focusedId, item.uuid])
+
+  return (
+    <button
+      ref={ref}
+      className="flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
+      onFocus={handleFocus}
+      onBlur={onBlur}
+      onClick={onClick}
+      title={tagTitle ? tagTitle.longTitle : item.title}
+      onKeyDown={onKeyDown}
+    >
+      <Icon type={icon} className={classNames('mr-1 flex-shrink-0', iconClassName)} size="small" />
+      <span className="max-w-290px overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
+        {item.title}
+      </span>
+      {showUnlinkButton && (
+        <a
+          ref={unlinkButtonRef}
+          role="button"
+          className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
+          onClick={onUnlinkClick}
+        >
+          <Icon type="close" className="text-neutral hover:text-info" size="small" />
+        </a>
+      )}
+    </button>
+  )
+}
+
+export default observer(LinkedItemBubble)
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
@@ -0,0 +1,87 @@
+import { observer } from 'mobx-react-lite'
+import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import LinkedItemBubble from './LinkedItemBubble'
+import { useCallback, useState } from 'react'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+import { ElementIds } from '@/Constants/ElementIDs'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+
+type Props = {
+  linkingController: LinkingController
+}
+
+const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+  const {
+    allLinkedItems,
+    notesLinkingToItem,
+    unlinkItemFromSelectedItem: unlinkItem,
+    getTitleForLinkedTag,
+    getLinkedItemIcon: getItemIcon,
+    activateItem,
+  } = linkingController
+
+  const [focusedId, setFocusedId] = useState<string>()
+  const focusableIds = allLinkedItems.map((item) => item.uuid).concat([ElementIds.ItemLinkAutocompleteInput])
+
+  const focusPreviousItem = useCallback(() => {
+    const currentFocusedIndex = focusableIds.findIndex((id) => id === focusedId)
+    const previousIndex = currentFocusedIndex - 1
+
+    if (previousIndex > -1) {
+      setFocusedId(focusableIds[previousIndex])
+    }
+  }, [focusableIds, focusedId])
+
+  const focusNextItem = useCallback(() => {
+    const currentFocusedIndex = focusableIds.findIndex((id) => id === focusedId)
+    const nextIndex = currentFocusedIndex + 1
+
+    if (nextIndex < focusableIds.length) {
+      setFocusedId(focusableIds[nextIndex])
+    }
+  }, [focusableIds, focusedId])
+
+  const activateItemAndTogglePane = useCallback(
+    async (item: LinkableItem) => {
+      const paneId = await activateItem(item)
+      if (paneId) {
+        toggleAppPane(paneId)
+      }
+    },
+    [activateItem, toggleAppPane],
+  )
+
+  return (
+    <div
+      className={classNames(
+        'hidden min-w-80 max-w-full flex-wrap items-center gap-2 bg-transparent md:-mr-2 md:flex',
+        allLinkedItems.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
+      )}
+    >
+      {allLinkedItems.concat(notesLinkingToItem).map((item) => (
+        <LinkedItemBubble
+          item={item}
+          key={item.uuid}
+          getItemIcon={getItemIcon}
+          getTitleForLinkedTag={getTitleForLinkedTag}
+          activateItem={activateItemAndTogglePane}
+          unlinkItem={unlinkItem}
+          focusPreviousItem={focusPreviousItem}
+          focusNextItem={focusNextItem}
+          focusedId={focusedId}
+          setFocusedId={setFocusedId}
+        />
+      ))}
+      <ItemLinkAutocompleteInput
+        focusedId={focusedId}
+        linkingController={linkingController}
+        focusPreviousItem={focusPreviousItem}
+        setFocusedId={setFocusedId}
+      />
+    </div>
+  )
+}
+
+export default observer(LinkedItemBubblesContainer)
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
@@ -0,0 +1,46 @@
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { splitQueryInString } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { observer } from 'mobx-react-lite'
+import Icon from '../Icon/Icon'
+
+const LinkedItemMeta = ({
+  item,
+  getItemIcon,
+  getTitleForLinkedTag,
+  searchQuery,
+}: {
+  item: LinkableItem
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  searchQuery?: string
+}) => {
+  const [icon, className] = getItemIcon(item)
+  const tagTitle = getTitleForLinkedTag(item)
+  const title = item.title ?? ''
+
+  return (
+    <>
+      <Icon type={icon} className={classNames('flex-shrink-0', className)} />
+      <div className="min-w-0 flex-grow break-words text-left text-sm">
+        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
+        {searchQuery
+          ? splitQueryInString(title, searchQuery).map((substring, index) => (
+              <span
+                key={index}
+                className={`${
+                  substring.toLowerCase() === searchQuery.toLowerCase()
+                    ? 'whitespace-pre-wrap font-bold'
+                    : 'whitespace-pre-wrap '
+                }`}
+              >
+                {substring}
+              </span>
+            ))
+          : title}
+      </div>
+    </>
+  )
+}
+
+export default observer(LinkedItemMeta)
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
@@ -0,0 +1,80 @@
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { observer } from 'mobx-react-lite'
+import { SNNote } from '@standardnotes/snjs'
+import Icon from '../Icon/Icon'
+import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import LinkedItemMeta from './LinkedItemMeta'
+
+type Props = {
+  createAndAddNewTag: LinkingController['createAndAddNewTag']
+  getLinkedItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  linkItemToSelectedItem: LinkingController['linkItemToSelectedItem']
+  results: LinkableItem[]
+  searchQuery: string
+  shouldShowCreateTag: boolean
+  onClickCallback?: () => void
+  isEntitledToNoteLinking: boolean
+}
+
+const LinkedItemSearchResults = ({
+  createAndAddNewTag,
+  getLinkedItemIcon,
+  getTitleForLinkedTag,
+  linkItemToSelectedItem,
+  results,
+  searchQuery,
+  shouldShowCreateTag,
+  onClickCallback,
+  isEntitledToNoteLinking,
+}: Props) => {
+  const premiumModal = usePremiumModal()
+
+  return (
+    <div className="my-1">
+      {results.map((result) => {
+        const cannotLinkItem = !isEntitledToNoteLinking && result instanceof SNNote
+        return (
+          <button
+            key={result.uuid}
+            className="flex w-full items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
+            onClick={() => {
+              if (cannotLinkItem) {
+                premiumModal.activate('Note linking')
+              } else {
+                linkItemToSelectedItem(result)
+                onClickCallback?.()
+              }
+            }}
+          >
+            <LinkedItemMeta
+              item={result}
+              getItemIcon={getLinkedItemIcon}
+              getTitleForLinkedTag={getTitleForLinkedTag}
+              searchQuery={searchQuery}
+            />
+            {cannotLinkItem && <Icon type={PremiumFeatureIconName} className="ml-auto flex-shrink-0 text-info" />}
+          </button>
+        )
+      })}
+      {shouldShowCreateTag && (
+        <button
+          className="group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
+          onClick={() => {
+            createAndAddNewTag(searchQuery)
+            onClickCallback?.()
+          }}
+        >
+          <span className="flex-shrink-0 align-middle">Create &amp; add tag</span>{' '}
+          <span className="inline-flex min-w-0 items-center gap-1 rounded bg-contrast py-1 pl-1 pr-2 align-middle text-xs text-text group-hover:bg-info group-hover:text-info-contrast">
+            <Icon type="hashtag" className="flex-shrink-0 text-info group-hover:text-info-contrast" size="small" />
+            <span className="min-w-0 overflow-hidden text-ellipsis">{searchQuery}</span>
+          </span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default observer(LinkedItemSearchResults)
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
@@ -0,0 +1,51 @@
+import { FilesController } from '@/Controllers/FilesController'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { observer } from 'mobx-react-lite'
+import { useRef, useCallback } from 'react'
+import Icon from '../Icon/Icon'
+import Popover from '../Popover/Popover'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
+import LinkedItemsPanel from './LinkedItemsPanel'
+
+type Props = {
+  linkingController: LinkingController
+  onClickPreprocessing?: () => Promise<void>
+  filesController: FilesController
+}
+
+const LinkedItemsButton = ({ linkingController, filesController, onClickPreprocessing }: Props) => {
+  const { isLinkingPanelOpen, setIsLinkingPanelOpen } = linkingController
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const toggleMenu = useCallback(async () => {
+    const willMenuOpen = !isLinkingPanelOpen
+    if (willMenuOpen && onClickPreprocessing) {
+      await onClickPreprocessing()
+    }
+    setIsLinkingPanelOpen(willMenuOpen)
+  }, [isLinkingPanelOpen, onClickPreprocessing, setIsLinkingPanelOpen])
+
+  return (
+    <>
+      <StyledTooltip label="Linked items panel">
+        <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"
+          aria-label="Linked items panel"
+          onClick={toggleMenu}
+          ref={buttonRef}
+        >
+          <Icon type="link" />
+        </button>
+      </StyledTooltip>
+      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isLinkingPanelOpen} className="pb-2">
+        <LinkedItemsPanel
+          isOpen={isLinkingPanelOpen}
+          linkingController={linkingController}
+          filesController={filesController}
+        />
+      </Popover>
+    </>
+  )
+}
+
+export default observer(LinkedItemsButton)
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
@@ -0,0 +1,352 @@
+import { FilesController } from '@/Controllers/FilesController'
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { formatDateForContextMenu } from '@/Utils/DateUtils'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { FileItem } from '@standardnotes/snjs'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef, useState } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
+import ClearInputButton from '../ClearInputButton/ClearInputButton'
+import Icon from '../Icon/Icon'
+import DecoratedInput from '../Input/DecoratedInput'
+import MenuItem from '../Menu/MenuItem'
+import { MenuItemType } from '../Menu/MenuItemType'
+import Popover from '../Popover/Popover'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import LinkedFileMenuOptions from './LinkedFileMenuOptions'
+import LinkedItemMeta from './LinkedItemMeta'
+import LinkedItemSearchResults from './LinkedItemSearchResults'
+
+const LinkedItemsSectionItem = ({
+  activateItem,
+  getItemIcon,
+  getTitleForLinkedTag,
+  item,
+  searchQuery,
+  unlinkItem,
+  handleFileAction,
+}: {
+  activateItem: LinkingController['activateItem']
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  item: LinkableItem
+  searchQuery?: string
+  unlinkItem: LinkingController['unlinkItemFromSelectedItem']
+  handleFileAction: FilesController['handleFileAction']
+}) => {
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const toggleMenu = () => setIsMenuOpen((open) => !open)
+
+  const [isRenamingFile, setIsRenamingFile] = useState(false)
+
+  const [icon, className] = getItemIcon(item)
+  const title = item.title ?? ''
+
+  const renameFile = async (name: string) => {
+    if (!(item instanceof FileItem)) {
+      return
+    }
+    await handleFileAction({
+      type: PopoverFileItemActionType.RenameFile,
+      payload: {
+        file: item,
+        name: name,
+      },
+    })
+    setIsRenamingFile(false)
+  }
+
+  return (
+    <div className="relative flex items-center justify-between">
+      {isRenamingFile && item instanceof FileItem ? (
+        <div className="flex flex-grow items-center gap-4 py-2 pl-3 pr-12">
+          <Icon type={icon} className={classNames('flex-shrink-0', className)} />
+          <input
+            className="min-w-0 flex-grow text-sm"
+            defaultValue={title}
+            onKeyDown={(event) => {
+              if (event.key === KeyboardKey.Escape) {
+                setIsRenamingFile(false)
+              } else if (event.key === KeyboardKey.Enter) {
+                const newTitle = event.currentTarget.value
+                void renameFile(newTitle)
+              }
+            }}
+            ref={(node) => {
+              if (node) {
+                node.focus()
+              }
+            }}
+          />
+        </div>
+      ) : (
+        <button
+          className="flex flex-grow items-center justify-between gap-4 py-2 pl-3 pr-12 text-sm hover:bg-info-backdrop focus:bg-info-backdrop"
+          onClick={() => activateItem(item)}
+          onContextMenu={(event) => {
+            event.preventDefault()
+            toggleMenu()
+          }}
+        >
+          <LinkedItemMeta
+            item={item}
+            getItemIcon={getItemIcon}
+            getTitleForLinkedTag={getTitleForLinkedTag}
+            searchQuery={searchQuery}
+          />
+        </button>
+      )}
+      <button
+        className="absolute right-3 top-1/2 h-7 w-7 -translate-y-1/2 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
+        onClick={toggleMenu}
+        ref={menuButtonRef}
+      >
+        <Icon type="more" className="text-neutral" />
+      </button>
+      <Popover
+        open={isMenuOpen}
+        togglePopover={toggleMenu}
+        anchorElement={menuButtonRef.current}
+        side="bottom"
+        align="center"
+        className="py-2"
+      >
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onClick={() => {
+            unlinkItem(item)
+            toggleMenu()
+          }}
+        >
+          <Icon type="link-off" className="mr-2 text-danger" />
+          Unlink
+        </MenuItem>
+        {item instanceof FileItem && (
+          <LinkedFileMenuOptions
+            file={item}
+            closeMenu={toggleMenu}
+            handleFileAction={handleFileAction}
+            setIsRenamingFile={setIsRenamingFile}
+          />
+        )}
+        <HorizontalSeparator classes="my-2" />
+        <div className="mt-1 px-3 py-1 text-xs font-medium text-neutral">
+          <div className="mb-1">
+            <span className="font-semibold">Created at:</span> {formatDateForContextMenu(item.created_at)}
+          </div>
+          <div className="mb-1">
+            <span className="font-semibold">Modified at:</span> {formatDateForContextMenu(item.userModifiedDate)}
+          </div>
+          <div className="mb-1">
+            <span className="font-semibold">ID:</span> {item.uuid}
+          </div>
+          {item instanceof FileItem && (
+            <div>
+              <span className="font-semibold">Size:</span> {formatSizeToReadableString(item.decryptedSize)}
+            </div>
+          )}
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+const LinkedItemsPanel = ({
+  linkingController,
+  filesController,
+  isOpen,
+}: {
+  linkingController: LinkingController
+  filesController: FilesController
+  isOpen: boolean
+}) => {
+  const {
+    tags,
+    files,
+    notesLinkedToItem,
+    notesLinkingToItem,
+    allLinkedItems,
+    getTitleForLinkedTag,
+    getLinkedItemIcon,
+    getSearchResults,
+    linkItemToSelectedItem,
+    unlinkItemFromSelectedItem,
+    activateItem,
+    createAndAddNewTag,
+    isEntitledToNoteLinking,
+  } = linkingController
+
+  const searchInputRef = useRef<HTMLInputElement | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const isSearching = !!searchQuery.length
+  const { linkedResults, unlinkedResults, shouldShowCreateTag } = getSearchResults(searchQuery)
+
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [isOpen])
+
+  return (
+    <div>
+      <form
+        className={classNames(
+          'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
+          allLinkedItems.length || linkedResults.length || unlinkedResults.length || notesLinkingToItem.length
+            ? 'border-b border-border pb-2.5'
+            : 'pb-1',
+        )}
+      >
+        <DecoratedInput
+          type="text"
+          className={{ container: !isSearching ? 'py-1.5 px-0.5' : 'py-0', input: 'placeholder:text-passive-0' }}
+          placeholder="Search items to link..."
+          value={searchQuery}
+          onChange={setSearchQuery}
+          ref={searchInputRef}
+          right={[
+            isSearching && (
+              <ClearInputButton
+                onClick={() => {
+                  setSearchQuery('')
+                  searchInputRef.current?.focus()
+                }}
+              />
+            ),
+          ]}
+        />
+      </form>
+      <div className="divide-y divide-border">
+        {isSearching ? (
+          <>
+            {(!!unlinkedResults.length || shouldShowCreateTag) && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
+                <LinkedItemSearchResults
+                  createAndAddNewTag={createAndAddNewTag}
+                  getLinkedItemIcon={getLinkedItemIcon}
+                  getTitleForLinkedTag={getTitleForLinkedTag}
+                  linkItemToSelectedItem={linkItemToSelectedItem}
+                  results={unlinkedResults}
+                  searchQuery={searchQuery}
+                  shouldShowCreateTag={shouldShowCreateTag}
+                  isEntitledToNoteLinking={isEntitledToNoteLinking}
+                  onClickCallback={() => {
+                    setSearchQuery('')
+                    searchInputRef.current?.focus()
+                  }}
+                />
+              </div>
+            )}
+            {!!linkedResults.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
+                <div className="my-1">
+                  {linkedResults.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            {!!tags.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
+                <div className="my-1">
+                  {tags.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!files.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
+                <div className="my-1">
+                  {files.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!notesLinkedToItem.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
+                <div className="my-1">
+                  {notesLinkedToItem.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!notesLinkingToItem.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
+                  Notes Linking To This Note
+                </div>
+                <div className="my-1">
+                  {notesLinkingToItem.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default observer(LinkedItemsPanel)
--- a/packages/web/src/javascripts/Components/Menu/Menu.tsx
+++ b/packages/web/src/javascripts/Components/Menu/Menu.tsx
@@ -1,14 +1,7 @@
-import {
-  CSSProperties,
-  FunctionComponent,
-  KeyboardEventHandler,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react'
+import { CSSProperties, forwardRef, KeyboardEventHandler, ReactNode, Ref, useCallback, useEffect, useRef } from 'react'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
+import { mergeRefs } from '@/Hooks/mergeRefs'

 type MenuProps = {
  className?: string
@@ -18,50 +11,61 @@ type MenuProps = {
  closeMenu?: () => void
  isOpen: boolean
  initialFocus?: number
+  onKeyDown?: KeyboardEventHandler<HTMLMenuElement>
+  shouldAutoFocus?: boolean
 }

-const Menu: FunctionComponent<MenuProps> = ({
-  children,
-  className = '',
-  style,
-  a11yLabel,
-  closeMenu,
-  isOpen,
-  initialFocus,
-}: MenuProps) => {
-  const menuElementRef = useRef<HTMLMenuElement>(null)
+const Menu = forwardRef(
+  (
+    {
+      children,
+      className = '',
+      style,
+      a11yLabel,
+      closeMenu,
+      isOpen,
+      initialFocus,
+      onKeyDown,
+      shouldAutoFocus = true,
+    }: MenuProps,
+    forwardedRef: Ref<HTMLMenuElement>,
+  ) => {
+    const menuElementRef = useRef<HTMLMenuElement>(null)

-  const handleKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback(
-    (event) => {
-      if (event.key === KeyboardKey.Escape) {
-        closeMenu?.()
-        return
+    const handleKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback(
+      (event) => {
+        onKeyDown?.(event)
+
+        if (event.key === KeyboardKey.Escape) {
+          closeMenu?.()
+          return
+        }
+      },
+      [closeMenu, onKeyDown],
+    )
+
+    useListKeyboardNavigation(menuElementRef, initialFocus)
+
+    useEffect(() => {
+      if (isOpen && shouldAutoFocus) {
+        setTimeout(() => {
+          menuElementRef.current?.focus()
+        })
      }
-    },
-    [closeMenu],
-  )
+    }, [isOpen, shouldAutoFocus])

-  useListKeyboardNavigation(menuElementRef, initialFocus)
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        menuElementRef.current?.focus()
-      })
-    }
-  }, [isOpen])
-
-  return (
-    <menu
-      className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
-      onKeyDown={handleKeyDown}
-      ref={menuElementRef}
-      style={style}
-      aria-label={a11yLabel}
-    >
-      {children}
-    </menu>
-  )
-}
+    return (
+      <menu
+        className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
+        onKeyDown={handleKeyDown}
+        ref={mergeRefs([menuElementRef, forwardedRef])}
+        style={style}
+        aria-label={a11yLabel}
+      >
+        {children}
+      </menu>
+    )
+  },
+)

 export default Menu
--- a/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
+++ b/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
@@ -12,8 +12,8 @@ import { FilesController } from '@/Controllers/FilesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
+import { LinkingController } from '@/Controllers/LinkingController'

 type Props = {
  application: WebApplication
@@ -22,9 +22,9 @@ type Props = {
  filesController: FilesController
  navigationController: NavigationController
  notesController: NotesController
-  noteTagsController: NoteTagsController
  selectionController: SelectedItemsController
  historyModalController: HistoryModalController
+  linkingController: LinkingController
 }

 const MultipleSelectedNotes = ({
@@ -34,7 +34,7 @@ const MultipleSelectedNotes = ({
  filesController,
  navigationController,
  notesController,
-  noteTagsController,
+  linkingController,
  selectionController,
  historyModalController,
 }: Props) => {
@@ -67,7 +67,7 @@ const MultipleSelectedNotes = ({
            application={application}
            navigationController={navigationController}
            notesController={notesController}
-            noteTagsController={noteTagsController}
+            linkingController={linkingController}
            historyModalController={historyModalController}
          />
        </div>
--- a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
+++ b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
@@ -49,16 +49,11 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
  const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
      application.setPreference(PrefKey.TagsPanelWidth, width).catch(console.error)
-      viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
      application.publishPanelDidResizeEvent(PANEL_NAME_NAVIGATION, isCollapsed)
    },
-    [application, viewControllerManager],
+    [application],
  )

-  const panelWidthEventCallback = useCallback(() => {
-    viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
-  }, [viewControllerManager])
-
  return (
    <div
      id="navigation"
@@ -157,7 +152,6 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
          side={PanelSide.Right}
          type={PanelResizeType.WidthOnly}
          resizeFinishCallback={panelResizeFinishCallback}
-          widthEventCallback={panelWidthEventCallback}
          width={panelWidth}
          left={0}
        />
--- a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -103,7 +103,7 @@ class NoteGroupView extends PureComponent<Props, State> {
              filePreviewModalController={this.viewControllerManager.filePreviewModalController}
              navigationController={this.viewControllerManager.navigationController}
              notesController={this.viewControllerManager.notesController}
-              noteTagsController={this.viewControllerManager.noteTagsController}
+              linkingController={this.viewControllerManager.linkingController}
              historyModalController={this.viewControllerManager.historyModalController}
            />
          )}
--- a/packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
+++ b/packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
@@ -1,156 +0,0 @@
-import Icon from '@/Components/Icon/Icon'
-import {
-  FocusEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-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 = {
-  noteTagsController: NoteTagsController
-  navigationController: NavigationController
-  tag: SNTag
-}
-
-const NoteTag = ({ noteTagsController, navigationController, tag }: Props) => {
-  const { toggleAppPane } = useResponsiveAppPane()
-
-  const noteTags = noteTagsController
-
-  const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags
-
-  const [showDeleteButton, setShowDeleteButton] = useState(false)
-  const [tagClicked, setTagClicked] = useState(false)
-  const deleteTagRef = useRef<HTMLAnchorElement>(null)
-
-  const tagRef = useRef<HTMLButtonElement>(null)
-
-  const title = tag.title
-  const prefixTitle = noteTags.getPrefixTitle(tag)
-  const longTitle = noteTags.getLongTitle(tag)
-
-  const deleteTag = useCallback(() => {
-    noteTagsController.focusPreviousTag(tag)
-    noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
-  }, [noteTagsController, tag])
-
-  const onDeleteTagClick: MouseEventHandler = useCallback(
-    (event) => {
-      event.stopPropagation()
-      deleteTag()
-    },
-    [deleteTag],
-  )
-
-  const onTagClick: MouseEventHandler = useCallback(
-    async (event) => {
-      if (tagClicked && event.target !== deleteTagRef.current) {
-        setTagClicked(false)
-        await navigationController.setSelectedTag(tag)
-        toggleAppPane(AppPaneId.Items)
-      } else {
-        setTagClicked(true)
-        tagRef.current?.focus()
-      }
-    },
-    [tagClicked, navigationController, tag, toggleAppPane],
-  )
-
-  const onFocus = useCallback(() => {
-    noteTagsController.setFocusedTagUuid(tag.uuid)
-    setShowDeleteButton(true)
-  }, [noteTagsController, tag])
-
-  const onBlur: FocusEventHandler = useCallback(
-    (event) => {
-      const relatedTarget = event.relatedTarget as Node
-      if (relatedTarget !== deleteTagRef.current) {
-        noteTagsController.setFocusedTagUuid(undefined)
-        setShowDeleteButton(false)
-      }
-    },
-    [noteTagsController],
-  )
-
-  const getTabIndex = useCallback(() => {
-    if (focusedTagUuid) {
-      return focusedTagUuid === tag.uuid ? 0 : -1
-    }
-    if (autocompleteInputFocused) {
-      return -1
-    }
-    return tags[0]?.uuid === tag.uuid ? 0 : -1
-  }, [autocompleteInputFocused, tags, tag, focusedTagUuid])
-
-  const onKeyDown: KeyboardEventHandler = useCallback(
-    (event) => {
-      const tagIndex = noteTagsController.getTagIndex(tag, tags)
-      switch (event.key) {
-        case 'Backspace':
-          deleteTag()
-          break
-        case 'ArrowLeft':
-          noteTagsController.focusPreviousTag(tag)
-          break
-        case 'ArrowRight':
-          if (tagIndex === tags.length - 1) {
-            noteTagsController.setAutocompleteInputFocused(true)
-          } else {
-            noteTagsController.focusNextTag(tag)
-          }
-          break
-        default:
-          return
-      }
-    },
-    [noteTagsController, deleteTag, tag, tags],
-  )
-
-  useEffect(() => {
-    if (focusedTagUuid === tag.uuid) {
-      tagRef.current?.focus()
-    }
-  }, [noteTagsController, focusedTagUuid, tag])
-
-  return (
-    <button
-      ref={tagRef}
-      className="mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
-      onClick={onTagClick}
-      onKeyDown={onKeyDown}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      tabIndex={getTabIndex()}
-      title={longTitle}
-    >
-      <Icon type="hashtag" className="mr-1 text-info" size="small" />
-      <span className="max-w-290px overflow-hidden overflow-ellipsis whitespace-nowrap">
-        {prefixTitle && <span className="text-passive-1">{prefixTitle}</span>}
-        {title}
-      </span>
-      {showDeleteButton && (
-        <a
-          ref={deleteTagRef}
-          role="button"
-          className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
-          onBlur={onBlur}
-          onClick={onDeleteTagClick}
-          tabIndex={-1}
-        >
-          <Icon type="close" className="text-neutral hover:text-info" size="small" />
-        </a>
-      )}
-    </button>
-  )
-}
-
-export default observer(NoteTag)
--- a/packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx
+++ b/packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx
@@ -1,35 +0,0 @@
-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 = {
-  noteTagsController: NoteTagsController
-  navigationController: NavigationController
-}
-
-const NoteTagsContainer = ({ noteTagsController, navigationController }: Props) => {
-  const { tags } = noteTagsController
-
-  useEffect(() => {
-    noteTagsController.reloadTagsContainerMaxWidth()
-  }, [noteTagsController])
-
-  return (
-    <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}
-          noteTagsController={noteTagsController}
-          navigationController={navigationController}
-          tag={tag}
-        />
-      ))}
-      <AutocompleteTagInput noteTagsController={noteTagsController} />
-    </div>
-  )
-}
-
-export default observer(NoteTagsContainer)
--- a/packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx
@@ -1,170 +0,0 @@
-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-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
-    >
-      {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-mobile-menu-item text-text md:text-menu-item">
-      <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-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
-            >
-              <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
@@ -41,10 +41,10 @@ import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import AutoresizingNoteViewTextarea from './AutoresizingTextarea'
 import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
-import NoteTagsPanel from '../NoteTags/NoteTagsPanel'
-import NoteTagsContainer from '../NoteTags/NoteTagsContainer'
+import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 import NoteStatusIndicator, { NoteStatus } from './NoteStatusIndicator'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import LinkedItemsButton from '../LinkedItems/LinkedItemsButton'

 const MinimumStatusDuration = 400
 const TextareaDebounce = 100
@@ -999,9 +999,10 @@ class NoteView extends PureComponent<NoteViewProps, State> {
              </div>
              {!this.state.shouldStickyHeader && (
                <div className="flex items-center gap-3">
-                  <NoteTagsPanel
+                  <LinkedItemsButton
+                    filesController={this.viewControllerManager.filesController}
+                    linkingController={this.viewControllerManager.linkingController}
                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                    noteTagsController={this.viewControllerManager.noteTagsController}
                  />
                  <AttachedFilesButton
                    application={this.application}
@@ -1026,7 +1027,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                    application={this.application}
                    navigationController={this.viewControllerManager.navigationController}
                    notesController={this.viewControllerManager.notesController}
-                    noteTagsController={this.viewControllerManager.noteTagsController}
+                    linkingController={this.viewControllerManager.linkingController}
                    historyModalController={this.viewControllerManager.historyModalController}
                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                  />
@@ -1034,10 +1035,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
              )}
            </div>
            {!this.state.shouldStickyHeader && (
-              <NoteTagsContainer
-                noteTagsController={this.viewControllerManager.noteTagsController}
-                navigationController={this.viewControllerManager.navigationController}
-              />
+              <LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
            )}
          </div>
        )}
--- a/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
@@ -4,15 +4,15 @@ import { useRef } from 'react'
 import { WebApplication } from '@/Application/Application'
 import { NotesController } from '@/Controllers/NotesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
 import Popover from '../Popover/Popover'
+import { LinkingController } from '@/Controllers/LinkingController'

 type Props = {
  application: WebApplication
  navigationController: NavigationController
  notesController: NotesController
-  noteTagsController: NoteTagsController
+  linkingController: LinkingController
  historyModalController: HistoryModalController
 }

@@ -20,7 +20,7 @@ const NotesContextMenu = ({
  application,
  navigationController,
  notesController,
-  noteTagsController,
+  linkingController,
  historyModalController,
 }: Props) => {
  const { contextMenuOpen, contextMenuClickLocation, setContextMenuOpen } = notesController
@@ -46,7 +46,7 @@ const NotesContextMenu = ({
          application={application}
          navigationController={navigationController}
          notesController={notesController}
-          noteTagsController={noteTagsController}
+          linkingController={linkingController}
          historyModalController={historyModalController}
          closeMenu={closeMenu}
        />
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -3,17 +3,17 @@ import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import Popover from '../Popover/Popover'
+import { LinkingController } from '@/Controllers/LinkingController'

 type Props = {
  navigationController: NavigationController
  notesController: NotesController
-  noteTagsController: NoteTagsController
+  linkingController: LinkingController
 }

-const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesController, noteTagsController }) => {
+const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesController, linkingController }) => {
  const menuContainerRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)

@@ -63,7 +63,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
              className={`overflow-hidden overflow-ellipsis whitespace-nowrap
                      ${notesController.isTagInSelectedNotes(tag) ? 'font-bold' : ''}`}
            >
-              {noteTagsController.getLongTitle(tag)}
+              {linkingController.getTitleForLinkedTag(tag)?.longTitle}
            </span>
          </button>
        ))}
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -178,7 +178,7 @@ const NotesOptions = ({
  application,
  navigationController,
  notesController,
-  noteTagsController,
+  linkingController,
  historyModalController,
  closeMenu,
 }: NotesOptionsProps) => {
@@ -327,7 +327,7 @@ const NotesOptions = ({
        <AddTagOption
          navigationController={navigationController}
          notesController={notesController}
-          noteTagsController={noteTagsController}
+          linkingController={linkingController}
        />
      )}
      {unpinned && (
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -5,15 +5,15 @@ import NotesOptions from './NotesOptions'
 import { WebApplication } from '@/Application/Application'
 import { NotesController } from '@/Controllers/NotesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
 import Popover from '../Popover/Popover'
+import { LinkingController } from '@/Controllers/LinkingController'

 type Props = {
  application: WebApplication
  navigationController: NavigationController
  notesController: NotesController
-  noteTagsController: NoteTagsController
+  linkingController: LinkingController
  historyModalController: HistoryModalController
  onClickPreprocessing?: () => Promise<void>
 }
@@ -22,7 +22,7 @@ const NotesOptionsPanel = ({
  application,
  navigationController,
  notesController,
-  noteTagsController,
+  linkingController,
  historyModalController,
  onClickPreprocessing,
 }: Props) => {
@@ -53,7 +53,7 @@ const NotesOptionsPanel = ({
          application={application}
          navigationController={navigationController}
          notesController={notesController}
-          noteTagsController={noteTagsController}
+          linkingController={linkingController}
          historyModalController={historyModalController}
          closeMenu={toggleMenu}
        />
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
@@ -2,13 +2,13 @@ import { WebApplication } from '@/Application/Application'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { LinkingController } from '@/Controllers/LinkingController'

 export type NotesOptionsProps = {
  application: WebApplication
  navigationController: NavigationController
  notesController: NotesController
-  noteTagsController: NoteTagsController
+  linkingController: LinkingController
  historyModalController: HistoryModalController
  closeMenu: () => void
 }
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -65,7 +65,9 @@ const PositionedPopoverContent = ({
        )}
        style={{
          ...styles,
-          maxHeight: getPopoverMaxHeight(getAppRect(documentRect), anchorRect, positionedSide, positionedAlignment),
+          maxHeight: styles
+            ? getPopoverMaxHeight(getAppRect(documentRect), anchorRect, positionedSide, positionedAlignment)
+            : '',
          top: !isDesktopScreen ? `${document.documentElement.scrollTop}px` : '',
        }}
        ref={(node) => {
--- a/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts
@@ -35,10 +35,10 @@ export const usePopoverCloseOnClickOutside = ({
    }

    document.addEventListener('click', closeIfClickedOutside, { capture: true })
+    document.addEventListener('contextmenu', closeIfClickedOutside, { capture: true })
    return () => {
-      document.removeEventListener('click', closeIfClickedOutside, {
-        capture: true,
-      })
+      document.removeEventListener('click', closeIfClickedOutside, { capture: true })
+      document.removeEventListener('contextmenu', closeIfClickedOutside, { capture: true })
    }
  }, [anchorElement, childPopovers, popoverElement, togglePopover])
 }
--- a/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx
+++ b/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx
@@ -6,6 +6,7 @@ import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
 import Icon from '../Icon/Icon'
 import DecoratedInput from '../Input/DecoratedInput'
 import { observer } from 'mobx-react-lite'
+import ClearInputButton from '../ClearInputButton/ClearInputButton'

 type Props = {
  itemListController: ItemListController
@@ -59,16 +60,7 @@ const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
        onFocus={onSearchFocus}
        onKeyUp={onNoteFilterKeyUp}
        left={[<Icon type="search" className="mr-1 h-4.5 w-4.5 flex-shrink-0 text-passive-1" />]}
-        right={[
-          noteFilterText && (
-            <button
-              onClick={onClearSearch}
-              className="flex h-4.5 w-4.5 items-center justify-center rounded-full border-0 bg-neutral text-neutral-contrast"
-            >
-              <Icon type="close" className="h-3.5 w-3.5" />
-            </button>
-          ),
-        ]}
+        right={[noteFilterText && <ClearInputButton onClick={onClearSearch} />]}
        roundedFull
      />

--- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
+++ b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
@@ -9,5 +9,6 @@ export default styled(Tooltip)`
    background-color: var(--sn-stylekit-contrast-background-color);
    color: var(--sn-stylekit-foreground-color);
    border-color: var(--sn-stylekit-border-color);
+    z-index: var(--z-index-tooltip);
  }
 `
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
@@ -1,81 +0,0 @@
-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 = {
-  noteTagsController: NoteTagsController
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
-}
-
-const AutocompleteTagHint = ({ noteTagsController, closeOnBlur }: Props) => {
-  const { autocompleteTagHintFocused } = noteTagsController
-
-  const hintRef = useRef<HTMLButtonElement>(null)
-
-  const { autocompleteSearchQuery, autocompleteTagResults } = noteTagsController
-
-  const onTagHintClick = useCallback(async () => {
-    await noteTagsController.createAndAddNewTag()
-    noteTagsController.setAutocompleteInputFocused(true)
-  }, [noteTagsController])
-
-  const onFocus = useCallback(() => {
-    noteTagsController.setAutocompleteTagHintFocused(true)
-  }, [noteTagsController])
-
-  const onBlur: FocusEventHandler = useCallback(
-    (event) => {
-      closeOnBlur(event)
-      noteTagsController.setAutocompleteTagHintFocused(false)
-    },
-    [noteTagsController, closeOnBlur],
-  )
-
-  const onKeyDown: KeyboardEventHandler = useCallback(
-    (event) => {
-      if (event.key === 'ArrowUp') {
-        if (autocompleteTagResults.length > 0) {
-          const lastTagResult = autocompleteTagResults[autocompleteTagResults.length - 1]
-          noteTagsController.setFocusedTagResultUuid(lastTagResult.uuid)
-        } else {
-          noteTagsController.setAutocompleteInputFocused(true)
-        }
-      }
-    },
-    [noteTagsController, autocompleteTagResults],
-  )
-
-  useEffect(() => {
-    if (autocompleteTagHintFocused) {
-      hintRef.current?.focus()
-    }
-  }, [noteTagsController, autocompleteTagHintFocused])
-
-  return (
-    <>
-      {autocompleteTagResults.length > 0 && <HorizontalSeparator classes="my-2" />}
-      <button
-        ref={hintRef}
-        type="button"
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info focus:text-info-contrast focus:shadow-none"
-        onClick={onTagHintClick}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        tabIndex={-1}
-      >
-        <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>
-    </>
-  )
-}
-
-export default observer(AutocompleteTagHint)
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
@@ -1,160 +0,0 @@
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  FormEventHandler,
-  KeyboardEventHandler,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { Disclosure, DisclosurePanel } from '@reach/disclosure'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-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 = {
-  noteTagsController: NoteTagsController
-}
-
-const AutocompleteTagInput = ({ noteTagsController }: Props) => {
-  const {
-    autocompleteInputFocused,
-    autocompleteSearchQuery,
-    autocompleteTagHintVisible,
-    autocompleteTagResults,
-    tags,
-    tagsContainerMaxWidth,
-  } = noteTagsController
-
-  const [dropdownVisible, setDropdownVisible] = useState(false)
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
-
-  const containerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
-    setDropdownVisible(visible)
-    noteTagsController.clearAutocompleteSearch()
-  })
-
-  const showDropdown = () => {
-    const { clientHeight } = document.documentElement
-    const inputRect = inputRef.current?.getBoundingClientRect()
-    if (inputRect) {
-      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2)
-      setDropdownVisible(true)
-    }
-  }
-
-  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()
-    }
-  }
-
-  const onKeyDown: KeyboardEventHandler = (event) => {
-    switch (event.key) {
-      case 'Backspace':
-      case 'ArrowLeft':
-        if (autocompleteSearchQuery === '' && tags.length > 0) {
-          noteTagsController.setFocusedTagUuid(tags[tags.length - 1].uuid)
-        }
-        break
-      case 'ArrowDown':
-        event.preventDefault()
-        if (autocompleteTagResults.length > 0) {
-          noteTagsController.setFocusedTagResultUuid(autocompleteTagResults[0].uuid)
-        } else if (autocompleteTagHintVisible) {
-          noteTagsController.setAutocompleteTagHintFocused(true)
-        }
-        break
-      default:
-        return
-    }
-  }
-
-  const onFocus = () => {
-    showDropdown()
-    noteTagsController.setAutocompleteInputFocused(true)
-  }
-
-  const onBlur: FocusEventHandler = (event) => {
-    closeOnBlur(event)
-    noteTagsController.setAutocompleteInputFocused(false)
-  }
-
-  useEffect(() => {
-    if (autocompleteInputFocused) {
-      inputRef.current?.focus()
-    }
-  }, [autocompleteInputFocused])
-
-  return (
-    <div ref={containerRef}>
-      <form onSubmit={onFormSubmit} className={`${tags.length > 0 ? 'mt-2' : ''}`}>
-        <Disclosure open={dropdownVisible} onChange={showDropdown}>
-          <input
-            ref={inputRef}
-            className={`${tags.length > 0 ? 'w-80' : 'mr-10 w-70'} no-border h-7
-            bg-transparent text-xs text-text focus:border-b-2 focus:border-solid focus:border-info focus:shadow-none focus:outline-none`}
-            value={autocompleteSearchQuery}
-            onChange={onSearchQueryChange}
-            type="text"
-            placeholder="Add tag"
-            onBlur={onBlur}
-            onFocus={onFocus}
-            onKeyDown={onKeyDown}
-            tabIndex={tags.length === 0 ? 0 : -1}
-          />
-          {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
-            <DisclosurePanel
-              className={classNames(
-                tags.length > 0 ? 'w-80' : 'mr-10 w-70',
-                'absolute z-dropdown-menu flex flex-col rounded bg-default py-2 shadow-main',
-              )}
-              style={{
-                maxHeight: dropdownMaxHeight,
-                maxWidth: tagsContainerMaxWidth,
-              }}
-              onBlur={closeOnBlur}
-              tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-            >
-              <div className="md:overflow-y-auto">
-                {autocompleteTagResults.map((tagResult: SNTag) => (
-                  <AutocompleteTagResult
-                    key={tagResult.uuid}
-                    noteTagsController={noteTagsController}
-                    tagResult={tagResult}
-                    closeOnBlur={closeOnBlur}
-                  />
-                ))}
-              </div>
-              {autocompleteTagHintVisible && (
-                <AutocompleteTagHint noteTagsController={noteTagsController} closeOnBlur={closeOnBlur} />
-              )}
-            </DisclosurePanel>
-          )}
-        </Disclosure>
-      </form>
-    </div>
-  )
-}
-
-export default observer(AutocompleteTagInput)
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
@@ -1,102 +0,0 @@
-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 = {
-  noteTagsController: NoteTagsController
-  tagResult: SNTag
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
-}
-
-const AutocompleteTagResult = ({ noteTagsController, tagResult, closeOnBlur }: Props) => {
-  const { autocompleteSearchQuery, autocompleteTagHintVisible, autocompleteTagResults, focusedTagResultUuid } =
-    noteTagsController
-
-  const tagResultRef = useRef<HTMLButtonElement>(null)
-
-  const title = tagResult.title
-  const prefixTitle = noteTagsController.getPrefixTitle(tagResult)
-
-  const onTagOptionClick = async (tag: SNTag) => {
-    await noteTagsController.addTagToActiveNote(tag)
-    noteTagsController.clearAutocompleteSearch()
-    noteTagsController.setAutocompleteInputFocused(true)
-  }
-
-  const onKeyDown: KeyboardEventHandler = (event) => {
-    const tagResultIndex = noteTagsController.getTagIndex(tagResult, autocompleteTagResults)
-    switch (event.key) {
-      case 'ArrowUp':
-        event.preventDefault()
-        if (tagResultIndex === 0) {
-          noteTagsController.setAutocompleteInputFocused(true)
-        } else {
-          noteTagsController.focusPreviousTagResult(tagResult)
-        }
-        break
-      case 'ArrowDown':
-        event.preventDefault()
-        if (tagResultIndex === autocompleteTagResults.length - 1 && autocompleteTagHintVisible) {
-          noteTagsController.setAutocompleteTagHintFocused(true)
-        } else {
-          noteTagsController.focusNextTagResult(tagResult)
-        }
-        break
-      default:
-        return
-    }
-  }
-
-  const onFocus = () => {
-    noteTagsController.setFocusedTagResultUuid(tagResult.uuid)
-  }
-
-  const onBlur: FocusEventHandler = (event) => {
-    closeOnBlur(event)
-    noteTagsController.setFocusedTagResultUuid(undefined)
-  }
-
-  useEffect(() => {
-    if (focusedTagResultUuid === tagResult.uuid) {
-      tagResultRef.current?.focus()
-      noteTagsController.setFocusedTagResultUuid(undefined)
-    }
-  }, [noteTagsController, focusedTagResultUuid, tagResult])
-
-  return (
-    <button
-      ref={tagResultRef}
-      type="button"
-      className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info focus:text-info-contrast focus:shadow-none"
-      onClick={() => onTagOptionClick(tagResult)}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      tabIndex={-1}
-    >
-      <Icon type="hashtag" className="min-h-5 mr-2 min-w-5 text-neutral" />
-      <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">
-        {prefixTitle && <span className="text-passive-2">{prefixTitle}</span>}
-        {autocompleteSearchQuery === ''
-          ? title
-          : splitQueryInString(title, autocompleteSearchQuery).map((substring, index) => (
-              <span
-                key={index}
-                className={`${
-                  substring.toLowerCase() === autocompleteSearchQuery.toLowerCase()
-                    ? 'whitespace-pre-wrap font-bold'
-                    : 'whitespace-pre-wrap '
-                }`}
-              >
-                {substring}
-              </span>
-            ))}
-      </span>
-    </button>
-  )
-}
-
-export default observer(AutocompleteTagResult)
--- a/packages/web/src/javascripts/Constants/ElementIDs.ts
+++ b/packages/web/src/javascripts/Constants/ElementIDs.ts
@@ -10,4 +10,5 @@ export const ElementIds = {
  NoteTitleEditor: 'note-title-editor',
  RootId: 'app-group-root',
  NoteStatusTooltip: 'note-status-tooltip',
+  ItemLinkAutocompleteInput: 'item-link-autocomplete-input',
 } as const
--- a/packages/web/src/javascripts/Controllers/FilesController.ts
+++ b/packages/web/src/javascripts/Controllers/FilesController.ts
@@ -99,7 +99,7 @@ export class FilesController extends AbstractViewController {
  reloadAttachedFiles = () => {
    const note = this.notesController.firstSelectedNote
    if (note) {
-      this.attachedFiles = this.application.items.getFilesForNote(note)
+      this.attachedFiles = this.application.items.getSortedFilesForItem(note)
    }
  }

--- a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
+++ b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
@@ -29,10 +29,10 @@ import { CrossControllerEvent } from '../CrossControllerEvent'
 import { SearchOptionsController } from '../SearchOptionsController'
 import { SelectedItemsController } from '../SelectedItemsController'
 import { NotesController } from '../NotesController'
-import { NoteTagsController } from '../NoteTagsController'
 import { formatDateAndTimeForNote } from '@/Utils/DateUtils'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import dayjs from 'dayjs'
+import { LinkingController } from '../LinkingController'

 const MinNoteCellHeight = 51.0
 const DefaultListNumNotes = 20
@@ -85,7 +85,6 @@ export class ItemListController extends AbstractViewController implements Intern
    ;(this.searchOptionsController as unknown) = undefined
    ;(this.selectionController as unknown) = undefined
    ;(this.notesController as unknown) = undefined
-    ;(this.noteTagsController as unknown) = undefined
    ;(window.onresize as unknown) = undefined

    destroyAllObjectProperties(this)
@@ -97,7 +96,7 @@ export class ItemListController extends AbstractViewController implements Intern
    private searchOptionsController: SearchOptionsController,
    private selectionController: SelectedItemsController,
    private notesController: NotesController,
-    private noteTagsController: NoteTagsController,
+    private linkingController: LinkingController,
    eventBus: InternalEventBus,
  ) {
    super(application, eventBus)
@@ -228,13 +227,12 @@ export class ItemListController extends AbstractViewController implements Intern
    return this.application.itemControllerGroup.activeItemViewController
  }

-  public get activeControllerNote(): SNNote | undefined {
-    const activeController = this.getActiveItemController()
-    return activeController instanceof NoteViewController ? activeController.item : undefined
+  public get activeControllerItem() {
+    return this.getActiveItemController()?.item
  }

  async openNote(uuid: string): Promise<void> {
-    if (this.activeControllerNote?.uuid === uuid) {
+    if (this.activeControllerItem?.uuid === uuid) {
      return
    }

@@ -246,7 +244,7 @@ export class ItemListController extends AbstractViewController implements Intern

    await this.application.itemControllerGroup.createItemController(note)

-    this.noteTagsController.reloadTagsForCurrentNote()
+    this.linkingController.reloadAllLinks()

    await this.publishEventSync(CrossControllerEvent.ActiveEditorChanged)
  }
@@ -263,6 +261,8 @@ export class ItemListController extends AbstractViewController implements Intern
    }

    await this.application.itemControllerGroup.createItemController(file)
+
+    this.linkingController.reloadAllLinks()
  }

  setCompletedFullSync = (completed: boolean) => {
@@ -545,7 +545,7 @@ export class ItemListController extends AbstractViewController implements Intern

    await this.createNewNoteController(title)

-    this.noteTagsController.reloadTagsForCurrentNote()
+    this.linkingController.reloadAllLinks()
  }

  createPlaceholderNote = () => {
--- a/packages/web/src/javascripts/Controllers/LinkingController.tsx
+++ b/packages/web/src/javascripts/Controllers/LinkingController.tsx
@@ -0,0 +1,339 @@
+import { WebApplication } from '@/Application/Application'
+import { PopoverFileItemActionType } from '@/Components/AttachedFilesPopover/PopoverFileItemAction'
+import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
+import {
+  ApplicationEvent,
+  ContentType,
+  DecryptedItemInterface,
+  FileItem,
+  IconType,
+  InternalEventBus,
+  ItemContent,
+  naturalSort,
+  PrefKey,
+  SNNote,
+  SNTag,
+} from '@standardnotes/snjs'
+import { action, computed, makeObservable, observable } from 'mobx'
+import { AbstractViewController } from './Abstract/AbstractViewController'
+import { FilesController } from './FilesController'
+import { ItemListController } from './ItemList/ItemListController'
+import { NavigationController } from './Navigation/NavigationController'
+import { SelectedItemsController } from './SelectedItemsController'
+import { SubscriptionController } from './Subscription/SubscriptionController'
+
+export type LinkableItem = DecryptedItemInterface<ItemContent>
+
+export class LinkingController extends AbstractViewController {
+  tags: SNTag[] = []
+  files: FileItem[] = []
+  notesLinkedToItem: SNNote[] = []
+  notesLinkingToItem: SNNote[] = []
+  shouldLinkToParentFolders: boolean
+  isLinkingPanelOpen = false
+  private itemListController!: ItemListController
+  private filesController!: FilesController
+  private subscriptionController!: SubscriptionController
+
+  constructor(
+    application: WebApplication,
+    private navigationController: NavigationController,
+    private selectionController: SelectedItemsController,
+    eventBus: InternalEventBus,
+  ) {
+    super(application, eventBus)
+
+    makeObservable(this, {
+      tags: observable,
+      files: observable,
+      notesLinkedToItem: observable,
+      notesLinkingToItem: observable,
+      isLinkingPanelOpen: observable,
+
+      allLinkedItems: computed,
+      isEntitledToNoteLinking: computed,
+
+      setIsLinkingPanelOpen: action,
+      reloadLinkedFiles: action,
+      reloadLinkedTags: action,
+      reloadLinkedNotes: action,
+      reloadNotesLinkingToItem: action,
+    })
+
+    this.shouldLinkToParentFolders = application.getPreference(
+      PrefKey.NoteAddToParentFolders,
+      PrefDefaults[PrefKey.NoteAddToParentFolders],
+    )
+
+    this.disposers.push(
+      this.application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+        this.shouldLinkToParentFolders = this.application.getPreference(
+          PrefKey.NoteAddToParentFolders,
+          PrefDefaults[PrefKey.NoteAddToParentFolders],
+        )
+      }),
+    )
+  }
+
+  public setServicesPostConstruction(
+    itemListController: ItemListController,
+    filesController: FilesController,
+    subscriptionController: SubscriptionController,
+  ) {
+    this.itemListController = itemListController
+    this.filesController = filesController
+    this.subscriptionController = subscriptionController
+
+    this.disposers.push(
+      this.application.streamItems(ContentType.File, () => {
+        this.reloadLinkedFiles()
+      }),
+      this.application.streamItems(ContentType.Tag, () => {
+        this.reloadLinkedTags()
+      }),
+      this.application.streamItems(ContentType.Note, () => {
+        this.reloadLinkedNotes()
+        this.reloadNotesLinkingToItem()
+      }),
+    )
+  }
+
+  get isEntitledToNoteLinking() {
+    return !!this.subscriptionController.userSubscription
+  }
+
+  setIsLinkingPanelOpen = (open: boolean) => {
+    this.isLinkingPanelOpen = open
+  }
+
+  get allLinkedItems() {
+    return [...this.tags, ...this.files, ...this.notesLinkedToItem]
+  }
+
+  get activeItem() {
+    return this.itemListController.activeControllerItem
+  }
+
+  reloadAllLinks() {
+    this.reloadLinkedFiles()
+    this.reloadLinkedTags()
+    this.reloadLinkedNotes()
+    this.reloadNotesLinkingToItem()
+  }
+
+  reloadLinkedFiles() {
+    if (this.activeItem) {
+      const files = this.application.items.getSortedFilesForItem(this.activeItem)
+      this.files = files
+    }
+  }
+
+  reloadLinkedTags() {
+    if (this.activeItem) {
+      const tags = this.application.items.getSortedTagsForItem(this.activeItem)
+      this.tags = tags
+    }
+  }
+
+  reloadLinkedNotes() {
+    if (this.activeItem) {
+      const notes = this.application.items.getSortedLinkedNotesForItem(this.activeItem)
+      this.notesLinkedToItem = notes
+    }
+  }
+
+  reloadNotesLinkingToItem() {
+    if (this.activeItem) {
+      const notes = this.application.items.getSortedNotesLinkingToItem(this.activeItem)
+      this.notesLinkingToItem = notes
+    }
+  }
+
+  getTitleForLinkedTag = (item: LinkableItem) => {
+    const isTag = item instanceof SNTag
+
+    if (!isTag) {
+      return
+    }
+
+    const titlePrefix = this.application.items.getTagPrefixTitle(item)
+    const longTitle = this.application.items.getTagLongTitle(item)
+    return {
+      titlePrefix,
+      longTitle,
+    }
+  }
+
+  getLinkedItemIcon = (item: LinkableItem): [IconType, string] => {
+    if (item instanceof SNNote) {
+      const editorForNote = this.application.componentManager.editorForNote(item)
+      const [icon, tint] = this.application.iconsController.getIconAndTintForNoteType(
+        editorForNote?.package_info.note_type,
+      )
+      const className = `text-accessory-tint-${tint}`
+      return [icon, className]
+    } else if (item instanceof FileItem) {
+      const icon = this.application.iconsController.getIconForFileType(item.mimeType)
+      return [icon, 'text-info']
+    }
+
+    return ['hashtag', 'text-info']
+  }
+
+  activateItem = async (item: LinkableItem): Promise<AppPaneId | undefined> => {
+    this.setIsLinkingPanelOpen(false)
+
+    if (item instanceof SNTag) {
+      await this.navigationController.setSelectedTag(item)
+      return AppPaneId.Items
+    } else if (item instanceof SNNote) {
+      await this.navigationController.selectHomeNavigationView()
+      const { didSelect } = await this.selectionController.selectItem(item.uuid, true)
+      if (didSelect) {
+        return AppPaneId.Editor
+      }
+    } else if (item instanceof FileItem) {
+      await this.filesController.handleFileAction({
+        type: PopoverFileItemActionType.PreviewFile,
+        payload: {
+          file: item,
+          otherFiles: [],
+        },
+      })
+    }
+
+    return undefined
+  }
+
+  unlinkItemFromSelectedItem = async (itemToUnlink: LinkableItem) => {
+    const selectedItem = this.selectionController.firstSelectedItem
+
+    if (!selectedItem) {
+      return
+    }
+
+    const selectedItemReferencesItemToUnlink =
+      this.application.items.relationshipTypeForItems(selectedItem, itemToUnlink) === 'direct'
+
+    if (selectedItemReferencesItemToUnlink) {
+      await this.application.items.unlinkItem(selectedItem, itemToUnlink)
+    } else {
+      await this.application.items.unlinkItem(itemToUnlink, selectedItem)
+    }
+
+    void this.application.sync.sync()
+    this.reloadAllLinks()
+  }
+
+  linkItemToSelectedItem = async (itemToLink: LinkableItem) => {
+    const selectedItem = this.selectionController.firstSelectedItem
+
+    if (itemToLink instanceof SNTag) {
+      await this.addTagToActiveItem(itemToLink)
+    }
+
+    if (selectedItem instanceof SNNote) {
+      if (itemToLink instanceof FileItem) {
+        await this.application.items.associateFileWithNote(itemToLink, selectedItem)
+      } else if (itemToLink instanceof SNNote && this.isEntitledToNoteLinking) {
+        await this.application.items.linkNoteToNote(selectedItem, itemToLink)
+      }
+    } else if (selectedItem instanceof FileItem) {
+      if (itemToLink instanceof SNNote) {
+        await this.application.items.associateFileWithNote(selectedItem, itemToLink)
+      } else if (itemToLink instanceof FileItem) {
+        await this.application.items.linkFileToFile(itemToLink, selectedItem)
+      }
+    }
+
+    void this.application.sync.sync()
+    this.reloadAllLinks()
+  }
+
+  createAndAddNewTag = async (title: string) => {
+    const newTag = await this.application.mutator.findOrCreateTag(title)
+    await this.addTagToActiveItem(newTag)
+  }
+
+  addTagToActiveItem = async (tag: SNTag) => {
+    const activeItem = this.itemListController.activeControllerItem
+
+    if (!activeItem) {
+      return
+    }
+
+    if (activeItem instanceof SNNote) {
+      await this.application.items.addTagToNote(activeItem, tag, this.shouldLinkToParentFolders)
+    } else if (activeItem instanceof FileItem) {
+      await this.application.items.addTagToFile(activeItem, tag, this.shouldLinkToParentFolders)
+    }
+
+    this.reloadLinkedTags()
+    this.application.sync.sync().catch(console.error)
+  }
+
+  getSearchResults = (searchQuery: string) => {
+    if (!searchQuery.length) {
+      return {
+        linkedResults: [],
+        unlinkedResults: [],
+        shouldShowCreateTag: false,
+      }
+    }
+
+    const searchResults = naturalSort(
+      this.application.items.getItems([ContentType.Note, ContentType.File, ContentType.Tag]).filter((item) => {
+        const title = item instanceof SNTag ? this.application.items.getTagLongTitle(item) : item.title
+        const matchesQuery = title?.toLowerCase().includes(searchQuery.toLowerCase())
+        const isNotActiveItem = this.activeItem?.uuid !== item.uuid
+        const isArchivedOrTrashed = item.archived || item.trashed
+        return matchesQuery && isNotActiveItem && !isArchivedOrTrashed
+      }),
+      'title',
+    )
+
+    const isAlreadyLinked = (item: LinkableItem) => {
+      if (!this.activeItem) {
+        return false
+      }
+      const isItemReferencedByActiveItem = this.application.items
+        .itemsReferencingItem(item)
+        .some((linkedItem) => linkedItem.uuid === this.activeItem?.uuid)
+      const isActiveItemReferencedByItem = this.application.items
+        .itemsReferencingItem(this.activeItem)
+        .some((linkedItem) => linkedItem.uuid === item.uuid)
+      const isAlreadyLinkedToItem =
+        isItemReferencedByActiveItem || (item.content_type !== ContentType.Note && isActiveItemReferencedByItem)
+      return isAlreadyLinkedToItem
+    }
+
+    const prioritizeTagResult = (
+      itemA: DecryptedItemInterface<ItemContent>,
+      itemB: DecryptedItemInterface<ItemContent>,
+    ) => {
+      if (itemA.content_type === ContentType.Tag && itemB.content_type !== ContentType.Tag) {
+        return -1
+      }
+      if (itemB.content_type === ContentType.Tag && itemA.content_type !== ContentType.Tag) {
+        return 1
+      }
+      return 0
+    }
+
+    const unlinkedResults = searchResults
+      .slice(0, 20)
+      .filter((item) => !isAlreadyLinked(item))
+      .sort(prioritizeTagResult)
+    const linkedResults = searchResults.filter(isAlreadyLinked).slice(0, 20)
+    const isResultExistingTag = (result: LinkableItem) =>
+      result.content_type === ContentType.Tag && result.title === searchQuery
+    const shouldShowCreateTag = !linkedResults.find(isResultExistingTag) && !unlinkedResults.find(isResultExistingTag)
+
+    return {
+      unlinkedResults,
+      linkedResults,
+      shouldShowCreateTag,
+    }
+  }
+}
--- a/packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts
+++ b/packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts
@@ -394,10 +394,18 @@ export class NavigationController extends AbstractViewController {
    await this.setSelectedTag(this.homeNavigationView)
  }

+  public async selectFilesView() {
+    await this.setSelectedTag(this.filesNavigationView)
+  }
+
  get homeNavigationView(): SmartView {
    return this.smartViews[0]
  }

+  get filesNavigationView(): SmartView {
+    return this.smartViews.find((view) => view.uuid === SystemViewId.Files) as SmartView
+  }
+
  private setSelectedTagInstance(tag: AnyTag | undefined): void {
    runInAction(() => (this.selected_ = tag))
  }
--- a/packages/web/src/javascripts/Controllers/NoteTagsController.ts
+++ b/packages/web/src/javascripts/Controllers/NoteTagsController.ts
@@ -1,244 +0,0 @@
-import { ElementIds } from '@/Constants/ElementIDs'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { destroyAllObjectProperties } from '@/Utils'
-import {
-  ApplicationEvent,
-  ContentType,
-  InternalEventBus,
-  PrefKey,
-  SNNote,
-  SNTag,
-  UuidString,
-} from '@standardnotes/snjs'
-import { action, computed, makeObservable, observable } from 'mobx'
-import { WebApplication } from '../Application/Application'
-import { AbstractViewController } from './Abstract/AbstractViewController'
-import { ItemListController } from './ItemList/ItemListController'
-
-export class NoteTagsController extends AbstractViewController {
-  autocompleteInputFocused = false
-  autocompleteSearchQuery = ''
-  autocompleteTagHintFocused = false
-  autocompleteTagResults: SNTag[] = []
-  focusedTagResultUuid: UuidString | undefined = undefined
-  focusedTagUuid: UuidString | undefined = undefined
-  tags: SNTag[] = []
-  tagsContainerMaxWidth: number | 'auto' = 0
-  addNoteToParentFolders: boolean
-  private itemListController!: ItemListController
-
-  override deinit() {
-    super.deinit()
-    ;(this.tags as unknown) = undefined
-    ;(this.autocompleteTagResults as unknown) = undefined
-    ;(this.itemListController as unknown) = undefined
-
-    destroyAllObjectProperties(this)
-  }
-
-  constructor(application: WebApplication, eventBus: InternalEventBus) {
-    super(application, eventBus)
-
-    makeObservable(this, {
-      autocompleteInputFocused: observable,
-      autocompleteSearchQuery: observable,
-      autocompleteTagHintFocused: observable,
-      autocompleteTagResults: observable,
-      focusedTagUuid: observable,
-      focusedTagResultUuid: observable,
-      tags: observable,
-      tagsContainerMaxWidth: observable,
-
-      autocompleteTagHintVisible: computed,
-
-      setAutocompleteInputFocused: action,
-      setAutocompleteSearchQuery: action,
-      setAutocompleteTagHintFocused: action,
-      setAutocompleteTagResults: action,
-      setFocusedTagResultUuid: action,
-      setFocusedTagUuid: action,
-      setTags: action,
-      setTagsContainerMaxWidth: action,
-    })
-
-    this.addNoteToParentFolders = application.getPreference(
-      PrefKey.NoteAddToParentFolders,
-      PrefDefaults[PrefKey.NoteAddToParentFolders],
-    )
-  }
-
-  public setServicesPostConstruction(itemListController: ItemListController) {
-    this.itemListController = itemListController
-
-    this.disposers.push(
-      this.application.streamItems(ContentType.Tag, () => {
-        this.reloadTagsForCurrentNote()
-      }),
-      this.application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
-        this.addNoteToParentFolders = this.application.getPreference(
-          PrefKey.NoteAddToParentFolders,
-          PrefDefaults[PrefKey.NoteAddToParentFolders],
-        )
-      }),
-    )
-  }
-
-  get autocompleteTagHintVisible(): boolean {
-    return (
-      this.autocompleteSearchQuery !== '' &&
-      !this.autocompleteTagResults.some((tagResult) => tagResult.title === this.autocompleteSearchQuery)
-    )
-  }
-
-  setAutocompleteInputFocused(focused: boolean): void {
-    this.autocompleteInputFocused = focused
-  }
-
-  setAutocompleteSearchQuery(query: string): void {
-    this.autocompleteSearchQuery = query
-  }
-
-  setAutocompleteTagHintFocused(focused: boolean): void {
-    this.autocompleteTagHintFocused = focused
-  }
-
-  setAutocompleteTagResults(results: SNTag[]): void {
-    this.autocompleteTagResults = results
-  }
-
-  setFocusedTagUuid(tagUuid: UuidString | undefined): void {
-    this.focusedTagUuid = tagUuid
-  }
-
-  setFocusedTagResultUuid(tagUuid: UuidString | undefined): void {
-    this.focusedTagResultUuid = tagUuid
-  }
-
-  setTags(tags: SNTag[]): void {
-    this.tags = tags
-  }
-
-  setTagsContainerMaxWidth(width: number): void {
-    this.tagsContainerMaxWidth = width
-  }
-
-  clearAutocompleteSearch(): void {
-    this.setAutocompleteSearchQuery('')
-    this.setAutocompleteTagResults([])
-  }
-
-  async createAndAddNewTag(): Promise<void> {
-    const newTag = await this.application.mutator.findOrCreateTag(this.autocompleteSearchQuery)
-    await this.addTagToActiveNote(newTag)
-    this.clearAutocompleteSearch()
-  }
-
-  focusNextTag(tag: SNTag): void {
-    const nextTagIndex = this.getTagIndex(tag, this.tags) + 1
-    if (nextTagIndex > -1 && this.tags.length > nextTagIndex) {
-      const nextTag = this.tags[nextTagIndex]
-      this.setFocusedTagUuid(nextTag.uuid)
-    }
-  }
-
-  focusNextTagResult(tagResult: SNTag): void {
-    const nextTagResultIndex = this.getTagIndex(tagResult, this.autocompleteTagResults) + 1
-    if (nextTagResultIndex > -1 && this.autocompleteTagResults.length > nextTagResultIndex) {
-      const nextTagResult = this.autocompleteTagResults[nextTagResultIndex]
-      this.setFocusedTagResultUuid(nextTagResult.uuid)
-    }
-  }
-
-  focusPreviousTag(tag: SNTag): void {
-    const previousTagIndex = this.getTagIndex(tag, this.tags) - 1
-    if (previousTagIndex > -1 && this.tags.length > previousTagIndex) {
-      const previousTag = this.tags[previousTagIndex]
-      this.setFocusedTagUuid(previousTag.uuid)
-    }
-  }
-
-  focusPreviousTagResult(tagResult: SNTag): void {
-    const previousTagResultIndex = this.getTagIndex(tagResult, this.autocompleteTagResults) - 1
-    if (previousTagResultIndex > -1 && this.autocompleteTagResults.length > previousTagResultIndex) {
-      const previousTagResult = this.autocompleteTagResults[previousTagResultIndex]
-      this.setFocusedTagResultUuid(previousTagResult.uuid)
-    }
-  }
-
-  searchActiveNoteAutocompleteTags(): void {
-    const newResults = this.application.items.searchTags(
-      this.autocompleteSearchQuery,
-      this.itemListController.activeControllerNote,
-    )
-    this.setAutocompleteTagResults(newResults)
-  }
-
-  getTagIndex(tag: SNTag, tagsArr: SNTag[]): number {
-    return tagsArr.findIndex((t) => t.uuid === tag.uuid)
-  }
-
-  reloadTagsForCurrentNote(): void {
-    const activeNote = this.itemListController.activeControllerNote
-
-    if (activeNote) {
-      const tags = this.application.items.getSortedTagsForNote(activeNote)
-      this.setTags(tags)
-    }
-  }
-
-  reloadTagsContainerMaxWidth(): void {
-    const editorWidth = document.getElementById(ElementIds.EditorColumn)?.clientWidth
-    if (editorWidth) {
-      this.setTagsContainerMaxWidth(editorWidth)
-    }
-  }
-
-  async addTagToActiveNote(tag: SNTag): Promise<void> {
-    const activeNote = this.itemListController.activeControllerNote
-
-    if (activeNote) {
-      await this.application.items.addTagToNote(activeNote, tag, this.addNoteToParentFolders)
-      this.application.sync.sync().catch(console.error)
-      this.reloadTagsForCurrentNote()
-    }
-  }
-
-  async removeTagFromActiveNote(tag: SNTag): Promise<void> {
-    const activeNote = this.itemListController.activeControllerNote
-
-    if (activeNote) {
-      await this.application.mutator.changeItem(tag, (mutator) => {
-        mutator.removeItemAsRelationship(activeNote)
-      })
-      this.application.sync.sync().catch(console.error)
-      this.reloadTagsForCurrentNote()
-    }
-  }
-
-  getSortedTagsForNote(note: SNNote): SNTag[] {
-    const tags = this.application.items.getSortedTagsForNote(note)
-
-    const sortFunction = (tagA: SNTag, tagB: SNTag): number => {
-      const a = this.getLongTitle(tagA)
-      const b = this.getLongTitle(tagB)
-
-      if (a < b) {
-        return -1
-      }
-      if (b > a) {
-        return 1
-      }
-      return 0
-    }
-
-    return tags.sort(sortFunction)
-  }
-
-  getPrefixTitle(tag: SNTag): string | undefined {
-    return this.application.items.getTagPrefixTitle(tag)
-  }
-
-  getLongTitle(tag: SNTag): string {
-    return this.application.items.getTagLongTitle(tag)
-  }
-}
--- a/packages/web/src/javascripts/Controllers/NotesController.ts
+++ b/packages/web/src/javascripts/Controllers/NotesController.ts
@@ -8,7 +8,6 @@ import { WebApplication } from '../Application/Application'
 import { AbstractViewController } from './Abstract/AbstractViewController'
 import { SelectedItemsController } from './SelectedItemsController'
 import { ItemListController } from './ItemList/ItemListController'
-import { NoteTagsController } from './NoteTagsController'
 import { NavigationController } from './Navigation/NavigationController'

 export class NotesController extends AbstractViewController {
@@ -27,7 +26,6 @@ export class NotesController extends AbstractViewController {
    super.deinit()
    ;(this.lastSelectedNote as unknown) = undefined
    ;(this.selectionController as unknown) = undefined
-    ;(this.noteTagsController as unknown) = undefined
    ;(this.navigationController as unknown) = undefined
    ;(this.itemListController as unknown) = undefined

@@ -37,7 +35,6 @@ export class NotesController extends AbstractViewController {
  constructor(
    application: WebApplication,
    private selectionController: SelectedItemsController,
-    private noteTagsController: NoteTagsController,
    private navigationController: NavigationController,
    eventBus: InternalEventBus,
  ) {
--- a/packages/web/src/javascripts/Controllers/SelectedItemsController.ts
+++ b/packages/web/src/javascripts/Controllers/SelectedItemsController.ts
@@ -34,6 +34,7 @@ export class SelectedItemsController extends AbstractViewController {
      selectedItemsCount: computed,
      selectedFiles: computed,
      selectedFilesCount: computed,
+      firstSelectedItem: computed,

      selectItem: action,
      setSelectedItems: action,
@@ -79,6 +80,10 @@ export class SelectedItemsController extends AbstractViewController {
    return this.selectedFiles.length
  }

+  get firstSelectedItem() {
+    return this.getSelectedItems()[0]
+  }
+
  getSelectedItems = <T extends ListableContentItem = ListableContentItem>(contentType?: ContentType): T[] => {
    return Object.values(this.selectedItems).filter((item) => {
      return !contentType ? true : item.content_type === contentType
--- a/packages/web/src/javascripts/Controllers/ViewControllerManager.ts
+++ b/packages/web/src/javascripts/Controllers/ViewControllerManager.ts
@@ -17,7 +17,6 @@ import { FeaturesController } from './FeaturesController'
 import { FilesController } from './FilesController'
 import { NotesController } from './NotesController'
 import { ItemListController } from './ItemList/ItemListController'
-import { NoteTagsController } from './NoteTagsController'
 import { NoAccountWarningController } from './NoAccountWarningController'
 import { PreferencesController } from './PreferencesController'
 import { PurchaseFlowController } from './PurchaseFlow/PurchaseFlowController'
@@ -31,6 +30,7 @@ import { SelectedItemsController } from './SelectedItemsController'
 import { HistoryModalController } from './NoteHistory/HistoryModalController'
 import { PreferenceId } from '@/Components/Preferences/PreferencesMenu'
 import { AccountMenuPane } from '@/Components/AccountMenu/AccountMenuPane'
+import { LinkingController } from './LinkingController'

 export class ViewControllerManager {
  readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
@@ -47,7 +47,6 @@ export class ViewControllerManager {
  readonly noAccountWarningController: NoAccountWarningController
  readonly notesController: NotesController
  readonly itemListController: ItemListController
-  readonly noteTagsController: NoteTagsController
  readonly preferencesController = new PreferencesController()
  readonly purchaseFlowController: PurchaseFlowController
  readonly quickSettingsMenuController = new QuickSettingsController()
@@ -57,6 +56,7 @@ export class ViewControllerManager {
  readonly navigationController: NavigationController
  readonly selectionController: SelectedItemsController
  readonly historyModalController: HistoryModalController
+  readonly linkingController: LinkingController

  public isSessionsModalVisible = false

@@ -74,8 +74,6 @@ export class ViewControllerManager {

    this.selectionController = new SelectedItemsController(application, this.eventBus)

-    this.noteTagsController = new NoteTagsController(application, this.eventBus)
-
    this.featuresController = new FeaturesController(application, this.eventBus)

    this.navigationController = new NavigationController(application, this.featuresController, this.eventBus)
@@ -83,25 +81,30 @@ export class ViewControllerManager {
    this.notesController = new NotesController(
      application,
      this.selectionController,
-      this.noteTagsController,
      this.navigationController,
      this.eventBus,
    )

    this.searchOptionsController = new SearchOptionsController(application, this.eventBus)

+    this.linkingController = new LinkingController(
+      application,
+      this.navigationController,
+      this.selectionController,
+      this.eventBus,
+    )
+
    this.itemListController = new ItemListController(
      application,
      this.navigationController,
      this.searchOptionsController,
      this.selectionController,
      this.notesController,
-      this.noteTagsController,
+      this.linkingController,
      this.eventBus,
    )

    this.notesController.setServicesPostConstruction(this.itemListController)
-    this.noteTagsController.setServicesPostConstruction(this.itemListController)
    this.selectionController.setServicesPostConstruction(this.itemListController)

    this.noAccountWarningController = new NoAccountWarningController(application, this.eventBus)
@@ -119,6 +122,12 @@ export class ViewControllerManager {
      this.eventBus,
    )

+    this.linkingController.setServicesPostConstruction(
+      this.itemListController,
+      this.filesController,
+      this.subscriptionController,
+    )
+
    this.historyModalController = new HistoryModalController(this.application, this.eventBus)

    this.addAppEventObserver()
@@ -180,8 +189,8 @@ export class ViewControllerManager {
    this.itemListController.deinit()
    ;(this.itemListController as unknown) = undefined

-    this.noteTagsController.deinit()
-    ;(this.noteTagsController as unknown) = undefined
+    this.linkingController.deinit()
+    ;(this.linkingController as unknown) = undefined

    this.purchaseFlowController.deinit()
    ;(this.purchaseFlowController as unknown) = undefined
--- a/packages/web/src/javascripts/Hooks/mergeRefs.ts
+++ b/packages/web/src/javascripts/Hooks/mergeRefs.ts
@@ -0,0 +1,37 @@
+/**
+MIT License
+
+Copyright (c) 2020 Greg Bergé
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import { MutableRefObject, LegacyRef, RefCallback } from 'react'
+
+export function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T>>): RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref != null) {
+        ;(ref as MutableRefObject<T | null>).current = value
+      }
+    })
+  }
+}