add option for toastr location to themes

public/index.html

@@ -4453,6 +4453,17 @@
                                     <input class="neo-range-slider" type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
                                     <input class="neo-range-input" type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
                                 </div>
+                                <div class="flex-container alignItemsBaseline">
+                                    <span data-i18n="Notification Location:">Notification Location:</span><br>
+                                    <select id="toastr_position" class="widthNatural flex1 margin0">
+                                        <option value="toast-top-left" data-i18n="Top Left">Top Left</option>
+                                        <option value="toast-top-center" data-i18n="Top Center">Top Center</option>
+                                        <option value="toast-top-right" data-i18n="Top Right">Top Right</option>
+                                        <option value="toast-bottom-left" data-i18n="Bottom Left">Bottom Left</option>
+                                        <option value="toast-bottom-center" data-i18n="Bottom Center">Bottom Center</option>
+                                        <option value="toast-bottom-right" data-i18n="Bottom Right">Bottom Right</option>
+                                    </select>
+                                </div>
                             </div>
                             <hr>
                             <div name="themeToggles">

public/script.js

@@ -321,7 +321,7 @@ toastr.options.timeOut = 4000; // How long the toast will display without user i
 toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it
 toastr.options.progressBar = true; // Visually indicate how long before a toast expires.
 toastr.options.closeButton = true; // enable a close button
-toastr.options.positionClass = 'toast-top-center'; // Where to position the toast container
+//toastr.options.positionClass = power_user.toastr_position; // Where to position the toast container
 toastr.options.onHidden = () => {
     // If we have any dialog still open, the last "hidden" toastr will remove the toastr-container. We need to keep it alive inside the dialog though
     // so the toasts still show up inside there.
@@ -7592,6 +7592,8 @@ export async function getSettings() {
         // Apply theme toggles from power user settings
         applyPowerUserSettings();
 
+        toastr.options.positionClass = power_user.toastr_position; // Where to position the toast container
+
         // Load character tags
         loadTagsSettings(settings);
 

public/scripts/power-user.js

@@ -137,6 +137,7 @@ let power_user = {
     fast_ui_mode: true,
     avatar_style: avatar_styles.ROUND,
     chat_display: chat_styles.DEFAULT,
+    toastr_position: 'toast-top-center',
     chat_width: 50,
     never_resize_avatars: false,
     show_card_avatar_urls: false,
@@ -1044,6 +1045,43 @@ function applyChatDisplay() {
     }
 }
 
+function applyToastrPosition() {
+
+    if (!power_user.toastr_position) {
+        power_user.toastr_position = 'toast-top-center';
+        console.warn('applyToastrPosition: missing toastr position, defaulting to top-center');
+    }
+
+    switch (power_user.toastr_position) {
+        case 'toast-top-left': {
+            toastr.options.positionClass = 'toast-top-left';
+            break;
+        }
+        case 'toast-top-center': {
+            toastr.options.positionClass = 'toast-top-center';
+            break;
+        }
+        case 'toast-top-right': {
+            toastr.options.positionClass = 'toast-top-right';
+            break;
+        }
+        case 'toast-bottom-left': {
+            toastr.options.positionClass = 'toast-bottom-left';
+            break;
+        }
+        case 'toast-bottom-center': {
+            toastr.options.positionClass = 'toast-bottom-center';
+            break;
+        }
+        case 'toast-bottom-right': {
+            toastr.options.positionClass = 'toast-bottom-right';
+            break;
+        }
+    }
+
+    $('#toastr_position').val(power_user.toastr_position).prop('selected', true);
+}
+
 function applyChatWidth(type) {
     if (type === 'forced') {
         let r = document.documentElement;
@@ -1206,6 +1244,12 @@ function applyTheme(name) {
                 applyChatDisplay();
             },
         },
+        {
+            key: 'toastr_position',
+            action: () => {
+                applyToastrPosition();
+            },
+        },
         {
             key: 'avatar_style',
             action: () => {
@@ -1455,6 +1499,7 @@ function getExampleMessagesBehavior() {
     return 'normal';
 }
 
+//MARK: loadPowerUser
 async function loadPowerUserSettings(settings, data) {
     const defaultStscript = JSON.parse(JSON.stringify(power_user.stscript));
     // Load from settings.json
@@ -1603,6 +1648,7 @@ async function loadPowerUserSettings(settings, data) {
     $('#enableLabMode').prop('checked', power_user.enableLabMode).trigger('input', { fromInit: true });
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop('checked', true);
     $(`#chat_display option[value=${power_user.chat_display}]`).attr('selected', true).trigger('change');
+    $(`#toastr_position option[value=${power_user.toastr_position}]`).attr('selected', true).trigger('change');
     $('#chat_width_slider').val(power_user.chat_width);
     $('#token_padding').val(power_user.token_padding);
     $('#aux_field').val(power_user.aux_field);
@@ -2372,6 +2418,7 @@ function getThemeObject(name) {
         waifuMode: power_user.waifuMode,
         avatar_style: power_user.avatar_style,
         chat_display: power_user.chat_display,
+        toastr_position: power_user.toastr_position,
         noShadows: power_user.noShadows,
         chat_width: power_user.chat_width,
         timer_enabled: power_user.timer_enabled,
@@ -3323,6 +3370,14 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#toastr_position').on('change', function () {
+        console.error('saw toastr position change');
+        const value = $(this).find(':selected').val();
+        power_user.toastr_position = String(value);
+        applyToastrPosition();
+        saveSettingsDebounced();
+    });
+
     $('#chat_width_slider').on('input', function (e, data) {
         const applyMode = data?.forced ? 'forced' : 'normal';
         power_user.chat_width = Number(e.target.value);

public/style.css

@@ -3933,7 +3933,7 @@ grammarly-extension {
 
 /* Override toastr default styles */
 body #toast-container {
-    top: var(--topBarBlockSize);
+    margin-top: var(--topBarBlockSize);
 }
 
 body #toast-container>div {