chore: only show links container toggle if container can be truncated (#2326)

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

@@ -1,4 +1,12 @@
-import { FormEventHandler, KeyboardEventHandler, useDeferredValue, useEffect, useRef } from 'react'
+import {
+  FormEventHandler,
+  ForwardedRef,
+  KeyboardEventHandler,
+  forwardRef,
+  useDeferredValue,
+  useEffect,
+  useRef,
+} from 'react'
 import { observer } from 'mobx-react-lite'
 import { classNames } from '@standardnotes/utils'
 import { LinkingController } from '@/Controllers/LinkingController'
@@ -13,6 +21,7 @@ import { Slot } from '@radix-ui/react-slot'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { KeyboardKey } from '@standardnotes/ui-services'
+import { mergeRefs } from '@/Hooks/mergeRefs'
 
 type Props = {
   linkingController: LinkingController
@@ -23,14 +32,11 @@ type Props = {
   item: DecryptedItem
 }
 
-const ItemLinkAutocompleteInput = ({
-  linkingController,
-  focusPreviousItem,
-  focusedId,
-  setFocusedId,
-  hoverLabel,
-  item,
-}: Props) => {
+const ItemLinkAutocompleteInput = forwardRef(
+  (
+    { linkingController, focusPreviousItem, focusedId, setFocusedId, hoverLabel, item }: Props,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+  ) => {
     const application = useApplication()
 
     const { getLinkedTagsForItem, linkItems, createAndAddNewTag, isEntitledToNoteLinking } = linkingController
@@ -89,7 +95,7 @@ const ItemLinkAutocompleteInput = ({
               )}
               title={hoverLabel}
               id={ElementIds.ItemLinkAutocompleteInput}
-            ref={inputRef}
+              ref={mergeRefs([inputRef, forwardedRef])}
               onFocus={handleFocus}
               onKeyDown={onKeyDown}
             />
@@ -135,6 +141,7 @@ const ItemLinkAutocompleteInput = ({
         </form>
       </div>
     )
-}
+  },
+)
 
 export default observer(ItemLinkAutocompleteInput)

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

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
 import { LinkingController } from '@/Controllers/LinkingController'
 import LinkedItemBubble from './LinkedItemBubble'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
@@ -112,6 +112,34 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
   const visibleItems = isCollapsed ? itemsToDisplay.slice(0, 5) : itemsToDisplay
   const nonVisibleItems = itemsToDisplay.length - visibleItems.length
 
+  const [canShowContainerToggle, setCanShowContainerToggle] = useState(false)
+  const linkInputRef = useRef<HTMLInputElement>(null)
+  const linkContainerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const container = linkContainerRef.current
+    const linkInput = linkInputRef.current
+
+    if (!container || !linkInput) {
+      return
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (container.clientHeight > linkInput.clientHeight) {
+        setCanShowContainerToggle(true)
+      } else {
+        setCanShowContainerToggle(false)
+      }
+    })
+
+    resizeObserver.observe(linkContainerRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  const shouldHideToggle = hideToggle || (!canShowContainerToggle && !isCollapsed)
+
   return (
     <div
       className={classNames(
@@ -126,6 +154,7 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
           allItemsLinkedToItem.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
           isCollapsed ? 'overflow-hidden' : 'flex-wrap',
         )}
+        ref={linkContainerRef}
       >
         {visibleItems.map((link) => (
           <LinkedItemBubble
@@ -148,9 +177,10 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
           setFocusedId={setFocusedId}
           hoverLabel={`Focus input to add a link (${shortcut})`}
           item={item}
+          ref={linkInputRef}
         />
       </div>
-      {itemsToDisplay.length > 0 && !hideToggle && (
+      {itemsToDisplay.length > 0 && !shouldHideToggle && (
         <RoundIconButton
           id="toggle-linking-container"
           label="Toggle linked items container"