From 54c37e945bc3df0b39f6ced8d38361323cad0508 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Fri, 22 Sep 2023 22:16:24 +0900
Subject: [PATCH] fix themes application, refactor user settings

---
 public/css/st-tailwind.css                    |   4 +
 public/index.html                             | 548 +++++++++---------
 .../scripts/extensions/settingsearch/index.js |   4 +-
 public/scripts/power-user.js                  | 117 ++--
 public/style.css                              |   9 +-
 5 files changed, 364 insertions(+), 318 deletions(-)

diff --git a/public/css/st-tailwind.css b/public/css/st-tailwind.css
index fe6258bd6..5d51dcb70 100644
--- a/public/css/st-tailwind.css
+++ b/public/css/st-tailwind.css
@@ -262,6 +262,10 @@
     flex-flow: column;
 }
 
+.flexFlowRow {
+    flex-flow: row;
+}
+
 .wideMinContent {
     width: min-content;
 }
diff --git a/public/index.html b/public/index.html
index ac49649d3..47f7af1a4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2687,24 +2687,66 @@
                 <div class="drawer-icon fa-solid fa-user-cog closedIcon" title="User Settings" data-i18n="[title]User Settings"></div>
             </div>
             <div id="user-settings-block" class="drawer-content closedDrawer">
-                <div class="flex-container wide100p alignitemscenter spaceBetween">
-                    <h3><span data-i18n="User Settings">User Settings</span></h3>
-                    <div id="version_display"></div>
-                </div>
-                <div id="user-settings-block-content" class="flex-container spaceEvenly">
-                    <div id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
-                        <div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
-                            <div id="UI-Mode-Block">
-                                <h4 data-i18n="UI Mode">
-                                    UI Mode
-                                </h4>
-                                <select id="ui_mode_select" class="margin0 margin-r5">
+                <div class="flex-container flexFlowColumn">
+                    <div name="userSettingsRowOne" class="flex-container flexFlowRow alignitemscenter spaceBetween">
+                        <div class="flex-container">
+                            <div class="flex-container flexnowrap alignitemscenter">
+                                <h3><span data-i18n="User Settings">User Settings</span></h3>
+                                <select id="ui_mode_select" class="margin0 widthNatural">
                                     <option value="0" data-i18n="Simple">Simple</option>
                                     <option value="1" data-i18n="Advanced">Advanced</option>
                                 </select>
                             </div>
-                            <div data-newbie-hidden>
-                                <h4><span data-i18n="UI Colors">UI Colors</span></h4>
+                        </div>
+                        <div id="UI-language-block" class="flex-container">
+                            <span data-i18n="UI Language">Language</span>
+                            <select id="ui_language_select" class="widthNatural flex1 margin0">
+                                <option value="" data-i18n="Default">Default</option>
+                                <option value="en">en</option>
+                            </select>
+                        </div>
+                        <small id="version_display"></small>
+                    </div>
+                    <div name="UserSettingsRowTwo" class="flex-container flexFlowRow">
+
+                        <textarea id="settingsSearch" class="textarea_compact wide100p" rows="1" placeholder="Search Settings"></textarea>
+                    </div>
+                </div>
+                <div id="user-settings-block-content" class="flex-container spaceEvenly">
+                    <div name="UserSettingsFirstColumn" id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
+                        <div id="UI-presets-block" class="flex-container flexFlowColumn">
+                            <h4>
+                                <span data-i18n="UI Theme Preset">Theme Preset</span>
+                            </h4>
+                            <div class="flex-container flexnowrap alignitemscenter">
+                                <select id="themes" class="margin0">
+                                </select>
+                                <div id="ui-preset-save-button" title="Save changes to a new theme file" data-i18n="[title]Save changes to a new theme file" class="menu_button margin0">
+                                    <i class="fa-solid fa-save"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div name="themeElements" data-newbie-hidden class="flex-container flexFlowColumn flexNoGap">
+                            <h4><span data-i18n="UI Colors">Theme Settings</span></h4>
+                            <div name="AvatarAndChatDisplay" class="flex-container flexFlowColumn">
+                                <div class="flex-container">
+                                    <span data-i18n="Avatar Style">Avatars:</span>
+                                    <select id="avatar_style" class="widthNatural flex1 margin0">
+                                        <option value="0" data-i18n="Circle">Circle</option>
+                                        <option value="1" data-i18n="Rectangle">Rectangle</option>
+                                    </select>
+                                </div>
+                                <div class="flex-container">
+                                    <span data-i18n="Chat Style:">Chat Style:</span><br>
+                                    <select id="chat_display" class="widthNatural flex1 margin0">
+                                        <option value="0" data-i18n="Default">Flat</span>
+                                        <option value="1" data-i18n="Bubbles">Bubbles</option>
+                                        <option value="2" data-i18n="Document">Document</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
+
                                 <div class="flex-container">
                                     <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
                                     <span data-i18n="Main Text">Main Text</span>
@@ -2742,7 +2784,23 @@
                                     <span data-i18n="AI Message Blur Tint">AI Message</span>
                                 </div>
                             </div>
-                            <div data-newbie-hidden id="font-blur-UIpresets-block" class="flex-container flexFlowColumn flexNoGap">
+
+                            <div data-newbie-hidden name="FontBlurChatWidthBlock" class="flex-container flexFlowColumn flexNoGap">
+                                <div data-newbie-hidden class="range-block">
+                                    <div class="range-block-title" data-i18n="Chat Width (PC)">
+                                        Chat Width (PC)
+                                    </div>
+                                    <div class="range-block-range-and-counter">
+                                        <div class="range-block-range">
+                                            <input id="chat_width_slider" class="wide100p" type="range" min="25" max="75" step="1" value="50">
+                                            <div class="slider_hint">
+                                                <span>25%</span>
+                                                <span>50%</span>
+                                                <span>75%</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                                 <div id="font-scale-block" class="range-block">
                                     <div class="range-block-title" data-i18n="Font Scale">
                                         Font Scale
@@ -2789,289 +2847,233 @@
                                     </div>
                                 </div>
                             </div>
-                            <div id="UI-language-block" class="flex-container flexFlowColumn">
-                                <h4>
-                                    <span data-i18n="UI Language">UI Language</span>
-                                </h4>
-                                <div class="flex-container flexnowrap alignitemscenter">
-                                    <select id="ui_language_select" class="margin0 margin-r5">
-                                        <option value="" data-i18n="Browser default">
-                                            Browser default
-                                        </option>
-                                        <option value="en">en</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div id="UI-presets-block" class="flex-container flexFlowColumn">
-                                <h4>
-                                    <span data-i18n="UI Theme Preset">UI Theme Preset</span>
-                                </h4>
-                                <div class="flex-container flexnowrap alignitemscenter">
-                                    <select id="themes" class="margin0 margin-r5">
-                                    </select>
-                                    <div id="ui-preset-save-button" title="Save changes to a new theme file" data-i18n="[title]Save changes to a new theme file" class="menu_button padding5 margin0">
-                                        <i class="fa-solid fa-save"></i>
-                                    </div>
-                                </div>
-                            </div>
-                            <div data-newbie-hidden id="MovingUI-presets-block" class="flex-container flexFlowColumn">
-                                <h4>
-                                    <span data-i18n="MovingUI Preset">MovingUI Preset</span>
-                                </h4>
-                                <div class="flex-container flexnowrap alignitemscenter">
-                                    <select id="movingUIPresets" class="margin0 margin-r5">
-                                    </select>
-                                    <div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file" data-i18n="[title]Save movingUI changes to a new file" class="menu_button padding5 margin0">
-                                        <i class="fa-solid fa-save"></i>
-                                    </div>
-                                </div>
-                                <div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
-                                    Reset MovingUI
-                                </div>
-                            </div>
                         </div>
 
                     </div>
-                    <div id="UI-Customization" class="flex-container wide100p">
-                        <div class="ui-settings">
-                            <h4><span data-i18n="UI Customization">UI Customization</span></h4>
-                            <div data-newbie-hidden class="range-block">
-                                <div class="range-block-title" data-i18n="Chat Width (PC)">
-                                    Chat Width (PC)
-                                </div>
-                                <div class="range-block-range-and-counter">
-                                    <div class="range-block-range">
-                                        <input id="chat_width_slider" class="wide100p" type="range" min="25" max="75" step="1" value="50">
-                                        <div class="slider_hint">
-                                            <span>25%</span>
-                                            <span>50%</span>
-                                            <span>75%</span>
+                    <div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p">
+                        <div name="themeToggles">
+                            <h4 data-i18n="Theme Toggles">Theme Toggles</h4>
+                            <label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="removes blur from window backgrounds" data-i18n="[title]removes blur from window backgrounds">
+                                <input id="fast_ui_mode" type="checkbox" />
+                                <span data-i18n="No Blur Effect">No Blur Effect</span>
+                            </label>
+                            <label data-newbie-hidden for="noShadowsmode" class="checkbox_label">
+                                <input id="noShadowsmode" type="checkbox" />
+                                <span data-i18n="No Text Shadows">No Text Shadows</span>
+                            </label>
+                            <label for="waifuMode" class="checkbox_label">
+                                <input id="waifuMode" type="checkbox" />
+                                <span data-i18n="Waifu Mode">Visual Novel Mode</span>
+                            </label>
+
+                            <label data-newbie-hidden for="expandMessageActions" class="checkbox_label">
+                                <input id="expandMessageActions" type="checkbox" />
+                                <span data-i18n="Auto-Expand Message Actions">Expand Message Actions</span>
+                            </label>
+
+                            <label data-newbie-hidden for="messageTimerEnabled" class="checkbox_label">
+                                <input id="messageTimerEnabled" type="checkbox" />
+                                <span data-i18n="Message Timer">Message Timer</span>
+                            </label>
+
+                            <label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label">
+                                <input id="messageTimestampsEnabled" type="checkbox" />
+                                <span data-i18n="Chat Timestamps">Chat Timestamps</span>
+                            </label>
+
+                            <label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label">
+                                <input id="messageModelIconEnabled" type="checkbox" />
+                                <span data-i18n="Model Icon">Model Icons</span>
+                            </label>
+
+                            <label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label">
+                                <input id="mesIDDisplayEnabled" type="checkbox" />
+                                <span data-i18n="Message IDs">Message IDs</span>
+                            </label>
+
+                            <label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label">
+                                <input id="messageTokensEnabled" type="checkbox" />
+                                <span data-i18n="Show Message Token Count">Message Token Count</span>
+                            </label>
+                            <label data-newbie-hidden for="hotswapEnabled" class="checkbox_label">
+                                <input id="hotswapEnabled" type="checkbox" />
+                                <span data-i18n="Characters Hotswap">Characters Hotswap</span>
+                            </label>
+                        </div>
+                        <h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
+                        <div>
+                            <label for="play_message_sound" class="checkbox_label">
+                                <input id="play_message_sound" type="checkbox" />
+                                <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
+                                <span>
+                                    <span data-i18n="Message Sound">Message Sound</span>
+                                    <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
+                                        <span class="note-link-span">?</span>
+                                    </a>
+                                </span>
+                            </label>
+                            <label for="play_sound_unfocused" class="checkbox_label">
+                                <input id="play_sound_unfocused" type="checkbox" />
+                                <span data-i18n="Background Sound Only">Background Sound Only</span>
+                            </label>
+
+                            <label data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLS">
+                                <input id="relaxed_api_urls" type="checkbox" />
+                                <span data-i18n="Relaxed API URLS">Relaxed API URLs</span>
+                            </label>
+                            <label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label">
+                                <input id="movingUImode" type="checkbox" />
+                                <span data-i18n="Movable UI Panels">MovingUI</span>
+                            </label>
+                            <div data-newbie-hidden id="MovingUI-presets-block" class="flex-container alignitemscenter">
+                                <div class="flex-container alignitemscenter">
+                                    <span>MUI Preset:</span>
+                                    <div class="flex-container flexnowrap">
+                                        <select id="movingUIPresets" class="widthNatural flex1 margin0">
+                                        </select>
+                                        <div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file" data-i18n="[title]Save movingUI changes to a new file" class="menu_button margin0">
+                                            <i class="fa-solid fa-save"></i>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div>
-                                <span data-i18n="Avatar Style">Avatar Style:</span><br>
-                                <label>
-                                    <input name="avatar_style" type="radio" value="0" />
-                                    <span data-i18n="Circle">Circle</span>
+                            <div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
+                                Reset MovingUI
+                            </div>
+                        </div>
+                    </div>
+                    <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
+                        <div id="power-user-option-checkboxes">
+                            <div data-newbie-hidden name="CharacterHandlingToggles">
+                                <h4>Character Handling</h4>
+                                <label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox">
+                                    <input id="fuzzy_search_checkbox" type="checkbox" />
+                                    <span data-i18n="Advanced Character Search">Advanced Character Search</span>
                                 </label>
-                                <label>
-                                    <input name="avatar_style" type="radio" value="1" />
-                                    <span data-i18n="Rectangle">Rectangle</span>
+                                <label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead." class="checkbox_label">
+                                    <input id="prefer_character_prompt" type="checkbox" />
+                                    <span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
+                                </label>
+                                <label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." class="checkbox_label">
+                                    <input id="prefer_character_jailbreak" type="checkbox" />
+                                    <span data-i18n="Prefer Character Card Jailbreak">Prefer Char. JB</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="never_resize_avatars">
+                                    <input id="never_resize_avatars" type="checkbox" />
+                                    <span data-i18n="Never resize avatars">Never resize avatars</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls">
+                                    <input id="show_card_avatar_urls" type="checkbox" />
+                                    <span data-i18n="Show avatar filenames">Show avatar filenames</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="import_card_tags">
+                                    <input id="import_card_tags" type="checkbox" />
+                                    <span data-i18n="Import Card Tags">Import Card Tags</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode">
+                                    <input id="spoiler_free_mode" type="checkbox" />
+                                    <span data-i18n="Spoiler Free Mode">Spoiler Free Mode</span>
                                 </label>
                             </div>
-                            <div>
-                                <span data-i18n="Chat Style:">Message Style:</span><br>
-                                <select id="chat_display">
-                                    <option value="0" data-i18n="Default">Flat Chat</span>
-                                    <option value="1" data-i18n="Bubbles">Bubble Chat</option>
-                                    <option value="2" data-i18n="Document">Single Document</option>
-                                </select>
-                            </div>
-                            <div>
-                                <label for="play_message_sound" class="checkbox_label">
-                                    <input id="play_message_sound" type="checkbox" />
-                                    <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
-                                    <span>
-                                        <span data-i18n="Message Sound">Message Sound</span>
-                                        <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
-                                            <span class="note-link-span">?</span>
-                                        </a>
+
+                            <div name="ChatMessageHandlingToggles">
+                                <h4>Chat/Message Handling</h4>
+                                <div data-newbie-hidden class="flex-container alignitemscenter">
+                                    <span data-i18n="Send on Enter">
+                                        Enter to Send:
+                                    </span>
+                                    <select id="send_on_enter" class="widthNatural flex1 margin0">
+                                        <option value="-1" data-i18n="Disabled">Disabled</option>
+                                        <option value="0" data-i18n="Automatic (PC)">Automatic (PC)</option>
+                                        <option value="1" data-i18n="Enabled">Enabled</option>
+                                    </select>
+                                </div>
+                                <label data-newbie-hidden class="checkbox_label" for="continue_on_send">
+                                    <input id="continue_on_send" type="checkbox" />
+                                    <span data-i18n="Press Send to continue">
+                                        "Send" to Continue
                                     </span>
                                 </label>
-                                <label for="play_sound_unfocused" class="checkbox_label">
-                                    <input id="play_sound_unfocused" type="checkbox" />
-                                    <span data-i18n="Background Sound Only">Background Sound Only</span>
+                                <label class="checkbox_label" for="quick_continue">
+                                    <input id="quick_continue" type="checkbox" />
+                                    <span data-i18n="Press Send to continue">
+                                        Quick "Continue" button
+                                    </span>
                                 </label>
-                                <label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="removes blur from window backgrounds" data-i18n="[title]removes blur from window backgrounds">
-                                    <input id="fast_ui_mode" type="checkbox" />
-                                    <span data-i18n="No Blur Effect">No Blur Effect</span>
+                                <label data-newbie-hidden class="checkbox_label" for="swipes-checkbox">
+                                    <input id="swipes-checkbox" type="checkbox" />
+                                    <span data-i18n="Swipes">Swipes</span>
                                 </label>
-                                <label data-newbie-hidden for="noShadowsmode" class="checkbox_label">
-                                    <input id="noShadowsmode" type="checkbox" />
-                                    <span data-i18n="No Text Shadows">No Text Shadows</span>
+                                <label class="checkbox_label" for="auto-load-chat-checkbox">
+                                    <input id="auto-load-chat-checkbox" type="checkbox" />
+                                    <span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
                                 </label>
-                                <label for="waifuMode" class="checkbox_label">
-                                    <input id="waifuMode" type="checkbox" />
-                                    <span data-i18n="Waifu Mode">Visual Novel Mode</span>
-                                </label>
-
-                                <label for="expandMessageActions" class="checkbox_label">
-                                    <input id="expandMessageActions" type="checkbox" />
-                                    <span data-i18n="Auto-Expand Message Actions">Auto-Expand Message Actions</span>
-                                </label>
-
-                                <label for="messageTimerEnabled" class="checkbox_label">
-                                    <input id="messageTimerEnabled" type="checkbox" />
-                                    <span data-i18n="Message Timer">Message Timer</span>
-                                </label>
-
-                                <label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label">
-                                    <input id="messageTimestampsEnabled" type="checkbox" />
-                                    <span data-i18n="Chat Timestamps">Chat Timestamps</span>
-                                </label>
-
-                                <label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label">
-                                    <input id="messageModelIconEnabled" type="checkbox" />
-                                    <span data-i18n="Model Icon">Show Model Icons</span>
-                                </label>
-
-                                <label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label">
-                                    <input id="mesIDDisplayEnabled" type="checkbox" />
-                                    <span data-i18n="Message IDs">Show Message IDs</span>
-                                </label>
-
-                                <label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label">
-                                    <input id="messageTokensEnabled" type="checkbox" />
-                                    <span data-i18n="Show Message Token Count">Show Message Token Count</span>
-                                </label>
-
                                 <label data-newbie-hidden for="auto_scroll_chat_to_bottom" class="checkbox_label">
                                     <input id="auto_scroll_chat_to_bottom" type="checkbox" />
                                     <span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span>
                                 </label>
 
-                                <label data-newbie-hidden for="hotswapEnabled" class="checkbox_label">
-                                    <input id="hotswapEnabled" type="checkbox" />
-                                    <span data-i18n="Characters Hotswap">Characters Hotswap</span>
+                                <label data-newbie-hidden class="checkbox_label" for="auto_save_msg_edits">
+                                    <input id="auto_save_msg_edits" type="checkbox" />
+                                    <span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
+                                    <input id="confirm_message_delete" type="checkbox" />
+                                    <span data-i18n="Confirm message deletion">Confirm message deletion</span>
+                                </label>
+                                <label class="checkbox_label" for="auto_fix_generated_markdown">
+                                    <input id="auto_fix_generated_markdown" type="checkbox" />
+                                    <span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="render_formulas">
+                                    <input id="render_formulas" type="checkbox" />
+                                    <span data-i18n="Render Formulas">Render Formulas</span>
+                                    <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
+                                        <span class="note-link-span">?</span>
+                                    </a>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
+                                    <input id="allow_name2_display" type="checkbox" />
+                                    <span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="allow_name1_display">
+                                    <input id="allow_name1_display" type="checkbox" />
+                                    <span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
+                                </label>
+                                <label class="checkbox_label" for="encode_tags">
+                                    <input id="encode_tags" type="checkbox" />
+                                    <span data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members.">
+                                    <input id="disable_group_trimming" type="checkbox" />
+                                    <span data-i18n="Relax message trim in Groups">Relax message trim in Groups</span>
+                                </label>
+                                <label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
+                                    <input id="console_log_prompts" type="checkbox" />
+                                    <span data-i18n="Log prompts to console">Log prompts to console</span>
                                 </label>
 
-                                <label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label">
-                                    <input id="movingUImode" type="checkbox" />
-                                    <span data-i18n="Movable UI Panels">Movable UI Panels</span>
-                                </label>
-
-                                <div data-newbie-hidden class="flex-container flexFlowColumn">
-                                    <h4 data-i18n="Send on Enter">
-                                        Send on Enter
-                                    </h4>
-                                    <select id="send_on_enter">
-                                        <option value="-1" data-i18n="Always disabled">Always disabled</option>
-                                        <option value="0" data-i18n="Automatic (desktop)">Automatic (desktop)</option>
-                                        <option value="1" data-i18n="Always enabled">Always enabled</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div id="power-user-options-block" class="flex-container wide100p">
-                        <div id="power-user-option-checkboxes">
-                            <h4 data-i18n="Power User Options">Power User Options</h4>
-                            <label data-newbie-hidden class="checkbox_label" for="swipes-checkbox">
-                                <input id="swipes-checkbox" type="checkbox" />
-                                <span data-i18n="Swipes">Swipes</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox">
-                                <input id="fuzzy_search_checkbox" type="checkbox" />
-                                <span data-i18n="Advanced Character Search">Advanced Character Search</span>
-                            </label>
-                            <label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead." class="checkbox_label">
-                                <input id="prefer_character_prompt" type="checkbox" />
-                                <span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
-                            </label>
-                            <label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." class="checkbox_label">
-                                <input id="prefer_character_jailbreak" type="checkbox" />
-                                <span data-i18n="Prefer Character Card Jailbreak">Prefer Char. JB</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="continue_on_send">
-                                <input id="continue_on_send" type="checkbox" />
-                                <span data-i18n="Press Send to continue">
-                                    Press "Send" to continue
-                                </span>
-                            </label>
-                            <label class="checkbox_label" for="quick_continue">
-                                <input id="quick_continue" type="checkbox" />
-                                <span data-i18n="Press Send to continue">
-                                    Show quick "Continue" button
-                                </span>
-                            </label>
-                            <label class="checkbox_label" for="auto-load-chat-checkbox">
-                                <input id="auto-load-chat-checkbox" type="checkbox" />
-                                <span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="auto_save_msg_edits">
-                                <input id="auto_save_msg_edits" type="checkbox" />
-                                <span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
-                            </label>
-                            <label class="checkbox_label" for="auto_fix_generated_markdown">
-                                <input id="auto_fix_generated_markdown" type="checkbox" />
-                                <span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
-                                <input id="allow_name2_display" type="checkbox" />
-                                <span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="allow_name1_display">
-                                <input id="allow_name1_display" type="checkbox" />
-                                <span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
-                            </label>
-                            <label class="checkbox_label" for="encode_tags">
-                                <input id="encode_tags" type="checkbox" />
-                                <span data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members.">
-                                <input id="disable_group_trimming" type="checkbox" />
-                                <span data-i18n="Show impersonated replies in groups">Show impersonated replies in groups</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
-                                <input id="console_log_prompts" type="checkbox" />
-                                <span data-i18n="Log prompts to console">Log prompts to console</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="render_formulas">
-                                <input id="render_formulas" type="checkbox" />
-                                <span data-i18n="Render Formulas">Render Formulas</span>
-                                <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
-                                </a>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="never_resize_avatars">
-                                <input id="never_resize_avatars" type="checkbox" />
-                                <span data-i18n="Never resize avatars">Never resize avatars</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls">
-                                <input id="show_card_avatar_urls" type="checkbox" />
-                                <span data-i18n="Show avatar filenames">Show avatar filenames</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="import_card_tags">
-                                <input id="import_card_tags" type="checkbox" />
-                                <span data-i18n="Import Card Tags">Import Card Tags</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
-                                <input id="confirm_message_delete" type="checkbox" />
-                                <span data-i18n="Confirm message deletion">Confirm message deletion</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode">
-                                <input id="spoiler_free_mode" type="checkbox" />
-                                <span data-i18n="Spoiler Free Mode">Spoiler Free Mode</span>
-                            </label>
-                            <label data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLS">
-                                <input id="relaxed_api_urls" type="checkbox" />
-                                <span data-i18n="Relaxed API URLS">Relaxed API URLS</span>
-                            </label>
-
-                            <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
-                                <div class="inline-drawer-toggle inline-drawer-header">
-                                    <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
-                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                                </div>
-                                <div class="inline-drawer-content">
-                                    <label class="checkbox_label" for="auto_swipe">
-                                        <input id="auto_swipe" type="checkbox" />
-                                        <span data-i18n="Enabled">Enabled</span>
-                                    </label>
-                                    <div data-i18n="Minimum generated message length">Minimum generated message length</div>
-                                    <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
-                                    <div data-i18n="Blacklisted words">Blacklisted words</div>
-                                    <div class="auto_swipe">
-                                        <textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
-                                        <div data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</div>
-                                        <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
+                                <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
+                                    <div class="inline-drawer-toggle inline-drawer-header">
+                                        <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
+                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
+                                    </div>
+                                    <div class="inline-drawer-content">
+                                        <label class="checkbox_label" for="auto_swipe">
+                                            <input id="auto_swipe" type="checkbox" />
+                                            <span data-i18n="Enabled">Enabled</span>
+                                        </label>
+                                        <div data-i18n="Minimum generated message length">Minimum generated message length</div>
+                                        <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
+                                        <div data-i18n="Blacklisted words">Blacklisted words</div>
+                                        <div class="auto_swipe">
+                                            <textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
+                                            <div data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</div>
+                                            <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-
                             <div data-newbie-hidden class="flex-container">
                                 <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
                                     Reload Chat
diff --git a/public/scripts/extensions/settingsearch/index.js b/public/scripts/extensions/settingsearch/index.js
index 390ab75be..fcf916bf3 100644
--- a/public/scripts/extensions/settingsearch/index.js
+++ b/public/scripts/extensions/settingsearch/index.js
@@ -6,7 +6,7 @@ async function addSettingsSearchHTML() {
     const html = `
     <div class="wide100p">
         <div class="justifyLeft">
-            <textarea id="settingsSearch" class="wide100p textarea_compact margin-bot-10px" rows="1" placeholder="Search Settings"></textarea>
+            <textarea id="settingsSearch" class="wide100p textarea_compact" rows="1" placeholder="Search Settings"></textarea>
         </div>
     </div>`
 
@@ -45,7 +45,7 @@ function removeHighlighting() {
     $(".highlighted").removeClass("highlighted");  // Remove CSS class from previously highlighted elements
 }
 jQuery(() => {
-    addSettingsSearchHTML();
+    //addSettingsSearchHTML();
     $('#settingsSearch').on('input change', searchSettings);
 });
 
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 4a88da9af..0b6d4ddcd 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -149,7 +149,6 @@ let power_user = {
     render_formulas: false,
     allow_name1_display: false,
     allow_name2_display: false,
-    //removeXML: false,
     hotswap_enabled: true,
     timer_enabled: true,
     timestamps_enabled: true,
@@ -378,6 +377,18 @@ function switchTokenCount() {
     $("#messageTokensEnabled").prop("checked", power_user.message_token_count_enabled);
 }
 
+function switchMesIDDisplay() {
+    const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
+    let before = power_user.mesIDDisplay_enabled;
+    power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
+    /*     console.log(`
+        localstorage value:${value}, 
+        poweruser before:${before}, 
+        poweruser after:${power_user.mesIDDisplay_enabled}`) */
+    $("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
+    $("#mesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
+}
+
 function switchMessageActions() {
     const value = localStorage.getItem(storage_keys.expand_message_actions);
     power_user.expand_message_actions = value === null ? false : value == "true";
@@ -385,18 +396,15 @@ function switchMessageActions() {
     $("#expandMessageActions").prop("checked", power_user.expand_message_actions);
 }
 
-function switchMesIDDisplay() {
-    const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
-    power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
-    $("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
-    $("#MesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
-}
-
 function switchUiMode() {
     const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
     $("body").toggleClass("no-blur", power_user.fast_ui_mode);
     $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
+    if (power_user.fast_ui_mode) {
+        $("#blur-strength-block").css('opacity', '0.2')
+        $("#blur_strength").prop('disabled', true)
+    } else { $("#blur-strength-block").css('opacity', '1') }
 }
 
 function toggleWaifu() {
@@ -452,13 +460,18 @@ function noShadows() {
     power_user.noShadows = noShadows === null ? false : noShadows == "true";
     $("body").toggleClass("noShadows", power_user.noShadows);
     $("#noShadowsmode").prop("checked", power_user.noShadows);
+    if (power_user.noShadows) {
+        $("#shadow-width-block").css('opacity', '0.2')
+        $("#shadow_width").prop('disabled', true)
+    } else { $("#shadow-width-block").css('opacity', '1') }
     scrollChatToBottom();
 }
 
 function applyAvatarStyle() {
     power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
     $("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR);
-    $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
+    $("#avatar_style").val(power_user.avatar_style).prop("selected", true);
+    //$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
 
 }
 
@@ -468,9 +481,8 @@ function applyChatDisplay() {
         console.debug('applyChatDisplay: saw no chat display type defined')
         return
     }
-    console.debug(`applyChatDisplay: applying ${power_user.chat_display}`)
-
-    $(`#chat_display option[value=${power_user.chat_display}]`).attr("selected", true)
+    console.debug(`poweruser.chat_display ${power_user.chat_display}`)
+    $("#chat_display").val(power_user.chat_display).prop("selected", true);
 
     switch (power_user.chat_display) {
         case 0: {
@@ -494,11 +506,20 @@ function applyChatDisplay() {
     }
 }
 
-function applyChatWidth() {
+function applyChatWidth(type) {
     power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50);
-    let r = document.documentElement;
-    r.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
-    $('#chat_width_slider').val(power_user.chat_width);
+
+    if (type === 'forced') {
+        let r = document.documentElement;
+        r.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
+        $('#chat_width_slider').val(power_user.chat_width);
+        //document.documentElement.style.setProperty('--sheldWidth', power_user.chat_width);
+    } else {
+        //this is to prevent the slider from updating page in real time
+        $("#chat_width_slider").off('mouseup touchend').on('mouseup touchend', () => {
+            document.documentElement.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
+        })
+    }
 }
 
 async function applyThemeColor(type) {
@@ -540,6 +561,7 @@ async function applyBlurStrength() {
     $("#blur_strength_counter").text(power_user.blur_strength);
     $("#blur_strength").val(power_user.blur_strength);
 
+
 }
 
 async function applyShadowWidth() {
@@ -649,55 +671,55 @@ async function applyTheme(name) {
                 }
 
                 localStorage.setItem(storage_keys.chat_width, String(power_user.chat_width));
-                applyChatWidth();
+                applyChatWidth('forced');
             }
         },
         {
             key: 'timer_enabled',
             action: async () => {
-                localStorage.setItem(storage_keys.timer_enabled, String(power_user.timer_enabled));
+                localStorage.setItem(storage_keys.timer_enabled, Boolean(power_user.timer_enabled));
                 switchTimer();
             }
         },
         {
             key: 'timestamps_enabled',
             action: async () => {
-                localStorage.setItem(storage_keys.timestamps_enabled, String(power_user.timestamps_enabled));
+                localStorage.setItem(storage_keys.timestamps_enabled, Boolean(power_user.timestamps_enabled));
                 switchTimestamps();
             }
         },
         {
             key: 'timestamp_model_icon',
             action: async () => {
-                localStorage.setItem(storage_keys.timestamp_model_icon, String(power_user.timestamp_model_icon));
+                localStorage.setItem(storage_keys.timestamp_model_icon, Boolean(power_user.timestamp_model_icon));
                 switchIcons();
             }
         },
         {
-            key: 'message_token_count',
+            key: 'message_token_count_enabled',
             action: async () => {
-                localStorage.setItem(storage_keys.message_token_count_enabled, String(power_user.message_token_count_enabled));
+                localStorage.setItem(storage_keys.message_token_count_enabled, Boolean(power_user.message_token_count_enabled));
                 switchTokenCount();
             }
         },
         {
             key: 'mesIDDisplay_enabled',
             action: async () => {
-                localStorage.setItem(storage_keys.mesIDDisplay_enabled, String(power_user.mesIDDisplay_enabled));
+                localStorage.setItem(storage_keys.mesIDDisplay_enabled, Boolean(power_user.mesIDDisplay_enabled));
                 switchMesIDDisplay();
             }
         },
         {
             key: 'expand_message_actions',
             action: async () => {
-                localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions));
+                localStorage.setItem(storage_keys.expand_message_actions, Boolean(power_user.expand_message_actions));
                 switchMessageActions();
             }
         },
         {
             key: 'hotswap_enabled',
             action: async () => {
-                localStorage.setItem(storage_keys.hotswap_enabled, String(power_user.hotswap_enabled));
+                localStorage.setItem(storage_keys.hotswap_enabled, Boolean(power_user.hotswap_enabled));
                 switchHotswap();
             }
         }
@@ -753,7 +775,7 @@ function showDebugMenu() {
 switchUiMode();
 applyFontScale('forced');
 applyThemeColor();
-applyChatWidth();
+applyChatWidth('forced');
 applyAvatarStyle();
 applyBlurStrength();
 applyShadowWidth();
@@ -794,6 +816,8 @@ function loadPowerUserSettings(settings, data) {
     const timer = localStorage.getItem(storage_keys.timer_enabled);
     const timestamps = localStorage.getItem(storage_keys.timestamps_enabled);
     const mesIDDisplay = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
+    const expandMessageActions = localStorage.getItem(storage_keys.expand_message_actions);
+    console.log(expandMessageActions)
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
     power_user.movingUI = movingUI === null ? false : movingUI == "true";
     power_user.noShadows = noShadows === null ? false : noShadows == "true";
@@ -801,6 +825,8 @@ function loadPowerUserSettings(settings, data) {
     power_user.timer_enabled = timer === null ? true : timer == "true";
     power_user.timestamps_enabled = timestamps === null ? true : timestamps == "true";
     power_user.mesIDDisplay_enabled = mesIDDisplay === null ? true : mesIDDisplay == "true";
+    power_user.expand_message_actions = expandMessageActions === null ? true : expandMessageActions == "true";
+    console.log(power_user.expand_message_actions)
     power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
     //power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
     power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50);
@@ -896,7 +922,6 @@ function loadPowerUserSettings(settings, data) {
     $("#main-text-color-picker").attr('color', power_user.main_text_color);
     $("#italics-color-picker").attr('color', power_user.italics_text_color);
     $("#quote-color-picker").attr('color', power_user.quote_text_color);
-    //$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
     $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
     $("#chat-tint-color-picker").attr('color', power_user.chat_tint_color);
     $("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
@@ -1234,7 +1259,6 @@ async function saveTheme() {
         main_text_color: power_user.main_text_color,
         italics_text_color: power_user.italics_text_color,
         quote_text_color: power_user.quote_text_color,
-        //fastui_bg_color: power_user.fastui_bg_color,
         blur_tint_color: power_user.blur_tint_color,
         chat_tint_color: power_user.chat_tint_color,
         user_mes_blur_tint_color: power_user.user_mes_blur_tint_color,
@@ -1252,9 +1276,14 @@ async function saveTheme() {
         timer_enabled: power_user.timer_enabled,
         timestamps_enabled: power_user.timestamps_enabled,
         timestamp_model_icon: power_user.timestamp_model_icon,
+
         mesIDDisplay_enabled: power_user.mesIDDisplay_enabled,
+        message_token_count_enabled: power_user.message_token_count_enabled,
+        expand_message_actions: power_user.expand_message_actions,
+
         hotswap_enabled: power_user.hotswap_enabled,
 
+
     };
 
     const response = await fetch('/savetheme', {
@@ -1853,40 +1882,45 @@ $(document).ready(() => {
         power_user.fast_ui_mode = $(this).prop("checked");
         localStorage.setItem(storage_keys.fast_ui_mode, power_user.fast_ui_mode);
         switchUiMode();
+        saveSettingsDebounced();
     });
 
     $("#waifuMode").on('change', () => {
         power_user.waifuMode = $('#waifuMode').prop("checked");
-        saveSettingsDebounced();
         switchWaifuMode();
+        saveSettingsDebounced();
     });
 
     $("#movingUImode").change(function () {
         power_user.movingUI = $(this).prop("checked");
         localStorage.setItem(storage_keys.movingUI, power_user.movingUI);
         switchMovingUI();
+        saveSettingsDebounced();
     });
 
     $("#noShadowsmode").change(function () {
         power_user.noShadows = $(this).prop("checked");
         localStorage.setItem(storage_keys.noShadows, power_user.noShadows);
         noShadows();
+        saveSettingsDebounced();
     });
 
     $("#movingUIreset").on('click', resetMovablePanels);
 
-    $(`input[name="avatar_style"]`).on('input', function (e) {
-        power_user.avatar_style = Number(e.target.value);
+    $("#avatar_style").on('change', function () {
+        const value = $(this).find(':selected').val();
+        power_user.avatar_style = Number(value);
         localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);
         applyAvatarStyle();
+        saveSettingsDebounced();
     });
 
     $("#chat_display").on('change', function () {
-        console.debug('###CHAT DISPLAY SELECTOR CHANGE###')
         const value = $(this).find(':selected').val();
         power_user.chat_display = Number(value);
-        saveSettingsDebounced();
+        localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
         applyChatDisplay();
+        saveSettingsDebounced();
 
     });
 
@@ -1902,6 +1936,7 @@ $(document).ready(() => {
         $("#font_scale_counter").text(power_user.font_scale);
         localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
         await applyFontScale();
+        saveSettingsDebounced();
     });
 
     $(`input[name="blur_strength"]`).on('input', async function (e) {
@@ -1909,6 +1944,7 @@ $(document).ready(() => {
         $("#blur_strength_counter").text(power_user.blur_strength);
         localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
         await applyBlurStrength();
+        saveSettingsDebounced();
     });
 
     $(`input[name="shadow_width"]`).on('input', async function (e) {
@@ -1916,6 +1952,7 @@ $(document).ready(() => {
         $("#shadow_width_counter").text(power_user.shadow_width);
         localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
         await applyShadowWidth();
+        saveSettingsDebounced();
     });
 
     $("#main-text-color-picker").on('change', (evt) => {
@@ -2132,49 +2169,49 @@ $(document).ready(() => {
     $("#messageTimerEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.timer_enabled = value;
-        localStorage.setItem(storage_keys.timer_enabled, String(power_user.timer_enabled));
+        localStorage.setItem(storage_keys.timer_enabled, Boolean(power_user.timer_enabled));
         switchTimer();
     });
 
     $("#messageTimestampsEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.timestamps_enabled = value;
-        localStorage.setItem(storage_keys.timestamps_enabled, String(power_user.timestamps_enabled));
+        localStorage.setItem(storage_keys.timestamps_enabled, Boolean(power_user.timestamps_enabled));
         switchTimestamps();
     });
 
     $("#messageModelIconEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.timestamp_model_icon = value;
-        localStorage.setItem(storage_keys.timestamp_model_icon, String(power_user.timestamp_model_icon));
+        localStorage.setItem(storage_keys.timestamp_model_icon, Boolean(power_user.timestamp_model_icon));
         switchIcons();
     });
 
     $("#messageTokensEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.message_token_count_enabled = value;
-        localStorage.setItem(storage_keys.message_token_count_enabled, String(power_user.message_token_count_enabled));
+        localStorage.setItem(storage_keys.message_token_count_enabled, Boolean(power_user.message_token_count_enabled));
         switchTokenCount();
     });
 
     $("#expandMessageActions").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.expand_message_actions = value;
-        localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions));
+        localStorage.setItem(storage_keys.expand_message_actions, Boolean(power_user.expand_message_actions));
         switchMessageActions();
     });
 
     $("#mesIDDisplayEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.mesIDDisplay_enabled = value;
-        localStorage.setItem(storage_keys.mesIDDisplay_enabled, String(power_user.mesIDDisplay_enabled));
+        localStorage.setItem(storage_keys.mesIDDisplay_enabled, Boolean(power_user.mesIDDisplay_enabled));
         switchMesIDDisplay();
     });
 
     $("#hotswapEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.hotswap_enabled = value;
-        localStorage.setItem(storage_keys.hotswap_enabled, String(power_user.hotswap_enabled));
+        localStorage.setItem(storage_keys.hotswap_enabled, Boolean(power_user.hotswap_enabled));
         switchHotswap();
     });
 
diff --git a/public/style.css b/public/style.css
index 579d8a556..b0807d126 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2206,7 +2206,8 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
 
 .range-block-counter {
     margin-left: 5px;
-    margin-right: 15px;
+    /*previously needed to avoid firefox scrollbar overlap, no longer necessary?*/
+    /* margin-right: 15px; */
     font-size: calc(var(--mainFontSize) * 0.95);
     color: var(--SmartThemeBodyColor);
     flex: 1;
@@ -2251,6 +2252,7 @@ input[type="range"] {
     background-size: 70% 100%;
     background-repeat: no-repeat;
     box-shadow: inset 0 0 2px black;
+    cursor: grab;
 }
 
 input[type="range"]::-webkit-slider-thumb {
@@ -3031,11 +3033,12 @@ a {
 }
 
 #extensions_settings .inline-drawer-toggle.inline-drawer-header,
-#extensions_settings2 .inline-drawer-toggle.inline-drawer-header {
+#extensions_settings2 .inline-drawer-toggle.inline-drawer-header,
+#user-settings-block h4 {
     background-image: linear-gradient(348deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)95%, var(--SmartThemeQuoteColor)100%);
     margin-bottom: 5px;
     border-radius: 10px;
-    padding: 5px;
+    padding: 2px 5px;
     border: 1px solid var(--SmartThemeBorderColor);
     transition: all 250ms;
 }