Add shui/shortcut component

Display mod+up/down for show more/less

deps/shui/src/logseq/shui/core.cljs

@@ -1,29 +1,34 @@
 (ns logseq.shui.core
-  (:require 
+  (:require
     [logseq.shui.button.v2 :as shui.button.v2]
     [logseq.shui.context :as shui.context]
     [logseq.shui.dialog.v1 :as shui.dialog.v1]
     [logseq.shui.icon.v2 :as shui.icon.v2]
     [logseq.shui.list-item.v1 :as shui.list-item.v1]
-    [logseq.shui.table.v2 :as shui.table.v2]))
+    [logseq.shui.table.v2 :as shui.table.v2]
+    [logseq.shui.shortcut.v1 :as shui.shortcut.v1]))
 
 ;; table component
 (def table shui.table.v2/root)
 (def table-v2 shui.table.v2/root)
 
-;; button component 
+;; shortcut
+(def shortcut shui.shortcut.v1/root)
+(def shortcut-v2 shui.shortcut.v1/root)
+
+;; button component
 (def button shui.button.v2/root)
 (def button-v2 shui.button.v2/root)
 
-;; icon 
+;; icon
 (def icon shui.icon.v2/root)
 (def icon-v2 shui.icon.v2/root)
 
-;; list-item 
+;; list-item
 (def list-item shui.list-item.v1/root)
 (def list-item-v1 shui.list-item.v1/root)
 
-;; dialog 
+;; dialog
 (def dialog shui.dialog.v1/root)
 (def dialog-v1 shui.dialog.v1/root)
 

deps/shui/src/logseq/shui/list_item/v1.cljs

@@ -4,35 +4,9 @@
     [rum.core :as rum]
     [clojure.string :as string]
     [logseq.shui.icon.v2 :as icon]
-    [logseq.shui.button.v2 :as button]))
+    [logseq.shui.shortcut.v1 :as shortcut]))
 
-(defn to-string [input]
+(def to-string shortcut/to-string)
-  (cond
-    (string? input) input
-    (keyword? input) (name input)
-    (symbol? input) (name input)
-    (number? input) (str input)
-    (uuid? input) (str input)
-    (nil? input) ""
-    :else (pr-str input)))
-
-(defn print-shortcut-key [key]
-  (case key
-    ("cmd" "command" "mod" "⌘") "⌘"
-    ("return" "enter" "⏎") "⏎"
-    ("shift" "⇧") "⇧"
-    ("alt" "option" "opt" "⌥") "⌥"
-    ("ctrl" "control" "⌃") "⌃"
-    ("space" " ") " "
-    ("up" "↑") "↑"
-    ("down" "↓") "↓"
-    ("left" "←") "←"
-    ("right" "→") "→"
-    ("disabled" "Disabled") ""
-    ("backspace" "delete") ""
-    ("tab") ""
-    (nil) ""
-    (name key)))
 
 (defn normalize-text [app-config text]
   (cond-> (to-string text)
@@ -97,7 +71,6 @@
                  :else
                  [:span text-string]))))))
 
-;; result-item
 (rum/defc root [{:keys [icon icon-theme query text info shortcut value-label value title highlighted on-highlight on-highlight-dep header on-click hoverable compact rounded on-mouse-enter component-opts] :as _props :or {hoverable true rounded true}}
                 {:keys [app-config] :as context}]
   (let [ref (rum/create-ref)
@@ -153,17 +126,4 @@
       (when shortcut
         [:div {:class "flex gap-1"
                :style {:opacity (if highlighted 1 0.5)}}
-         (for [[index option] (map-indexed vector (string/split shortcut #" \| "))]
+         (shortcut/root shortcut context)])]]))
-           [:<>
-            (when (< 0 index)
-              [:div.text-gray-11.text-sm "|"])
-            (for [sequence (string/split option #" ")
-                  :let [text (->> (string/split sequence #"\+")
-                                  (map print-shortcut-key)
-                                  (apply str))]]
-              (button/root {:theme :gray
-                            :interactive false
-                            :text (string/upper-case (to-string text))
-                            :tiled true
-                            :size :sm}
-                           context))])])]]))

deps/shui/src/logseq/shui/shortcut/v1.cljs

@@ -0,0 +1,52 @@
+(ns logseq.shui.shortcut.v1
+  (:require [clojure.string :as string]
+            [logseq.shui.button.v2 :as button]
+            [rum.core :as rum]))
+
+(defn print-shortcut-key [key]
+  (case key
+    ("cmd" "command" "mod" "⌘") "⌘"
+    ("return" "enter" "⏎") "⏎"
+    ("shift" "⇧") "⇧"
+    ("alt" "option" "opt" "⌥") "⌥"
+    ("ctrl" "control" "⌃") "⌃"
+    ("space" " ") " "
+    ("up" "↑") "↑"
+    ("down" "↓") "↓"
+    ("left" "←") "←"
+    ("right" "→") "→"
+    ("disabled" "Disabled") ""
+    ("backspace" "delete") ""
+    ("tab") ""
+    (nil) ""
+    (name key)))
+
+;; TODO: shortcut component shouldn't worry about this
+(defn to-string [input]
+  (cond
+    (string? input) input
+    (keyword? input) (name input)
+    (symbol? input) (name input)
+    (number? input) (str input)
+    (uuid? input) (str input)
+    (nil? input) ""
+    :else (pr-str input)))
+
+(rum/defc root
+  [shortcut context]
+  [:<>
+   (for [[index option] (map-indexed vector (string/split shortcut #" \| "))]
+     [:<>
+      (when (< 0 index)
+        [:div.text-gray-11.text-sm "|"])
+      (for [sequence (string/split option #" ")
+            :let [text (->> (string/split sequence #"\+")
+                            (map print-shortcut-key)
+                            (apply str))]]
+        (button/root {:theme :gray
+                      :interactive false
+                      :text (string/upper-case (to-string text))
+                      :tiled true
+                      :size :sm
+                      :mused true}
+                     context))])])

src/main/frontend/components/cmdk.cljs

@@ -367,8 +367,12 @@
       (when (or can-show-more? can-show-less?)
         [:a.fade-link.select-node {:on-click (if (= show :more) show-less show-more)}
          (if (= show :more)
-           "Show less"
+           [:div.flex.flex-row.gap-1.items-center
-           "Show more")])]
+            "Show less"
+            (shui/shortcut "mod up" nil)]
+           [:div.flex.flex-row.gap-1.items-center
+            "Show more"
+            (shui/shortcut "mod down" nil)])])]
 
      [:div
       (for [item visible-items

src/main/frontend/modules/shortcut/utils.cljs

@@ -28,7 +28,9 @@
                     "~" "shift+`"
                     "⇧" "shift"
                     "←" "left"
-                    "→" "right"}]
+                    "→" "right"
+                    "↑"  "up"
+                    "↓"  "down"}]
       (-> binding
           (str/replace #"[;=-\[\]'\(\)\~\→\←\⇧]" #(get keynames %))
           (str/replace #"\s+" " ")
@@ -50,6 +52,8 @@
         (str/replace "shift+/" "?")
         (str/replace "left" "←")
         (str/replace "right" "→")
+        (str/replace "up" "↑")
+        (str/replace "down" "↓")
         (str/replace "shift" "⇧")
         (str/replace "open-square-bracket" "[")
         (str/replace "close-square-bracket" "]")