From 7c5f5c82a12c53cb889250f9f7bbea99f6e3b8be Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 8 Sep 2023 17:49:30 +0530
Subject: [PATCH] chore: improve note view vault info style (#2488)

---
 .../ContentListView/ListItemTags.tsx          |  2 +-
 .../ContentListView/ListItemVaultInfo.tsx     | 12 ++------
 .../LinkedItemBubblesContainer.tsx            |  7 +++++
 .../NoteView/CollaborationInfoHUD.tsx         | 25 +++-------------
 .../Components/NoteView/NoteView.tsx          |  4 ++-
 .../Components/Vaults/LastEditedByBadge.tsx   | 16 ++++++++++
 .../Vaults/SharedByContactBadge.tsx           | 13 +++++++++
 .../Components/Vaults/VaultNameBadge.tsx      |  4 +--
 .../src/javascripts/Hooks/useItemVaultInfo.ts | 29 +++++++++++++++++++
 9 files changed, 77 insertions(+), 35 deletions(-)
 create mode 100644 packages/web/src/javascripts/Components/Vaults/LastEditedByBadge.tsx
 create mode 100644 packages/web/src/javascripts/Components/Vaults/SharedByContactBadge.tsx
 create mode 100644 packages/web/src/javascripts/Hooks/useItemVaultInfo.ts

diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
index 384935535..e4170db20 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
@@ -17,7 +17,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
     <div className="mt-1.5 flex flex-wrap gap-2 overflow-hidden text-sm lg:text-xs">
       {tags.map((tag) => (
         <span
-          className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
+          className="inline-flex items-center rounded bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
           key={tag.uuid}
         >
           <Icon type={tag.iconString} className="mr-1 text-passive-1" size="small" />
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
index a5402281a..f93a38378 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react'
 import { useApplication } from '../ApplicationProvider'
-import Icon from '../Icon/Icon'
 import { DecryptedItemInterface, classNames } from '@standardnotes/snjs'
 import VaultNameBadge from '../Vaults/VaultNameBadge'
+import SharedByContactBadge from '../Vaults/SharedByContactBadge'
 
 type Props = {
   item: DecryptedItemInterface
@@ -30,15 +30,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item, className }) => {
   return (
     <div className={classNames('flex flex-wrap items-center gap-2', className)}>
       <VaultNameBadge vault={vault} />
-
-      {sharedByContact && (
-        <div title="Shared by contact" className="rounded bg-info px-1.5 py-1 text-neutral-contrast">
-          <span className="flex items-center" title="Shared by contact">
-            <Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
-            <div className="text-center text-xs font-bold">{sharedByContact?.name}</div>
-          </span>
-        </div>
-      )}
+      {sharedByContact && <SharedByContactBadge contact={sharedByContact} />}
     </div>
   )
 }
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
index 6b7cc305d..ab0884ac4 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
@@ -13,6 +13,9 @@ import { FOCUS_TAGS_INPUT_COMMAND, keyboardStringForShortcut } from '@standardno
 import { useCommandService } from '../CommandProvider'
 import { useItemLinks } from '@/Hooks/useItemLinks'
 import RoundIconButton from '../Button/RoundIconButton'
+import VaultNameBadge from '../Vaults/VaultNameBadge'
+import LastEditedByBadge from '../Vaults/LastEditedByBadge'
+import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo'
 
 type Props = {
   linkingController: LinkingController
@@ -161,6 +164,8 @@ const LinkedItemBubblesContainer = ({
 
   const shouldHideToggle = hideToggle || (!canShowContainerToggle && !isCollapsed)
 
+  const { vault, lastEditedByContact } = useItemVaultInfo(item)
+
   if (readonly && itemsToDisplay.length === 0) {
     return null
   }
@@ -183,6 +188,8 @@ const LinkedItemBubblesContainer = ({
         )}
         ref={setLinkContainer}
       >
+        {!!vault && <VaultNameBadge vault={vault} />}
+        {!!lastEditedByContact && <LastEditedByBadge contact={lastEditedByContact} />}
         {visibleItems.map((link) => (
           <LinkedItemBubble
             link={link}
diff --git a/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx b/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
index 57df63d86..dacda9a6c 100644
--- a/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
@@ -1,41 +1,24 @@
 import { FunctionComponent } from 'react'
-import Icon from '../Icon/Icon'
-import { useApplication } from '../ApplicationProvider'
 import { DecryptedItemInterface } from '@standardnotes/snjs'
 import VaultNameBadge from '../Vaults/VaultNameBadge'
+import LastEditedByBadge from '../Vaults/LastEditedByBadge'
+import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo'
 
 type Props = {
   item: DecryptedItemInterface
 }
 
 const CollaborationInfoHUD: FunctionComponent<Props> = ({ item }) => {
-  const application = useApplication()
+  const { vault, lastEditedByContact } = useItemVaultInfo(item)
 
-  if (!application.featuresController.isEntitledToVaults()) {
-    return null
-  }
-
-  if (application.items.isTemplateItem(item)) {
-    return null
-  }
-
-  const vault = application.vaults.getItemVault(item)
   if (!vault) {
     return null
   }
 
-  const lastEditedBy = application.sharedVaults.getItemLastEditedBy(item)
-
   return (
     <div className="flex flex-wrap items-start gap-2">
       <VaultNameBadge vault={vault} />
-
-      {lastEditedBy && (
-        <div title="Last edited by" className="flex select-none rounded bg-info px-1.5 py-1 text-info-contrast">
-          <Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
-          <span className="mr-auto overflow-hidden text-ellipsis text-xs">{lastEditedBy?.name}</span>
-        </div>
-      )}
+      {lastEditedByContact && <LastEditedByBadge contact={lastEditedByContact} />}
     </div>
   )
 }
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index be6a543b0..6ed5af92b 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -911,7 +911,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
               )}
               {renderHeaderOptions && (
                 <div className="note-view-options-buttons flex items-center gap-3">
-                  <CollaborationInfoHUD item={this.note} />
                   <LinkedItemsButton
                     linkingController={this.application.linkingController}
                     onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
@@ -931,6 +930,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
                 </div>
               )}
             </div>
+            <div className="mb-1 mt-2.5 md:hidden">
+              <CollaborationInfoHUD item={this.note} />
+            </div>
             <div className="hidden md:block">
               <LinkedItemBubblesContainer item={this.note} linkingController={this.application.linkingController} />
             </div>
diff --git a/packages/web/src/javascripts/Components/Vaults/LastEditedByBadge.tsx b/packages/web/src/javascripts/Components/Vaults/LastEditedByBadge.tsx
new file mode 100644
index 000000000..f4eaf8909
--- /dev/null
+++ b/packages/web/src/javascripts/Components/Vaults/LastEditedByBadge.tsx
@@ -0,0 +1,16 @@
+import { TrustedContactInterface } from '@standardnotes/models'
+import Icon from '../Icon/Icon'
+
+const LastEditedByBadge = ({ contact }: { contact: TrustedContactInterface }) => {
+  return (
+    <div
+      title="Last edited by"
+      className="flex select-none items-center rounded bg-info px-1.5 py-1 text-info-contrast"
+    >
+      <Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
+      <span className="mr-auto overflow-hidden text-ellipsis text-sm font-semibold lg:text-xs">{contact.name}</span>
+    </div>
+  )
+}
+
+export default LastEditedByBadge
diff --git a/packages/web/src/javascripts/Components/Vaults/SharedByContactBadge.tsx b/packages/web/src/javascripts/Components/Vaults/SharedByContactBadge.tsx
new file mode 100644
index 000000000..c51bff6d3
--- /dev/null
+++ b/packages/web/src/javascripts/Components/Vaults/SharedByContactBadge.tsx
@@ -0,0 +1,13 @@
+import { TrustedContactInterface } from '@standardnotes/models'
+import Icon from '../Icon/Icon'
+
+const SharedByContactBadge = ({ contact }: { contact: TrustedContactInterface }) => {
+  return (
+    <div title="Shared by contact" className="flex items-center rounded bg-info px-1.5 py-1 text-neutral-contrast">
+      <Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
+      <div className="text-center text-sm font-semibold lg:text-xs">{contact.name}</div>
+    </div>
+  )
+}
+
+export default SharedByContactBadge
diff --git a/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx b/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
index 4dfdd3428..46504065a 100644
--- a/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
+++ b/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
@@ -10,7 +10,7 @@ const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
   return (
     <div
       title="Vault name"
-      className="flex items-center rounded bg-success px-1.5 py-1 text-success-contrast select-none"
+      className="flex select-none items-center rounded bg-success px-1.5 py-1 text-success-contrast"
     >
       <Icon
         ariaLabel="Shared in vault"
@@ -19,7 +19,7 @@ const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
         size="medium"
         emojiSize="small"
       />
-      <span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
+      <span className="mr-auto overflow-hidden text-ellipsis text-sm font-semibold lg:text-xs">{vault.name}</span>
     </div>
   )
 }
diff --git a/packages/web/src/javascripts/Hooks/useItemVaultInfo.ts b/packages/web/src/javascripts/Hooks/useItemVaultInfo.ts
new file mode 100644
index 000000000..de5ce0498
--- /dev/null
+++ b/packages/web/src/javascripts/Hooks/useItemVaultInfo.ts
@@ -0,0 +1,29 @@
+import { useApplication } from '@/Components/ApplicationProvider'
+import { DecryptedItemInterface, TrustedContactInterface, VaultListingInterface } from '@standardnotes/snjs'
+
+type ItemVaultInfo = {
+  vault?: VaultListingInterface
+  lastEditedByContact?: TrustedContactInterface
+}
+
+export const useItemVaultInfo = (item: DecryptedItemInterface): ItemVaultInfo => {
+  const application = useApplication()
+
+  const info: ItemVaultInfo = {
+    vault: undefined,
+    lastEditedByContact: undefined,
+  }
+
+  if (!application.featuresController.isEntitledToVaults()) {
+    return info
+  }
+
+  if (application.items.isTemplateItem(item)) {
+    return info
+  }
+
+  info.vault = application.vaults.getItemVault(item)
+  info.lastEditedByContact = application.sharedVaults.getItemLastEditedBy(item)
+
+  return info
+}