First commit to add a Modal about Linked notes

Author: diegorv

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 && <span className="flex-shrink-0">and {nonVisibleItems} more...</span>}
+        {isCollapsed && nonVisibleItems > 0 && (
+          <button 
+            onClick={() => setShowAllItemsModal(true)}
+            className={classNames(
+              'group h-6 cursor-pointer items-center rounded bg-passive-4-opacity-variant py-2 pl-1 pr-2 align-middle text-sm',
+              'text-text hover:bg-contrast focus:bg-contrast lg:text-xs', 'inline-flex'
+            )}
+          >
+            <Icon type="more" className={classNames('mr-1 flex-shrink-0', 'text-info')} size="small" />
+            <span className="flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
+              <span className="flex items-center gap-1">
+                More ({itemsToDisplay.length})
+              </span>
+            </span>
+          </button>
+        )}
         {!readonly && (
           <ItemLinkAutocompleteInput
             focusedId={focusedId}
@@ -228,6 +246,18 @@ const LinkedItemBubblesContainer = ({
           icon={isCollapsed ? 'chevron-down' : 'chevron-left'}
         />
       )}
+
+      <LinkedItemModalView
+        items={itemsToDisplay}
+        readonly={readonly}
+        isOpen={showAllItemsModal}
+        onClose={() => setShowAllItemsModal(false)}
+        onUnlink={unlinkItem}
+        onActivate={async (item) => {
+          await activateItemAndTogglePane(item)
+          setShowAllItemsModal(false)
+        }}
+      />
     </div>
   )
 }

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<void>
+}
+
+const LinkedItemModalView = ({ items, readonly, isOpen, onClose, onUnlink, onActivate }: Props) => {
+  return (
+    <ModalOverlay isOpen={isOpen} close={onClose}>
+      <Modal
+        title="All linked items"
+        close={onClose}
+        actions={[
+          {
+            label: 'Done',
+            onClick: onClose,
+            type: 'primary',
+            mobileSlot: 'right'
+          }
+        ]}
+      >
+        <div className="max-h-[60vh] overflow-y-auto px-4 py-4">
+          <div className="flex flex-col gap-2">
+            {items.map((link) => (
+              <div key={link.id} className="flex items-center justify-between gap-4 rounded bg-passive-4-opacity-variant p-2">
+                <button
+                  className="flex flex-grow items-center gap-2"
+                  onClick={() => onActivate(link.item)}
+                >
+                  <LinkedItemMeta item={link.item} />
+                </button>
+                {!readonly && (
+                  <button
+                    className="rounded-full p-1 hover:bg-contrast"
+                    onClick={() => onUnlink(link.item)}
+                  >
+                    <Icon type="link-off" className="text-danger" size="small" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+export default observer(LinkedItemModalView)