chore: improve note view vault info style (#2488)

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>
   )
 }

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>