chore: show invite count bubble on preferences button (#2458)

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/ContactInviteModal.tsx

@@ -80,24 +80,26 @@ const ContactInviteModal: FunctionComponent<Props> = ({ vault, onCloseDialog })
 
   return (
     <Modal title="Add New Contact" close={handleDialogClose} actions={modalActions}>
-      <div className={classNames('px-4.5 py-4 flex w-full flex-col gap-3', isLoadingContacts && 'items-center')}>
+      <div className={classNames('flex w-full flex-col gap-3 px-4.5 py-4', isLoadingContacts && 'items-center')}>
         {isLoadingContacts ? (
-          <Spinner className="w-5 h-5" />
-        ) : (
+          <Spinner className="h-5 w-5" />
+        ) : contacts.length > 0 ? (
           contacts.map((contact) => {
             return (
               <label className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5" key={contact.uuid}>
                 <input
-                  className="accent-info w-4 h-4 self-center"
+                  className="h-4 w-4 self-center accent-info"
                   type="checkbox"
                   checked={selectedContacts.includes(contact)}
                   onChange={() => toggleContact(contact)}
                 />
-                <div className="col-start-2 font-semibold text-sm">{contact.name}</div>
+                <div className="col-start-2 text-sm font-semibold">{contact.name}</div>
                 <div className="col-start-2">{contact.contactUuid}</div>
               </label>
             )
           })
+        ) : (
+          <div className="text-sm">No contacts available to invite.</div>
         )}
       </div>
     </Modal>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx

@@ -158,11 +158,13 @@ const Vaults = () => {
       <PreferencesGroup>
         <PreferencesSegment>
           <Title>Vaults</Title>
-          <div className="my-2 flex flex-col gap-3.5">
-            {vaults.map((vault) => {
-              return <VaultItem vault={vault} key={vault.uuid} />
-            })}
-          </div>
+          {vaults.length > 0 && (
+            <div className="my-2 flex flex-col gap-3.5">
+              {vaults.map((vault) => {
+                return <VaultItem vault={vault} key={vault.uuid} />
+              })}
+            </div>
+          )}
           {canCreateMoreVaults ? (
             <div className="mt-2.5 flex flex-row">
               <Button label="Create New Vault" className={'mr-3 text-xs'} onClick={createNewVault} />
@@ -186,7 +188,7 @@ const Vaults = () => {
           <Subtitle>Share your CollaborationID with collaborators to join their vaults.</Subtitle>
           {contactService.isCollaborationEnabled() ? (
             <>
-              <code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words p-3 border border-border rounded bg-contrast">
+              <code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words rounded border border-border bg-contrast p-3">
                 {contactService.getCollaborationID()}
               </code>
               <Button