From 8575b3e71487f468102ade9c1fb8bf966231e6e1 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 5 Dec 2022 13:37:21 +0530
Subject: [PATCH] feat: Show preferences keyboard shortcut in tooltip

---
 .../javascripts/Components/Footer/Footer.tsx  | 12 ++------
 .../Components/Footer/PreferencesButton.tsx   | 30 +++++++++++++++++++
 .../Components/Tags/TagsSectionAddButton.tsx  |  1 +
 3 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx

diff --git a/packages/web/src/javascripts/Components/Footer/Footer.tsx b/packages/web/src/javascripts/Components/Footer/Footer.tsx
index 015bca0b5..62ce99c1a 100644
--- a/packages/web/src/javascripts/Components/Footer/Footer.tsx
+++ b/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">
-                <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>
+              <PreferencesButton openPreferences={this.openPreferences} />
             </div>
             <div className="relative z-footer-bar-item select-none">
               <QuickSettingsButton
diff --git a/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx b/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
new file mode 100644
index 000000000..71e12cc27
--- /dev/null
+++ b/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
diff --git a/packages/web/src/javascripts/Components/Tags/TagsSectionAddButton.tsx b/packages/web/src/javascripts/Components/Tags/TagsSectionAddButton.tsx
index f22c12cf2..21284f80b 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsSectionAddButton.tsx
+++ b/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}