AF panel 3column reshuffle, autoComplete to UserSettings, collaspify Auto* settings

public/css/mobile-styles.css

@@ -344,7 +344,6 @@
 
 @media screen and (min-width: 1001px) {
 
-    #PygOverrides,
     #ContextFormatting,
     #UI-Theme-Block,
     #UI-Customization,
@@ -503,4 +502,4 @@
     #horde_model {
         height: unset;
     }
-}
+}

public/css/st-tailwind.css

@@ -360,6 +360,10 @@
     margin-right: 2px;
 }
 
+.flexAuto {
+    flex: auto;
+}
+
 .flex0 {
     flex: 0;
 }
@@ -490,7 +494,8 @@
 }
 
 input:disabled,
-textarea:disabled {
+textarea:disabled,
+.disabled {
     cursor: not-allowed;
     filter: brightness(0.5);
 }
@@ -603,4 +608,4 @@ ul.li-padding-bot5 li {
 
 ul.li-padding-bot10 li {
     padding-bottom: 10px;
-}
+}

public/scripts/instruct-mode.js

@@ -85,6 +85,12 @@ export function loadInstructMode(data) {
 
     migrateInstructModeSettings(power_user.instruct);
 
+    if (power_user.instruct.enabled) {
+        $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
+    } else {
+        $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
+    }
+
     controls.forEach(control => {
         const $element = $(`#${control.id}`);
 
@@ -606,11 +612,34 @@ jQuery(() => {
 
     $('#instruct_system_same_as_user').on('input', function () {
         const state = !!$(this).prop('checked');
-        $('#instruct_system_sequence').prop('disabled', state);
+        if (state == true) {
-        $('#instruct_system_suffix').prop('disabled', state);
+            let tempHeightForDisabled = $('#instruct_system_sequence').css('height');
+            $('#instruct_system_sequence_block').addClass('disabled');
+            $('#instruct_system_suffix_block').addClass('disabled');
+            $('#instruct_system_sequence').css('height', tempHeightForDisabled);
+            $('#instruct_system_suffix').css('height', tempHeightForDisabled);
+
+            $('#instruct_system_sequence').prop('contenteditable', false);
+            $('#instruct_system_suffix').prop('contenteditable', false);
+        } else {
+            $('#instruct_system_sequence_block').removeClass('disabled');
+            $('#instruct_system_suffix_block').removeClass('disabled');
+            $('#instruct_system_sequence').css('height', '');
+            $('#instruct_system_sequence').css('height', '');
+            $('#instruct_system_sequence').prop('contenteditable', true);
+            $('#instruct_system_suffix').prop('contenteditable', true);
+        }
+
     });
 
     $('#instruct_enabled').on('change', function () {
+        //color toggle for the main switch
+        if (power_user.instruct.enabled) {
+            $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
+        } else {
+            $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
+        }
+
         if (!power_user.instruct.bind_to_context) {
             return;
         }

public/style.css

@@ -1602,6 +1602,7 @@ body[data-stscript-style] .hljs.language-stscript {
     .hljs-pipe {
         color: var(--ac-style-color-punctuation);
     }
+
     .hljs-pipebreak {
         color: var(--ac-style-color-type);
     }
@@ -1695,6 +1696,7 @@ body[data-stscript-style] .hljs.language-stscript {
             background-color: var(--ac-color-selectedBackground);
             color: var(--ac-color-selectedText);
         }
+
         &.selected.not-selectable>* {
             background-color: var(--ac-color-notSelectableBackground);
             color: var(--ac-color-notSelectableText);
@@ -1776,11 +1778,13 @@ body[data-stscript-style] .hljs.language-stscript {
         padding: 0.25em 0.25em 0.5em 0.25em;
         border-bottom: 1px solid var(--ac-color-border);
 
-        > .head {
+        >.head {
             display: flex;
             gap: 0.5em;
         }
-        > .head > .name, > .name {
+
+        >.head>.name,
+        >.name {
             flex: 1 1 auto;
             font-weight: bold;
             color: var(--ac-color-text);
@@ -1790,20 +1794,25 @@ body[data-stscript-style] .hljs.language-stscript {
                 text-decoration: 1px dotted underline;
             }
         }
-        > .head > .source {
+
+        >.head>.source {
             padding: 0 0.5em;
             cursor: help;
             display: flex;
             align-items: center;
             gap: 0.5em;
+
             &.isThirdParty.isExtension {
                 color: #F89406;
             }
+
             &.isCore {
                 color: transparent;
+
                 &.isExtension {
                     color: #51A351;
                 }
+
                 &:after {
                     content: '';
                     order: -1;
@@ -2606,7 +2615,8 @@ select option:not(:checked) {
     color: var(--golden) !important;
 }
 
-.world_set {
+.world_set,
+.toggleEnabled {
     color: var(--active) !important;
 }
 
@@ -5374,6 +5384,7 @@ body:not(.movingUI) .drawer-content.maximized {
 .popup:has(.faPicker) {
     /* Fix height for fa picker popup, otherwise search is making it resize weirdly */
     height: 70%;
+
     .popup-content {
         display: flex;
         flex-direction: column;
@@ -5383,7 +5394,8 @@ body:not(.movingUI) .drawer-content.maximized {
 .faPicker-container {
     display: flex;
     flex-direction: column;
-    overflow: hidden;;
+    overflow: hidden;
+    ;
 }
 
 .faQuery-container {
@@ -5393,26 +5405,27 @@ body:not(.movingUI) .drawer-content.maximized {
 .faPicker {
     flex: 1 1 auto;
     overflow: auto;
-	gap: 1em;
+    gap: 1em;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr));
 
-	.menu_button {
+    .menu_button {
-		aspect-ratio: 1 / 1;
+        aspect-ratio: 1 / 1;
-		font-size: 2em;
+        font-size: 2em;
-		height: 1lh;
+        height: 1lh;
-		line-height: 1.2;
+        line-height: 1.2;
-		padding: 0.25em;
+        padding: 0.25em;
-		width: unset;
+        width: unset;
-		box-sizing: content-box;
+        box-sizing: content-box;
+
         &.hidden {
             display: none;
         }
-	}
+    }
 }
 
 .faPicker:not(:has(:not(.hidden)))::after {
     content: 'No icons found';
     color: var(--SmartThemeBodyColor);
     opacity: 0.7;
-}
+}