From 43cf33c19144b1b8019d123a248e9319548d6480 Mon Sep 17 00:00:00 2001
From: perf3ct <jonfuller2012@gmail.com>
Date: Mon, 17 Mar 2025 21:24:56 +0000
Subject: [PATCH] make the AI settings even fancier to setting precedence

---
 .../type_widgets/options/ai_settings.ts       | 81 +++++++++----------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/ai_settings.ts b/src/public/app/widgets/type_widgets/options/ai_settings.ts
index 9be444cb9..c2c3fb2d2 100644
--- a/src/public/app/widgets/type_widgets/options/ai_settings.ts
+++ b/src/public/app/widgets/type_widgets/options/ai_settings.ts
@@ -305,47 +305,47 @@ export default class AiSettingsWidget extends OptionsWidget {
                 <input type="hidden" class="embedding-provider-precedence" value="">
                 <div class="embedding-precedence-container">
                     <div class="alert alert-info mb-2">${t("ai_llm.drag_providers_to_reorder")}</div>
-                    <div class="card mb-3">
-                        <div class="card-header">
+                    <div class="standard-list-container mb-3">
+                        <div class="standard-list-header">
                             <strong>${t("ai_llm.active_providers")}</strong>
                         </div>
-                        <ul class="list-group list-group-flush embedding-provider-sortable">
-                            <li class="list-group-item d-flex align-items-center" data-provider="openai">
+                        <ul class="standard-list-item-list embedding-provider-sortable">
+                            <li class="standard-list-item d-flex align-items-center" data-provider="openai">
                                 <span class="bx bx-menu handle me-2"></span>
                                 <strong class="flex-grow-1">OpenAI</strong>
-                                <button class="btn btn-sm btn-outline-danger remove-provider" title="${t("ai_llm.remove_provider")}">
+                                <button class="icon-action remove-provider" title="${t("ai_llm.remove_provider")}">
                                     <span class="bx bx-x"></span>
                                 </button>
                             </li>
-                            <li class="list-group-item d-flex align-items-center" data-provider="ollama">
+                            <li class="standard-list-item d-flex align-items-center" data-provider="ollama">
                                 <span class="bx bx-menu handle me-2"></span>
                                 <strong class="flex-grow-1">Ollama</strong>
-                                <button class="btn btn-sm btn-outline-danger remove-provider" title="${t("ai_llm.remove_provider")}">
+                                <button class="icon-action remove-provider" title="${t("ai_llm.remove_provider")}">
                                     <span class="bx bx-x"></span>
                                 </button>
                             </li>
-                            <li class="list-group-item d-flex align-items-center" data-provider="anthropic">
+                            <li class="standard-list-item d-flex align-items-center" data-provider="anthropic">
                                 <span class="bx bx-menu handle me-2"></span>
                                 <strong class="flex-grow-1">Anthropic</strong>
-                                <button class="btn btn-sm btn-outline-danger remove-provider" title="${t("ai_llm.remove_provider")}">
+                                <button class="icon-action remove-provider" title="${t("ai_llm.remove_provider")}">
                                     <span class="bx bx-x"></span>
                                 </button>
                             </li>
-                            <li class="list-group-item d-flex align-items-center" data-provider="local">
+                            <li class="standard-list-item d-flex align-items-center" data-provider="local">
                                 <span class="bx bx-menu handle me-2"></span>
                                 <strong class="flex-grow-1">Local</strong>
-                                <button class="btn btn-sm btn-outline-danger remove-provider" title="${t("ai_llm.remove_provider")}">
+                                <button class="icon-action remove-provider" title="${t("ai_llm.remove_provider")}">
                                     <span class="bx bx-x"></span>
                                 </button>
                             </li>
                         </ul>
                     </div>
 
-                    <div class="card disabled-providers-container" style="display: none;">
-                        <div class="card-header">
+                    <div class="standard-list-container disabled-providers-container" style="display: none;">
+                        <div class="standard-list-header">
                             <strong>${t("ai_llm.disabled_providers")}</strong>
                         </div>
-                        <ul class="list-group list-group-flush embedding-provider-disabled">
+                        <ul class="standard-list-item-list embedding-provider-disabled">
                             <!-- Disabled providers will be added here dynamically -->
                         </ul>
                     </div>
@@ -883,9 +883,9 @@ export default class AiSettingsWidget extends OptionsWidget {
 
             // Create a new item for the disabled list
             const $disabledItem = $(`
-                <li class="list-group-item d-flex align-items-center" data-provider="${provider}">
+                <li class="standard-list-item d-flex align-items-center" data-provider="${provider}">
                     <strong class="flex-grow-1">${providerName}</strong>
-                    <button class="btn btn-sm btn-outline-success restore-provider" title="${t("ai_llm.restore_provider")}">
+                    <button class="icon-action restore-provider" title="${t("ai_llm.restore_provider")}">
                         <span class="bx bx-plus"></span>
                     </button>
                 </li>
@@ -912,10 +912,10 @@ export default class AiSettingsWidget extends OptionsWidget {
 
                 // Create a new item for the active list
                 const $activeItem = $(`
-                    <li class="list-group-item d-flex align-items-center" data-provider="${provider}">
+                    <li class="standard-list-item d-flex align-items-center" data-provider="${provider}">
                         <span class="bx bx-menu handle me-2"></span>
                         <strong class="flex-grow-1">${providerName}</strong>
-                        <button class="btn btn-sm btn-outline-danger remove-provider" title="${t("ai_llm.remove_provider")}">
+                        <button class="icon-action remove-provider" title="${t("ai_llm.remove_provider")}">
                             <span class="bx bx-x"></span>
                         </button>
                     </li>
@@ -1054,6 +1054,28 @@ export default class AiSettingsWidget extends OptionsWidget {
             this.startStatsPolling();
         }, 500);
 
+        // Add minimal styles for the sortable lists
+        if (!$('#embedding-sortable-styles').length) {
+            $('head').append(`
+                <style id="embedding-sortable-styles">
+                    /* Basic drag functionality styles */
+                    .embedding-provider-sortable .handle {
+                        cursor: grab;
+                    }
+                    .standard-list-item-list li {
+                        cursor: grab;
+                    }
+                    .standard-list-item-list li.dragging {
+                        opacity: 0.7;
+                    }
+                    .standard-list-item-list li.drag-over {
+                        border-width: 2px !important;
+                        border-style: dashed !important;
+                    }
+                </style>
+            `);
+        }
+
         return this.$widget;
     }
 
@@ -1061,29 +1083,6 @@ export default class AiSettingsWidget extends OptionsWidget {
         // Call the ancestor method with the options to store them
         super.optionsLoaded(options);
 
-        // Add CSS styles for the sortable list
-        // We add this here to ensure it's only added once
-        if (!$('#embedding-sortable-styles').length) {
-            $('head').append(`
-                <style id="embedding-sortable-styles">
-                    .embedding-provider-sortable .handle {
-                        cursor: grab;
-                    }
-                    .embedding-provider-sortable li {
-                        cursor: grab;
-                        transition: background-color 0.2s;
-                    }
-                    .embedding-provider-sortable li.dragging {
-                        opacity: 0.5;
-                        background-color: #f8f9fa;
-                    }
-                    .embedding-provider-sortable li.drag-over {
-                        border: 2px dashed #007bff;
-                    }
-                </style>
-            `);
-        }
-
         // Set values from options to UI components
         if (!this.$widget) return;