diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx index 4fd3f17d3f1..b9a7a877b22 100644 --- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx +++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx @@ -16,6 +16,8 @@ import RoundIconButton from '../Button/RoundIconButton' import VaultNameBadge from '../Vaults/VaultNameBadge' import LastEditedByBadge from '../Vaults/LastEditedByBadge' import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo' +import LinkedItemModalView from './LinkedItemModalView' +import Icon from '../Icon/Icon' type Props = { linkingController: LinkingController @@ -124,6 +126,7 @@ const LinkedItemBubblesContainer = ({ ) } + const [showAllItemsModal, setShowAllItemsModal] = useState(false) const itemsToDisplay = allItemsLinkedToItem.concat(notesLinkingToItem).concat(filesLinkingToItem) const ItemsToShowWhenCollapsed = 5 const [isCollapsed, setIsCollapsed] = useState( @@ -206,7 +209,22 @@ const LinkedItemBubblesContainer = ({ readonly={readonly} /> ))} - {isCollapsed && nonVisibleItems > 0 && and {nonVisibleItems} more...} + {isCollapsed && nonVisibleItems > 0 && ( + + )} {!readonly && ( )} + + setShowAllItemsModal(false)} + onUnlink={unlinkItem} + onActivate={async (item) => { + await activateItemAndTogglePane(item) + setShowAllItemsModal(false) + }} + /> ) } diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemModalView.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemModalView.tsx new file mode 100644 index 00000000000..a5070da4076 --- /dev/null +++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemModalView.tsx @@ -0,0 +1,60 @@ +import { observer } from 'mobx-react-lite' +import Modal from '../Modal/Modal' +import Icon from '../Icon/Icon' +import ModalOverlay from '../Modal/ModalOverlay' +import { ItemLink } from '@/Utils/Items/Search/ItemLink' +import { LinkableItem } from '@/Utils/Items/Search/LinkableItem' +import LinkedItemMeta from './LinkedItemMeta' + +type Props = { + items: ItemLink[] + readonly?: boolean + isOpen: boolean + onClose: () => void + onUnlink: (item: LinkableItem) => void + onActivate: (item: LinkableItem) => Promise +} + +const LinkedItemModalView = ({ items, readonly, isOpen, onClose, onUnlink, onActivate }: Props) => { + return ( + + +
+
+ {items.map((link) => ( +
+ + {!readonly && ( + + )} +
+ ))} +
+
+
+
+ ) +} + +export default observer(LinkedItemModalView) \ No newline at end of file