feat: Added button to allow collapsing the linked items container

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

@@ -12,6 +12,7 @@ import { ItemLink } from '@/Utils/Items/Search/ItemLink'
 import { FOCUS_TAGS_INPUT_COMMAND, keyboardStringForShortcut } from '@standardnotes/ui-services'
 import { useCommandService } from '../CommandProvider'
 import { useItemLinks } from '@/Hooks/useItemLinks'
+import RoundIconButton from '../Button/RoundIconButton'
 
 type Props = {
   linkingController: LinkingController
@@ -98,17 +99,28 @@ const LinkedItemBubblesContainer = ({ item, linkingController }: Props) => {
     )
   }
 
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  const itemsToDisplay = allItemsLinkedToItem.concat(notesLinkingToItem).concat(filesLinkingToItem)
+  const visibleItems = isCollapsed ? itemsToDisplay.slice(0, 5) : itemsToDisplay
+  const nonVisibleItems = itemsToDisplay.length - visibleItems.length
+
   return (
     <div
       className={classNames(
-        'note-view-linking-container flex min-w-80 max-w-full flex-wrap items-center gap-2 bg-transparent md:-mr-2',
+        'flex w-full justify-between',
-        allItemsLinkedToItem.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
+        itemsToDisplay.length > 0 && 'pt-2',
+        isCollapsed ? 'gap-4' : 'gap-1',
       )}
     >
-      {allItemsLinkedToItem
+      <div
-        .concat(notesLinkingToItem)
+        className={classNames(
-        .concat(filesLinkingToItem)
+          'note-view-linking-container flex min-w-80 max-w-full items-center gap-2 bg-transparent md:-mr-2',
-        .map((link) => (
+          allItemsLinkedToItem.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
+          isCollapsed ? 'overflow-hidden' : 'flex-wrap',
+        )}
+      >
+        {visibleItems.map((link) => (
           <LinkedItemBubble
             link={link}
             key={link.id}
@@ -121,14 +133,25 @@ const LinkedItemBubblesContainer = ({ item, linkingController }: Props) => {
             isBidirectional={isItemBidirectionallyLinked(link)}
           />
         ))}
-      <ItemLinkAutocompleteInput
+        {isCollapsed && nonVisibleItems > 0 && <span className="flex-shrink-0">and {nonVisibleItems} more...</span>}
-        focusedId={focusedId}
+        <ItemLinkAutocompleteInput
-        linkingController={linkingController}
+          focusedId={focusedId}
-        focusPreviousItem={focusPreviousItem}
+          linkingController={linkingController}
-        setFocusedId={setFocusedId}
+          focusPreviousItem={focusPreviousItem}
-        hoverLabel={`Focus input to add a link (${shortcut})`}
+          setFocusedId={setFocusedId}
-        item={item}
+          hoverLabel={`Focus input to add a link (${shortcut})`}
-      />
+          item={item}
+        />
+      </div>
+      {itemsToDisplay.length > 0 && (
+        <RoundIconButton
+          label="Toggle linked items container"
+          onClick={() => {
+            setIsCollapsed((isCollapsed) => !isCollapsed)
+          }}
+          icon={isCollapsed ? 'chevron-down' : 'chevron-left'}
+        />
+      )}
     </div>
   )
 }