From e2d4f9dc8c2c41e9c10fde9460cda2e70aca287a Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Mon, 25 Sep 2023 18:03:10 +0900
Subject: [PATCH] streamline WI display

---
 public/css/mobile-styles.css |  4 +++
 public/css/st-tailwind.css   |  4 +++
 public/index.html            | 55 +++++++++++++++---------------------
 public/scripts/world-info.js | 37 ++++++++++++++++++++++--
 4 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index 8f062469d..f8148a734 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -70,6 +70,10 @@
 
     }
 
+    .world_entry_form_control {
+        width: 100%;
+    }
+
     .drawer-content {
         min-width: unset;
         width: 100%;
diff --git a/public/css/st-tailwind.css b/public/css/st-tailwind.css
index 5d51dcb70..39517620b 100644
--- a/public/css/st-tailwind.css
+++ b/public/css/st-tailwind.css
@@ -147,6 +147,10 @@
     font-weight: 600;
 }
 
+.textAlignCenter {
+    text-align: center;
+}
+
 .margin-right-10px {
     margin-right: 10px;
 }
diff --git a/public/index.html b/public/index.html
index 5580bc248..40c221cb5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3852,30 +3852,23 @@
 
 
     <div id="entry_edit_template" class="template_element">
+
         <div class="world_entry">
             <form class="world_entry_form">
                 <div class="inline-drawer wide100p">
                     <div class="inline-drawer-toggle inline-drawer-header gap5px">
                         <span class="drag-handle">&#9776;</span>
-                        <div class="gap5px world_entry_thin_controls wide100p">
-
+                        <div class="gap5px world_entry_thin_controls wide100p alignitemscenter">
+                            <small>
+                                <span><span class="world_entry_form_position_value"></span>
+                                </span>
+                            </small>
                             <div class="world_entry_form_control flex1">
-                                <label for="key">
-                                    <small>
-                                        <span data-i18n="Keywords">
-                                            Keywords
-                                        </span>
-                                        <span>(UID:&nbsp;
-                                            <span class="world_entry_form_uid_value"></span>
-                                            )
-                                        </span>
-                                    </small>
-                                    <small class="displayNone">
-                                        <span data-i18n="Comma separated (required)">
-                                            Comma separated (required)
-                                        </span>
-                                    </small>
-                                </label>
+                                <small class="displayNone">
+                                    <span data-i18n="Comma separated (required)">
+                                        Comma separated (required)
+                                    </span>
+                                </small>
                                 <textarea class="text_pole keyprimarytextpole" name="key" rows="1" data-i18n="[placeholder]Comma separated (required)" placeholder="Comma separated (required)" maxlength="1000"></textarea>
                             </div>
                             <div class="flex-container widthFitContent alignItemsFlexEnd">
@@ -3886,19 +3879,15 @@
                             </div>
 
                             <div class="world_entry_form_control keysecondary flex1">
-                                <label for="keysecondary">
-                                    <small>
-                                        <span data-i18n="Secondary Required Keywords">
-                                            Optional Filter
-                                        </span>
-                                    </small>
-                                    <small class="displayNone">
-                                        <span data-i18n="Comma seperated (ignored if empty)">
-                                            Comma seperated (ignored if empty)
-                                        </span>
-                                    </small>
-                                </label>
-                                <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
+                                <small class="displayNone">
+                                    <span data-i18n="(ignored if empty)">
+                                        (ignored if empty)
+                                    </span>
+                                </small>
+                                <div class="flex-container flexFlowRow">
+                                    <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
+                                    <i class="menu_button delete_entry_button fa-solid fa-trash-can" type="submit" data-i18n="" value="" /></i>
+                                </div>
                             </div>
                         </div>
                         <div class="fa-fw fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
@@ -3912,6 +3901,7 @@
                                             <span data-i18n="Content">
                                                 Content
                                                 <span>(Tokens:&nbsp; <span class="world_entry_form_token_counter" data-first-run="true">counting...</span>)
+                                                    <span class="world_entry_form_uid_value" data-first-run="true"></span>
                                                 </span>
                                             </span>
                                         </small>
@@ -4033,7 +4023,6 @@
                                 <input class="text_pole wideMax100px margin0" type="number" name="probability" placeholder="" min="0" max="100" />
                             </div>
 
-                            <input class="menu_button delete_entry_button" type="submit" data-i18n="Delete Entry" value="Delete Entry" />
                         </div>
                         <div class="wide100p">
                             <hr>
@@ -4598,4 +4587,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/scripts/world-info.js b/public/scripts/world-info.js
index c8cc686df..f174ef51d 100644
--- a/public/scripts/world-info.js
+++ b/public/scripts/world-info.js
@@ -288,7 +288,17 @@ function displayWorldEntries(name, data, navigation = navigation_option.none) {
         showNavigator: true,
         callback: function (page) {
             $("#world_popup_entries_list").empty();
+            const keywordHeaders = `
+            <div class="flex-container wide100p spaceBetween justifyCenter textAlignCenter">
+                <small class="flex1">
+                    Keywords
+                </small>
+                <small class="flex1">
+                    Optional Filter
+                </small>
+            </div>`
             const blocks = page.map(entry => getWorldEntry(name, data, entry));
+            $("#world_popup_entries_list").append(keywordHeaders);
             $("#world_popup_entries_list").append(blocks);
         },
         afterSizeSelectorChange: function (e) {
@@ -780,8 +790,29 @@ function getWorldEntry(name, data, entry) {
         .prop("selected", true)
         .trigger("input");
 
-    // display uid
-    template.find(".world_entry_form_uid_value").text(entry.uid);
+    // display position/order info left of keyword box
+    let posText
+    switch (entry.position) {
+        case 0:
+            posText = '↑CD';
+            break
+        case 1:
+            posText = 'CD↓';
+            break
+        case 2:
+            posText = '↑AN';
+            break
+        case 3:
+            posText = 'AN↓';
+            break
+        case 4:
+            posText = `@D${entry.depth}`;
+            break
+    }
+
+    template.find(".world_entry_form_position_value").text(`(${posText} ${entry.order})`);
+    //add UID above content box (less important doesn't need to be always visible)
+    template.find(".world_entry_form_uid_value").text(`(UID: ${entry.uid})`);
 
     // disable
     const disableInput = template.find('input[name="disable"]');
@@ -808,7 +839,7 @@ function getWorldEntry(name, data, entry) {
     excludeRecursionInput.prop("checked", entry.excludeRecursion).trigger("input");
 
     // delete button
-    const deleteButton = template.find("input.delete_entry_button");
+    const deleteButton = template.find(".delete_entry_button");
     deleteButton.data("uid", entry.uid);
     deleteButton.on("click", function () {
         const uid = $(this).data("uid");