feat: Added "Whats New" indicator to Preferences button (#2107)

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

@@ -339,8 +339,11 @@ class Footer extends AbstractComponent<Props, State> {
     this.viewControllerManager.quickSettingsMenuController.closeQuickSettingsMenu()
   }
 
-  openPreferences = () => {
+  openPreferences = (openWhatsNew: boolean) => {
     this.clickOutsideQuickSettingsMenu()
+    if (openWhatsNew) {
+      this.viewControllerManager.preferencesController.setCurrentPane('whats-new')
+    }
     this.viewControllerManager.preferencesController.openPreferences()
   }
 

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

@@ -1,27 +1,47 @@
+import { compareSemVersions } from '@standardnotes/snjs'
 import { keyboardStringForShortcut, OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
-import { useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useApplication } from '../ApplicationProvider'
 import { useCommandService } from '../CommandProvider'
 import Icon from '../Icon/Icon'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
-  openPreferences: () => void
+  openPreferences: (openWhatsNew: boolean) => void
 }
 
 const PreferencesButton = ({ openPreferences }: Props) => {
-  const commandService = useCommandService()
+  const application = useApplication()
 
+  const commandService = useCommandService()
   const shortcut = useMemo(
     () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(OPEN_PREFERENCES_COMMAND)),
     [commandService],
   )
 
+  const [changelogLastReadVersion, setChangelogLastReadVersion] = useState(() =>
+    application.changelogService.getLastReadVersion(),
+  )
+  const isChangelogUnread = useMemo(
+    () => (changelogLastReadVersion ? compareSemVersions(application.version, changelogLastReadVersion) > 0 : false),
+    [application.version, changelogLastReadVersion],
+  )
+  useEffect(
+    () => application.changelogService.addLastReadChangeListener(setChangelogLastReadVersion),
+    [application.changelogService],
+  )
+
+  const onClick = useCallback(() => {
+    openPreferences(isChangelogUnread)
+  }, [isChangelogUnread, openPreferences])
+
   return (
     <StyledTooltip label={`Open preferences (${shortcut})`}>
-      <button onClick={openPreferences} className="flex h-full w-8 cursor-pointer items-center justify-center">
+      <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" />
         </div>
+        {isChangelogUnread && <div className="absolute top-0.5 right-0.5 h-2 w-2 rounded-full bg-info" />}
       </button>
     </StyledTooltip>
   )