feat: Show preferences keyboard shortcut in tooltip

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

@@ -20,6 +20,7 @@ import QuickSettingsButton from './QuickSettingsButton'
 import AccountMenuButton from './AccountMenuButton'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import UpgradeNow from './UpgradeNow'
+import PreferencesButton from './PreferencesButton'
 
 type Props = {
   application: WebApplication
@@ -364,16 +365,7 @@ class Footer extends AbstractComponent<Props, State> {
               />
             </div>
             <div className="relative z-footer-bar-item select-none">
-              <StyledTooltip label="Open preferences">
+              <PreferencesButton openPreferences={this.openPreferences} />
-                <button
-                  onClick={this.openPreferences}
-                  className="flex h-full w-8 cursor-pointer items-center justify-center"
-                >
-                  <div className="h-5">
-                    <Icon type="tune" className="rounded hover:text-info" />
-                  </div>
-                </button>
-              </StyledTooltip>
             </div>
             <div className="relative z-footer-bar-item select-none">
               <QuickSettingsButton

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

@@ -0,0 +1,30 @@
+import { keyboardStringForShortcut, OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
+import { useMemo } from 'react'
+import { useCommandService } from '../CommandProvider'
+import Icon from '../Icon/Icon'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
+
+type Props = {
+  openPreferences: () => void
+}
+
+const PreferencesButton = ({ openPreferences }: Props) => {
+  const commandService = useCommandService()
+
+  const shortcut = useMemo(
+    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(OPEN_PREFERENCES_COMMAND)),
+    [commandService],
+  )
+
+  return (
+    <StyledTooltip label={`Open preferences (${shortcut})`}>
+      <button onClick={openPreferences} className="flex h-full w-8 cursor-pointer items-center justify-center">
+        <div className="h-5">
+          <Icon type="tune" className="rounded hover:text-info" />
+        </div>
+      </button>
+    </StyledTooltip>
+  )
+}
+
+export default PreferencesButton

packages/web/src/javascripts/Components/Tags/TagsSectionAddButton.tsx

@@ -18,6 +18,7 @@ const TagsSectionAddButton: FunctionComponent<Props> = ({ tags }) => {
     () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(CREATE_NEW_TAG_COMMAND)),
     [commandService],
   )
+
   return (
     <IconButton
       focusable={true}