From c21e1ac3f7b8659a8654ee42191622ab7813e542 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Wed, 9 Oct 2024 23:22:00 +0300
Subject: [PATCH 1/8] [wip] Add buttons for renaming presets

---
 public/index.html | 58 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/public/index.html b/public/index.html
index 516a81503..4c2ded26d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -87,33 +87,59 @@
                     <div class="flex-container flexNoGap" id="ai_response_configuration">
                         <div id="respective-presets-block" class="width100p">
                             <div id="kobold_api-presets">
-                                <h4 class="margin0"><span data-i18n="kobldpresets">Kobold Presets</span>
-                                    <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
-                                        <span class="fa-solid fa-circle-question note-link-span"></span>
-                                    </a>
-                                </h4>
+                                <div class="margin0 title_restorable">
+                                    <strong>
+                                        <span data-i18n="kobldpresets">Kobold Presets</span>
+                                        <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
+                                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                                        </a>
+                                    </strong>
+
+                                    <div class="flex-container">
+                                        <div data-preset-manager-import="kobold" class="menu_button_icon menu_button">
+                                            <i class="fa-solid fa-file-import"></i>
+                                            <span data-i18n="Import">Import</span>
+                                        </div>
+                                        <div data-preset-manager-export="kobold"  class="menu_button_icon menu_button">
+                                            <i class="fa-solid fa-file-export"></i>
+                                            <span data-i18n="Export">Export</span>
+                                        </div>
+                                    </div>
+                                </div>
                                 <div class="flex-container flexNoGap">
                                     <select id="settings_preset" data-preset-manager-for="kobold" class="flex1 text_pole">
                                         <option value="gui" data-i18n="guikoboldaisettings">GUI KoboldAI Settings</option>
                                     </select>
-                                    <div class="flex-container marginLeft5 ">
+                                    <div class="flex-container marginLeft5 gap3px">
                                         <input type="file" hidden data-preset-manager-file="kobold" accept=".json, .settings">
                                         <i data-preset-manager-update="kobold" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                        <i data-preset-manager-rename="kobold" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="kobold" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                        <i data-preset-manager-import="kobold" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
-                                        <i data-preset-manager-export="kobold" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                         <i data-preset-manager-restore="kobold" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                         <i data-preset-manager-delete="kobold" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                     </div>
                                 </div>
                             </div>
                             <div id="novel_api-presets">
-                                <h4 class="margin0">
-                                    <span data-i18n="novelaipresets">NovelAI Presets</span>
-                                    <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
-                                        <span class="fa-solid fa-circle-question note-link-span"></span>
-                                    </a>
-                                </h4>
+                                <div class="margin0 title_restorable">
+                                    <strong>
+                                        <span data-i18n="novelaipresets">NovelAI Presets</span>
+                                        <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
+                                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                                        </a>
+                                    </strong>
+
+                                    <div class="flex-container">
+                                        <div data-preset-manager-import="novel" class="menu_button_icon menu_button">
+                                            <i class="fa-solid fa-file-import"></i>
+                                            <small data-i18n="Import">Import</small>
+                                        </div>
+                                        <div data-preset-manager-export="novel"  class="menu_button_icon menu_button">
+                                            <i class="fa-solid fa-file-export"></i>
+                                            <small data-i18n="Export">Export</small>
+                                        </div>
+                                    </div>
+                                </div>
                                 <div class="flex-container flexNoGap">
                                     <select id="settings_preset_novel" class="flex1 text_pole" data-preset-manager-for="novel">
                                         <option value="gui" data-i18n="Default">Default</option>
@@ -121,9 +147,8 @@
                                     <div class="flex-container marginLeft5 ">
                                         <input type="file" hidden data-preset-manager-file="novel" accept=".json, .settings, .preset">
                                         <i data-preset-manager-update="novel" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                        <i data-preset-manager-rename="novel" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="novel" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                        <i data-preset-manager-import="novel" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
-                                        <i data-preset-manager-export="novel" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                         <i data-preset-manager-restore="novel" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                         <i data-preset-manager-delete="novel" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                     </div>
@@ -155,6 +180,7 @@
                                     <div class="flex-container marginLeft5 ">
                                         <input type="file" hidden data-preset-manager-file="textgenerationwebui" accept=".json, .settings">
                                         <i data-preset-manager-update="textgenerationwebui" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                        <i data-preset-manager-rename="textgenerationwebui" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="textgenerationwebui" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                         <i data-preset-manager-import="textgenerationwebui" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
                                         <i data-preset-manager-export="textgenerationwebui" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>

From 6e0bec2184a511e222c24ec5291d91088e8d9785 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Thu, 10 Oct 2024 00:19:05 +0300
Subject: [PATCH 2/8] Restyle import/export buttons

---
 public/index.html | 47 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4c2ded26d..dbce959ce 100644
--- a/public/index.html
+++ b/public/index.html
@@ -96,13 +96,11 @@
                                     </strong>
 
                                     <div class="flex-container">
-                                        <div data-preset-manager-import="kobold" class="menu_button_icon menu_button">
+                                        <div data-preset-manager-import="kobold" class="menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
-                                            <span data-i18n="Import">Import</span>
                                         </div>
-                                        <div data-preset-manager-export="kobold"  class="menu_button_icon menu_button">
+                                        <div data-preset-manager-export="kobold"  class="menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
-                                            <span data-i18n="Export">Export</span>
                                         </div>
                                     </div>
                                 </div>
@@ -130,13 +128,11 @@
                                     </strong>
 
                                     <div class="flex-container">
-                                        <div data-preset-manager-import="novel" class="menu_button_icon menu_button">
+                                        <div data-preset-manager-import="novel" class="menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
-                                            <small data-i18n="Import">Import</small>
                                         </div>
-                                        <div data-preset-manager-export="novel"  class="menu_button_icon menu_button">
+                                        <div data-preset-manager-export="novel"  class="menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
-                                            <small data-i18n="Export">Export</small>
                                         </div>
                                     </div>
                                 </div>
@@ -156,7 +152,21 @@
                             </div>
                             <div id="openai_api-presets">
                                 <div>
-                                    <h4 class="margin0"><span data-i18n="openaipresets">Chat Completion Presets</span></h4>
+                                    <div class="margin0 title_restorable">
+                                        <strong>
+                                            <span data-i18n="openaipresets">Chat Completion Presets</span>
+                                        </strong>
+
+                                        <div class="flex-container">
+                                            <div id="import_oai_preset" class="menu_button menu_button_icon" title="Import preset" data-i18n="[title]Import preset">
+                                                <i class="fa-solid fa-file-import"></i>
+                                            </div>
+                                            <div id="export_oai_preset"  class="menu_button menu_button_icon" title="Export preset" data-i18n="[title]Export preset">
+                                                <i class="fa-solid fa-file-export"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+
                                     <div class="flex-container flexNoGap">
                                         <select id="settings_preset_openai" class="flex1 text_pole" data-preset-manager-for="openai">
                                             <option value="gui" data-i18n="Default">Default</option>
@@ -165,15 +175,26 @@
                                             <input id="openai_preset_import_file" type="file" accept=".json,.settings" hidden />
                                             <i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                             <i id="new_oai_preset" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                            <i id="import_oai_preset" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
-                                            <i id="export_oai_preset" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                             <i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div id="textgenerationwebui_api-presets">
-                                <h4 class="margin0"><span data-i18n="Text Completion presets">Text Completion presets</span></h4>
+                                <div class="margin0 title_restorable">
+                                    <strong>
+                                        <span data-i18n="Text Completion presets">Text Completion presets</span>
+                                    </strong>
+
+                                    <div class="flex-container">
+                                        <div data-preset-manager-import="textgenerationwebui" class="menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
+                                            <i class="fa-solid fa-file-import"></i>
+                                        </div>
+                                        <div data-preset-manager-export="textgenerationwebui"  class="menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
+                                            <i class="fa-solid fa-file-export"></i>
+                                        </div>
+                                    </div>
+                                </div>
                                 <div class="flex-container flexNoGap">
                                     <select id="settings_preset_textgenerationwebui" class="flex1 text_pole" data-preset-manager-for="textgenerationwebui">
                                     </select>
@@ -182,8 +203,6 @@
                                         <i data-preset-manager-update="textgenerationwebui" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                         <i data-preset-manager-rename="textgenerationwebui" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="textgenerationwebui" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                        <i data-preset-manager-import="textgenerationwebui" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
-                                        <i data-preset-manager-export="textgenerationwebui" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
                                         <i data-preset-manager-restore="textgenerationwebui" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                         <i data-preset-manager-delete="textgenerationwebui" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                     </div>

From 60c6549b9be7df1081bdaf1a1b721a65f8946aaa Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Thu, 10 Oct 2024 00:31:57 +0300
Subject: [PATCH 3/8] Set standout header styles

---
 public/index.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/public/index.html b/public/index.html
index dbce959ce..14d0c3e79 100644
--- a/public/index.html
+++ b/public/index.html
@@ -87,7 +87,7 @@
                     <div class="flex-container flexNoGap" id="ai_response_configuration">
                         <div id="respective-presets-block" class="width100p">
                             <div id="kobold_api-presets">
-                                <div class="margin0 title_restorable">
+                                <div class="margin0 title_restorable standoutHeader">
                                     <strong>
                                         <span data-i18n="kobldpresets">Kobold Presets</span>
                                         <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
@@ -96,10 +96,10 @@
                                     </strong>
 
                                     <div class="flex-container">
-                                        <div data-preset-manager-import="kobold" class="menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
+                                        <div data-preset-manager-import="kobold" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
                                         </div>
-                                        <div data-preset-manager-export="kobold"  class="menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
+                                        <div data-preset-manager-export="kobold" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
                                         </div>
                                     </div>
@@ -119,7 +119,7 @@
                                 </div>
                             </div>
                             <div id="novel_api-presets">
-                                <div class="margin0 title_restorable">
+                                <div class="margin0 title_restorable standoutHeader">
                                     <strong>
                                         <span data-i18n="novelaipresets">NovelAI Presets</span>
                                         <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
@@ -128,10 +128,10 @@
                                     </strong>
 
                                     <div class="flex-container">
-                                        <div data-preset-manager-import="novel" class="menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
+                                        <div data-preset-manager-import="novel" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
                                         </div>
-                                        <div data-preset-manager-export="novel"  class="menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
+                                        <div data-preset-manager-export="novel"  class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
                                         </div>
                                     </div>
@@ -152,16 +152,16 @@
                             </div>
                             <div id="openai_api-presets">
                                 <div>
-                                    <div class="margin0 title_restorable">
+                                    <div class="margin0 title_restorable standoutHeader">
                                         <strong>
                                             <span data-i18n="openaipresets">Chat Completion Presets</span>
                                         </strong>
 
                                         <div class="flex-container">
-                                            <div id="import_oai_preset" class="menu_button menu_button_icon" title="Import preset" data-i18n="[title]Import preset">
+                                            <div id="import_oai_preset" class="margin0 menu_button menu_button_icon" title="Import preset" data-i18n="[title]Import preset">
                                                 <i class="fa-solid fa-file-import"></i>
                                             </div>
-                                            <div id="export_oai_preset"  class="menu_button menu_button_icon" title="Export preset" data-i18n="[title]Export preset">
+                                            <div id="export_oai_preset" class="margin0 menu_button menu_button_icon" title="Export preset" data-i18n="[title]Export preset">
                                                 <i class="fa-solid fa-file-export"></i>
                                             </div>
                                         </div>
@@ -181,16 +181,16 @@
                                 </div>
                             </div>
                             <div id="textgenerationwebui_api-presets">
-                                <div class="margin0 title_restorable">
+                                <div class="margin0 title_restorable standoutHeader">
                                     <strong>
                                         <span data-i18n="Text Completion presets">Text Completion presets</span>
                                     </strong>
 
                                     <div class="flex-container">
-                                        <div data-preset-manager-import="textgenerationwebui" class="menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
+                                        <div data-preset-manager-import="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
                                         </div>
-                                        <div data-preset-manager-export="textgenerationwebui"  class="menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
+                                        <div data-preset-manager-export="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
                                         </div>
                                     </div>

From b40eb49201738df2a0945e1a14e5f5021fea2f8b Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 13 Oct 2024 21:16:24 +0300
Subject: [PATCH 4/8] Add recommended mobile meta-tag

---
 public/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/index.html b/public/index.html
index 14d0c3e79..a7699f0ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="darkreader-lock">
     <meta name="robots" content="noindex, nofollow" />
     <style>

From 7ca7a9c83994a5151ef67a935c750bacf535692e Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 13 Oct 2024 21:28:27 +0300
Subject: [PATCH 5/8] Move delete to the top

---
 public/index.html | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index a9b5df67a..24a6fc122 100644
--- a/public/index.html
+++ b/public/index.html
@@ -96,13 +96,16 @@
                                         </a>
                                     </strong>
 
-                                    <div class="flex-container">
+                                    <div class="flex-container gap3px">
                                         <div data-preset-manager-import="kobold" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
                                         </div>
                                         <div data-preset-manager-export="kobold" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
                                         </div>
+                                        <div data-preset-manager-delete="kobold" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
+                                            <i class="fa-solid fa-trash-can"></i>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="flex-container flexNoGap">
@@ -115,7 +118,6 @@
                                         <i data-preset-manager-rename="kobold" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="kobold" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                         <i data-preset-manager-restore="kobold" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
-                                        <i data-preset-manager-delete="kobold" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                     </div>
                                 </div>
                             </div>
@@ -128,26 +130,28 @@
                                         </a>
                                     </strong>
 
-                                    <div class="flex-container">
+                                    <div class="flex-container gap3px">
                                         <div data-preset-manager-import="novel" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
                                         </div>
                                         <div data-preset-manager-export="novel"  class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
                                         </div>
+                                        <div data-preset-manager-delete="novel" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
+                                            <i class="fa-solid fa-trash-can"></i>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="flex-container flexNoGap">
                                     <select id="settings_preset_novel" class="flex1 text_pole" data-preset-manager-for="novel">
                                         <option value="gui" data-i18n="Default">Default</option>
                                     </select>
-                                    <div class="flex-container marginLeft5 ">
+                                    <div class="flex-container marginLeft5 gap3px">
                                         <input type="file" hidden data-preset-manager-file="novel" accept=".json, .settings, .preset">
                                         <i data-preset-manager-update="novel" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                         <i data-preset-manager-rename="novel" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="novel" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                         <i data-preset-manager-restore="novel" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
-                                        <i data-preset-manager-delete="novel" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                     </div>
                                 </div>
                             </div>
@@ -158,13 +162,16 @@
                                             <span data-i18n="openaipresets">Chat Completion Presets</span>
                                         </strong>
 
-                                        <div class="flex-container">
+                                        <div class="flex-container gap3px">
                                             <div id="import_oai_preset" class="margin0 menu_button menu_button_icon" title="Import preset" data-i18n="[title]Import preset">
                                                 <i class="fa-solid fa-file-import"></i>
                                             </div>
                                             <div id="export_oai_preset" class="margin0 menu_button menu_button_icon" title="Export preset" data-i18n="[title]Export preset">
                                                 <i class="fa-solid fa-file-export"></i>
                                             </div>
+                                            <div id="delete_oai_preset" class="margin0 menu_button menu_button_icon" title="Delete the preset" data-i18n="[title]Delete the preset">
+                                                <i class="fa-solid fa-trash-can"></i>
+                                            </div>
                                         </div>
                                     </div>
 
@@ -172,11 +179,10 @@
                                         <select id="settings_preset_openai" class="flex1 text_pole" data-preset-manager-for="openai">
                                             <option value="gui" data-i18n="Default">Default</option>
                                         </select>
-                                        <div class="flex-container marginLeft5 ">
+                                        <div class="flex-container marginLeft5 gap3px">
                                             <input id="openai_preset_import_file" type="file" accept=".json,.settings" hidden />
                                             <i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                             <i id="new_oai_preset" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                            <i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                         </div>
                                     </div>
                                 </div>
@@ -187,25 +193,27 @@
                                         <span data-i18n="Text Completion presets">Text Completion presets</span>
                                     </strong>
 
-                                    <div class="flex-container">
+                                    <div class="flex-container gap3px">
                                         <div data-preset-manager-import="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-solid fa-file-import"></i>
                                         </div>
                                         <div data-preset-manager-export="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-solid fa-file-export"></i>
                                         </div>
+                                        <div data-preset-manager-delete="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
+                                            <i class="fa-solid fa-trash-can"></i>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="flex-container flexNoGap">
                                     <select id="settings_preset_textgenerationwebui" class="flex1 text_pole" data-preset-manager-for="textgenerationwebui">
                                     </select>
-                                    <div class="flex-container marginLeft5 ">
+                                    <div class="flex-container marginLeft5 gap3px">
                                         <input type="file" hidden data-preset-manager-file="textgenerationwebui" accept=".json, .settings">
                                         <i data-preset-manager-update="textgenerationwebui" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
                                         <i data-preset-manager-rename="textgenerationwebui" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
                                         <i data-preset-manager-new="textgenerationwebui" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                         <i data-preset-manager-restore="textgenerationwebui" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
-                                        <i data-preset-manager-delete="textgenerationwebui" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
                                     </div>
                                 </div>
                             </div>

From 8ddde32e9413c5d27f048d1e5618e2dce06c7325 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 13 Oct 2024 21:30:11 +0300
Subject: [PATCH 6/8] Reduce left block padding

---
 public/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index 98ce13c43..217c22bd9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5046,7 +5046,7 @@ body:not(.movingUI) .drawer-content.maximized {
 }
 
 .fillLeft .scrollableInner {
-    padding: 0.5em 1em 0.5em 0.5em
+    padding: 0.5em 0.75em 0.5em 0.5em
 }
 
 .drawer-content select {

From b077b157dc45c178f9bcaffa39376d0a01b0ca4d Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 13 Oct 2024 21:35:10 +0300
Subject: [PATCH 7/8] Uniform icon widths

---
 public/index.html | 52 +++++++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/public/index.html b/public/index.html
index 24a6fc122..645905e1a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -98,13 +98,13 @@
 
                                     <div class="flex-container gap3px">
                                         <div data-preset-manager-import="kobold" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
-                                            <i class="fa-solid fa-file-import"></i>
+                                            <i class="fa-fw fa-solid fa-file-import"></i>
                                         </div>
                                         <div data-preset-manager-export="kobold" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
-                                            <i class="fa-solid fa-file-export"></i>
+                                            <i class="fa-fw fa-solid fa-file-export"></i>
                                         </div>
                                         <div data-preset-manager-delete="kobold" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
-                                            <i class="fa-solid fa-trash-can"></i>
+                                            <i class="fa-fw fa-solid fa-trash-can"></i>
                                         </div>
                                     </div>
                                 </div>
@@ -114,10 +114,10 @@
                                     </select>
                                     <div class="flex-container marginLeft5 gap3px">
                                         <input type="file" hidden data-preset-manager-file="kobold" accept=".json, .settings">
-                                        <i data-preset-manager-update="kobold" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
-                                        <i data-preset-manager-rename="kobold" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
-                                        <i data-preset-manager-new="kobold" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                        <i data-preset-manager-restore="kobold" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
+                                        <i data-preset-manager-update="kobold" class="menu_button fa-fw fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                        <i data-preset-manager-rename="kobold" class="menu_button fa-fw fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
+                                        <i data-preset-manager-new="kobold" class="menu_button fa-fw fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
+                                        <i data-preset-manager-restore="kobold" class="menu_button fa-fw fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                     </div>
                                 </div>
                             </div>
@@ -132,13 +132,13 @@
 
                                     <div class="flex-container gap3px">
                                         <div data-preset-manager-import="novel" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
-                                            <i class="fa-solid fa-file-import"></i>
+                                            <i class="fa-fw fa-solid fa-file-import"></i>
                                         </div>
                                         <div data-preset-manager-export="novel"  class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
-                                            <i class="fa-solid fa-file-export"></i>
+                                            <i class="fa-fw fa-solid fa-file-export"></i>
                                         </div>
                                         <div data-preset-manager-delete="novel" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
-                                            <i class="fa-solid fa-trash-can"></i>
+                                            <i class="fa-fw fa-solid fa-trash-can"></i>
                                         </div>
                                     </div>
                                 </div>
@@ -148,10 +148,10 @@
                                     </select>
                                     <div class="flex-container marginLeft5 gap3px">
                                         <input type="file" hidden data-preset-manager-file="novel" accept=".json, .settings, .preset">
-                                        <i data-preset-manager-update="novel" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
-                                        <i data-preset-manager-rename="novel" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
-                                        <i data-preset-manager-new="novel" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                        <i data-preset-manager-restore="novel" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
+                                        <i data-preset-manager-update="novel" class="menu_button fa-fw fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                        <i data-preset-manager-rename="novel" class="menu_button fa-fw fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
+                                        <i data-preset-manager-new="novel" class="menu_button fa-fw fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
+                                        <i data-preset-manager-restore="novel" class="menu_button fa-fw fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                     </div>
                                 </div>
                             </div>
@@ -164,13 +164,13 @@
 
                                         <div class="flex-container gap3px">
                                             <div id="import_oai_preset" class="margin0 menu_button menu_button_icon" title="Import preset" data-i18n="[title]Import preset">
-                                                <i class="fa-solid fa-file-import"></i>
+                                                <i class="fa-fw fa-solid fa-file-import"></i>
                                             </div>
                                             <div id="export_oai_preset" class="margin0 menu_button menu_button_icon" title="Export preset" data-i18n="[title]Export preset">
-                                                <i class="fa-solid fa-file-export"></i>
+                                                <i class="fa-fw fa-solid fa-file-export"></i>
                                             </div>
                                             <div id="delete_oai_preset" class="margin0 menu_button menu_button_icon" title="Delete the preset" data-i18n="[title]Delete the preset">
-                                                <i class="fa-solid fa-trash-can"></i>
+                                                <i class="fa-fw fa-solid fa-trash-can"></i>
                                             </div>
                                         </div>
                                     </div>
@@ -181,8 +181,8 @@
                                         </select>
                                         <div class="flex-container marginLeft5 gap3px">
                                             <input id="openai_preset_import_file" type="file" accept=".json,.settings" hidden />
-                                            <i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
-                                            <i id="new_oai_preset" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
+                                            <i id="update_oai_preset" class="menu_button fa-fw fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                            <i id="new_oai_preset" class="menu_button fa-fw fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
                                         </div>
                                     </div>
                                 </div>
@@ -195,13 +195,13 @@
 
                                     <div class="flex-container gap3px">
                                         <div data-preset-manager-import="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
-                                            <i class="fa-solid fa-file-import"></i>
+                                            <i class="fa-fw fa-solid fa-file-import"></i>
                                         </div>
                                         <div data-preset-manager-export="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
-                                            <i class="fa-solid fa-file-export"></i>
+                                            <i class="fa-fw fa-solid fa-file-export"></i>
                                         </div>
                                         <div data-preset-manager-delete="textgenerationwebui" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
-                                            <i class="fa-solid fa-trash-can"></i>
+                                            <i class="fa-fw fa-solid fa-trash-can"></i>
                                         </div>
                                     </div>
                                 </div>
@@ -210,10 +210,10 @@
                                     </select>
                                     <div class="flex-container marginLeft5 gap3px">
                                         <input type="file" hidden data-preset-manager-file="textgenerationwebui" accept=".json, .settings">
-                                        <i data-preset-manager-update="textgenerationwebui" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
-                                        <i data-preset-manager-rename="textgenerationwebui" class="menu_button fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
-                                        <i data-preset-manager-new="textgenerationwebui" class="menu_button fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
-                                        <i data-preset-manager-restore="textgenerationwebui" class="menu_button fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
+                                        <i data-preset-manager-update="textgenerationwebui" class="menu_button fa-fw fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
+                                        <i data-preset-manager-rename="textgenerationwebui" class="menu_button fa-fw fa-pencil fa-solid" title="Rename current preset" data-i18n="[title]Rename current preset"></i>
+                                        <i data-preset-manager-new="textgenerationwebui" class="menu_button fa-fw fa-solid fa-file-circle-plus" title="Save preset as" data-i18n="[title]Save preset as"></i>
+                                        <i data-preset-manager-restore="textgenerationwebui" class="menu_button fa-fw fa-solid fa-recycle" title="Restore current preset" data-i18n="[title]Restore current preset"></i>
                                     </div>
                                 </div>
                             </div>

From 11751d3893793b551179c96fd0de6fe1c05151d2 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 13 Oct 2024 22:38:14 +0300
Subject: [PATCH 8/8] Unify the display of novel streaming checkbox

---
 public/index.html | 55 ++++++++++++++++++++++-------------------------
 public/script.js  | 18 ++++++----------
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/public/index.html b/public/index.html
index 645905e1a..a365a3645 100644
--- a/public/index.html
+++ b/public/index.html
@@ -218,22 +218,6 @@
                                 </div>
                             </div>
                         </div>
-                        <div id="ai_module_block_novel" class="width100p">
-                            <div class="range-block">
-                                <div class="range-block-title justifyLeft" data-i18n="AI Module">
-                                    AI Module
-                                </div>
-                                <div class="toggle-description justifyLeft" data-i18n="Changes the style of the generated text.">
-                                    Changes the style of the generated text.
-                                </div>
-                                <select id="nai_prefix">
-                                    <option value="vanilla" data-i18n="No Module">No Module</option>
-                                    <option value="special_instruct" data-i18n="Instruct">Instruct</option>
-                                    <option value="special_proseaugmenter" data-i18n="Prose Augmenter">Prose Augmenter</option>
-                                    <option value="theme_textadventure" data-i18n="Text Adventure">Text Adventure</option>
-                                </select>
-                            </div>
-                        </div>
                         <div id="common-gen-settings-block" class="width100p">
                             <div id="pro-settings-block" class="flex-container gap10h5v justifyCenter">
                                 <div id="amount_gen_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
@@ -258,6 +242,14 @@
                                             </small>
                                         </label>
                                     </div>
+                                    <div id="streaming_novel_block" class="flex-container alignitemscenter justifyCenter marginTop5">
+                                        <label class="checkbox_label" for="streaming_novel">
+                                            <input type="checkbox" id="streaming_novel" />
+                                            <small><span data-i18n="Streaming">Streaming</span>
+                                                <div class="margin5 fa-solid fa-circle-info opacity50p" data-i18n="[title]Streaming_desc" title="Display the response bit by bit as it is generated.&#13;When this is off, responses will be displayed all at once when they are complete."></div>
+                                            </small>
+                                        </label>
+                                    </div>
                                 </div>
                                 <div id="max_context_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
                                     <small data-i18n="context size(tokens)">Context (tokens)</small>
@@ -278,6 +270,22 @@
                                     <span data-i18n="Max prompt cost:">Max prompt cost:</span> <span id="or_prompt_cost">&ndash;</span>
                                 </small>
                             </div>
+                            <div id="ai_module_block_novel" class="width100p">
+                                <div class="range-block">
+                                    <div class="range-block-title justifyLeft" data-i18n="AI Module">
+                                        AI Module
+                                    </div>
+                                    <div class="toggle-description justifyLeft" data-i18n="Changes the style of the generated text.">
+                                        Changes the style of the generated text.
+                                    </div>
+                                    <select id="nai_prefix">
+                                        <option value="vanilla" data-i18n="No Module">No Module</option>
+                                        <option value="special_instruct" data-i18n="Instruct">Instruct</option>
+                                        <option value="special_proseaugmenter" data-i18n="Prose Augmenter">Prose Augmenter</option>
+                                        <option value="theme_textadventure" data-i18n="Text Adventure">Text Adventure</option>
+                                    </select>
+                                </div>
+                            </div>
                             <hr>
                         </div>
                         <div id="respective-ranges-and-temps" class="width100p">
@@ -286,19 +294,6 @@
                             </div>
                             -->
                             <div id="range_block_novel">
-                                <div class="range-block">
-                                    <label class="checkbox_label widthFreeExpand">
-                                        <input id="streaming_novel" type="checkbox" />
-                                        <span data-i18n="Streaming">Streaming</span>
-                                    </label>
-                                    <div class="toggle-description justifyLeft">
-                                        <span data-i18n="Display the response bit by bit as it is generated.">
-                                            Display the response bit by bit as it is generated.</span><br>
-                                        <span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
-                                            When this is off, responses will be displayed all at once when they are complete.
-                                        </span>
-                                    </div>
-                                </div>
                                 <div class="range-block">
                                     <div class="range-block-title" data-i18n="Temperature">
                                         Temperature
@@ -5160,6 +5155,8 @@
     </div>
     <!-- various fullscreen popups -->
     <div name="templatesAndPopupsWrapper"> <!--this div is just for IDE sanity for quick collapsing-->
+        <!-- Point to this element when you need a no-op selector -->
+        <template id="NULL_SELECTOR" class="displayNone"></template>
         <div id="export_format_popup" class="list-group">
             <div class="export_format list-group-item" data-format="png">PNG</div>
             <div class="export_format list-group-item" data-format="json">JSON</div>
diff --git a/public/script.js b/public/script.js
index f5d4bd480..c59ce2d0b 100644
--- a/public/script.js
+++ b/public/script.js
@@ -6360,6 +6360,7 @@ export function changeMainAPI() {
     //console.log(selectedVal);
     const apiElements = {
         'koboldhorde': {
+            apiStreaming: $('#NULL_SELECTOR'),
             apiSettings: $('#kobold_api-settings'),
             apiConnector: $('#kobold_horde'),
             apiPresets: $('#kobold_api-presets'),
@@ -6368,6 +6369,7 @@ export function changeMainAPI() {
             amountGenElem: $('#amount_gen_block'),
         },
         'kobold': {
+            apiStreaming: $('#streaming_kobold_block'),
             apiSettings: $('#kobold_api-settings'),
             apiConnector: $('#kobold_api'),
             apiPresets: $('#kobold_api-presets'),
@@ -6376,6 +6378,7 @@ export function changeMainAPI() {
             amountGenElem: $('#amount_gen_block'),
         },
         'textgenerationwebui': {
+            apiStreaming: $('#streaming_textgenerationwebui_block'),
             apiSettings: $('#textgenerationwebui_api-settings'),
             apiConnector: $('#textgenerationwebui_api'),
             apiPresets: $('#textgenerationwebui_api-presets'),
@@ -6384,6 +6387,7 @@ export function changeMainAPI() {
             amountGenElem: $('#amount_gen_block'),
         },
         'novel': {
+            apiStreaming: $('#streaming_novel_block'),
             apiSettings: $('#novel_api-settings'),
             apiConnector: $('#novel_api'),
             apiPresets: $('#novel_api-presets'),
@@ -6392,6 +6396,7 @@ export function changeMainAPI() {
             amountGenElem: $('#amount_gen_block'),
         },
         'openai': {
+            apiStreaming: $('#NULL_SELECTOR'),
             apiSettings: $('#openai_settings'),
             apiConnector: $('#openai_api'),
             apiPresets: $('#openai_api-presets'),
@@ -6414,12 +6419,14 @@ export function changeMainAPI() {
         apiObj.apiConnector.css('display', 'none');
         apiObj.apiRanges.css('display', 'none');
         apiObj.apiPresets.css('display', 'none');
+        apiObj.apiStreaming.css('display', 'none');
     }
 
     //then, find and enable the active item.
     //This is split out of the loop so that different apis can share settings divs
     let activeItem = apiElements[selectedVal];
 
+    activeItem.apiStreaming.css('display', 'block');
     activeItem.apiSettings.css('display', 'block');
     activeItem.apiConnector.css('display', 'block');
     activeItem.apiRanges.css('display', 'block');
@@ -6436,17 +6443,6 @@ export function changeMainAPI() {
     }
 
     //custom because streaming has been moved up under response tokens, which exists inside common settings block
-    if (selectedVal === 'textgenerationwebui') {
-        $('#streaming_textgenerationwebui_block').css('display', 'block');
-    } else {
-        $('#streaming_textgenerationwebui_block').css('display', 'none');
-    }
-    if (selectedVal === 'kobold') {
-        $('#streaming_kobold_block').css('display', 'block');
-    } else {
-        $('#streaming_kobold_block').css('display', 'none');
-    }
-
     if (selectedVal === 'novel') {
         $('#ai_module_block_novel').css('display', 'block');
     } else {