From 2f497cf25be49f09a98d5566ebf97652baaad19a Mon Sep 17 00:00:00 2001
From: Cohee <titan0599@gmail.com>
Date: Thu, 22 Jun 2023 20:11:29 +0300
Subject: [PATCH] Drag-sortable WI entries.

---
 public/index.html            |  3 ++-
 public/scripts/world-info.js | 45 ++++++++++++++++++++++++++++++++++--
 public/style.css             |  4 ++++
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index f403ed399..471325ebd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2912,6 +2912,7 @@
             <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="world_entry_form_control">
                                 <label for="key">
@@ -3359,4 +3360,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/scripts/world-info.js b/public/scripts/world-info.js
index 6f745e7d0..7d92b3231 100644
--- a/public/scripts/world-info.js
+++ b/public/scripts/world-info.js
@@ -126,6 +126,7 @@ async function loadWorldInfoData(name) {
         method: "POST",
         headers: getRequestHeaders(),
         body: JSON.stringify({ name: name }),
+        cache: 'no-cache',
     });
 
     if (response.ok) {
@@ -176,8 +177,18 @@ function displayWorldEntries(name, data) {
         return;
     }
 
-    for (const entryUid in data.entries) {
-        const entry = data.entries[entryUid];
+    // Convert the data.entries object into an array
+    const entriesArray = Object.keys(data.entries).map(uid => {
+        const entry = data.entries[uid];
+        entry.displayIndex = entry.displayIndex ?? entry.uid;
+        return entry;
+    });
+
+    // Sort the entries array by displayIndex and uid
+    entriesArray.sort((a, b) => a.displayIndex - b.displayIndex || a.uid - b.uid);
+
+    // Loop through the sorted array and call appendWorldEntry
+    for (const entry of entriesArray) {
         appendWorldEntry(name, data, entry);
     }
 
@@ -206,6 +217,36 @@ function displayWorldEntries(name, data) {
 
         await deleteWorldInfo(name, world_info);
     });
+
+    // Check if a sortable instance exists
+    if ($('#world_popup_entries_list').sortable('instance') !== undefined) {
+        // Destroy the instance
+        $('#world_popup_entries_list').sortable('destroy');
+    }
+
+    $("#world_popup_entries_list").sortable({
+        handle: ".drag-handle",
+        stop: async function (event, ui) {
+            $('#world_popup_entries_list .world_entry').each(function (index) {
+                const uid = $(this).data('uid');
+
+                // Update the display index in the data array
+                const item = data.entries[uid];
+
+                if (!item) {
+                    console.debug(`Could not find entry with uid ${uid}`);
+                    return;
+                }
+
+                item.displayIndex = index;
+            });
+
+            console.table(Object.keys(data.entries).map(uid => data.entries[uid]).map(x => ({ uid: x.uid, key: x.key.join(','), displayIndex: x.displayIndex })));
+
+            await saveWorldInfo(name, data, true);
+        }
+    });
+    $("#world_popup_entries_list").disableSelection();
 }
 
 function appendWorldEntry(name, data, entry) {
diff --git a/public/style.css b/public/style.css
index c5306392d..35a7e7188 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1922,6 +1922,10 @@ grammarly-extension {
     column-gap: 20px;
 }
 
+.drag-handle {
+    cursor: grab;
+}
+
 .world_info_select_block {
     display: flex;
     flex-direction: row;