fix kanbanboard sorting

dist/index.js

@@ -351,7 +351,7 @@
         continue;
       values.add(stringEntryObjectValue);
     }
-    return [...values.values()].sort(localeCompare);
+    return [...values.values()];
   }
   function checkDoesObjectMatchSearch(query, getStringsOfObject, object) {
     if (query == "") return true;
@@ -2690,14 +2690,22 @@
 
   // src/View/ChatPages/boardKanbanPage.tsx
   function BoardKanbanPage(boardViewModel) {
-    const categoryNameConverter = (categoryName) => {
-      return KanbanBoard(categoryName, boardViewModel);
-    };
     return PropertyValueList(
       "category",
       (taskViewModel) => taskViewModel.task,
       boardViewModel.taskViewModels,
       (categories) => {
+        const sortedCategories = createProxyState(
+          [categories],
+          () => [...categories.value.values()].sort(localeCompare)
+        );
+        const categoryNameConverter = (categoryName) => {
+          const index = createProxyState(
+            [sortedCategories],
+            () => sortedCategories.value.indexOf(categoryName)
+          );
+          return KanbanBoard(categoryName, index, boardViewModel);
+        };
         return /* @__PURE__ */ createElement(
           "div",
           {
@@ -2708,7 +2716,7 @@
       }
     );
   }
-  function KanbanBoard(categoryName, boardViewModel) {
+  function KanbanBoard(categoryName, index, boardViewModel) {
     return FilteredList(
       { category: categoryName },
       (taskViewModel) => taskViewModel.task,
@@ -2718,7 +2726,7 @@
         function drop() {
           boardViewModel.handleDropWithinBoard(categoryName);
         }
-        return /* @__PURE__ */ createElement("div", { class: "flex-column flex-no", "on:dragover": allowDrop, "on:drop": drop }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+        const view = /* @__PURE__ */ createElement("div", { class: "flex-column flex-no", "on:dragover": allowDrop, "on:drop": drop }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
           "input",
           {
             placeholder: translations.chatPage.task.renameCategoryInputPlaceholder,
@@ -2740,6 +2748,10 @@
             "children:append": [taskViewModels, TaskViewModelToEntry]
           }
         ));
+        index.subscribe((newIndex) => {
+          view.style.order = newIndex;
+        });
+        return view;
       }
     );
   }

src/Model/Utility/utility.ts

@@ -90,7 +90,7 @@ export function collectObjectValuesForKey<T>(
     values.add(stringEntryObjectValue);
   }
 
-  return [...values.values()].sort(localeCompare);
+  return [...values.values()];
 }
 
 export function filterObjectsByWords<T>(

src/View/ChatPages/boardKanbanPage.tsx

@@ -7,20 +7,30 @@ import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPro
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { allowDrop } from "../utility";
+import { localeCompare } from "../../Model/Utility/utility";
 import { translations } from "../translations";
 
 export function BoardKanbanPage(boardViewModel: BoardViewModel) {
-  const categoryNameConverter: React.StateItemConverter<string> = (
-    categoryName: string
-  ) => {
-    return KanbanBoard(categoryName, boardViewModel);
-  };
-
   return PropertyValueList(
     "category",
     (taskViewModel: TaskViewModel) => taskViewModel.task,
     boardViewModel.taskViewModels,
     (categories: React.ListState<string>) => {
+      const sortedCategories: React.State<string[]> = React.createProxyState(
+        [categories],
+        () => [...categories.value.values()].sort(localeCompare)
+      );
+
+      const categoryNameConverter: React.StateItemConverter<string> = (
+        categoryName: string
+      ) => {
+        const index: React.State<number> = React.createProxyState(
+          [sortedCategories],
+          () => sortedCategories.value.indexOf(categoryName)
+        );
+        return KanbanBoard(categoryName, index, boardViewModel);
+      };
+
       return (
         <div
           class="kanban-board-wrapper"
@@ -31,7 +41,11 @@ export function BoardKanbanPage(boardViewModel: BoardViewModel) {
   );
 }
 
-function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
+function KanbanBoard(
+  categoryName: string,
+  index: React.State<number>,
+  boardViewModel: BoardViewModel
+) {
   return FilteredList(
     { category: categoryName },
     (taskViewModel: TaskViewModel) => taskViewModel.task,
@@ -44,7 +58,7 @@ function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
         boardViewModel.handleDropWithinBoard(categoryName);
       }
 
-      return (
+      const view = (
         <div class="flex-column flex-no" on:dragover={allowDrop} on:drop={drop}>
           <div class="flex-row width-input">
             <input
@@ -71,6 +85,11 @@ function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
           ></div>
         </div>
       );
+
+      index.subscribe((newIndex) => {
+        view.style.order = newIndex;
+      })
+      return view;
     }
   );
 }