enhance(ui): polish details for the settings-related dialog

src/main/frontend/components/container.css

@@ -531,7 +531,7 @@
 }
 
 .ui__dialog-content[label=app-settings] {
-  @apply w-auto md:max-w-4xl overflow-hidden;
+  @apply w-auto md:max-w-5xl overflow-hidden;
 
   .settings-modal {
     @apply -mx-6 -mt-6 -mb-6 rounded-xl;

src/main/frontend/components/plugins.cljs

@@ -1334,14 +1334,12 @@
         _       (js/setTimeout #(reset! *cache focused) 100)]
 
     [:div.cp__plugins-settings.cp__settings-main
-     [:header
-      [:h1.title (ui/icon "puzzle" {:size 22})
-       [:strong (or title (t :settings-of-plugins))]]]
-
      [:div.cp__settings-inner.md:flex
       {:class (util/classnames [{:no-aside (not nav?)}])}
       (when nav?
         [:aside.md:w-64 {:style {:min-width "10rem"}}
+         [:header.cp__settings-header
+          [:h1.cp__settings-modal-title (or title (t :settings-of-plugins))]]
          (let [plugins (plugin-handler/get-enabled-plugins-if-setting-schema)]
            [:ul.settings-plugin-list
             (for [{:keys [id name title icon]} plugins]

src/main/frontend/components/plugins.css

@@ -468,15 +468,6 @@
   }
 
   &-settings {
-    > header {
-      padding: 8px 12px;
-      border-bottom: 1px solid var(--ls-quaternary-background-color);
-
-      h1 {
-        @apply flex items-center text-[22px] m-0 space-x-1;
-      }
-    }
-
     &-inner {
       position: relative;
       padding: 10px 0 20px;
@@ -598,7 +589,7 @@
         @apply max-h-[70vh] overflow-auto p-3;
 
         ul {
-          @apply list-none p-0 m-0;
+          @apply list-none pt-1.5 m-0;
 
           img.icon {
             @apply w-[20px] h-[20px];

src/main/frontend/components/plugins_settings.cljs

@@ -116,26 +116,28 @@
      [pid])
 
     (if (seq schema)
-      [:div.cp__plugins-settings-inner
-       ;; settings.json
-       [:span.edit-file
-        (edit-settings-file pid nil)]
-
-       ;; render items
-       (for [desc schema
-             :let [key (:key desc)
-                   val (get settings (keyword key))
-                   type (keyword (:type desc))
-                   desc (update desc :description #(plugin-handler/markdown-to-html %))]]
-
-         (condp contains? type
-           #{:string :number} (render-item-input val desc update-setting!)
-           #{:boolean} (render-item-toggle val desc update-setting!)
-           #{:enum} (render-item-enum val desc update-setting!)
-           #{:object} (render-item-object val desc pid)
-           #{:heading} (render-item-heading desc)
-
-           [:p (str "#Not Handled#" key)]))]
+      [:<>
+       [:h2.text-xl.px-2.pt-1.opacity-90 "ID: " pid]
+       [:div.cp__plugins-settings-inner
+        ;; settings.json
+        [:span.edit-file
+         (edit-settings-file pid nil)]
+
+        ;; render items
+        (for [desc schema
+              :let [key (:key desc)
+                    val (get settings (keyword key))
+                    type (keyword (:type desc))
+                    desc (update desc :description #(plugin-handler/markdown-to-html %))]]
+
+          (condp contains? type
+            #{:string :number} (render-item-input val desc update-setting!)
+            #{:boolean} (render-item-toggle val desc update-setting!)
+            #{:enum} (render-item-enum val desc update-setting!)
+            #{:object} (render-item-object val desc pid)
+            #{:heading} (render-item-heading desc)
+
+            [:p (str "#Not Handled#" key)]))]]
 
       ;; no settings
       [:h2.font-bold.text-lg.py-4.warning "No Settings Schema!"])))

src/main/frontend/components/settings.cljs

@@ -1185,7 +1185,7 @@
 
     [:div#settings.cp__settings-main
      (settings-effect @*active)
-     [:div.cp__settings-inner {:class "min-h-[70dvh] max-h-[70dvh]"}
+     [:div.cp__settings-inner
       [:aside.md:w-64 {:style {:min-width "10rem"}}
        [:header.cp__settings-header
         [:h1.cp__settings-modal-title (t :settings)]]
@@ -1216,7 +1216,10 @@
              {:key      text
               :data-id  id
               :class    (util/classnames [{:active (= label (first @*active))}])
-              :on-click #(reset! *active [label (first @*active)])}
+              :on-click (fn []
+                          (if (= label :plugins-setting)
+                            (state/pub-event! [:go/plugins-settings (:id (first plugins-of-settings))])
+                            (reset! *active [label (first @*active)])))}
 
              [:a.flex.items-center.settings-menu-link icon [:strong text]]]))]]
 

src/main/frontend/components/settings.css

@@ -1,6 +1,6 @@
 .cp__settings {
   &-inner {
-    @apply flex flex-col md:flex-row;
+    @apply flex flex-col md:flex-row min-h-[50dvh] max-h-[66dvh];
 
     > header {
       padding: 10px;

src/main/frontend/components/theme.cljs

@@ -125,6 +125,7 @@
         (shui/dialog-open!
           (fn [] [:div.settings-modal (settings/settings settings-open?)])
           {:label "app-settings"
+           :align :top
            :id :app-settings})
         (shui/dialog-close! :app-settings))
      [settings-open?])

src/main/frontend/handler/events.cljs

@@ -444,12 +444,10 @@
   (plugin/open-plugins-from-file-modal! plugins))
 
 (defmethod handle :go/plugins-settings [[_ pid nav? title]]
-  (if pid
-    (do
-      (state/set-state! :plugin/focused-settings pid)
-      (state/set-state! :plugin/navs-settings? (not (false? nav?)))
-      (plugin/open-focused-settings-modal! title))
-    (state/close-sub-modal! "ls-focused-settings-modal")))
+  (when pid
+    (state/set-state! :plugin/focused-settings pid)
+    (state/set-state! :plugin/navs-settings? (not (false? nav?)))
+    (plugin/open-focused-settings-modal! title)))
 
 (defmethod handle :go/proxy-settings [[_ agent-opts]]
   (shui/dialog-open!