enhance: toggle shortcut tooltip on settings

src/main/frontend/components/header.cljs

@@ -27,16 +27,11 @@
             [frontend.components.widgets :as widgets]))
 
 (rum/defc home-button []
-  (ui/tippy
-   {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/home)]
-    :interactive true
-    :position    "left"
-    :theme       "monospace"
-    :arrow       true}
-   [:a.button
-    {:href     (rfe/href :home)
-     :on-click route-handler/go-to-journals!}
-    (ui/icon "home" {:style {:fontSize 20}})]))
+  (ui/with-shortcut :go/home "left"
+    [:a.button
+     {:href     (rfe/href :home)
+      :on-click route-handler/go-to-journals!}
+     (ui/icon "home" {:style {:fontSize 20}})]))
 
 (rum/defc login
   [logged?]
@@ -63,17 +58,11 @@
 
 (rum/defc left-menu-button < rum/reactive
   [{:keys [on-click]}]
-  (ui/tippy
-   {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :ui/toggle-left-sidebar)]
-    :position    "bottom"
-    :theme       "monospace"
-    :interactive true
-    :arrow       true}
-
-   [:a#left-menu.cp__header-left-menu.button
-    {:on-click on-click
-     :style {:margin-left 12}}
-    (ui/icon "menu-2" {:style {:fontSize 20}})]))
+  (ui/with-shortcut :ui/toggle-left-sidebar "bottom"
+    [:a#left-menu.cp__header-left-menu.button
+     {:on-click on-click
+      :style {:margin-left 12}}
+     (ui/icon "menu-2" {:style {:fontSize 20}})]))
 
 (rum/defc dropdown-menu < rum/reactive
   [{:keys [me current-repo t default-home]}]
@@ -132,25 +121,15 @@
   []
   [:div.flex.flex-row
 
-   (ui/tippy
-    {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/backward)]
-     :interactive true
-     :position    "bottom"
-     :theme       "monospace"
-     :arrow       true}
-    [:a.it.navigation.nav-left.button
-     {:title "Go back" :on-click #(js/window.history.back)}
-     (ui/icon "arrow-left")])
-   
-   (ui/tippy
-    {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/forward)]
-     :interactive true
-     :position    "bottom"
-     :theme       "monospace"
-     :arrow       true}
-    [:a.it.navigation.nav-right.button
-     {:title "Go forward" :on-click #(js/window.history.forward)}
-     (ui/icon "arrow-right")])])
+   (ui/with-shortcut :go/backward "bottom"
+     [:a.it.navigation.nav-left.button
+      {:title "Go back" :on-click #(js/window.history.back)}
+      (ui/icon "arrow-left")])
+
+   (ui/with-shortcut :go/forward "bottom"
+     [:a.it.navigation.nav-right.button
+      {:title "Go forward" :on-click #(js/window.history.forward)}
+      (ui/icon "arrow-right")])])
 
 (rum/defc updater-tips-new-version
   [t]
@@ -201,12 +180,7 @@
                                          (not (:ui/left-sidebar-open? @state/state))))})
 
         (when current-repo ;; this is for the Search button
-          (ui/tippy
-            {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/search)]
-             :interactive true
-             :position    "right"
-             :theme       "monospace"
-             :arrow       true}
+          (ui/with-shortcut :go/search "right"
             [:a.button#search-button
              {:on-click #(state/pub-event! [:go/search])}
              (ui/icon "search" {:style {:fontSize 20}})]))]

src/main/frontend/components/right_sidebar.cljs

@@ -22,14 +22,7 @@
 (rum/defc toggle
   []
   (when-not (util/mobile?)
-    (ui/tippy
-      {:html [:div.text-sm.font-medium
-              (ui/keyboard-shortcut-from-config :ui/toggle-right-sidebar)]
-       :position    "left"
-       :theme       "monospace"
-       :interactive true
-       :arrow       true}
-
+    (ui/with-shortcut :ui/toggle-right-sidebar "left"
       [:a.button.fade-link.toggle
        {:on-click state/toggle-sidebar-open?!}
        (ui/icon "layout-sidebar-right" {:style {:fontSize "20px"}})])))

src/main/frontend/components/search.cljs

@@ -275,28 +275,24 @@
   [:div.recent-search
    [:div.px-4.py-2.text-sm.opacity-70.flex.flex-row.justify-between.align-items
     [:div "Recent search:"]
-    (ui/tippy {:html [:div.text-sm.font-medium
-                      (ui/keyboard-shortcut-from-config :go/search-in-page)]
-               :arrow           true
-               :interactive     true
-               :theme       "monospace"}
-              [:div.flex-row.flex.align-items
-               [:div.mr-2 "Search in page:"]
-               [:div {:style {:margin-top 3}}
-                (ui/toggle in-page-search?
-                           (fn [_value]
-                             (state/set-search-mode! (if in-page-search? :global :page)))
-                           true)]
-               (ui/tippy {:html [:div
-                                  ;; TODO: fetch from config
-                                 "Tip: " [:code (util/->platform-shortcut "Ctrl + Shift + p")] " to open the commands palette"]
-                          :interactive     true
-                          :arrow           true
-                          :theme       "monospace"}
-                         [:a.inline-block.fade-link
-                          {:style {:margin-left 12}
-                           :on-click #(state/toggle! :ui/command-palette-open?)}
-                          (ui/icon "command" {:style {:font-size 20}})])])]
+    (ui/with-shortcut :go/search-in-page "bottom"
+      [:div.flex-row.flex.align-items
+       [:div.mr-2 "Search in page:"]
+       [:div {:style {:margin-top 3}}
+        (ui/toggle in-page-search?
+                   (fn [_value]
+                     (state/set-search-mode! (if in-page-search? :global :page)))
+                   true)]
+       (ui/tippy {:html [:div
+                         ;; TODO: fetch from config
+                         "Tip: " [:code (util/->platform-shortcut "Ctrl + Shift + p")] " to open the commands palette"]
+                  :interactive     true
+                  :arrow           true
+                  :theme       "monospace"}
+                 [:a.inline-block.fade-link
+                  {:style {:margin-left 12}
+                   :on-click #(state/toggle! :ui/command-palette-open?)}
+                  (ui/icon "command" {:style {:font-size 20}})])])]
    (let [recent-search (mapv (fn [q] {:type :search :data q}) (db/get-key-value :recent/search))
          pages (->> (db/get-key-value :recent/pages)
                     (remove nil?)

src/main/frontend/components/settings.cljs

@@ -363,6 +363,13 @@
           (fn []
             (config-handler/toggle-ui-enable-tooltip!))))
 
+(defn shortcut-tooltip-row [t enable-shortcut-tooltip?]
+  (toggle "enable_tooltip"
+          (t :settings-page/enable-shortcut-tooltip)
+          enable-shortcut-tooltip?
+          (fn []
+            (state/toggle-shortcut-tooltip!))))
+
 (defn timetracking-row [t enable-timetracking?]
   (toggle "enable_timetracking"
           (t :settings-page/enable-timetracking)
@@ -543,6 +550,7 @@
         instrument-disabled? (state/sub :instrument/disabled?)
         logical-outdenting? (state/logical-outdenting?)
         enable-tooltip? (state/enable-tooltip?)
+        enable-shortcut-tooltip? (state/sub :ui/shortcut-tooltip?)
         enable-git-auto-push? (state/enable-git-auto-push? current-repo)
         ;; enable-block-timestamps? (state/enable-block-timestamps?)
         show-brackets? (state/show-brackets?)
@@ -600,6 +608,7 @@
             (show-brackets-row t show-brackets?)
             (when (util/electron?) (switch-spell-check-row t))
             (outdenting-row t logical-outdenting?)
+            (shortcut-tooltip-row t enable-shortcut-tooltip?)
             (tooltip-row t enable-tooltip?)
             (timetracking-row t enable-timetracking?)
             (journal-row t enable-journals?)

src/main/frontend/dicts.cljs

@@ -225,6 +225,7 @@
         :settings-page/preferred-workflow "Preferred workflow"
         :settings-page/enable-timetracking "Enable timetracking"
         :settings-page/enable-tooltip "Enable tooltips"
+        :settings-page/enable-shortcut-tooltip "Enable shortcut tooltip"
         :settings-page/enable-journals "Enable journals"
         :settings-page/enable-all-pages-public "Enable all pages public when publishing"
         :settings-page/enable-encryption "Enable encryption feature"

src/main/frontend/state.cljs

@@ -77,6 +77,7 @@
                               false)
       ;; remember scroll positions of visited paths
       :ui/paths-scroll-positions {}
+      :ui/shortcut-tooltip? (or (storage/get :ui/shortcut-tooltip?) true)
 
       :document/mode? document-mode?
 
@@ -1167,6 +1168,16 @@
     (set-state! :document/mode? (not mode))
     (storage/set :document/mode? (not mode))))
 
+(defn shortcut-tooltip-enabled?
+  []
+  (get @state :ui/shortcut-tooltip?))
+
+(defn toggle-shortcut-tooltip!
+  []
+  (let [mode (shortcut-tooltip-enabled?)]
+    (set-state! :ui/shortcut-tooltip? (not mode))
+    (storage/set :ui/shortcut-tooltip? (not mode))))
+
 (defn enable-tooltip?
   []
   (if (util/mobile?)

src/main/frontend/ui.cljs

@@ -758,3 +758,17 @@
                            (when (:class opts)
                              (str " " (string/trim (:class opts)))))}
               (dissoc opts :class))]))
+
+(rum/defc with-shortcut < rum/reactive
+  [shortcut-key position content]
+  (let [tooltip? (state/sub :ui/shortcut-tooltip?)]
+    (if tooltip?
+      (tippy
+       {:html [:div.text-sm.font-medium (keyboard-shortcut-from-config shortcut-key)]
+        :interactive true
+        :position    position
+        :theme       "monospace"
+        :delay       [1000, 100]
+        :arrow       true}
+       content)
+      content)))