fix status grid sorting

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,13 +1,16 @@
 import * as React from "bloatless-react";
 
+import {
+  PropertyValueList,
+  createPropertyValueIndexState,
+} from "../Components/propertyValueList";
+
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { FilteredList } from "../Components/filteredList";
-import { PropertyValueList } from "../Components/propertyValueList";
 import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 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) {
@@ -15,18 +18,16 @@ export function BoardKanbanPage(boardViewModel: BoardViewModel) {
     "category",
     (taskViewModel: TaskViewModel) => taskViewModel.task,
     boardViewModel.taskViewModels,
-    (categories: React.ListState<string>) => {
-      const sortedCategories: React.State<string[]> = React.createProxyState(
-        [categories],
-        () => [...categories.value.values()].sort(localeCompare)
-      );
-
+    (
+      categories: React.ListState<string>,
+      sortedCategories: React.State<string[]>
+    ) => {
       const categoryNameConverter: React.StateItemConverter<string> = (
         categoryName: string
       ) => {
-        const index: React.State<number> = React.createProxyState(
-          [sortedCategories],
-          () => sortedCategories.value.indexOf(categoryName)
+        const index: React.State<number> = createPropertyValueIndexState(
+          sortedCategories,
+          categoryName
         );
         return KanbanBoard(categoryName, index, boardViewModel);
       };
@@ -88,7 +89,8 @@ function KanbanBoard(
 
       index.subscribe((newIndex) => {
         view.style.order = newIndex;
-      })
+      });
+      
       return view;
     }
   );