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 (
0 && 'pt-2', + isCollapsed ? 'gap-4' : 'gap-1', )} > - {allItemsLinkedToItem - .concat(notesLinkingToItem) - .concat(filesLinkingToItem) - .map((link) => ( +
+ {visibleItems.map((link) => ( { isBidirectional={isItemBidirectionallyLinked(link)} /> ))} - + {isCollapsed && nonVisibleItems > 0 && and {nonVisibleItems} more...} + +
+ {itemsToDisplay.length > 0 && ( + { + setIsCollapsed((isCollapsed) => !isCollapsed) + }} + icon={isCollapsed ? 'chevron-down' : 'chevron-left'} + /> + )}
) }