Updates

deps/shui/src/logseq/shui/button/v2.cljs

@@ -6,10 +6,10 @@
     [logseq.shui.icon.v2 :as icon]
     [clojure.string :as string]))
 
-(rum/defc root 
+(rum/defc root < rum/reactive
   [{:keys [theme color text depth size icon interactive shortcut tiled on-click muted class] 
     :or {theme :color depth 1 size :md interactive true muted false class ""}} context]
-  (let [color-string (or (some-> color name) (some-> context :state deref :ui/radix-color name) "custom")
+  (let [color-string (or (some-> color name) (some-> context :state rum/react :ui/radix-color name) "custom")
         theme-class (str "shui__button-theme-" (name theme))
         depth-class (when-not (= :text theme) (str "shui__button-depth-" depth)) 
         color-class (str "shui__button-color-" color-string) 

deps/shui/src/logseq/shui/context.cljs

@@ -9,32 +9,23 @@
     (fn [context col]
       (map #(inline* context %) col))))
 
-(defn make-context [{:keys [block-config config inline int->local-time-2 blocks-container page-cp page]}]
-  {;; Shui needs access to the global configuration of the application
-   :config config
-   ;; Until components are converted over, they need to fallback to the old inline function 
-   ;; Wrap the old inline function to allow for interception, but fallback to the old inline function
-   :inline-block (inline->inline-block inline block-config)
-   :map-inline-block (inline->map-inline-block inline block-config)
-   ;; Currently frontend component are provided an object map containing at least the following keys:
-   ;; These will be passed through in a whitelisted fashion so as to be able to track the dependencies  
-   ;; back to the core application
-   ;; TODO: document the following
-   :block (:block block-config)  ;; the db entity of the current block
-   :block? (:block? block-config)
-   :blocks-container-id (:blocks-container-id block-config)
-   :editor-box (:editor-box block-config)
-   :id (:id block-config)
-   :mode? (:mode? block-config)
-   :query-result (:query-result block-config)
-   :sidebar? (:sidebar? block-config)
-   :start-time (:start-time block-config)
-   :uuid (:uuid block-config)
-   :whiteboard? (:whiteboard? block-config)
-   ;; Some functions from logseq's application will be used in the shui components. To avoid circular dependencies,
-   ;; they will be provided via the context object
-   :int->local-time-2 int->local-time-2
-   ;; Add search to context 
-   :blocks-container blocks-container
-   :page-cp page-cp
-   :page page})
+(defn make-context [{:keys [block-config config inline int->local-time-2 blocks-container page-cp page] :as props}]
+  (merge props {;; Until components are converted over, they need to fallback to the old inline function 
+                ;; Wrap the old inline function to allow for interception, but fallback to the old inline function
+                :inline-block (inline->inline-block inline block-config)
+                :map-inline-block (inline->map-inline-block inline block-config)
+                ;; Currently frontend component are provided an object map containing at least the following keys:
+                ;; These will be passed through in a whitelisted fashion so as to be able to track the dependencies  
+                ;; back to the core application
+                ;; TODO: document the following
+                :block (:block block-config)  ;; the db entity of the current block
+                :block? (:block? block-config)
+                :blocks-container-id (:blocks-container-id block-config)
+                :editor-box (:editor-box block-config)
+                :id (:id block-config)
+                :mode? (:mode? block-config)
+                :query-result (:query-result block-config)
+                :sidebar? (:sidebar? block-config)
+                :start-time (:start-time block-config)
+                :uuid (:uuid block-config)
+                :whiteboard? (:whiteboard? block-config)}))

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

@@ -41,7 +41,7 @@
   (let [[before-text highlighted-text after-text] (split-text-on-highlight text query normal-text normal-query)]
     [:span 
      (when-not (string/blank? before-text) [:span before-text])
-     (when-not (string/blank? highlighted-text) [:span {:style {:background "var(--lx-accent-09)"}} highlighted-text])
+     (when-not (string/blank? highlighted-text) [:span {:class "bg-accent-06 dark:bg-accent-08-alpha"} highlighted-text])
      (when-not (string/blank? after-text) [:span after-text])]))
 
 (defn span-with-mutliple-highlight-tokens [app-config text query normal-text normal-query]
@@ -84,7 +84,7 @@
 
 ;; 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]} 
-                {:keys [app-config]}]
+                {:keys [app-config] :as context}]
   (let [ref (rum/create-ref)
         highlight-query (partial highlight-query* app-config query)]
     (rum/use-effect! 
@@ -92,12 +92,13 @@
         (when (and highlighted on-highlight) 
           (on-highlight ref)))
       [highlighted on-highlight-dep])
-
-    [:div.flex.flex-col.px-6.gap-1.py-4 {:style {:background (if highlighted "var(--lx-gray-04-alpha)" "var(--lx-gray-02)")
-                                                 :opacity (if highlighted 1 0.8)
-                                                 :mix-blend-mode (if highlighted :normal :luminosity)}
-                                         :ref ref
-                                         :on-click (when on-click on-click)}
+    [:div {:style {:opacity (if highlighted 1 0.8)
+                   :mix-blend-mode (if highlighted :normal :luminosity)}
+           :class (cond-> "flex flex-col px-6 gap-1 py-4" 
+                    highlighted (str " bg-gray-03-alpha dark:bg-gray-04-alpha")
+                    (not highlighted) (str " bg-gray-02"))
+           :ref ref
+           :on-click (when on-click on-click)}
      ;; header
      (when header
       [:div.text-xs.pl-8.font-light {:class "-mt-1"
@@ -106,30 +107,33 @@
      ;; main row
      [:div.flex.items-center.gap-3
       [:div.w-5.h-5.rounded.flex.items-center.justify-center 
-       {:style {:background (case icon-theme :color "var(--lx-accent-09)" :gray "var(--lx-gray-09)" :gradient "linear-gradient(-65deg, #8AE8FF, #5373E7, #369EFF, #00B1CC)" "var(--lx-gray-09)")
-                :box-shadow (when (#{:color :gradient} icon-theme) "inset 0 0 0 1px rgba(255,255,255,0.3) ")}}
-       (icon/root icon {:size "14"})]
+       {:style {:background (when (#{:gradient} icon-theme) "linear-gradient(-65deg, #8AE8FF, #5373E7, #369EFF, #00B1CC)")
+                :box-shadow (when (#{:color :gradient} icon-theme) "inset 0 0 0 1px rgba(255,255,255,0.3) ")}
+        :class (cond-> "w-5 h-5 rounded flex items-center justify-center" 
+                 (= icon-theme :color) (str " bg-accent-10 dark:bg-accent-09 text-white") 
+                 (= icon-theme :gray) (str " bg-gray-10 dark:bg-gray-09 text-white"))} 
+       (icon/root icon {:size "14"
+                        :class ""})]
       [:div.flex.flex-1.flex-col
        (when title
-         [:div.text-sm.pb-2.font-bold {:style {:color "var(--lx-gray-11)"}} (highlight-query title)])
-       [:div {:class "text-sm font-medium"
-              :style {:color "var(--lx-gray-12)"}} (highlight-query text)
+         [:div.text-sm.pb-2.font-bold.text-gray-11 (highlight-query title)])
+       [:div {:class "text-sm font-medium text-gray-12"} (highlight-query text)
         (when info 
-          [:span {:style {:color "var(--lx-gray-11)"}} " — " (highlight-query info)])]]
+          [:span.text-gray-11 " — " (highlight-query info)])]]
       (when (or value-label value)
         [:div {:class "text-xs"}
          (when (and value-label value)
-           [:span {:style {:color "var(--lx-gray-11)"}} (str value-label ": ")])
+           [:span.text-gray-11 (str value-label ": ")])
          (when (and value-label (not value))
-           [:span {:style {:color "var(--lx-gray-11)"}} (str value-label)])
+           [:span.text-gray-11 (str value-label)])
          (when value
-           [:span {:style {:color "var(--lx-gray-12)"}} value])])
+           [:span.text-gray-11 value])])
       (when shortcut 
         [:div {:class "flex gap-1"}
          (for [[index option] (map-indexed vector (string/split shortcut #" \| "))]
            [:<>
              (when (< 0 index)
-               [:div {:style {:color "var(--lx-gray-11)"}} "|"])
+               [:div.text-gray-11 "|"])
              (for [sequence (string/split option #" ")
                    :let [text (->> (string/split sequence #"\+")
                                    (map print-shortcut-key)
@@ -137,5 +141,6 @@
                (button/root {:theme :gray 
                              :interactive false 
                              :text text
-                             :tiled true}))])])]]))
+                             :tiled true}
+                            context))])])]]))
         ; [:span {:style} (str key)])])])

resources/css/radix.css

@@ -1377,152 +1377,3 @@ html.dark, html[data-theme=dark] {
   --rx-yellow-11-alpha: hsla(48, 100%, 50.0%, 0.934);
   --rx-yellow-12-alpha: hsla(60, 100%, 91.8%, 0.980);
 }
-
-/* LOGSEQ X RADIX */
-
-.border-gray-01 { border-color: var(--lx-gray-01); }
-.border-gray-01-alpha { border-color: var(--lx-gray-01-alpha); }
-.border-gray-02 { border-color: var(--lx-gray-02); }
-.border-gray-02-alpha { border-color: var(--lx-gray-02-alpha); }
-.border-gray-03 { border-color: var(--lx-gray-03); }
-.border-gray-03-alpha { border-color: var(--lx-gray-03-alpha); }
-.border-gray-04 { border-color: var(--lx-gray-04); }
-.border-gray-04-alpha { border-color: var(--lx-gray-04-alpha); }
-.border-gray-05 { border-color: var(--lx-gray-05); }
-.border-gray-05-alpha { border-color: var(--lx-gray-05-alpha); }
-.border-gray-06 { border-color: var(--lx-gray-06); }
-.border-gray-06-alpha { border-color: var(--lx-gray-06-alpha); }
-.border-gray-07 { border-color: var(--lx-gray-07); }
-.border-gray-07-alpha { border-color: var(--lx-gray-07-alpha); }
-.border-gray-08 { border-color: var(--lx-gray-08); }
-.border-gray-08-alpha { border-color: var(--lx-gray-08-alpha); }
-.border-gray-09 { border-color: var(--lx-gray-09); }
-.border-gray-09-alpha { border-color: var(--lx-gray-09-alpha); }
-.border-gray-10 { border-color: var(--lx-gray-10); }
-.border-gray-10-alpha { border-color: var(--lx-gray-10-alpha); }
-.border-gray-11 { border-color: var(--lx-gray-11); }
-.border-gray-11-alpha { border-color: var(--lx-gray-11-alpha); }
-.border-gray-12 { border-color: var(--lx-gray-12); }
-.border-gray-12-alpha { border-color: var(--lx-gray-12-alpha); }
-.border-accent-01 { border-color: var(--lx-accent-01); }
-.border-accent-01-alpha { border-color: var(--lx-accent-01-alpha); }
-.border-accent-02 { border-color: var(--lx-accent-02); }
-.border-accent-02-alpha { border-color: var(--lx-accent-02-alpha); }
-.border-accent-03 { border-color: var(--lx-accent-03); }
-.border-accent-03-alpha { border-color: var(--lx-accent-03-alpha); }
-.border-accent-04 { border-color: var(--lx-accent-04); }
-.border-accent-04-alpha { border-color: var(--lx-accent-04-alpha); }
-.border-accent-05 { border-color: var(--lx-accent-05); }
-.border-accent-05-alpha { border-color: var(--lx-accent-05-alpha); }
-.border-accent-06 { border-color: var(--lx-accent-06); }
-.border-accent-06-alpha { border-color: var(--lx-accent-06-alpha); }
-.border-accent-07 { border-color: var(--lx-accent-07); }
-.border-accent-07-alpha { border-color: var(--lx-accent-07-alpha); }
-.border-accent-08 { border-color: var(--lx-accent-08); }
-.border-accent-08-alpha { border-color: var(--lx-accent-08-alpha); }
-.border-accent-09 { border-color: var(--lx-accent-09); }
-.border-accent-09-alpha { border-color: var(--lx-accent-09-alpha); }
-.border-accent-10 { border-color: var(--lx-accent-10); }
-.border-accent-10-alpha { border-color: var(--lx-accent-10-alpha); }
-.border-accent-11 { border-color: var(--lx-accent-11); }
-.border-accent-11-alpha { border-color: var(--lx-accent-11-alpha); }
-.border-accent-12 { border-color: var(--lx-accent-12); }
-.border-accent-12-alpha { border-color: var(--lx-accent-12-alpha); }
-
-.bg-gray-01 { background-color: var(--lx-gray-01); }
-.bg-gray-01-alpha { background-color: var(--lx-gray-01-alpha); }
-.bg-gray-02 { background-color: var(--lx-gray-02); }
-.bg-gray-02-alpha { background-color: var(--lx-gray-02-alpha); }
-.bg-gray-03 { background-color: var(--lx-gray-03); }
-.bg-gray-03-alpha { background-color: var(--lx-gray-03-alpha); }
-.bg-gray-04 { background-color: var(--lx-gray-04); }
-.bg-gray-04-alpha { background-color: var(--lx-gray-04-alpha); }
-.bg-gray-05 { background-color: var(--lx-gray-05); }
-.bg-gray-05-alpha { background-color: var(--lx-gray-05-alpha); }
-.bg-gray-06 { background-color: var(--lx-gray-06); }
-.bg-gray-06-alpha { background-color: var(--lx-gray-06-alpha); }
-.bg-gray-07 { background-color: var(--lx-gray-07); }
-.bg-gray-07-alpha { background-color: var(--lx-gray-07-alpha); }
-.bg-gray-08 { background-color: var(--lx-gray-08); }
-.bg-gray-08-alpha { background-color: var(--lx-gray-08-alpha); }
-.bg-gray-09 { background-color: var(--lx-gray-09); }
-.bg-gray-09-alpha { background-color: var(--lx-gray-09-alpha); }
-.bg-gray-10 { background-color: var(--lx-gray-10); }
-.bg-gray-10-alpha { background-color: var(--lx-gray-10-alpha); }
-.bg-gray-11 { background-color: var(--lx-gray-11); }
-.bg-gray-11-alpha { background-color: var(--lx-gray-11-alpha); }
-.bg-gray-12 { background-color: var(--lx-gray-12); }
-.bg-gray-12-alpha { background-color: var(--lx-gray-12-alpha); }
-.bg-accent-01 { background-color: var(--lx-accent-01); }
-.bg-accent-01-alpha { background-color: var(--lx-accent-01-alpha); }
-.bg-accent-02 { background-color: var(--lx-accent-02); }
-.bg-accent-02-alpha { background-color: var(--lx-accent-02-alpha); }
-.bg-accent-03 { background-color: var(--lx-accent-03); }
-.bg-accent-03-alpha { background-color: var(--lx-accent-03-alpha); }
-.bg-accent-04 { background-color: var(--lx-accent-04); }
-.bg-accent-04-alpha { background-color: var(--lx-accent-04-alpha); }
-.bg-accent-05 { background-color: var(--lx-accent-05); }
-.bg-accent-05-alpha { background-color: var(--lx-accent-05-alpha); }
-.bg-accent-06 { background-color: var(--lx-accent-06); }
-.bg-accent-06-alpha { background-color: var(--lx-accent-06-alpha); }
-.bg-accent-07 { background-color: var(--lx-accent-07); }
-.bg-accent-07-alpha { background-color: var(--lx-accent-07-alpha); }
-.bg-accent-08 { background-color: var(--lx-accent-08); }
-.bg-accent-08-alpha { background-color: var(--lx-accent-08-alpha); }
-.bg-accent-09 { background-color: var(--lx-accent-09); }
-.bg-accent-09-alpha { background-color: var(--lx-accent-09-alpha); }
-.bg-accent-10 { background-color: var(--lx-accent-10); }
-.bg-accent-10-alpha { background-color: var(--lx-accent-10-alpha); }
-.bg-accent-11 { background-color: var(--lx-accent-11); }
-.bg-accent-11-alpha { background-color: var(--lx-accent-11-alpha); }
-.bg-accent-12 { background-color: var(--lx-accent-12); }
-.bg-accent-12-alpha { background-color: var(--lx-accent-12-alpha); }
-
-.text-gray-01 { color: var(--lx-gray-01); }
-.text-gray-01-alpha { color: var(--lx-gray-01-alpha); }
-.text-gray-02 { color: var(--lx-gray-02); }
-.text-gray-02-alpha { color: var(--lx-gray-02-alpha); }
-.text-gray-03 { color: var(--lx-gray-03); }
-.text-gray-03-alpha { color: var(--lx-gray-03-alpha); }
-.text-gray-04 { color: var(--lx-gray-04); }
-.text-gray-04-alpha { color: var(--lx-gray-04-alpha); }
-.text-gray-05 { color: var(--lx-gray-05); }
-.text-gray-05-alpha { color: var(--lx-gray-05-alpha); }
-.text-gray-06 { color: var(--lx-gray-06); }
-.text-gray-06-alpha { color: var(--lx-gray-06-alpha); }
-.text-gray-07 { color: var(--lx-gray-07); }
-.text-gray-07-alpha { color: var(--lx-gray-07-alpha); }
-.text-gray-08 { color: var(--lx-gray-08); }
-.text-gray-08-alpha { color: var(--lx-gray-08-alpha); }
-.text-gray-09 { color: var(--lx-gray-09); }
-.text-gray-09-alpha { color: var(--lx-gray-09-alpha); }
-.text-gray-10 { color: var(--lx-gray-10); }
-.text-gray-10-alpha { color: var(--lx-gray-10-alpha); }
-.text-gray-11 { color: var(--lx-gray-11); }
-.text-gray-11-alpha { color: var(--lx-gray-11-alpha); }
-.text-gray-12 { color: var(--lx-gray-12); }
-.text-gray-12-alpha { color: var(--lx-gray-12-alpha); }
-.text-accent-01 { color: var(--lx-accent-01); }
-.text-accent-01-alpha { color: var(--lx-accent-01-alpha); }
-.text-accent-02 { color: var(--lx-accent-02); }
-.text-accent-02-alpha { color: var(--lx-accent-02-alpha); }
-.text-accent-03 { color: var(--lx-accent-03); }
-.text-accent-03-alpha { color: var(--lx-accent-03-alpha); }
-.text-accent-04 { color: var(--lx-accent-04); }
-.text-accent-04-alpha { color: var(--lx-accent-04-alpha); }
-.text-accent-05 { color: var(--lx-accent-05); }
-.text-accent-05-alpha { color: var(--lx-accent-05-alpha); }
-.text-accent-06 { color: var(--lx-accent-06); }
-.text-accent-06-alpha { color: var(--lx-accent-06-alpha); }
-.text-accent-07 { color: var(--lx-accent-07); }
-.text-accent-07-alpha { color: var(--lx-accent-07-alpha); }
-.text-accent-08 { color: var(--lx-accent-08); }
-.text-accent-08-alpha { color: var(--lx-accent-08-alpha); }
-.text-accent-09 { color: var(--lx-accent-09); }
-.text-accent-09-alpha { color: var(--lx-accent-09-alpha); }
-.text-accent-10 { color: var(--lx-accent-10); }
-.text-accent-10-alpha { color: var(--lx-accent-10-alpha); }
-.text-accent-11 { color: var(--lx-accent-11); }
-.text-accent-11-alpha { color: var(--lx-accent-11-alpha); }
-.text-accent-12 { color: var(--lx-accent-12); }
-.text-accent-12-alpha { color: var(--lx-accent-12-alpha); }

resources/css/shui.css

@@ -39,27 +39,42 @@
   box-shadow: none;
 }
 
-.shui__button-theme {
+.shui__button-theme-gray {
+  background: or(--lx-gray-05, --ls-quaternary-background);
+}
+
+.shui__button-theme-gray:hover {
+  background: or(--lx-gray-06, --ls-quaternary-background);
+}
+
+.shui__button-theme-gray:active {
+  background: or(--lx-gray-04, --ls-quaternary-background);
+}
+
+.dark .shui__button-theme,
+.dark .shui__button-theme-color {
   background: or(--lx-accent-09, --rx-blue-09);
 }
 
-.shui__button-theme:hover {
+.dark .shui__button-theme:hover,
+.dark .shui__button-theme-color:hover {
   background: or(--lx-accent-10, --rx-blue-10);
 }
 
-.shui__button-theme:active {
+.dark .shui__button-theme:active,
+.dark .shui__button-theme-color:active {
   background: or(--lx-accent-08, --rx-blue-08);
 }
 
-.shui__button-theme-gray {
+.dark .shui__button-theme-gray {
   background: or(--lx-gray-05, --ls-quaternary-background);
 }
 
-.shui__button-theme-gray:hover {
+.dark .shui__button-theme-gray:hover {
   background: or(--lx-gray-06, --ls-quaternary-background);
 }
 
-.shui__button-theme-gray:active {
+.dark .shui__button-theme-gray:active {
   background: or(--lx-gray-04, --ls-quaternary-background);
 }
 
@@ -79,6 +94,7 @@
 }
 
 .shui__button-theme-gradient.shui__button-,
+.shui__button-theme-gradient.shui__button-custom,
 .shui__button-theme-gradient.shui__button-indigo,
 .shui__button-theme-gradient.shui__button-blue,
 .shui__button-theme-gradient.shui__button-sky,
@@ -223,31 +239,60 @@
 .shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color); color: white; }
 .shui__button-theme-color.shui__button-color-custom  { background-color: var(--color-indigo-600); color: white; }
 
-.shui__button-theme-color.shui__button-color-lime    { background-color: var(--rx-lime-09)} 
-.shui__button-theme-color.shui__button-color-orange  { background-color: var(--rx-orange-09)} 
-.shui__button-theme-color.shui__button-color-gray    { background-color: var(--rx-gray-09)} 
-.shui__button-theme-color.shui__button-color-sand    { background-color: var(--rx-sand-09)} 
-.shui__button-theme-color.shui__button-color-crimson { background-color: var(--rx-crimson-09)} 
-.shui__button-theme-color.shui__button-color-yellow  { background-color: var(--rx-yellow-09)} 
-.shui__button-theme-color.shui__button-color-green   { background-color: var(--rx-green-09)} 
-.shui__button-theme-color.shui__button-color-indigo  { background-color: var(--rx-indigo-09)} 
-.shui__button-theme-color.shui__button-color-cyan    { background-color: var(--rx-cyan-09)} 
-.shui__button-theme-color.shui__button-color-violet  { background-color: var(--rx-violet-09)} 
-.shui__button-theme-color.shui__button-color-bronze  { background-color: var(--rx-bronze-09)} 
-.shui__button-theme-color.shui__button-color-slate   { background-color: var(--rx-slate-09)} 
-.shui__button-theme-color.shui__button-color-gold    { background-color: var(--rx-gold-09)} 
-.shui__button-theme-color.shui__button-color-sage    { background-color: var(--rx-sage-09)} 
-.shui__button-theme-color.shui__button-color-mauve   { background-color: var(--rx-mauve-09)} 
-.shui__button-theme-color.shui__button-color-mint    { background-color: var(--rx-mint-09)} 
-.shui__button-theme-color.shui__button-color-red     { background-color: var(--rx-red-09)} 
-.shui__button-theme-color.shui__button-color-blue    { background-color: var(--rx-blue-09)} 
-.shui__button-theme-color.shui__button-color-grass   { background-color: var(--rx-grass-09)} 
-.shui__button-theme-color.shui__button-color-plum    { background-color: var(--rx-plum-09)} 
-.shui__button-theme-color.shui__button-color-pink    { background-color: var(--rx-pink-09)} 
-.shui__button-theme-color.shui__button-color-teal    { background-color: var(--rx-teal-09)} 
-.shui__button-theme-color.shui__button-color-amber   { background-color: var(--rx-amber-09)} 
-.shui__button-theme-color.shui__button-color-purple  { background-color: var(--rx-purple-09)} 
-.shui__button-theme-color.shui__button-color-brown   { background-color: var(--rx-brown-09)} 
-.shui__button-theme-color.shui__button-color-sky     { background-color: var(--rx-sky-09)} 
-.shui__button-theme-color.shui__button-color-olive   { background-color: var(--rx-olive-09)} 
-.shui__button-theme-color.shui__button-color-tomato  { background-color: var(--rx-tomato-09)} 
+.shui__button-theme-color.shui__button-color-lime    { color: white; background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-10); } &:active { background-color: var(--rx-lime-08); }} 
+.shui__button-theme-color.shui__button-color-orange  { color: white; background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-10); } &:active { background-color: var(--rx-orange-08); }} 
+.shui__button-theme-color.shui__button-color-gray    { color: white; background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-10); } &:active { background-color: var(--rx-gray-08); }} 
+.shui__button-theme-color.shui__button-color-sand    { color: white; background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-10); } &:active { background-color: var(--rx-sand-08); }} 
+.shui__button-theme-color.shui__button-color-crimson { color: white; background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-10); } &:active { background-color: var(--rx-crimson-08); }} 
+.shui__button-theme-color.shui__button-color-yellow  { color: white; background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-10); } &:active { background-color: var(--rx-yellow-08); }} 
+.shui__button-theme-color.shui__button-color-green   { color: white; background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-10); } &:active { background-color: var(--rx-green-08); }} 
+.shui__button-theme-color.shui__button-color-indigo  { color: white; background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-10); } &:active { background-color: var(--rx-indigo-08); }} 
+.shui__button-theme-color.shui__button-color-cyan    { color: white; background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-10); } &:active { background-color: var(--rx-cyan-08); }} 
+.shui__button-theme-color.shui__button-color-violet  { color: white; background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-10); } &:active { background-color: var(--rx-violet-08); }} 
+.shui__button-theme-color.shui__button-color-bronze  { color: white; background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-10); } &:active { background-color: var(--rx-bronze-08); }} 
+.shui__button-theme-color.shui__button-color-slate   { color: white; background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-10); } &:active { background-color: var(--rx-slate-08); }} 
+.shui__button-theme-color.shui__button-color-gold    { color: white; background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-10); } &:active { background-color: var(--rx-gold-08); }} 
+.shui__button-theme-color.shui__button-color-sage    { color: white; background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-10); } &:active { background-color: var(--rx-sage-08); }} 
+.shui__button-theme-color.shui__button-color-mauve   { color: white; background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-10); } &:active { background-color: var(--rx-mauve-08); }} 
+.shui__button-theme-color.shui__button-color-mint    { color: white; background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-10); } &:active { background-color: var(--rx-mint-08); }} 
+.shui__button-theme-color.shui__button-color-red     { color: white; background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-10); } &:active { background-color: var(--rx-red-08); }} 
+.shui__button-theme-color.shui__button-color-blue    { color: white; background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-10); } &:active { background-color: var(--rx-blue-08); }} 
+.shui__button-theme-color.shui__button-color-grass   { color: white; background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-10); } &:active { background-color: var(--rx-grass-08); }} 
+.shui__button-theme-color.shui__button-color-plum    { color: white; background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-10); } &:active { background-color: var(--rx-plum-08); }} 
+.shui__button-theme-color.shui__button-color-pink    { color: white; background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-10); } &:active { background-color: var(--rx-pink-08); }} 
+.shui__button-theme-color.shui__button-color-teal    { color: white; background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-10); } &:active { background-color: var(--rx-teal-08); }} 
+.shui__button-theme-color.shui__button-color-amber   { color: white; background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-10); } &:active { background-color: var(--rx-amber-08); }} 
+.shui__button-theme-color.shui__button-color-purple  { color: white; background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-10); } &:active { background-color: var(--rx-purple-08); }} 
+.shui__button-theme-color.shui__button-color-brown   { color: white; background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-10); } &:active { background-color: var(--rx-brown-08); }} 
+.shui__button-theme-color.shui__button-color-sky     { color: white; background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-10); } &:active { background-color: var(--rx-sky-08); }} 
+.shui__button-theme-color.shui__button-color-olive   { color: white; background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-10); } &:active { background-color: var(--rx-olive-08); }} 
+.shui__button-theme-color.shui__button-color-tomato  { color: white; background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-10); } &:active { background-color: var(--rx-tomato-08); }} 
+
+.dark .shui__button-theme-color.shui__button-color-lime    { background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-08); } &:active { background-color: var(--rx-lime-07); }} 
+.dark .shui__button-theme-color.shui__button-color-orange  { background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-08); } &:active { background-color: var(--rx-orange-07); }} 
+.dark .shui__button-theme-color.shui__button-color-gray    { background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-08); } &:active { background-color: var(--rx-gray-07); }} 
+.dark .shui__button-theme-color.shui__button-color-sand    { background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-08); } &:active { background-color: var(--rx-sand-07); }} 
+.dark .shui__button-theme-color.shui__button-color-crimson { background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-08); } &:active { background-color: var(--rx-crimson-07); }} 
+.dark .shui__button-theme-color.shui__button-color-yellow  { background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-08); } &:active { background-color: var(--rx-yellow-07); }} 
+.dark .shui__button-theme-color.shui__button-color-green   { background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-08); } &:active { background-color: var(--rx-green-07); }} 
+.dark .shui__button-theme-color.shui__button-color-indigo  { background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-08); } &:active { background-color: var(--rx-indigo-07); }} 
+.dark .shui__button-theme-color.shui__button-color-cyan    { background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-08); } &:active { background-color: var(--rx-cyan-07); }} 
+.dark .shui__button-theme-color.shui__button-color-violet  { background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-08); } &:active { background-color: var(--rx-violet-07); }} 
+.dark .shui__button-theme-color.shui__button-color-bronze  { background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-08); } &:active { background-color: var(--rx-bronze-07); }} 
+.dark .shui__button-theme-color.shui__button-color-slate   { background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-08); } &:active { background-color: var(--rx-slate-07); }} 
+.dark .shui__button-theme-color.shui__button-color-gold    { background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-08); } &:active { background-color: var(--rx-gold-07); }} 
+.dark .shui__button-theme-color.shui__button-color-sage    { background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-08); } &:active { background-color: var(--rx-sage-07); }} 
+.dark .shui__button-theme-color.shui__button-color-mauve   { background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-08); } &:active { background-color: var(--rx-mauve-07); }} 
+.dark .shui__button-theme-color.shui__button-color-mint    { background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-08); } &:active { background-color: var(--rx-mint-07); }} 
+.dark .shui__button-theme-color.shui__button-color-red     { background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-08); } &:active { background-color: var(--rx-red-07); }} 
+.dark .shui__button-theme-color.shui__button-color-blue    { background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-08); } &:active { background-color: var(--rx-blue-07); }} 
+.dark .shui__button-theme-color.shui__button-color-grass   { background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-08); } &:active { background-color: var(--rx-grass-07); }} 
+.dark .shui__button-theme-color.shui__button-color-plum    { background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-08); } &:active { background-color: var(--rx-plum-07); }} 
+.dark .shui__button-theme-color.shui__button-color-pink    { background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-08); } &:active { background-color: var(--rx-pink-07); }} 
+.dark .shui__button-theme-color.shui__button-color-teal    { background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-08); } &:active { background-color: var(--rx-teal-07); }} 
+.dark .shui__button-theme-color.shui__button-color-amber   { background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-08); } &:active { background-color: var(--rx-amber-07); }} 
+.dark .shui__button-theme-color.shui__button-color-purple  { background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-08); } &:active { background-color: var(--rx-purple-07); }} 
+.dark .shui__button-theme-color.shui__button-color-brown   { background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-08); } &:active { background-color: var(--rx-brown-07); }} 
+.dark .shui__button-theme-color.shui__button-color-sky     { background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-08); } &:active { background-color: var(--rx-sky-07); }} 
+.dark .shui__button-theme-color.shui__button-color-olive   { background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-08); } &:active { background-color: var(--rx-olive-07); }} 
+.dark .shui__button-theme-color.shui__button-color-tomato  { background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-08); } &:active { background-color: var(--rx-tomato-07); }} 

src/main/frontend/components/cmdk.cljs

@@ -10,17 +10,19 @@
     [frontend.db.model :as model]
     [frontend.handler.command-palette :as cp-handler]
     [frontend.handler.editor :as editor-handler]
+    [frontend.handler.page :as page-handler]
     [frontend.handler.route :as route-handler]
     [frontend.handler.search :as search-handler]
+    [frontend.handler.whiteboard :as whiteboard-handler]
     [frontend.modules.shortcut.core :as shortcut]
     [frontend.modules.shortcut.data-helper :as shortcut-helper]
     [frontend.search :as search]
+    [frontend.shui :refer [make-shui-context]]
     [frontend.state :as state]
     [frontend.ui :as ui]
     [frontend.util :as util]
     [frontend.util.page :as page-util]
     [goog.functions :as gfun]
-    [frontend.shui :refer [make-shui-context]]
     [logseq.shui.core :as shui]
     [promesa.core :as p]
     [rum.core :as rum]))
@@ -35,8 +37,6 @@
    {:text "Search only blocks"       :info "Add filter to search" :icon-theme :gray :icon "block" :filter {:group :blocks}}
    {:text "Search only whiteboards"  :info "Add filter to search" :icon-theme :gray :icon "whiteboard" :filter {:group :whiteboards}}
    {:text "Search only files"        :info "Add filter to search" :icon-theme :gray :icon "file" :filter {:group :files}}])
-   ; {:text "Create block"             :info "Add a block to today's journal page" :icon "block"         :icon-theme :color}
-   ; {:text "Generate short answer"    :info "Ask a language model"                :icon "question-mark" :icon-theme :gradient}
 
 (def default-commands 
   [{:text "Open settings" :icon "settings"      :icon-theme :gray}
@@ -54,9 +54,16 @@
    :blocks         {:status :success :show-more false :items nil} 
    :files          {:status :success :show-more false :items nil}})        
 
+(defn create-items [q]
+  (if-not (seq q)
+    []
+    [{:text "Create page"       :icon "page"       :icon-theme :color :shortcut "cmd+shift+P" :info (str "Create page called '" q "'") :source-create :page} 
+     {:text "Create whiteboard" :icon "whiteboard" :icon-theme :color :shortcut "cmd+shift+W" :info (str "Create whiteboard called '" q "'") :source-create :whiteboard}]))
+
 ;; Take the results, decide how many items to show, and order the results appropriately
 (defn state->results-ordered [state]
   (let [results @(::results state)
+        input @(::input state)
         index (volatile! -1)
         visible-items (fn [group] 
                         (let [{:keys [items show-more]} (get results group)]
@@ -67,11 +74,18 @@
                  ["Commands"       :commands       (visible-items :commands)]
                  ["Pages"          :pages          (visible-items :pages)]
                  ["Whiteboards"    :whiteboards    (visible-items :whiteboards)]
-                 ["Blocks"         :blocks         (visible-items :blocks)]]]
+                 ["Blocks"         :blocks         (visible-items :blocks)]
+                 ["Create"         :create         (create-items input)]]]
     ; results
     (for [[group-name group-key group-items] results]
       [group-name group-key (mapv #(assoc % :item-index (vswap! index inc)) group-items)])))
 
+(defn state->highlighted-item [state]
+  (or (some-> state ::highlighted-item deref)
+      (some->> (state->results-ordered state)
+               (mapcat last)
+               (first))))
+
 ;; Take the ordered results and the highlight index and determine which item is highlighted
 ; (defn state->highlighted-item 
 ;   ([state] (state->highlighted-item state (state->results-ordered state)))
@@ -257,58 +271,71 @@
   (when-not (some-> state ::alt? deref)
     (state/close-modal!)))
 
-(defmulti handle-action (fn [action _state _item _event] action))
+(defmulti handle-action (fn [action _state _event] action))
 
-(defmethod handle-action :close [_ state item event]
+(defmethod handle-action :close [_ state event]
   (js/console.log :handle-action/cancel)
   (state/close-modal!))
 
-(defmethod handle-action :copy-page-ref [_ state item event]
-  (when-let [page-name (:source-page item)]
+(defmethod handle-action :copy-page-ref [_ state event]
+  (when-let [page-name (some-> state state->highlighted-item :source-page)]
     (util/copy-to-clipboard! page-name)
     (close-unless-alt! state)))
     
-(defmethod handle-action :copy-block-ref [_ state item event]
-  (when-let [block-uuid (some-> item :source-block :block/uuid uuid)]
+(defmethod handle-action :copy-block-ref [_ state event]
+  (when-let [block-uuid (some-> state state->highlighted-item :source-block :block/uuid uuid)]
     (editor-handler/copy-block-ref! block-uuid)
     (close-unless-alt! state)))
 
-(defmethod handle-action :open-page [_ state item event]
-  (when-let [page-name (:source-page item)]
+(defmethod handle-action :open-page [_ state event]
+  (when-let [page-name (some-> state state->highlighted-item :source-page)]
     (route-handler/redirect-to-page! page-name)
     (close-unless-alt! state)))
 
-(defmethod handle-action :open-block [_ state item event]
+(defmethod handle-action :open-block [_ state event]
   (let [get-block-page (partial model/get-block-page (state/get-current-repo))]
-    (when-let [page (some-> item :source-block :block/uuid uuid get-block-page :block/name model/get-redirect-page-name)]
+    (when-let [page (some-> state state->highlighted-item :source-block :block/uuid uuid get-block-page :block/name model/get-redirect-page-name)]
       (route-handler/redirect-to-page! page)
       (close-unless-alt! state))))
 
-(defmethod handle-action :open-page-right [_ state item event]
-  (when-let [page-uuid (some-> item :source-page model/get-page :block/uuid uuid)]
+(defmethod handle-action :open-page-right [_ state event]
+  (when-let [page-uuid (some-> state state->highlighted-item :source-page model/get-page :block/uuid uuid)]
     (js/console.log "oepn-page-right" page-uuid) 
     (editor-handler/open-block-in-sidebar! page-uuid)
     (close-unless-alt! state)))
 
-(defmethod handle-action :open-block-right [_ state item event]
-  (when-let [block-uuid (some-> item :source-block :block/uuid uuid)]
+(defmethod handle-action :open-block-right [_ state event]
+  (when-let [block-uuid (some-> state state->highlighted-item :source-block :block/uuid uuid)]
     (js/console.log "oepn-block-right" block-uuid) 
     (editor-handler/open-block-in-sidebar! block-uuid)
     (close-unless-alt! state)))
 
-(defmethod handle-action :trigger [_ state item event]
-  (js/console.log "handle-action/trigger" (clj->js (keys item)) (clj->js item))
-  (when-let [action (some-> item :source-command :action)]
+(defmethod handle-action :trigger [_ state event]
+  (when-let [action (some-> state state->highlighted-item :source-command :action)]
     (action)
     (close-unless-alt! state)))
 
-(defmethod handle-action :filter [_ state item event]
+(defmethod handle-action :filter [_ state event]
   (let [!filter (::filter state) 
-        filter (some-> item :filter)]
+        filter (some-> state state->highlighted-item :filter)]
     (if filter
       (reset! !filter filter)
       (reset! !filter nil))))
 
+(defmethod handle-action :create [_ state event]
+  (let [item (state->highlighted-item state)
+        create-whiteboard? (= :whiteboard (:source-create item))
+        create-page? (= :page (:source-create item))
+        alt? (some-> state ::alt deref)
+        !input (::input state)]
+    (js/console.log "handle-action/create" create-whiteboard? create-page? alt? @!input item)
+    (cond 
+      (and create-whiteboard? alt?) (whiteboard-handler/create-new-whiteboard-page! @!input)
+      (and create-whiteboard? (not alt?)) (whiteboard-handler/create-new-whiteboard-and-redirect! @!input)
+      (and create-page? alt?) (page-handler/create! @!input {:redirect? false}) 
+      (and create-page? (not alt?)) (page-handler/create! @!input {:redirect? true}))
+    (close-unless-alt! state)))
+
 (rum/defc result-group < rum/reactive 
   [state title group visible-items first-item]
   (let [{:keys [show-more items]} (some-> state ::results deref group) 
@@ -324,16 +351,14 @@
                                (when (< (dec GROUP-LIMIT) (.indexOf items highlighted-item))
                                  (reset! (::highlighted-item state) (nth items 4 nil))))] 
     [:div {:class ""}
-     [:div {:class "text-xs py-1.5 px-6 flex justify-between items-center gap-2" 
-            :style {:color "var(--lx-gray-11)" 
-                    :background "var(--lx-gray-02)"}} 
-      [:div {:class "font-bold" 
-             :style {:color "var(--lx-gray-11)"}} title]
-      [:div {:class "bg-white/20 px-1.5 py-px text-white rounded-full"
-             :style {:font-size "0.6rem"}}
-       (if (<= 100 (count items))
-         (str "99+")
-         (count items))]
+     [:div {:class "text-xs py-1.5 px-6 flex justify-between items-center gap-2 text-gray-11 bg-gray-02"} 
+      [:div {:class "font-bold text-gray-11"} title]
+      (when (not= group :create)
+       [:div {:class "bg-gray-05 px-1.5 py-px text-gray-12 rounded-full"
+              :style {:font-size "0.6rem"}}
+        (if (<= 100 (count items))
+          (str "99+")
+          (count items))])
       [:div {:class "flex-1"}]
       (cond 
         (<= (count items) GROUP-LIMIT) [:div]
@@ -344,7 +369,7 @@
       (for [item visible-items
             :let [highlighted? (= item highlighted-item)]]
        (shui/list-item (assoc item 
-                              :query @(::input state)
+                              :query (when-not (= group :create) @(::input state))
                               :highlighted highlighted?
                               ;; for some reason, the highlight effect does not always trigger on a 
                               ;; boolean value change so manually pass in the dep
@@ -364,7 +389,8 @@
                                                 :commands       (reset! (::actions state) [:close :trigger])
                                                 :pages          (reset! (::actions state) [:close :copy-page-ref :open-page-right :open-page])
                                                 :blocks         (reset! (::actions state) [:close :copy-block-ref :open-block-right :open-block])
-                                                nil)))
+                                                :create         (reset! (::actions state) [:close :create])
+                                                (reset! (::actions state) [:close]))))
                        (make-shui-context)))]]))
 
 (defn move-highlight [state n]
@@ -406,9 +432,9 @@
         "ArrowUp"   (move-highlight state -1)
         "Enter" (if shift?
                   (when-let [action (some #{:open-block-right :open-page-right} @(::actions state))]
-                    (handle-action action state @(::highlighted-item state) e))
-                  (when-let [action (some #{:open-block :open-page :filter :trigger} @(::actions state))]
-                    (handle-action action state @(::highlighted-item state) e)))
+                    (handle-action action state e))
+                  (when-let [action (some #{:open-block :open-page :filter :trigger :create} @(::actions state))]
+                    (handle-action action state e)))
         "Escape" (when (seq @(::input state))
                    (.preventDefault e)
                    (.stopPropagation e)
@@ -591,8 +617,8 @@
             :style {:background "var(--lx-gray-03)"
                     :border-top "1px solid var(--lx-gray-07)"}}
       [:div {:class "flex items-stretch gap-2"}
-       (for [[tab-name tab-icon] [["Search" "search"] 
-                                  ["Capture" "square-plus"]]
+       (for [[tab-name tab-icon] [["Search" "search"]] 
+                                  ; ["Capture" "square-plus"]]
              :let [active? (= tab-name "Search")]]
         [:div {:class "flex items-center px-1.5 gap-1 relative"}
          (when active? 
@@ -602,18 +628,19 @@
          [:div {:class ""} tab-name]])]
       [:div {:class "flex items-center py-3 gap-4"}
        (for [action actions
-             :let [on-click (partial handle-action action state highlighted-item)
+             :let [on-click (partial handle-action action state)
                    str-alt #(if alt? (str % " (keep open)") %)]
              :when (if shift? 
                      (#{:open-page-right :open-block-right :trigger :filter :close} action) 
-                     (#{:open-page :open-block :copy-page-ref :copy-block-ref :trigger :filter :close} action))]
+                     (#{:open-page :open-block :copy-page-ref :copy-block-ref :trigger :filter :close :create} action))]
          (case action
-           :copy-page-ref    (shui/button {:text (str-alt "Copy")             :theme :gray  :on-click on-click :shortcut ["cmd" "c"]}) 
-           :copy-block-ref   (shui/button {:text (str-alt "Copy")             :theme :gray  :on-click on-click :shortcut ["cmd" "c"]}) 
-           :open-page-right  (shui/button {:text (str-alt "Open in sidebar")  :theme :color :on-click on-click :shortcut ["return"]})
-           :open-page        (shui/button {:text (str-alt "Open")             :theme :color :on-click on-click :shortcut ["return"]})  
-           :open-block-right (shui/button {:text (str-alt "Open in sidebar")  :theme :color :on-click on-click :shortcut ["return"]})
-           :open-block       (shui/button {:text (str-alt "Open page")        :theme :color :on-click on-click :shortcut ["return"]})  
-           :trigger          (shui/button {:text (str-alt "Trigger")          :theme :color :on-click on-click :shortcut ["return"]})  
-           :close            (shui/button {:text "Close"                      :theme :text  :on-click on-click})
-           :filter           (shui/button {:text "Filter"                     :theme :color :on-click on-click :shortcut ["return"]})))]]]))  
+           :copy-page-ref    (shui/button {:text (str-alt "Copy")             :theme :gray  :on-click on-click :shortcut ["cmd" "c"]} (make-shui-context)) 
+           :copy-block-ref   (shui/button {:text (str-alt "Copy")             :theme :gray  :on-click on-click :shortcut ["cmd" "c"]} (make-shui-context)) 
+           :open-page-right  (shui/button {:text (str-alt "Open in sidebar")  :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))
+           :open-page        (shui/button {:text (str-alt "Open")             :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))  
+           :open-block-right (shui/button {:text (str-alt "Open in sidebar")  :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))
+           :open-block       (shui/button {:text (str-alt "Open page")        :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))  
+           :trigger          (shui/button {:text (str-alt "Trigger")          :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))  
+           :create           (shui/button {:text "Create"                     :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))
+           :close            (shui/button {:text "Close"                      :theme :text  :on-click on-click} (make-shui-context))
+           :filter           (shui/button {:text "Filter"                     :theme :color :on-click on-click :shortcut ["return"]} (make-shui-context))))]]]))