diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx index a3fcf2ee9..51ae50cc4 100644 --- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx +++ b/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 (