From ac4651c2410ac0f4483c4407a4a840929e98ca18 Mon Sep 17 00:00:00 2001
From: Hakorr <76921756+Hakorr@users.noreply.github.com>
Date: Mon, 19 Jun 2023 17:24:31 +0300
Subject: [PATCH] Image Modifier UI Overhaul

Additionally also fixed body overflowing when on mobile. This is unrelated to the overhaul.
---
 ui/index.html                        |  65 +++---
 ui/media/css/main.css                | 190 +++++++++++++++-
 ui/media/css/modifier-thumbnails.css | 147 +++++--------
 ui/media/js/image-modifiers.js       | 309 ++++++++++++++++++++-------
 4 files changed, 510 insertions(+), 201 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 0c4386de..21c64493 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -63,9 +63,39 @@
                         <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">Click to learn more about Negative Prompts</span></i></a>
                         <small>(optional)</small>
                     </label>
+                    <label for="image-modifiers" data-active="false" id="image-modifier-dropdown">
+                        Image Modifiers
+                        <small>(optional)</small>
+                    </label>
                     <div class="collapsible-content">
                         <textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea>
                     </div>
+                    <div id="editor-modifiers">
+                        <div id="editor-modifiers-header">
+                            <div id="modifiers-header-left">
+                                <h4>Image Modifiers</h4>
+                                <span>(drawing style, camera, etc.)</span>
+                            </div>
+                            <div id="modifiers-header-right">
+                                <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
+                                    <span class="simple-tooltip left">
+                                        Add Custom Modifiers
+                                    </span>
+                                </i>
+                                <i id="modifiers-container-size-btn" class="fa-solid fa-expand"></i>
+                                <i id="modifiers-close-button" class="fa-solid fa-xmark fa-lg"></i>
+                            </div>
+                        </div>
+                        <div id="editor-modifiers-subheader">
+                            <div id="modifiers-action-collapsibles-btn">
+                                <i class="modifiers-action-icon fa-solid fa-square-plus"></i> 
+                                <span class="modifiers-action-text">
+                                    Expand Categories
+                                </span>
+                            </div>
+                        </div>
+                        <div id="editor-modifiers-entries" class="collapsible-content"></div>
+                    </div>
                 </div>
 
                 <div id="editor-inputs-init-image" class="row">
@@ -102,7 +132,7 @@
                 </div>
 
                 <div id="editor-inputs-tags-container" class="row">
-                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, right-click to temporarily disable it, use Ctrl+Mouse Wheel to adjust its weight</span></i></label>
+                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click an Image Modifier to remove it, right-click to temporarily disable it, use Ctrl+Mouse Wheel to adjust its weight</span></i></label>
                     <div id="editor-inputs-tags-list"></div>
                 </div>
 
@@ -293,29 +323,6 @@
                     </ul></div>
                 </div>
             </div>
-
-            <div id="editor-modifiers" class="panel-box">
-                <h4 class="collapsible">
-                    Image Modifiers (art styles, tags etc)
-                    <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
-                        <span class="simple-tooltip left">
-                            Add Custom Modifiers
-                        </span>
-                    </i>
-                </h4>
-                <div id="editor-modifiers-entries" class="collapsible-content">
-                    <div id="editor-modifiers-entries-toolbar">
-                        <label for="preview-image">Image Style:</label>
-                        <select id="preview-image" name="preview-image" value="portrait">
-                            <option value="portrait" selected="">Face</option>
-                            <option value="landscape">Landscape</option>
-                        </select>
-                        &nbsp;
-                        <label for="modifier-card-size-slider">Thumbnail Size:</label>
-                        <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-3" max="5">
-                    </div>
-                </div>
-            </div>
         </div>
 
         <div id="preview" class="col-free">
@@ -475,6 +482,16 @@
             <p>Set your custom modifiers (one per line)</p>
             <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
             <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p>
+            <div id="editor-modifiers-entries-toolbar">
+                <label for="preview-image">Image Style:</label>
+                <select id="preview-image" name="preview-image" value="portrait">
+                    <option value="portrait" selected="">Face</option>
+                    <option value="landscape">Landscape</option>
+                </select>
+                &nbsp;
+                <label for="modifier-card-size-slider">Thumbnail Size:</label>
+                <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-2" max="3">
+            </div>
         </div>
     </div>
 
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 9df38f9a..af4c152e 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -211,10 +211,6 @@ code {
 #makeImage {
     border-radius: 6px;
 }
-#editor-modifiers h5 {
-    padding: 5pt 0;
-    margin: 0;
-}
 #makeImage {
     flex: 0 0 70px;
     background: var(--accent-color);
@@ -284,14 +280,193 @@ button#resume {
 .collapsible:not(.active) ~ .collapsible-content  {
     display: none !important;
 }
+#image-modifier-dropdown {
+    margin-left: 1em;
+    position: relative;
+    cursor: pointer;
+}
+#image-modifier-dropdown[data-active="true"]::before {
+    content: "➖";
+}
+#image-modifier-dropdown[data-active="false"]::before {
+    content: "➕";
+}
 #editor-modifiers {
-    overflow-y: auto;
+    max-width: 75vw;
+    min-width: 50vw;
+    max-height: fit-content;
+    overflow-y: hidden;
     overflow-x: hidden;
+    display: none;
+    background: var(--background-color1);
+    border: solid 1px var(--background-color3);
+    z-index: 999;
+    border-radius: 6px;
+    box-shadow: 0px 0px 30px black;
+    border: 2px solid rgb(255 255 255 / 10%);
+}
+#editor-modifiers.active {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 5vw;
+}
+.modifiers-maximized {
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0px !important;
+    left: 0px !important;
+    right: 0px !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    border: 0px !important;
+    border-radius: 0px !important;
+}
+.modifiers-maximized #editor-modifiers-entries {
+    max-height: 100%;
+    flex: 1;
+}
+#editor-modifiers-header {
+    background-color: var(--background-color4);
+    padding: 0.5em;
+    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+#editor-modifiers-subheader {
+    background-color: var(--background-color4);
+    padding: 0.5em;
+    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    display: flex;
+    align-items: center;
+    grid-gap: 0.8em;
+    flex-direction: row;
+    position: relative;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    transition: all 0.1s ease;
+}
+#editor-modifiers-subheader::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.02);
+    opacity: 1;
+    pointer-events: none;
+}
+#modifiers-header-left {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 0.1em;
+}
+#modifiers-header-left span {
+    font-size: 0.8em;
+    color: rgb(127 127 127);
+    font-weight: 200;
+}
+#modifiers-header-right {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    grid-gap: 0.8em;
+    margin-right: 0.3em;
+}
+
+#editor-modifiers-subheader i,
+#modifiers-header-right i {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+#modifiers-header-right .section-button,
+#editor-modifiers-subheader .section-button {
+    margin-top: 0.3em;
+}
+#modifiers-action-collapsibles-btn {
+    display: flex;
+    grid-gap: 0.5em;
+    cursor: pointer;
+}
+.modifiers-action-text {
+    font-size: 0.8em;
+    color: rgb(192 192 192);
+}
+#modifiers-expand-btn {
+    z-index: 2;
+}
+#modifiers-expand-btn .simple-tooltip {
+    background-color: var(--background-color3);
+    border-radius: 50px;
+}
+.modifier-category .collapsible {
+    position: relative;
+}
+.modifier-category .collapsible::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.1);
+    opacity: 0;
+    transition: opacity 0.1s ease;
+    pointer-events: none;
+}
+.modifier-category:hover .collapsible::after {
+    opacity: 1;
+    pointer-events: none;
+}
+#editor-modifiers-entries {
+    overflow: auto scroll;
+    max-height: 50vh;
+    height: fit-content;
+    margin-bottom: 0.1em;
+    padding-left: 0px;
+}
+#editor-modifiers-entries .collapsible {
+    transition: opacity 0.1s ease;
+    padding-left: 0.5em;
+}
+#editor-modifiers-entries .modifier-category:nth-child(odd) .collapsible::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.02);
+    opacity: 1;
+    pointer-events: none;
 }
 #editor-modifiers .editor-modifiers-leaf {
     padding-top: 10pt;
     padding-bottom: 10pt;
 }
+#editor-modifiers h5 {
+    padding: 5pt 0;
+    margin: 0;
+    position: sticky;
+    top: -2px;
+    z-index: 10;
+    background-color: var(--background-color3);
+    border-bottom: 1px solid rgb(255 255 255 / 4%);
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
 img {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
 }
@@ -310,6 +485,9 @@ div.img-preview img {
     margin-top: 5pt;
     display: none;
 }
+#editor-inputs-tags-list {
+    max-height: 30em;
+}
 #server-status {
     position: absolute;
     right: 16px;
@@ -779,7 +957,6 @@ input::file-selector-button {
     height: 19px;
 }
 
-
 .input-toggle {
     display: inline-block;
     position: relative;
@@ -1083,6 +1260,7 @@ input::file-selector-button {
 /* POPUPS */
 .popup:not(.active) {
     visibility: hidden;
+    overflow-x: hidden; /* fix overflow from body */
     opacity: 0;
 }
 
diff --git a/ui/media/css/modifier-thumbnails.css b/ui/media/css/modifier-thumbnails.css
index c6fb8107..02b91fce 100644
--- a/ui/media/css/modifier-thumbnails.css
+++ b/ui/media/css/modifier-thumbnails.css
@@ -1,14 +1,16 @@
 .modifier-card {
+    position: relative;
+    box-sizing: content-box; /* fixes border misalignment */
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.1s;
     border-radius: 7px;
     margin: 3pt 3pt;
     float: left;
-    width: 8em;
-    height: 11.5em;
+    width: 6em;
+    height: 9.5em;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 8em 3.5em;
+    grid-template-rows: 6em 3.5em;
     gap: 0px 0px;
     grid-auto-flow: row;
     grid-template-areas:
@@ -16,82 +18,71 @@
         "modifier-card-container";
     border: 2px solid rgba(255, 255, 255, .05);
     cursor: pointer;
-}
-.modifier-card-size_5 {
-    width: 18em;
-    grid-template-rows: 18em 3.5em;
-    height: 21.5em;
-}
-.modifier-card-size_5 .modifier-card-image-overlay {
-    font-size: 8em;
-}
-.modifier-card-size_4 {
-    width: 14em;
-    grid-template-rows: 14em 3.5em;
-    height: 17.5em;
-}
-.modifier-card-size_4 .modifier-card-image-overlay {
-    font-size: 7em;
+    z-index: 2;
 }
 .modifier-card-size_3 {
-    width: 11em;
-    grid-template-rows: 11em 3.5em;
-    height: 14.5em;
-}
-.modifier-card-size_3 .modifier-card-image-overlay {
-    font-size: 6em;
-}
-.modifier-card-size_2 {
     width: 10em;
     grid-template-rows: 10em 3.5em;
     height: 13.5em;
 }
-.modifier-card-size_2 .modifier-card-image-overlay {
+.modifier-card-size_3 .modifier-card-image-overlay {
     font-size: 6em;
 }
-.modifier-card-size_1 {
+.modifier-card-size_3 .modifier-card-label {
+    font-size: 1.2em;
+}
+.modifier-card-size_2 {
     width: 9em;
     grid-template-rows: 9em 3.5em;
     height: 12.5em;
 }
-.modifier-card-size_1 .modifier-card-image-overlay {
+.modifier-card-size_2 .modifier-card-image-overlay {
     font-size: 5em;
 }
-.modifier-card-size_-1 {
+.modifier-card-size_2 .modifier-card-label {
+    font-size: 1.1em;
+}
+.modifier-card-size_1 {
     width: 7em;
     grid-template-rows: 7em 3.5em;
     height: 10.5em;
 }
-.modifier-card-size_-1 .modifier-card-image-overlay {
+.modifier-card-size_1 .modifier-card-image-overlay {
     font-size: 4em;
 }
-.modifier-card-size_-2 {
-    width: 6em;
-    grid-template-rows: 6em 3.5em;
-    height: 9.5em;
-}
-.modifier-card-size_-2 .modifier-card-image-overlay {
-    font-size: 3em;
-}
-.modifier-card-size_-3 {
+.modifier-card-size_-1 {
     width: 5em;
     grid-template-rows: 5em 3.5em;
     height: 8.5em;
 }
-.modifier-card-size_-3 .modifier-card-image-overlay {
+.modifier-card-size_-1 .modifier-card-image-overlay {
     font-size: 3em;
 }
-.modifier-card-size_-3 .modifier-card-label {
-    font-size: 0.8em;
+.modifier-card-size_-1 .modifier-card-label {
+    font-size: 0.9em;
+}
+.modifier-card-size_-2 {
+    width: 4em;
+    grid-template-rows: 3.5em 3em;
+    height: 6.5em;
+}
+.modifier-card-size_-2 .modifier-card-image-overlay {
+    font-size: 2em;
+}
+.modifier-card-size_-2 .modifier-card-label {
+    font-size: 0.7em;
 }
 .modifier-card-tiny {
-    width: 6em;
-    height: 9.5em;
-    grid-template-rows: 6em 3.5em;
+    width: 5em;
+    grid-template-rows: 5em 3.5em;
+    height: 8.5em;
 }
 .modifier-card-tiny .modifier-card-image-overlay {
     font-size: 4em;
 }
+.modifier-card-tiny .modifier-card-label {
+    font-size: 0.9em;
+}
 .modifier-card:hover {
     transform: scale(1.05);
     box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
@@ -115,6 +106,7 @@
 }
 .modifier-card-image-container * {
     position: absolute;
+    text-align: center;
 }
 .modifier-card-container {
     text-align: center;
@@ -131,6 +123,7 @@
 .modifier-card-label {
     padding: 4px;
     word-break: break-word;
+    text-transform: capitalize;
 }
 .modifier-card-image-overlay {
     width: inherit;
@@ -140,7 +133,7 @@
     position: absolute;
     border-radius: 5px 5px 0 0;
     opacity: 0;
-    font-size: 5em;
+    font-size: 4em;
     font-weight: 900;
     color: rgb(255 255 255 / 50%);
     display: flex;
@@ -153,9 +146,8 @@
     position: absolute;
     z-index: 3;
 }
-.modifier-card-overlay:hover ~ .modifier-card-container .modifier-card-label.tooltip .tooltip-text {
-    visibility: visible;
-    opacity: 1;
+.modifier-card-active .modifier-card-overlay {
+    background-color: rgb(169 78 241 / 40%);
 }
 .modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
     opacity: 1;
@@ -175,53 +167,24 @@
     border: 2px solid rgb(179 82 255 / 94%);
     box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%);
 }
-.tooltip {
-    position: relative;
-    display: inline-block;
-}
-.tooltip .tooltip-text {
-    visibility: hidden;
-    width: 120px;
-    background: rgb(101,97,181);
-    background: linear-gradient(180deg, rgba(101,97,181,1) 0%, rgba(47,45,85,1) 100%);
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px;
-    position: absolute;
-    z-index: 1;
-    top: 105%;
-    left: 39%;
-    margin-left: -60px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    border: 2px solid rgb(90 100 177 / 94%);
-    box-shadow: 0px 10px 20px 5px rgb(11 0 58 / 55%);
-    width: 10em;
-}
-.tooltip .tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: -0.9em;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent rgb(90 100 177 / 94%) transparent;
-}
-.tooltip:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-}
 #modifier-card-size-slider {
     width: 6em;
     margin-bottom: 0.5em;
     vertical-align: middle;
 }
-#modifier-settings-btn {
-    float: right;
-}
 #modifier-settings-config textarea {
     width: 90%;
     height: 150px;
 }
+.modifier-card .hidden {
+    display: none;
+}
+.support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .modifier-card-label {
+    font-size: 0.7em;
+}
+.support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .long-label {
+    display: block;
+}
+.support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .regular-label {
+    display: none;
+}
\ No newline at end of file
diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index 69f31ab1..5f3a9014 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -1,14 +1,21 @@
 let activeTags = []
 let modifiers = []
 let customModifiersGroupElement = undefined
-let customModifiersInitialContent
+let customModifiersInitialContent = ""
+let modifierPanelFreezed = false
 
+let modifiersMainContainer = document.querySelector("#editor-modifiers")
+let modifierDropdown = document.querySelector("#image-modifier-dropdown")
+let editorModifiersContainer = document.querySelector("#editor-modifiers")
 let editorModifierEntries = document.querySelector("#editor-modifiers-entries")
 let editorModifierTagsList = document.querySelector("#editor-inputs-tags-list")
 let editorTagsContainer = document.querySelector("#editor-inputs-tags-container")
 let modifierCardSizeSlider = document.querySelector("#modifier-card-size-slider")
 let previewImageField = document.querySelector("#preview-image")
 let modifierSettingsBtn = document.querySelector("#modifier-settings-btn")
+let modifiersContainerSizeBtn = document.querySelector("#modifiers-container-size-btn")
+let modifiersCloseBtn = document.querySelector("#modifiers-close-button")
+let modifiersCollapsiblesBtn = document.querySelector("#modifiers-action-collapsibles-btn")
 let modifierSettingsOverlay = document.querySelector("#modifier-settings-config")
 let customModifiersTextBox = document.querySelector("#custom-modifiers-input")
 let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar")
@@ -18,31 +25,31 @@ const activeCardClass = "modifier-card-active"
 const CUSTOM_MODIFIERS_KEY = "customModifiers"
 
 function createModifierCard(name, previews, removeBy) {
-    const modifierCard = document.createElement("div")
-    let style = previewImageField.value
-    let styleIndex = style == "portrait" ? 0 : 1
+    let cardPreviewImageType = previewImageField.value
 
+    const modifierCard = document.createElement("div")
     modifierCard.className = "modifier-card"
     modifierCard.innerHTML = `
     <div class="modifier-card-overlay"></div>
     <div class="modifier-card-image-container">
         <div class="modifier-card-image-overlay">+</div>
-        <p class="modifier-card-error-label"></p>
+        <p class="modifier-card-error-label">No Image</p>
         <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
     </div>
     <div class="modifier-card-container">
-        <div class="modifier-card-label"><p></p></div>
+        <div class="modifier-card-label">
+            <span class="long-label hidden"></span>
+            <p class="regular-label"></p>
+        </div>
     </div>`
 
     const image = modifierCard.querySelector(".modifier-card-image")
-    const errorText = modifierCard.querySelector(".modifier-card-error-label")
-    const label = modifierCard.querySelector(".modifier-card-label")
-
-    errorText.innerText = "No Image"
+    const longLabel = modifierCard.querySelector(".modifier-card-label span.long-label")
+    const regularLabel = modifierCard.querySelector(".modifier-card-label p.regular-label")
 
     if (typeof previews == "object") {
-        image.src = previews[styleIndex] // portrait
-        image.setAttribute("preview-type", style)
+        image.src = previews[cardPreviewImageType == "portrait" ? 0 : 1] // 0 index is portrait, 1 landscape
+        image.setAttribute("preview-type", cardPreviewImageType)
     } else {
         image.remove()
     }
@@ -50,24 +57,32 @@ function createModifierCard(name, previews, removeBy) {
     const maxLabelLength = 30
     const cardLabel = removeBy ? name.replace("by ", "") : name
 
-    if (cardLabel.length <= maxLabelLength) {
-        label.querySelector("p").innerText = cardLabel
-    } else {
-        const tooltipText = document.createElement("span")
-        tooltipText.className = "tooltip-text"
-        tooltipText.innerText = name
-
-        label.classList.add("tooltip")
-        label.appendChild(tooltipText)
-
-        label.querySelector("p").innerText = cardLabel.substring(0, maxLabelLength) + "..."
+    function getFormattedLabel(length) {
+        if (cardLabel?.length <= length) {
+            return cardLabel
+        } else {
+            return cardLabel.substring(0, length) + "..."
+        }
     }
-    label.querySelector("p").dataset.fullName = name // preserve the full name
 
+    modifierCard.dataset.fullName = name // preserve the full name
+    regularLabel.dataset.fullName = name // preserve the full name, legacy support for older plugins
+    
+    longLabel.innerText = getFormattedLabel(maxLabelLength * 2)
+    regularLabel.innerText = getFormattedLabel(maxLabelLength)
+
+    if (cardLabel.length > maxLabelLength) {
+        modifierCard.classList.add("support-long-label")
+
+        if (cardLabel.length > maxLabelLength * 2) {
+            modifierCard.title = `"${name}"`
+        }
+    }
+    
     return modifierCard
 }
 
-function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
+function createModifierGroup(modifierGroup, isInitiallyOpen, removeBy) {
     const title = modifierGroup.category
     const modifiers = modifierGroup.modifiers
 
@@ -78,8 +93,8 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
     const modifiersEl = document.createElement("div")
     modifiersEl.classList.add("collapsible-content", "editor-modifiers-leaf")
 
-    if (initiallyExpanded === true) {
-        titleEl.className += " active"
+    if (isInitiallyOpen === true) {
+        titleEl.classList.add("active")
     }
 
     modifiers.forEach((modObj) => {
@@ -126,7 +141,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
     e.appendChild(titleEl)
     e.appendChild(modifiersEl)
 
-    editorModifierEntries.insertBefore(e, customModifierEntriesToolbar.nextSibling)
+    editorModifierEntries.prepend(e)
 
     return e
 }
@@ -149,7 +164,10 @@ async function loadModifiers() {
             res.reverse()
 
             res.forEach((modifierGroup, idx) => {
-                createModifierGroup(modifierGroup, idx === res.length - 1, modifierGroup === "Artist" ? true : false) // only remove "By " for artists
+                const isInitiallyOpen = false // idx === res.length - 1
+                const removeBy = modifierGroup === "Artist" ? true : false // only remove "By " for artists
+
+                createModifierGroup(modifierGroup, isInitiallyOpen, removeBy) 
             })
 
             createCollapsibles(editorModifierEntries)
@@ -169,7 +187,7 @@ function refreshModifiersState(newTags, inactiveTags) {
         .querySelector("#editor-modifiers")
         .querySelectorAll(".modifier-card")
         .forEach((modifierCard) => {
-            const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName // pick the full modifier name
+            const modifierName = modifierCard.dataset.fullName // pick the full modifier name
             if (activeTags.map((x) => x.name).includes(modifierName)) {
                 modifierCard.classList.remove(activeCardClass)
                 modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+"
@@ -184,8 +202,9 @@ function refreshModifiersState(newTags, inactiveTags) {
             .querySelector("#editor-modifiers")
             .querySelectorAll(".modifier-card")
             .forEach((modifierCard) => {
-                const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName
+                const modifierName = modifierCard.dataset.fullName
                 const shortModifierName = modifierCard.querySelector(".modifier-card-label p").innerText
+
                 if (trimModifiers(tag) == trimModifiers(modifierName)) {
                     // add modifier to active array
                     if (!activeTags.map((x) => x.name).includes(tag)) {
@@ -242,10 +261,10 @@ function refreshInactiveTags(inactiveTags) {
     }
 
     // update cards
-    let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
+    let overlays = editorModifierTagsList.querySelectorAll(".modifier-card-overlay")
     overlays.forEach((i) => {
-        let modifierName = i.parentElement.getElementsByClassName("modifier-card-label")[0].getElementsByTagName("p")[0]
-            .dataset.fullName
+        let modifierName = i.parentElement.dataset.fullName
+
         if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) {
             i.parentElement.classList.add("modifier-toggle-inactive")
         }
@@ -262,6 +281,12 @@ function refreshTagsList(inactiveTags) {
         editorTagsContainer.style.display = "block"
     }
 
+    if(activeTags.length > 15) {
+        editorModifierTagsList.style["overflow-y"] = "auto"
+    } else {
+        editorModifierTagsList.style["overflow-y"] = "unset"
+    }
+
     activeTags.forEach((tag, index) => {
         tag.element.querySelector(".modifier-card-image-overlay").innerText = "-"
         tag.element.classList.add("modifier-card-tiny")
@@ -285,48 +310,42 @@ function refreshTagsList(inactiveTags) {
 
     let brk = document.createElement("br")
     brk.style.clear = "both"
+
     editorModifierTagsList.appendChild(brk)
+
     refreshInactiveTags(inactiveTags)
+
     document.dispatchEvent(new Event("refreshImageModifiers")) // notify plugins that the image tags have been refreshed
 }
 
 function toggleCardState(modifierName, makeActive) {
-    document
-        .querySelector("#editor-modifiers")
-        .querySelectorAll(".modifier-card")
-        .forEach((card) => {
-            const name = card.querySelector(".modifier-card-label").innerText
-            if (
-                trimModifiers(modifierName) == trimModifiers(name) ||
-                trimModifiers(modifierName) == "by " + trimModifiers(name)
-            ) {
-                if (makeActive) {
-                    card.classList.add(activeCardClass)
-                    card.querySelector(".modifier-card-image-overlay").innerText = "-"
-                } else {
-                    card.classList.remove(activeCardClass)
-                    card.querySelector(".modifier-card-image-overlay").innerText = "+"
-                }
-            }
-        })
+    const cards = [...document.querySelectorAll("#editor-modifiers .modifier-card")]
+        .filter(cardElem => trimModifiers(cardElem.dataset.fullName) == trimModifiers(modifierName))
+
+    const cardExists = typeof cards == "object" && cards?.length > 0
+
+    if (cardExists) {
+        const card = cards[0]
+    
+        if (makeActive) {
+            card.classList.add(activeCardClass)
+            card.querySelector(".modifier-card-image-overlay").innerText = "-"
+        } else {
+            card.classList.remove(activeCardClass)
+            card.querySelector(".modifier-card-image-overlay").innerText = "+"
+        }
+    }
 }
 
 function changePreviewImages(val) {
     const previewImages = document.querySelectorAll(".modifier-card-image-container img")
 
-    let previewArr = []
-
-    modifiers.map((x) => x.modifiers).forEach((x) => previewArr.push(...x.map((m) => m.previews)))
-
-    previewArr = previewArr.map((x) => {
-        let obj = {}
-
-        x.forEach((preview) => {
+    const previewArr = modifiers.flatMap((x) => x.modifiers.map((m) => m.previews))
+        .map((x) => x.reduce((obj, preview) => {
             obj[preview.name] = preview.path
-        })
 
-        return obj
-    })
+            return obj
+        }, {}))
 
     previewImages.forEach((previewImage) => {
         const currentPreviewType = previewImage.getAttribute("preview-type")
@@ -369,17 +388,70 @@ function resizeModifierCards(val) {
     })
 }
 
+function saveCustomModifiers() {
+    localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())
+
+    loadCustomModifiers()
+}
+
+function loadCustomModifiers() {
+    PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call())
+}
+
+function showModifierContainer() {
+    document.addEventListener("click", checkIfClickedOutsideDropdownElem)
+
+    modifierDropdown.dataset.active = true
+    editorModifiersContainer.classList.add("active")
+}
+
+function hideModifierContainer() {
+    document.removeEventListener("click", checkIfClickedOutsideDropdownElem)
+
+    modifierDropdown.dataset.active = false
+    editorModifiersContainer.classList.remove("active")
+}
+
+function checkIfClickedOutsideDropdownElem(e) {
+    const clickedElement = e.target
+
+    const clickedInsideSpecificElems = [modifierDropdown, editorModifiersContainer, modifierSettingsOverlay].some((div) => 
+        div && (div.contains(clickedElement) || div === clickedElement))
+
+    if (!clickedInsideSpecificElems && !modifierPanelFreezed) {
+        hideModifierContainer()
+    }
+}
+
+function collapseAllModifierCategory() {
+    const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
+
+    [...collapsibleElems].forEach((elem) => {
+        const isActive =  elem.classList.contains("active")
+
+        if(isActive) {
+            elem?.click()
+        }
+    })
+}
+
+function expandAllModifierCategory() {
+    const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
+
+    [...collapsibleElems].forEach((elem) => {
+        const isActive =  elem.classList.contains("active")
+
+        if (!isActive) {
+            elem?.click()
+        }
+    })
+}
+
+customModifiersTextBox.addEventListener("change", saveCustomModifiers)
+
 modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
-modifierSettingsBtn.addEventListener("click", function(e) {
-    modifierSettingsOverlay.classList.add("active")
-    customModifiersTextBox.setSelectionRange(0, 0)
-    customModifiersTextBox.focus()
-    customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
-    e.stopPropagation()
-})
-
 modifierSettingsOverlay.addEventListener("keydown", function(e) {
     switch (e.key) {
         case "Escape": // Escape to cancel
@@ -397,14 +469,93 @@ modifierSettingsOverlay.addEventListener("keydown", function(e) {
     }
 })
 
-function saveCustomModifiers() {
-    localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())
+modifierDropdown.addEventListener("click", e => {
+    const targetElem = e.target
+    const isDropdownActive = targetElem.dataset.active == "true" ? true : false
 
-    loadCustomModifiers()
-}
+    if (!isDropdownActive) 
+        showModifierContainer()
+    else
+        hideModifierContainer()
+})
 
-function loadCustomModifiers() {
-    PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call())
-}
+let collapsiblesBtnState = false
 
-customModifiersTextBox.addEventListener("change", saveCustomModifiers)
+modifiersCollapsiblesBtn.addEventListener("click", (e) => {
+    const btnElem = modifiersCollapsiblesBtn
+
+    const collapseText = "Collapse Categories"
+    const expandText = "Expand Categories"
+
+    const collapseIconClasses = ["fa-solid", "fa-square-minus"]
+    const expandIconClasses = ["fa-solid", "fa-square-plus"]
+
+    const iconElem = btnElem.querySelector(".modifiers-action-icon")
+    const textElem = btnElem.querySelector(".modifiers-action-text")
+
+    if (collapsiblesBtnState) {
+        collapseAllModifierCategory()
+
+        collapsiblesBtnState = false
+
+        collapseIconClasses.forEach((c) => iconElem.classList.remove(c))
+        expandIconClasses.forEach((c) => iconElem.classList.add(c))
+
+        textElem.innerText = expandText
+    } else {
+        expandAllModifierCategory()
+
+        collapsiblesBtnState = true
+
+        expandIconClasses.forEach((c) => iconElem.classList.remove(c))
+        collapseIconClasses.forEach((c) => iconElem.classList.add(c))
+
+        textElem.innerText = collapseText
+    }
+})
+
+let containerSizeBtnState = false
+
+modifiersContainerSizeBtn.addEventListener("click", (e) => {
+    const btnElem = modifiersContainerSizeBtn
+
+    const maximizeIconClasses = ["fa-solid", "fa-expand"]
+    const revertIconClasses = ["fa-solid", "fa-compress"]
+
+    modifiersMainContainer.classList.toggle("modifiers-maximized")
+
+    if(containerSizeBtnState) {
+        revertIconClasses.forEach((c) => btnElem.classList.remove(c))
+        maximizeIconClasses.forEach((c) => btnElem.classList.add(c))
+
+        containerSizeBtnState = false
+    } else {
+        maximizeIconClasses.forEach((c) => btnElem.classList.remove(c))
+        revertIconClasses.forEach((c) => btnElem.classList.add(c))
+        
+        containerSizeBtnState = true
+    }
+})
+
+modifierSettingsBtn.addEventListener("click", (e) => {
+    modifierSettingsOverlay.classList.add("active")
+    customModifiersTextBox.setSelectionRange(0, 0)
+    customModifiersTextBox.focus()
+    customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
+    e.stopPropagation()
+})
+
+modifiersCloseBtn.addEventListener("click", (e) => {
+    hideModifierContainer()
+})
+
+// prevents the modifier panel closing at the same time as the settings overlay
+new MutationObserver(() => {
+    const isActive = modifierSettingsOverlay.classList.contains("active")
+
+    if (!isActive) {
+        modifierPanelFreezed = true
+
+        setTimeout(() => modifierPanelFreezed = false, 25)
+    }
+}).observe(modifierSettingsOverlay, { attributes: true })
\ No newline at end of file