feat: Added "Add tag" option to file context menu

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

@@ -1,4 +1,6 @@
 import { FilesController } from '@/Controllers/FilesController'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
@@ -9,36 +11,47 @@ import FileMenuOptions from './FileMenuOptions'
 type Props = {
   filesController: FilesController
   selectionController: SelectedItemsController
+  linkingController: LinkingController
+  navigationController: NavigationController
 }
 
-const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, selectionController }) => {
-  const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController
-  const { selectedFiles } = selectionController
+const FileContextMenu: FunctionComponent<Props> = observer(
+  ({ filesController, selectionController, linkingController, navigationController }) => {
+    const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController
+    const { selectedFiles } = selectionController
 
-  return (
-    <Popover
-      open={showFileContextMenu}
-      anchorPoint={fileContextMenuLocation}
-      togglePopover={() => setShowFileContextMenu(!showFileContextMenu)}
-      align="start"
-      className="py-2"
-    >
-      <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
-        <FileMenuOptions
-          filesController={filesController}
-          selectedFiles={selectedFiles}
-          closeMenu={() => setShowFileContextMenu(false)}
-          shouldShowRenameOption={false}
-          shouldShowAttachOption={false}
-        />
-      </Menu>
-    </Popover>
-  )
-})
+    return (
+      <Popover
+        open={showFileContextMenu}
+        anchorPoint={fileContextMenuLocation}
+        togglePopover={() => setShowFileContextMenu(!showFileContextMenu)}
+        align="start"
+        className="py-2"
+      >
+        <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
+          <FileMenuOptions
+            filesController={filesController}
+            linkingController={linkingController}
+            navigationController={navigationController}
+            selectedFiles={selectedFiles}
+            closeMenu={() => setShowFileContextMenu(false)}
+            shouldShowRenameOption={false}
+            shouldShowAttachOption={false}
+          />
+        </Menu>
+      </Popover>
+    )
+  },
+)
 
 FileContextMenu.displayName = 'FileContextMenu'
 
-const FileContextMenuWrapper: FunctionComponent<Props> = ({ filesController, selectionController }) => {
+const FileContextMenuWrapper: FunctionComponent<Props> = ({
+  filesController,
+  linkingController,
+  navigationController,
+  selectionController,
+}) => {
   const { showFileContextMenu } = filesController
   const { selectedFiles } = selectionController
 
@@ -48,7 +61,14 @@ const FileContextMenuWrapper: FunctionComponent<Props> = ({ filesController, sel
     return null
   }
 
-  return <FileContextMenu filesController={filesController} selectionController={selectionController} />
+  return (
+    <FileContextMenu
+      filesController={filesController}
+      linkingController={linkingController}
+      navigationController={navigationController}
+      selectionController={selectionController}
+    />
+  )
 }
 
 export default observer(FileContextMenuWrapper)

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -11,10 +11,16 @@ import MenuItem from '../Menu/MenuItem'
 import { FileContextMenuBackupOption } from './FileContextMenuBackupOption'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import { FileItem } from '@standardnotes/snjs'
+import AddTagOption from '../NotesOptions/AddTagOption'
+import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 
 type Props = {
   closeMenu: () => void
   filesController: FilesController
+  linkingController: LinkingController
+  navigationController: NavigationController
   isFileAttachedToNote?: boolean
   renameToggleCallback?: (isRenamingFile: boolean) => void
   shouldShowRenameOption: boolean
@@ -25,6 +31,8 @@ type Props = {
 const FileMenuOptions: FunctionComponent<Props> = ({
   closeMenu,
   filesController,
+  linkingController,
+  navigationController,
   isFileAttachedToNote,
   renameToggleCallback,
   shouldShowRenameOption,
@@ -82,6 +90,12 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           ) : null}
         </>
       )}
+      <AddTagOption
+        navigationController={navigationController}
+        linkingController={linkingController}
+        selectedItems={selectedFiles}
+        iconClassName={`text-neutral mr-2 ${MenuItemIconSize}`}
+      />
       <MenuSwitchButtonItem
         checked={hasProtectedFiles}
         onChange={(hasProtectedFiles) => {

packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx

@@ -6,13 +6,22 @@ import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import Popover from '../Popover/Popover'
 import RoundIconButton from '../Button/RoundIconButton'
 import Menu from '../Menu/Menu'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 
 type Props = {
   filesController: FilesController
   selectionController: SelectedItemsController
+  linkingController: LinkingController
+  navigationController: NavigationController
 }
 
-const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
+const FilesOptionsPanel = ({
+  filesController,
+  linkingController,
+  navigationController,
+  selectionController,
+}: Props) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -25,6 +34,8 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
         <Menu a11yLabel="File options panel" isOpen={isOpen}>
           <FileMenuOptions
             filesController={filesController}
+            linkingController={linkingController}
+            navigationController={navigationController}
             selectedFiles={selectionController.selectedFiles}
             closeMenu={() => {
               setIsOpen(false)