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

packages/web/src/javascripts/Application/WebApplication.ts

@@ -37,13 +37,13 @@ import {
   IsNativeIOS,
   IsNativeMobileWeb,
   KeyboardService,
-  PreferenceId,
   RouteServiceInterface,
   ThemeManager,
   VaultDisplayServiceInterface,
   WebAlertService,
   WebApplicationInterface,
 } from '@standardnotes/ui-services'
+import { PreferencePaneId } from '@standardnotes/services'
 import { MobileWebReceiver, NativeMobileEventListener } from '../NativeMobileWeb/MobileWebReceiver'
 import { setCustomViewportHeight } from '@/setViewportHeightWithFallback'
 import { FeatureName } from '@/Controllers/FeatureName'
@@ -504,7 +504,7 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     return this.environment === Environment.Web
   }
 
-  openPreferences(pane?: PreferenceId): void {
+  openPreferences(pane?: PreferencePaneId): void {
     this.preferencesController.openPreferences()
     if (pane) {
       this.preferencesController.setCurrentPane(pane)

packages/web/src/javascripts/Components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/WebApplication'
 import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { AbstractComponent } from '@/Components/Abstract/PureComponent'
 import { destroyAllObjectProperties, preventRefreshing } from '@/Utils'
-import { ApplicationEvent, ApplicationDescriptor, WebAppEvent } from '@standardnotes/snjs'
+import { ApplicationEvent, ApplicationDescriptor, WebAppEvent, StatusServiceEvent } from '@standardnotes/snjs'
 import {
   STRING_NEW_UPDATE_READY,
   STRING_CONFIRM_APP_QUIT_DURING_UPGRADE,
@@ -112,7 +112,10 @@ class Footer extends AbstractComponent<Props, State> {
   override componentDidMount(): void {
     super.componentDidMount()
 
-    this.removeStatusObserver = this.application.status.addEventObserver((_event, message) => {
+    this.removeStatusObserver = this.application.status.addEventObserver((event, message) => {
+      if (event !== StatusServiceEvent.MessageChanged) {
+        return
+      }
       this.setState({
         arbitraryStatusMessage: message,
       })

packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx

@@ -1,4 +1,4 @@
-import { compareSemVersions } from '@standardnotes/snjs'
+import { compareSemVersions, StatusServiceEvent } from '@standardnotes/snjs'
 import { keyboardStringForShortcut, OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useApplication } from '../ApplicationProvider'
@@ -36,11 +36,26 @@ const PreferencesButton = ({ openPreferences }: Props) => {
     openPreferences(isChangelogUnread)
   }, [isChangelogUnread, openPreferences])
 
+  const [bubbleCount, setBubbleCount] = useState<string | undefined>()
+  useEffect(() => {
+    return application.status.addEventObserver((event, message) => {
+      if (event !== StatusServiceEvent.PreferencesBubbleCountChanged) {
+        return
+      }
+      setBubbleCount(message)
+    })
+  }, [application.status])
+
   return (
     <StyledTooltip label={`Open preferences (${shortcut})`}>
-      <button onClick={onClick} className="relative flex h-full w-8 cursor-pointer items-center justify-center">
-        <div className="h-5">
-          <Icon type="tune" className="rounded hover:text-info" />
+      <button onClick={onClick} className="group relative flex h-full w-8 cursor-pointer items-center justify-center">
+        <div className="relative h-5">
+          <Icon type="tune" className="rounded group-hover:text-info" />
+          {bubbleCount && (
+            <div className="absolute bottom-full left-full aspect-square -translate-x-1/2 translate-y-1/2 rounded-full border border-info-contrast bg-info px-1.5 py-px text-[0.575rem] font-bold text-info-contrast">
+              {bubbleCount}
+            </div>
+          )}
         </div>
         {isChangelogUnread && <div className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-info" />}
       </button>

packages/web/src/javascripts/Components/Preferences/Controller/PreferencesMenuItem.ts

@@ -1,10 +1,11 @@
 import { IconType } from '@standardnotes/snjs'
-import { PreferenceId } from '@standardnotes/ui-services'
+import { PreferencePaneId } from '@standardnotes/services'
 
 export interface PreferencesMenuItem {
-  readonly id: PreferenceId
+  readonly id: PreferencePaneId
   readonly icon: IconType
   readonly label: string
   readonly order: number
-  readonly hasBubble?: boolean
+  readonly bubbleCount?: number
+  readonly hasErrorIndicator?: boolean
 }

packages/web/src/javascripts/Components/Preferences/Controller/PreferencesSessionController.ts

@@ -2,7 +2,7 @@ import { action, makeAutoObservable, observable } from 'mobx'
 import { WebApplication } from '@/Application/WebApplication'
 import { PackageProvider } from '../Panes/General/Advanced/Packages/Provider/PackageProvider'
 import { securityPrefsHasBubble } from '../Panes/Security/securityPrefsHasBubble'
-import { PreferenceId } from '@standardnotes/ui-services'
+import { PreferencePaneId } from '@standardnotes/services'
 import { isDesktopApplication } from '@/Utils'
 import { featureTrunkHomeServerEnabled, featureTrunkVaultsEnabled } from '@/FeatureTrunk'
 import { PreferencesMenuItem } from './PreferencesMenuItem'
@@ -14,7 +14,7 @@ import { PREFERENCES_MENU_ITEMS, READY_PREFERENCES_MENU_ITEMS } from './MenuItem
  * Preferences menu. It is created and destroyed each time the menu is opened and closed.
  */
 export class PreferencesSessionController {
-  private _selectedPane: PreferenceId = 'account'
+  private _selectedPane: PreferencePaneId = 'account'
   private _menu: PreferencesMenuItem[]
   private _extensionLatestVersions: PackageProvider = new PackageProvider(new Map())
 
@@ -69,7 +69,8 @@ export class PreferencesSessionController {
       const item: SelectableMenuItem = {
         ...preference,
         selected: preference.id === this._selectedPane,
-        hasBubble: this.sectionHasBubble(preference.id),
+        bubbleCount: this.application.status.getPreferencesBubbleCount(preference.id),
+        hasErrorIndicator: this.sectionHasBubble(preference.id),
       }
       return item
     })
@@ -81,7 +82,7 @@ export class PreferencesSessionController {
     return this._menu.find((item) => item.id === this._selectedPane)
   }
 
-  get selectedPaneId(): PreferenceId {
+  get selectedPaneId(): PreferencePaneId {
     if (this.selectedMenuItem != undefined) {
       return this.selectedMenuItem.id
     }
@@ -89,11 +90,11 @@ export class PreferencesSessionController {
     return 'account'
   }
 
-  selectPane = (key: PreferenceId) => {
+  selectPane = (key: PreferencePaneId) => {
     this._selectedPane = key
   }
 
-  sectionHasBubble(id: PreferenceId): boolean {
+  sectionHasBubble(id: PreferencePaneId): boolean {
     if (id === 'security') {
       return securityPrefsHasBubble(this.application)
     }

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

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx

@@ -1,17 +1,25 @@
 import Icon from '@/Components/Icon/Icon'
 import { FunctionComponent } from 'react'
-import { IconType } from '@standardnotes/snjs'
+import { IconType, classNames } from '@standardnotes/snjs'
 import { ErrorCircle } from '@/Components/UIElements/ErrorCircle'
 
 interface Props {
   iconType: IconType
   label: string
   selected: boolean
-  hasBubble?: boolean
+  bubbleCount?: number
+  hasErrorIndicator?: boolean
   onClick: () => void
 }
 
-const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
+const PreferencesMenuItem: FunctionComponent<Props> = ({
+  iconType,
+  label,
+  selected,
+  onClick,
+  bubbleCount,
+  hasErrorIndicator,
+}) => (
   <div
     className={`preferences-menu-item box-border flex h-auto w-auto min-w-42 cursor-pointer select-none flex-row items-center justify-start rounded border border-solid px-4 py-2 text-sm hover:border-border hover:bg-default ${
       selected ? 'selected border-info font-bold text-info' : 'border-transparent'
@@ -21,10 +29,17 @@ const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, select
       onClick()
     }}
   >
-    <Icon className={`icon text-base ${selected ? 'text-info' : 'text-neutral'}`} type={iconType} />
+    <div className="relative mr-1">
+      <Icon className={classNames('text-base', selected ? 'text-info' : 'text-neutral')} type={iconType} />
+      {bubbleCount ? (
+        <div className="absolute bottom-full right-full flex aspect-square h-4 w-4 translate-x-2 translate-y-2 items-center justify-center rounded-full border border-info-contrast bg-info text-[0.5rem] font-bold text-info-contrast">
+          {bubbleCount}
+        </div>
+      ) : null}
+    </div>
     <div className="min-w-1" />
     {label}
-    {hasBubble && (
+    {hasErrorIndicator && (
       <span className="ml-2">
         <ErrorCircle />
       </span>

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -4,7 +4,7 @@ import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
 import { PreferencesSessionController } from './Controller/PreferencesSessionController'
-import { PreferenceId } from '@standardnotes/ui-services'
+import { PreferencePaneId } from '@standardnotes/services'
 
 type Props = {
   menu: PreferencesSessionController
@@ -32,7 +32,8 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
             iconType={pref.icon}
             label={pref.label}
             selected={pref.selected}
-            hasBubble={pref.hasBubble}
+            bubbleCount={pref.bubbleCount}
+            hasErrorIndicator={pref.hasErrorIndicator}
             onClick={() => {
               selectPane(pref.id)
             }}
@@ -45,7 +46,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
           label="Preferences Menu"
           value={selectedPaneId}
           onChange={(paneId) => {
-            selectPane(paneId as PreferenceId)
+            selectPane(paneId as PreferencePaneId)
           }}
           classNameOverride={{
             wrapper: 'relative',

packages/web/src/javascripts/Controllers/PreferencesController.ts

@@ -1,13 +1,14 @@
 import { InternalEventBusInterface } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable } from 'mobx'
-import { PreferenceId, RootQueryParam, RouteServiceInterface } from '@standardnotes/ui-services'
+import { RootQueryParam, RouteServiceInterface } from '@standardnotes/ui-services'
 import { AbstractViewController } from './Abstract/AbstractViewController'
+import { PreferencePaneId } from '@standardnotes/services'
 
-const DEFAULT_PANE: PreferenceId = 'account'
+const DEFAULT_PANE: PreferencePaneId = 'account'
 
 export class PreferencesController extends AbstractViewController {
   private _open = false
-  currentPane: PreferenceId = DEFAULT_PANE
+  currentPane: PreferencePaneId = DEFAULT_PANE
 
   constructor(
     private routeService: RouteServiceInterface,
@@ -25,11 +26,11 @@ export class PreferencesController extends AbstractViewController {
     })
   }
 
-  setCurrentPane = (prefId: PreferenceId): void => {
+  setCurrentPane = (prefId: PreferencePaneId): void => {
     this.currentPane = prefId
   }
 
-  openPreferences = (prefId?: PreferenceId): void => {
+  openPreferences = (prefId?: PreferencePaneId): void => {
     if (prefId) {
       this.currentPane = prefId
     }