feat: Added linked items container & autocomplete input to file preview modal

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -13,6 +13,7 @@ import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'
 import FileMenuOptions from '../FileContextMenu/FileMenuOptions'
 import Menu from '../Menu/Menu'
 import Popover from '../Popover/Popover'
+import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 
 type Props = {
   application: WebApplication
@@ -26,6 +27,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
     return null
   }
 
+  const [showLinkedBubblesContainer, setShowLinkedBubblesContainer] = useState(false)
   const [showOptionsMenu, setShowOptionsMenu] = useState(false)
   const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
   const menuButtonRef = useRef<HTMLButtonElement>(null)
@@ -96,6 +98,12 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
               <span className="ml-3 font-medium">{currentFile.name}</span>
             </div>
             <div className="flex items-center">
+              <button
+                className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
+                onClick={() => setShowLinkedBubblesContainer((show) => !show)}
+              >
+                <Icon type="link" className="text-neutral" />
+              </button>
               <button
                 className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
                 onClick={() => setShowOptionsMenu((show) => !show)}
@@ -144,6 +152,14 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
               </button>
             </div>
           </div>
+          {showLinkedBubblesContainer && (
+            <div className="-mt-1 border-b border-border py-1.5 px-3.5">
+              <LinkedItemBubblesContainer
+                linkingController={viewControllerManager.linkingController}
+                item={currentFile}
+              />
+            </div>
+          )}
           <div className="flex min-h-0 flex-grow">
             <div className="relative flex max-w-full flex-grow items-center justify-center">
               <FilePreview file={currentFile} application={application} key={currentFile.uuid} />

packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx

@@ -117,7 +117,7 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
               />
             </div>
           </div>
-          <LinkedItemBubblesContainer linkingController={viewControllerManager.linkingController} />
+          <LinkedItemBubblesContainer item={file} linkingController={viewControllerManager.linkingController} />
         </div>
       </div>
       <div className="flex min-h-0 flex-grow flex-col">

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
-import { ContentType } from '@standardnotes/snjs'
+import { ContentType, DecryptedItemInterface } from '@standardnotes/snjs'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { ItemLink } from '@/Utils/Items/Search/ItemLink'
 import { FOCUS_TAGS_INPUT_COMMAND, keyboardStringForShortcut } from '@standardnotes/ui-services'
@@ -15,17 +15,18 @@ import { useItemLinks } from '@/Hooks/useItemLinks'
 
 type Props = {
   linkingController: LinkingController
+  item: DecryptedItemInterface
 }
 
-const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
+const LinkedItemBubblesContainer = ({ item, linkingController }: Props) => {
   const { toggleAppPane } = useResponsiveAppPane()
 
   const commandService = useCommandService()
 
-  const { activeItem, unlinkItemFromSelectedItem: unlinkItem, activateItem } = linkingController
+  const { unlinkItemFromSelectedItem: unlinkItem, activateItem } = linkingController
 
   const { notesLinkedToItem, filesLinkedToItem, tagsLinkedToItem, notesLinkingToItem, filesLinkingToItem } =
-    useItemLinks(activeItem)
+    useItemLinks(item)
 
   const allItemsLinkedToItem: ItemLink[] = useMemo(
     () => new Array<ItemLink>().concat(notesLinkedToItem, filesLinkedToItem, tagsLinkedToItem),
@@ -97,10 +98,6 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
     )
   }
 
-  if (!activeItem) {
-    return null
-  }
-
   return (
     <div
       className={classNames(
@@ -130,7 +127,7 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
         focusPreviousItem={focusPreviousItem}
         setFocusedId={setFocusedId}
         hoverLabel={`Focus input to add a link (${shortcut})`}
-        item={activeItem}
+        item={item}
       />
     </div>
   )

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

@@ -905,7 +905,10 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
                 </div>
               )}
             </div>
-            <LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
+            <LinkedItemBubblesContainer
+              item={this.note}
+              linkingController={this.viewControllerManager.linkingController}
+            />
           </div>
         )}