From 2e23e789373b7f51180644ff7fd7131e009d1227 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sat, 1 Jun 2024 02:05:42 +0300
Subject: [PATCH] Update WI top block layout

---
 public/css/mobile-styles.css     |   3 +-
 public/css/select2-overrides.css |  10 ++
 public/index.html                | 209 ++++++++++++++++---------------
 public/style.css                 |  15 ++-
 4 files changed, 135 insertions(+), 102 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index 0e5a7f0c1..dca2c8fe8 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -117,7 +117,8 @@
         max-width: unset;
     }
 
-    #wiActivationSettings {
+    #wiActivationSettings,
+    #wiTopBlock {
         flex-direction: column;
     }
 
diff --git a/public/css/select2-overrides.css b/public/css/select2-overrides.css
index 776bf48ed..9598acb51 100644
--- a/public/css/select2-overrides.css
+++ b/public/css/select2-overrides.css
@@ -199,6 +199,8 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
     transition: background-color 0.3s;
     color: var(--SmartThemeBodyColor);
     background-color: var(--black50a);
+    white-space: break-spaces;
+    word-break: break-all;
 }
 
 .select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display:hover {
@@ -218,6 +220,14 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
     /* Fix weird styling choice or huge margin around selected options */
     margin-block-start: 2px;
     margin-block-end: 2px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: 5px;
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__choice {
+    margin-top: 0px;
 }
 
 .select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search__field {
diff --git a/public/index.html b/public/index.html
index f7e47502a..efc4f2c9e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3399,108 +3399,117 @@
                     </h3>
                 </div>
                 <div id="wi-holder" class="margin5">
-                    <div id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
-                        <div class="range-block-title justifyLeft">
-                            <span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
+                    <div id="wiTopBlock" class="flex-container">
+                        <div id="WIMultiSelector" class="flex1 flex alignSelfStart range-block">
+                            <div class="range-block-title justifyLeft">
+                                <span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
+                            </div>
+                            <div class="range-block-range">
+                                <select id="world_info" class="select2_multi_sameline" multiple>
+                                    <option value="" data-i18n="-- World Info not found --">-- World Info not found -- </option>
+                                </select>
+                            </div>
                         </div>
-                        <div class="range-block-range">
-                            <select id="world_info" class="select2_multi_sameline" multiple>
-                                <option value="" data-i18n="-- World Info not found --">-- World Info not found -- </option>
-                            </select>
-                        </div>
-                    </div>
-                    <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
-                        <div class="inline-drawer-toggle inline-drawer-header">
-                            <b><span data-i18n="Activation Settings">Activation Settings</span></b>
-                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                        </div>
-                        <div class="inline-drawer-content">
-                            <div id="wiActivationSettings" class="flex-container">
-                                <div id="wiSliders" class="flex2 flex-container">
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
-                                        <small>
-                                            <span data-i18n="Scan Depth">Scan Depth</span>
-                                        </small>
-                                        <input class="neo-range-slider" type="range" id="world_info_depth" name="world_info_depth" min="0" max="100" step="1">
-                                        <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_depth" id="world_info_depth_counter">
-                                    </div>
-
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
-                                        <small>
-                                            <span data-i18n="Context %">Context %</span>
-                                        </small>
-                                        <input class="neo-range-slider" type="range" id="world_info_budget" name="world_info_budget" min="1" max="100" step="1">
-                                        <input class="neo-range-input" type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
-                                    </div>
-
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
-                                        <small>
-                                            <span data-i18n="Budget Cap">Budget Cap</span>
-                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title](0 = disabled)" title="(0 = disabled)"></div>
-                                        </small>
-                                        <input class="neo-range-slider" type="range" id="world_info_budget_cap" name="world_info_budget_cap" min="0" max="8192" step="1">
-                                        <input class="neo-range-input" type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
-                                    </div>
-
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
-                                        <small>
-                                            <span data-i18n="Min Activations">Min Activations</span>
-                                        </small>
-                                        <input class="neo-range-slider" type="range" id="world_info_min_activations" name="world_info_min_activations" min="0" max="100" step="1">
-                                        <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_min_activations" id="world_info_min_activations_counter">
-                                    </div>
-
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
-                                        <small>
-                                            <span data-i18n="Max Depth">Max Depth</span>
-                                            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title](0 = unlimited, use budget)" title="(0 = unlimited, use budget)"></div>
-                                        </small>
-                                        <input class="neo-range-slider" type="range" id="world_info_min_activations_depth_max" name="volume" min="0" max="100" step="1">
-                                        <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_min_activations_depth_max" id="world_info_min_activations_depth_max_counter">
-                                    </div>
-
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink flexBasis48p">
-                                        <small data-i18n="Insertion Strategy">
-                                            Insertion Strategy
-                                        </small>
-                                        <select id="world_info_character_strategy" class="flexGrow margin0">
-                                            <option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
-                                            <option value="1" data-i18n="Character Lore First">Character Lore First</option>
-                                            <option value="2" data-i18n="Global Lore First">Global Lore First</option>
-                                        </select>
-                                    </div>
+                        <div class="flex1 flex alignSelfStart range-block">
+                            <div class="range-block-title justifyLeft">
+                                <small data-i18n="Global World Info/Lorebook activation settings">
+                                    Global World Info/Lorebook activation settings
+                                </small>
+                            </div>
+                            <div class="inline-drawer wide100p flexFlowColumn">
+                                <div class="standoutHeader inline-drawer-toggle inline-drawer-header">
+                                    <b><span data-i18n="Click to expand">Click to expand</span></b>
+                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                 </div>
-                                <div id="wiCheckboxes" class="flex1 flex-container flexFlowColumn">
-                                    <label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label flex1">
-                                        <input id="world_info_recursive" type="checkbox" />
-                                        <small data-i18n="Recursive Scan" class="whitespacenowrap flex1">
-                                            Recursive Scan
-                                        </small>
-                                    </label>
-                                    <label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label flex1">
-                                        <input id="world_info_case_sensitive" type="checkbox" />
-                                        <small data-i18n="Case Sensitive" class="whitespacenowrap flex1">
-                                            Case-sensitive
-                                        </small>
-                                    </label>
-                                    <label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label flex1">
-                                        <input id="world_info_match_whole_words" type="checkbox" />
-                                        <small data-i18n="Match Whole Words" class="whitespacenowrap flex1">
-                                            Match Whole Words
-                                        </small>
-                                    </label>
-                                    <label title="Only the entries with the most number of key matches will be selected for Inclusion Group filtering" data-i18n="[title]Only the entries with the most number of key matches will be selected for Inclusion Group filtering" class="checkbox_label flex1">
-                                        <input id="world_info_use_group_scoring" type="checkbox" />
-                                        <small data-i18n="Use Group Scoring" class="whitespacenowrap flex1">
-                                            Use Group Scoring
-                                        </small>
-                                    </label>
-                                    <label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label flex1">
-                                        <input id="world_info_overflow_alert" type="checkbox" />
-                                        <small data-i18n="Alert On Overflow" class="whitespacenowrap flex1">
-                                            Alert On Overflow
-                                        </small>
-                                    </label>
+                                <div class="inline-drawer-content">
+                                    <div id="wiActivationSettings" class="flex-container">
+                                        <div id="wiSliders" class="flex2 flex-container">
+                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                                                <small>
+                                                    <span data-i18n="Scan Depth">Scan Depth</span>
+                                                </small>
+                                                <input class="neo-range-slider" type="range" id="world_info_depth" name="world_info_depth" min="0" max="100" step="1">
+                                                <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_depth" id="world_info_depth_counter">
+                                            </div>
+
+                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                                                <small>
+                                                    <span data-i18n="Context %">Context %</span>
+                                                </small>
+                                                <input class="neo-range-slider" type="range" id="world_info_budget" name="world_info_budget" min="1" max="100" step="1">
+                                                <input class="neo-range-input" type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
+                                            </div>
+
+                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                                                <small>
+                                                    <span data-i18n="Budget Cap">Budget Cap</span>
+                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title](0 = disabled)" title="(0 = disabled)"></div>
+                                                </small>
+                                                <input class="neo-range-slider" type="range" id="world_info_budget_cap" name="world_info_budget_cap" min="0" max="8192" step="1">
+                                                <input class="neo-range-input" type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
+                                            </div>
+
+                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
+                                                <small>
+                                                    <span data-i18n="Min Activations">Min Activations</span>
+                                                </small>
+                                                <input class="neo-range-slider" type="range" id="world_info_min_activations" name="world_info_min_activations" min="0" max="100" step="1">
+                                                <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_min_activations" id="world_info_min_activations_counter">
+                                            </div>
+
+                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
+                                                <small>
+                                                    <span data-i18n="Max Depth">Max Depth</span>
+                                                    <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title](0 = unlimited, use budget)" title="(0 = unlimited, use budget)"></div>
+                                                </small>
+                                                <input class="neo-range-slider" type="range" id="world_info_min_activations_depth_max" name="volume" min="0" max="100" step="1">
+                                                <input class="neo-range-input" type="number" min="0" max="100" step="1" data-for="world_info_min_activations_depth_max" id="world_info_min_activations_depth_max_counter">
+                                            </div>
+
+                                            <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink flexBasis48p">
+                                                <small data-i18n="Insertion Strategy">
+                                                    Insertion Strategy
+                                                </small>
+                                                <select id="world_info_character_strategy" class="flexGrow margin0">
+                                                    <option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
+                                                    <option value="1" data-i18n="Character Lore First">Character Lore First</option>
+                                                    <option value="2" data-i18n="Global Lore First">Global Lore First</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div id="wiCheckboxes" class="flex1 flex-container flexFlowColumn">
+                                            <label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label flex1">
+                                                <input id="world_info_recursive" type="checkbox" />
+                                                <small data-i18n="Recursive Scan" class="whitespacenowrap flex1">
+                                                    Recursive Scan
+                                                </small>
+                                            </label>
+                                            <label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label flex1">
+                                                <input id="world_info_case_sensitive" type="checkbox" />
+                                                <small data-i18n="Case Sensitive" class="whitespacenowrap flex1">
+                                                    Case-sensitive
+                                                </small>
+                                            </label>
+                                            <label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label flex1">
+                                                <input id="world_info_match_whole_words" type="checkbox" />
+                                                <small data-i18n="Match Whole Words" class="whitespacenowrap flex1">
+                                                    Match Whole Words
+                                                </small>
+                                            </label>
+                                            <label title="Only the entries with the most number of key matches will be selected for Inclusion Group filtering" data-i18n="[title]Only the entries with the most number of key matches will be selected for Inclusion Group filtering" class="checkbox_label flex1">
+                                                <input id="world_info_use_group_scoring" type="checkbox" />
+                                                <small data-i18n="Use Group Scoring" class="whitespacenowrap flex1">
+                                                    Use Group Scoring
+                                                </small>
+                                            </label>
+                                            <label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label flex1">
+                                                <input id="world_info_overflow_alert" type="checkbox" />
+                                                <small data-i18n="Alert On Overflow" class="whitespacenowrap flex1">
+                                                    Alert On Overflow
+                                                </small>
+                                            </label>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/public/style.css b/public/style.css
index 6f7d25d1b..c4f0ee24f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4482,6 +4482,18 @@ a {
     transition: all 250ms;
 }
 
+.standoutHeader.inline-drawer-header {
+    padding: 5px;
+    margin-bottom: 0;
+}
+
+.standoutHeader~.inline-drawer-content {
+    border: 1px solid var(--SmartThemeBorderColor);
+    padding: 5px;
+    border-radius: 10px;
+    background-color: var(--black30a);
+}
+
 #user-settings-block [name="MiscellaneousToggles"],
 #CustomCSS-block,
 #CustomCSS-textAreaBlock {
@@ -4497,7 +4509,8 @@ a {
 }
 
 #extensions_settings .inline-drawer-toggle.inline-drawer-header:hover,
-#extensions_settings2 .inline-drawer-toggle.inline-drawer-header:hover {
+#extensions_settings2 .inline-drawer-toggle.inline-drawer-header:hover,
+.standoutHeader.inline-drawer-header:hover {
     filter: brightness(150%);
 }