improve(plugin): pin or unpin for plugin ui button from toolbar

src/main/frontend/components/plugins.css

@@ -776,6 +776,43 @@
       @apply pr-3 opacity-30 hover:opacity-100 transition-opacity;
     }
   }
+
+  .toolbar-plugins-manager {
+    &-trigger {
+      .dropdown-wrapper {
+        max-height: 80vh;
+        overflow-y: auto;
+      }
+      
+      .menu-link {
+        padding: 3px 5px;
+      }
+
+      .item-wrap {
+        padding-right: 28px;
+        font-size: 13px;
+        position: relative;
+
+        div[data-injected-ui] .ti {
+          position: relative;
+          bottom: -1px;
+        }
+      }
+
+      .pin {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        padding: 0 6px;
+
+        &.pinned {
+          color: var(--ls-link-ref-text-color);
+          opacity: 90;
+        }
+      }
+    }
+  }
 }
 
 .lsp-frame-readme {

src/main/frontend/components/theme.cljs

@@ -12,7 +12,7 @@
             [rum.core :as rum]))
 
 (rum/defc container
-  [{:keys [t route theme on-click current-repo nfs-granted? db-restoring?
+  [{:keys [route theme on-click current-repo nfs-granted? db-restoring?
            settings-open? sidebar-open? system-theme? sidebar-blocks-len]} child]
   (let [mounted-fn (use-mounted)
         [restored-sidebar? set-restored-sidebar?] (rum/use-state false)]
@@ -37,8 +37,9 @@
 
     (rum/use-effect!
      #(when lsp-enabled?
-        (plugin-handler/setup-install-listener! t))
-     [t])
+        (plugin-handler/setup-install-listener!)
+        (plugin-handler/load-plugin-preferences))
+     [])
 
     (rum/use-effect!
      (fn []

src/main/frontend/handler/plugin.cljs

@@ -14,6 +14,7 @@
             [clojure.string :as string]
             [lambdaisland.glogi :as log]
             [frontend.components.svg :as svg]
+            [frontend.context.i18n :refer [t]]
             [frontend.format :as format]))
 
 (defonce lsp-enabled?
@@ -42,6 +43,23 @@
 (defonce stats-url (str central-endpoint "stats.json"))
 (declare select-a-plugin-theme)
 
+(defn load-plugin-preferences
+  []
+  (-> (invoke-exported-api "load_user_preferences")
+      (p/then #(bean/->clj %))
+      (p/then #(state/set-state! :plugin/preferences %))
+      (p/catch
+       #(js/console.error %))))
+
+(defn save-plugin-preferences!
+  ([input] (save-plugin-preferences! input true))
+  ([input reload-state?]
+   (when-let [^js input (and (map? input) (bean/->js input))]
+     (p/then
+      (js/LSPluginCore.saveUserPreferences input)
+      #(when reload-state?
+         (load-plugin-preferences))))))
+
 (defn gh-repo-url [repo]
   (str "https://github.com/" repo))
 
@@ -159,7 +177,7 @@
     (filter #(has-setting-schema? (:id %)) plugins)))
 
 (defn setup-install-listener!
-  [t]
+  []
   (let [channel (name :lsp-installed)
         listener (fn [^js _ ^js e]
                    (js/console.debug :lsp-installed e)
@@ -540,6 +558,15 @@
   [^js pl req-id payload]
   (call-plugin pl :#lsp#request#callback {:requestId req-id :payload payload}))
 
+(defn op-pinned-toolbar-item!
+  [key op]
+  (let [pinned (state/sub [:plugin/preferences :pinnedToolbarItems])
+        pinned (into #{} pinned)]
+    (when-let [op-fn (case op
+                       :add conj
+                       :remove disj)]
+      (save-plugin-preferences! {:pinnedToolbarItems (op-fn pinned (name key))}))))
+
 ;; components
 (rum/defc lsp-indicator < rum/reactive
   []

src/main/frontend/state.cljs

@@ -160,6 +160,7 @@
      :plugin/enabled                        (and (util/electron?)
                                                  ;; true false :theme-only
                                                  ((fnil identity true) (storage/get :lsp-core-enabled)))
+     :plugin/preferences                    nil
      :plugin/indicator-text                 nil
      :plugin/installed-plugins              {}
      :plugin/installed-themes               []

src/main/frontend/ui.cljs

@@ -100,11 +100,11 @@
 ;; public exports
 (rum/defcs dropdown < (mixins/modal :open?)
   [state content-fn modal-content-fn
-   & [{:keys [modal-class z-index]
+   & [{:keys [modal-class z-index trigger-class]
        :or   {z-index 999}}]]
   (let [{:keys [open?]} state
         modal-content (modal-content-fn state)]
-    [:div.relative.ui__dropdown-trigger {:style {:z-index z-index}}
+    [:div.relative.ui__dropdown-trigger {:style {:z-index z-index} :class trigger-class}
      (content-fn state)
      (css-transition
       {:in @open? :timeout 0}
@@ -125,20 +125,21 @@
    (fn [{:keys [close-fn]}]
      [:div.py-1.rounded-md.shadow-xs
       (when links-header links-header)
-      (for [{:keys [options title icon hr hover-detail]} (if (fn? links) (links) links)]
+      (for [{:keys [options title icon hr hover-detail item]} (if (fn? links) (links) links)]
         (let [new-options
               (merge options
-                     {:title hover-detail
+                     {:title    hover-detail
                       :on-click (fn [e]
-                                  (when-let [on-click-fn (:on-click options)]
-                                    (on-click-fn e))
-                                  (close-fn))})
+                                  (when-not (false? (when-let [on-click-fn (:on-click options)]
+                                                      (on-click-fn e)))
+                                    (close-fn)))})
               child (if hr
                       nil
-                      [:div.flex.items-center
-                       (when icon icon)
-                       [:div {:style {:margin-right "8px"
-                                      :margin-left "4px"}} title]])]
+                      (or item
+                          [:div.flex.items-center
+                           (when icon icon)
+                           [:div {:style {:margin-right "8px"
+                                          :margin-left  "4px"}} title]]))]
           (if hr
             [:hr.my-1 {:key "dropdown-hr"}]
             (rum/with-key