remodel views to update dynamically

dist/index.js

@@ -1464,11 +1464,6 @@
     );
   }
 
-  // src/Views/Objects/placeholderView.tsx
-  function PlaceholderView() {
-    return /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, translation.noObjects);
-  }
-
   // src/Views/Objects/objectGridView.tsx
   function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal) {
     const objectConverter = (messageObject) => {
@@ -1479,7 +1474,7 @@
         isShowingObjectModal
       );
     };
-    return messageObjects.value.size == 0 ? PlaceholderView() : /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement(
       "div",
       {
         class: "width-100 max-height-100 grid gap padding scroll-v",
@@ -1491,16 +1486,7 @@
 
   // src/Views/Objects/allObjectsView.tsx
   function AllObjectsView(chat, selectedObject, isShowingObjectModal) {
-    const content = createProxyState(
-      [chat.objects],
-      () => ObjectGridView(
-        chat,
-        chat.objects,
-        selectedObject,
-        isShowingObjectModal
-      )
-    );
-    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content });
+    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100" }, ObjectGridView(chat, chat.objects, selectedObject, isShowingObjectModal));
   }
 
   // src/Views/renameView.tsx
@@ -1524,32 +1510,59 @@
   // src/Views/Objects/kanbanView.tsx
   function KanbanView(chat, selectedObject, isShowingObjectModal) {
     const boards = new MapState();
-    chat.objects.subscribe(() => {
-      boards.clear();
-      chat.objects.value.forEach((messageObject) => {
+    const sortedBoardNames = createProxyState(
+      [boards],
+      () => [...boards.value.values()].map((board) => board.category).sort((a, b) => a.localeCompare(b))
+    );
+    chat.objects.handleAddition((messageObject) => {
       const latest = chat.getMostRecentContent(messageObject);
+      if (!latest) return;
       if (!latest.categoryName) return;
-        const boardTitle = latest.categoryName;
-        if (!boards.value.has(boardTitle))
-          boards.set(boardTitle, { category: boardTitle, items: [] });
-        boards.value.get(boardTitle)?.items.push({
+      const categoryName = latest.categoryName;
+      if (!boards.value.has(categoryName)) {
+        const listState = new ListState();
+        listState.subscribeSilent(() => {
+          if (listState.value.size != 0) return;
+          boards.remove(categoryName);
+        });
+        boards.set(categoryName, {
+          category: categoryName,
+          items: listState
+        });
+      }
+      const boardItem = {
         priority: latest.priority ?? 0,
         messageObject
+      };
+      boards.value.get(categoryName)?.items.add(boardItem);
+      chat.objects.handleRemoval(messageObject, () => {
+        boards.value.get(categoryName)?.items.remove(boardItem);
       });
     });
-    });
-    const content = createProxyState(
-      [chat.objects],
-      () => boards.value.size == 0 ? PlaceholderView() : /* @__PURE__ */ createElement("div", { class: "flex-row large-gap width-100 height-100 scroll-v scroll-h padding" }, ...[...boards.value.values()].sort((a, b) => a.category.localeCompare(b.category)).map(
-        (board) => KanbanBoardView(chat, board, selectedObject, isShowingObjectModal)
-      ))
+    const boardToBoardView = (board) => {
+      const view = KanbanBoardView(
+        chat,
+        board,
+        selectedObject,
+        isShowingObjectModal
+      );
+      sortedBoardNames.subscribe((sortedBoardNames2) => {
+        view.style.order = sortedBoardNames2.indexOf(board.category);
+      });
+      return view;
+    };
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-row large-gap width-100 height-100 scroll-v scroll-h padding",
+        "children:append": [boards, boardToBoardView]
+      }
     );
-    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 scroll-no", "children:set": content });
   }
   function KanbanBoardView(chat, kanbanBoard, selectedObject, isShowingObjectModal) {
     const editingCategory = new State(kanbanBoard.category);
     function renameBoard() {
-      kanbanBoard.items.forEach((kanbanBoardItem) => {
+      kanbanBoard.items.value.forEach((kanbanBoardItem) => {
         const { messageObject } = kanbanBoardItem;
         const latest = chat.getMostRecentContent(messageObject);
         latest.categoryName = editingCategory.value;
@@ -1569,6 +1582,16 @@
       latest.categoryName = kanbanBoard.category;
       chat.addObjectAndSend(messageObject);
     }
+    const itemToViewEntry = (kanbanBoardItem) => {
+      const view = ObjectEntryView(
+        chat,
+        kanbanBoardItem.messageObject,
+        selectedObject,
+        isShowingObjectModal
+      );
+      view.style.order = kanbanBoardItem.priority * -1;
+      return view;
+    };
     return /* @__PURE__ */ createElement(
       "div",
       {
@@ -1578,38 +1601,30 @@
       },
       RenameView(editingCategory, kanbanBoard.category, renameBoard),
       /* @__PURE__ */ createElement("hr", null),
-      /* @__PURE__ */ createElement("div", { class: "flex-column gap padding-bottom" }, ...kanbanBoard.items.sort((a, b) => b.priority - a.priority).map(
-        (kanbanBoardItem) => ObjectEntryView(
-          chat,
-          kanbanBoardItem.messageObject,
-          selectedObject,
-          isShowingObjectModal
+      /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "flex-column gap padding-bottom",
+          "children:append": [kanbanBoard.items, itemToViewEntry]
+        }
       )
-      ))
     );
   }
 
   // src/Views/Objects/noteObjectsView.tsx
   function NoteObjectsView(chat, selectedObject, isShowingObjectModal) {
     const notes = new ListState();
-    chat.objects.subscribe(() => {
-      notes.clear();
-      chat.objects.value.forEach((messageObject) => {
+    chat.objects.handleAddition((messageObject) => {
       const latest = chat.getMostRecentContent(messageObject);
+      if (!latest) return;
       if (!latest.noteContent) return;
       notes.add(messageObject);
-      });
-    });
-    const content = createProxyState(
-      [chat.objects],
-      () => ObjectGridView(
-        chat,
-        notes,
-        selectedObject,
-        isShowingObjectModal
-      )
+      chat.objects.handleRemoval(
+        messageObject,
+        () => notes.remove(messageObject)
       );
-    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content });
+    });
+    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100" }, ObjectGridView(chat, notes, selectedObject, isShowingObjectModal));
   }
 
   // src/Views/Objects/objectDetailModal.tsx
@@ -1750,7 +1765,15 @@
   // src/Views/Objects/statusView.tsx
   function StatusView(chat, selectedObject, isShowingObjectModal) {
     const rows = new MapState();
-    const statuses = /* @__PURE__ */ new Map();
+    const statuses = new MapState();
+    const sortedStatuses = createProxyState(
+      [statuses],
+      () => [...statuses.value.values()].map((statusData) => statusData.title).sort((a, b) => a.localeCompare(b))
+    );
+    const sortedCategoryNames = createProxyState(
+      [rows],
+      () => [...rows.value.values()].map((row) => row.category).sort((a, b) => a.localeCompare(b))
+    );
     chat.objects.subscribe(() => {
       rows.clear();
       statuses.clear();
@@ -1759,41 +1782,73 @@
         if (!latest.categoryName || !latest.status) return;
         const category = latest.categoryName;
         const status = latest.status;
-        if (!statuses.has(status)) {
+        if (!statuses.value.has(status)) {
           statuses.set(status, { title: status, items: [] });
         }
-        statuses.get(status).items.push(messageObject);
+        statuses.value.get(status).items.push(messageObject);
         if (!rows.value.has(category)) {
-          rows.set(category, { category, statusColumns: /* @__PURE__ */ new Map() });
+          rows.set(category, {
+            category,
+            statusColumns: new MapState()
+          });
         }
         const row = rows.value.get(category);
-        if (!row.statusColumns.has(status)) {
-          row.statusColumns.set(status, { title: status, items: [] });
+        if (!row.statusColumns.value.has(status)) {
+          row.statusColumns.set(status, {
+            status,
+            items: new ListState()
+          });
         }
-        const column = row.statusColumns.get(status);
-        column.items.push({
+        const column = row.statusColumns.value.get(status);
+        column.items.add({
           priority: latest.priority ?? 0,
           status,
           messageObject
         });
       });
-      statuses.forEach((statusItemList) => {
+      statuses.value.forEach((statusItemList) => {
         rows.value.forEach((row) => {
-          if (row.statusColumns.has(statusItemList.title)) return;
+          if (row.statusColumns.value.has(statusItemList.title)) return;
           row.statusColumns.set(statusItemList.title, {
-            title: statusItemList.title,
-            items: []
+            status: statusItemList.title,
+            items: new ListState()
           });
         });
       });
     });
-    const content = createProxyState(
-      [chat.objects],
-      () => rows.value.size == 0 ? PlaceholderView() : /* @__PURE__ */ createElement("div", { class: "flex-column large-gap width-100 height-100 scroll-v scroll-h padding" }, /* @__PURE__ */ createElement("div", { class: "flex-row large-gap" }, /* @__PURE__ */ createElement("div", { class: "flex-column object-entry-wide" }), ...[...statuses.values()].sort((a, b) => a.title.localeCompare(b.title)).map((status) => StatusHeaderView(chat, status))), ...[...rows.value.values()].sort((a, b) => a.category.localeCompare(b.category)).map(
-        (board) => KanbanRowView(chat, board, selectedObject, isShowingObjectModal)
-      ))
+    const statusDataToHeaderView = (statusData) => {
+      const view = StatusHeaderView(chat, statusData);
+      sortedStatuses.subscribe(
+        () => view.style.order = sortedStatuses.value.indexOf(statusData.title)
       );
-    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 scroll-no", "children:set": content });
+      return view;
+    };
+    const categoryRowToView = (row) => {
+      const view = KanbanRowView(
+        chat,
+        row,
+        sortedStatuses,
+        selectedObject,
+        isShowingObjectModal
+      );
+      sortedCategoryNames.subscribe(
+        () => view.style.order = sortedCategoryNames.value.indexOf(row.category)
+      );
+      return view;
+    };
+    return /* @__PURE__ */ createElement("div", { class: "flex-column large-gap width-100 height-100 scroll-v scroll-h padding" }, /* @__PURE__ */ createElement("div", { class: "flex-row large-gap" }, /* @__PURE__ */ createElement("div", { class: "flex-column object-entry-wide" }), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-row large-gap",
+        "children:append": [statuses, statusDataToHeaderView]
+      }
+    )), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column large-gap",
+        "children:append": [rows, categoryRowToView]
+      }
+    ));
   }
   function StatusHeaderView(chat, status) {
     const editingStatus = new State(status.title);
@@ -1807,12 +1862,11 @@
     }
     return /* @__PURE__ */ createElement("div", { class: "object-entry-wide" }, RenameView(editingStatus, status.title, rename), /* @__PURE__ */ createElement("hr", null));
   }
-  function KanbanRowView(chat, kanbanRow, selectedObject, isShowingObjectModal) {
+  function KanbanRowView(chat, kanbanRow, sortedStatuses, selectedObject, isShowingObjectModal) {
     const editingCategory = new State(kanbanRow.category);
-    const cellItemEntries = [...kanbanRow.statusColumns.entries()];
     function renameCategory() {
-      kanbanRow.statusColumns.forEach((statusColumns) => {
-        statusColumns.items.forEach((statusCellItem) => {
+      kanbanRow.statusColumns.value.forEach((statusColumns) => {
+        statusColumns.items.value.forEach((statusCellItem) => {
           const { messageObject } = statusCellItem;
           const latest = chat.getMostRecentContent(messageObject);
           latest.categoryName = editingCategory.value;
@@ -1820,16 +1874,27 @@
         });
       });
     }
-    return /* @__PURE__ */ createElement("div", { class: "flex-row flex-no large-gap" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-start" }, RenameView(editingCategory, kanbanRow.category, renameCategory)), ...cellItemEntries.sort((a, b) => a[0].localeCompare(b[0])).map(
-      (entry) => StatusColumnView(
+    const statusColumnToEntryView = (statusColumn) => {
+      const view = StatusColumnView(
         chat,
-        entry[1].items,
+        statusColumn.items,
         kanbanRow.category,
-        entry[1].title,
+        statusColumn.status,
         selectedObject,
         isShowingObjectModal
-      )
-    ), /* @__PURE__ */ createElement("hr", null));
+      );
+      sortedStatuses.subscribe(
+        () => view.style.order = sortedStatuses.value.indexOf(statusColumn.status)
+      );
+      return view;
+    };
+    return /* @__PURE__ */ createElement("div", { class: "flex-row flex-no large-gap" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-start" }, RenameView(editingCategory, kanbanRow.category, renameCategory)), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-row large-gap",
+        "children:append": [kanbanRow.statusColumns, statusColumnToEntryView]
+      }
+    ));
   }
   function StatusColumnView(chat, items, category, status, selectedObject, isShowingObjectModal) {
     function dragOver(event) {
@@ -1846,21 +1911,20 @@
       latest.categoryName = category;
       chat.addObjectAndSend(messageObject);
     }
+    const cellItemToEntryView = (cellItem) => ObjectEntryView(
+      chat,
+      cellItem.messageObject,
+      selectedObject,
+      isShowingObjectModal
+    );
     return /* @__PURE__ */ createElement(
       "div",
       {
         class: "flex-column gap object-entry-wide",
         "on:dragover": dragOver,
-        "on:drop": drop
-      },
-      ...items.sort((a, b) => b.priority - a.priority).map(
-        (kanbanBoardItem) => ObjectEntryView(
-          chat,
-          kanbanBoardItem.messageObject,
-          selectedObject,
-          isShowingObjectModal
-        )
-      )
+        "on:drop": drop,
+        "children:append": [items, cellItemToEntryView]
+      }
     );
   }
 

src/Views/Objects/allObjectsView.tsx

@@ -3,21 +3,15 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { ObjectGridView } from "./objectGridView";
-import { translation } from "../../translations";
 
 export function AllObjectsView(
   chat: Chat,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const content = React.createProxyState([chat.objects], () =>
-    ObjectGridView(
-      chat,
-      chat.objects,
-      selectedObject,
-      isShowingObjectModal
-    )
+  return (
+    <div class="width-100 height-100">
+      {ObjectGridView(chat, chat.objects, selectedObject, isShowingObjectModal)}
+    </div>
   );
-
-  return <div class="width-100 height-100" children:set={content}></div>;
 }

src/Views/Objects/kanbanView.tsx

@@ -5,11 +5,10 @@ import { Chat, MessageObject } from "../../Model/chatModel";
 import { ObjectEntryView } from "./objectEntryView";
 import { PlaceholderView } from "./placeholderView";
 import { RenameView } from "../renameView";
-import { translation } from "../../translations";
 
 interface KanbanBoard {
   category: string;
-  items: KanbanBoardItem[];
+  items: React.ListState<KanbanBoardItem>;
 }
 
 interface KanbanBoardItem {
@@ -23,41 +22,60 @@ export function KanbanView(
   isShowingObjectModal: React.State<boolean>
 ) {
   const boards = new React.MapState<KanbanBoard>();
-
-  chat.objects.subscribe(() => {
-    boards.clear();
-    chat.objects.value.forEach((messageObject) => {
-      const latest = chat.getMostRecentContent(messageObject);
-      if (!latest.categoryName) return;
-
-      const boardTitle = latest.categoryName;
-
-      if (!boards.value.has(boardTitle))
-        boards.set(boardTitle, { category: boardTitle, items: [] });
-
-      boards.value.get(boardTitle)?.items.push({
-        priority: latest.priority ?? 0,
-        messageObject,
-      });
-    });
-  });
-
-  const content = React.createProxyState([chat.objects], () =>
-    boards.value.size == 0 ? (
-      PlaceholderView()
-    ) : (
-      <div class="flex-row large-gap width-100 height-100 scroll-v scroll-h padding">
-        {...[...boards.value.values()]
-          .sort((a, b) => a.category.localeCompare(b.category))
-          .map((board) =>
-            KanbanBoardView(chat, board, selectedObject, isShowingObjectModal)
-          )}
-      </div>
-    )
+  const sortedBoardNames = React.createProxyState([boards], () =>
+    [...boards.value.values()]
+      .map((board) => board.category)
+      .sort((a, b) => a.localeCompare(b))
   );
 
+  chat.objects.handleAddition((messageObject) => {
+    const latest = chat.getMostRecentContent(messageObject);
+    if (!latest) return;
+    if (!latest.categoryName) return;
+
+    const categoryName = latest.categoryName!;
+    if (!boards.value.has(categoryName)) {
+      const listState = new React.ListState<KanbanBoardItem>();
+      listState.subscribeSilent(() => {
+        if (listState.value.size != 0) return;
+        boards.remove(categoryName);
+      });
+
+      boards.set(categoryName, {
+        category: categoryName,
+        items: listState,
+      });
+    }
+
+    const boardItem: KanbanBoardItem = {
+      priority: latest.priority ?? 0,
+      messageObject,
+    };
+    boards.value.get(categoryName)?.items.add(boardItem);
+
+    chat.objects.handleRemoval(messageObject, () => {
+      boards.value.get(categoryName)?.items.remove(boardItem);
+    });
+  });
+
+  const boardToBoardView: React.StateItemConverter<KanbanBoard> = (board) => {
+    const view = KanbanBoardView(
+      chat,
+      board,
+      selectedObject,
+      isShowingObjectModal
+    );
+    sortedBoardNames.subscribe((sortedBoardNames) => {
+      view.style.order = sortedBoardNames.indexOf(board.category);
+    });
+    return view;
+  };
+
   return (
-    <div class="width-100 height-100 scroll-no" children:set={content}></div>
+    <div
+      class="flex-row large-gap width-100 height-100 scroll-v scroll-h padding"
+      children:append={[boards, boardToBoardView]}
+    ></div>
   );
 }
 
@@ -70,7 +88,7 @@ function KanbanBoardView(
   const editingCategory = new React.State(kanbanBoard.category);
 
   function renameBoard() {
-    kanbanBoard.items.forEach((kanbanBoardItem) => {
+    kanbanBoard.items.value.forEach((kanbanBoardItem) => {
       const { messageObject } = kanbanBoardItem;
       const latest = chat.getMostRecentContent(messageObject);
       latest.categoryName = editingCategory.value;
@@ -95,6 +113,19 @@ function KanbanBoardView(
     chat.addObjectAndSend(messageObject);
   }
 
+  const itemToViewEntry: React.StateItemConverter<KanbanBoardItem> = (
+    kanbanBoardItem
+  ) => {
+    const view = ObjectEntryView(
+      chat,
+      kanbanBoardItem.messageObject,
+      selectedObject,
+      isShowingObjectModal
+    );
+    view.style.order = kanbanBoardItem.priority * -1;
+    return view;
+  };
+
   return (
     <div
       class="flex-column flex-no object-entry-wide"
@@ -103,18 +134,10 @@ function KanbanBoardView(
     >
       {RenameView(editingCategory, kanbanBoard.category, renameBoard)}
       <hr></hr>
-      <div class="flex-column gap padding-bottom">
-        {...kanbanBoard.items
-          .sort((a, b) => b.priority - a.priority)
-          .map((kanbanBoardItem) =>
-            ObjectEntryView(
-              chat,
-              kanbanBoardItem.messageObject,
-              selectedObject,
-              isShowingObjectModal
-            )
-          )}
-      </div>
+      <div
+        class="flex-column gap padding-bottom"
+        children:append={[kanbanBoard.items, itemToViewEntry]}
+      ></div>
     </div>
   );
 }

src/Views/Objects/noteObjectsView.tsx

@@ -3,7 +3,6 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { ObjectGridView } from "./objectGridView";
-import { translation } from "../../translations";
 
 export function NoteObjectsView(
   chat: Chat,
@@ -11,24 +10,18 @@ export function NoteObjectsView(
   isShowingObjectModal: React.State<boolean>
 ) {
   const notes = new React.ListState<MessageObject>();
-  chat.objects.subscribe(() => {
-    notes.clear();
-    chat.objects.value.forEach((messageObject) => {
+  chat.objects.handleAddition((messageObject) => {
     const latest = chat.getMostRecentContent(messageObject);
+    if (!latest) return;
     if (!latest.noteContent) return;
 
     notes.add(messageObject);
-    });
-  });
-
-  const content = React.createProxyState([chat.objects], () =>
-    ObjectGridView(
-      chat,
-      notes,
-      selectedObject,
-      isShowingObjectModal
-    )
+    chat.objects.handleRemoval(messageObject, () =>
+      notes.remove(messageObject)
     );
+  });
 
-  return <div class="width-100 height-100" children:set={content}></div>;
+  return <div class="width-100 height-100">
+    {ObjectGridView(chat, notes, selectedObject, isShowingObjectModal)}
+  </div>;
 }

src/Views/Objects/objectGridView.tsx

@@ -24,9 +24,7 @@ export function ObjectGridView(
     );
   };
 
-  return messageObjects.value.size == 0 ? (
-    PlaceholderView()
-  ) : (
+  return (
     <div
       class="width-100 max-height-100 grid gap padding scroll-v"
       style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));"

src/Views/Objects/statusView.tsx

@@ -3,18 +3,16 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
-import { PlaceholderView } from "./placeholderView";
 import { RenameView } from "../renameView";
-import { translation } from "../../translations";
 
-interface KanbanRow {
+interface CategoryRow {
   category: string;
-  statusColumns: Map<string, StatusColumn>;
+  statusColumns: React.MapState<StatusColumn>;
 }
 
 interface StatusColumn {
-  title: string;
-  items: StatusCellItem[];
+  status: string;
+  items: React.ListState<StatusCellItem>;
 }
 
 interface StatusCellItem {
@@ -23,7 +21,8 @@ interface StatusCellItem {
   messageObject: MessageObject;
 }
 
-interface StatusItemList {
+// data only
+interface StatusData {
   title: string;
   items: MessageObject[];
 }
@@ -33,8 +32,18 @@ export function StatusView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const rows = new React.MapState<KanbanRow>();
-  const statuses = new Map<string, StatusItemList>();
+  const rows = new React.MapState<CategoryRow>();
+  const statuses = new React.MapState<StatusData>();
+  const sortedStatuses = React.createProxyState([statuses], () =>
+    [...statuses.value.values()]
+      .map((statusData) => statusData.title)
+      .sort((a, b) => a.localeCompare(b))
+  );
+  const sortedCategoryNames = React.createProxyState([rows], () =>
+    [...rows.value.values()]
+      .map((row) => row.category)
+      .sort((a, b) => a.localeCompare(b))
+  );
 
   chat.objects.subscribe(() => {
     rows.clear();
@@ -48,22 +57,28 @@ export function StatusView(
       const category = latest.categoryName;
       const status = latest.status;
 
-      if (!statuses.has(status)) {
+      if (!statuses.value.has(status)) {
         statuses.set(status, { title: status, items: [] });
       }
-      statuses.get(status)!.items.push(messageObject);
+      statuses.value.get(status)!.items.push(messageObject);
 
       if (!rows.value.has(category)) {
-        rows.set(category, { category: category, statusColumns: new Map() });
+        rows.set(category, {
+          category: category,
+          statusColumns: new React.MapState(),
+        });
       }
       const row = rows.value.get(category)!;
 
-      if (!row.statusColumns.has(status)) {
-        row.statusColumns.set(status, { title: status, items: [] });
+      if (!row.statusColumns.value.has(status)) {
+        row.statusColumns.set(status, {
+          status: status,
+          items: new React.ListState(),
+        });
       }
-      const column = row.statusColumns.get(status)!;
+      const column = row.statusColumns.value.get(status)!;
 
-      column.items.push({
+      column.items.add({
         priority: latest.priority ?? 0,
         status,
         messageObject,
@@ -71,43 +86,59 @@ export function StatusView(
     });
 
     // add status placeholders
-    statuses.forEach((statusItemList) => {
+    statuses.value.forEach((statusItemList) => {
       rows.value.forEach((row) => {
-        if (row.statusColumns.has(statusItemList.title)) return;
+        if (row.statusColumns.value.has(statusItemList.title)) return;
         row.statusColumns.set(statusItemList.title, {
-          title: statusItemList.title,
-          items: [],
+          status: statusItemList.title,
+          items: new React.ListState(),
         });
       });
     });
   });
 
-  const content = React.createProxyState([chat.objects], () =>
-    rows.value.size == 0 ? (
-      PlaceholderView()
-    ) : (
+  const statusDataToHeaderView: React.StateItemConverter<StatusData> = (
+    statusData
+  ) => {
+    const view = StatusHeaderView(chat, statusData);
+    sortedStatuses.subscribe(
+      () => (view.style.order = sortedStatuses.value.indexOf(statusData.title))
+    );
+    return view;
+  };
+
+  const categoryRowToView: React.StateItemConverter<CategoryRow> = (row) => {
+    const view = KanbanRowView(
+      chat,
+      row,
+      sortedStatuses,
+      selectedObject,
+      isShowingObjectModal
+    );
+    sortedCategoryNames.subscribe(
+      () => (view.style.order = sortedCategoryNames.value.indexOf(row.category))
+    );
+    return view;
+  };
+
+  return (
     <div class="flex-column large-gap width-100 height-100 scroll-v scroll-h padding">
       <div class="flex-row large-gap">
         <div class="flex-column object-entry-wide"></div>
-          {...[...statuses.values()]
-            .sort((a, b) => a.title.localeCompare(b.title))
-            .map((status) => StatusHeaderView(chat, status))}
+        <div
+          class="flex-row large-gap"
+          children:append={[statuses, statusDataToHeaderView]}
+        ></div>
       </div>
-        {...[...rows.value.values()]
-          .sort((a, b) => a.category.localeCompare(b.category))
-          .map((board) =>
-            KanbanRowView(chat, board, selectedObject, isShowingObjectModal)
-          )}
+      <div
+        class="flex-column large-gap"
+        children:append={[rows, categoryRowToView]}
+      ></div>
     </div>
-    )
-  );
-
-  return (
-    <div class="width-100 height-100 scroll-no" children:set={content}></div>
   );
 }
 
-function StatusHeaderView(chat: Chat, status: StatusItemList) {
+function StatusHeaderView(chat: Chat, status: StatusData) {
   const editingStatus = new React.State(status.title);
 
   function rename() {
@@ -130,17 +161,16 @@ function StatusHeaderView(chat: Chat, status: StatusItemList) {
 
 function KanbanRowView(
   chat: Chat,
-  kanbanRow: KanbanRow,
+  kanbanRow: CategoryRow,
+  sortedStatuses: React.State<string[]>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
   const editingCategory = new React.State(kanbanRow.category);
 
-  const cellItemEntries = [...kanbanRow.statusColumns.entries()];
-
   function renameCategory() {
-    kanbanRow.statusColumns.forEach((statusColumns) => {
-      statusColumns.items.forEach((statusCellItem) => {
+    kanbanRow.statusColumns.value.forEach((statusColumns) => {
+      statusColumns.items.value.forEach((statusCellItem) => {
         const { messageObject } = statusCellItem;
         const latest = chat.getMostRecentContent(messageObject);
         latest.categoryName = editingCategory.value;
@@ -149,33 +179,40 @@ function KanbanRowView(
     });
   }
 
+  const statusColumnToEntryView: React.StateItemConverter<StatusColumn> = (
+    statusColumn
+  ) => {
+    const view = StatusColumnView(
+      chat,
+      statusColumn.items,
+      kanbanRow.category,
+      statusColumn.status,
+      selectedObject,
+      isShowingObjectModal
+    );
+    sortedStatuses.subscribe(
+      () =>
+        (view.style.order = sortedStatuses.value.indexOf(statusColumn.status))
+    );
+    return view;
+  };
   return (
     <div class="flex-row flex-no large-gap">
       <div class="flex-row align-start">
         {RenameView(editingCategory, kanbanRow.category, renameCategory)}
       </div>
 
-      {...cellItemEntries
-        .sort((a, b) => a[0].localeCompare(b[0]))
-        .map((entry) =>
-          StatusColumnView(
-            chat,
-            entry[1].items,
-            kanbanRow.category,
-            entry[1].title,
-            selectedObject,
-            isShowingObjectModal
-          )
-        )}
-
-      <hr></hr>
+      <div
+        class="flex-row large-gap"
+        children:append={[kanbanRow.statusColumns, statusColumnToEntryView]}
+      ></div>
     </div>
   );
 }
 
 function StatusColumnView(
   chat: Chat,
-  items: StatusCellItem[],
+  items: React.ListState<StatusCellItem>,
   category: string,
   status: string,
   selectedObject: React.State<MessageObject | undefined>,
@@ -199,22 +236,22 @@ function StatusColumnView(
     chat.addObjectAndSend(messageObject);
   }
 
+  const cellItemToEntryView: React.StateItemConverter<StatusCellItem> = (
+    cellItem
+  ) =>
+    ObjectEntryView(
+      chat,
+      cellItem.messageObject,
+      selectedObject,
+      isShowingObjectModal
+    );
+
   return (
     <div
       class="flex-column gap object-entry-wide"
       on:dragover={dragOver}
       on:drop={drop}
-    >
-      {...items
-        .sort((a, b) => b.priority - a.priority)
-        .map((kanbanBoardItem) =>
-          ObjectEntryView(
-            chat,
-            kanbanBoardItem.messageObject,
-            selectedObject,
-            isShowingObjectModal
-          )
-        )}
-    </div>
+      children:append={[items, cellItemToEntryView]}
+    ></div>
   );
 }

src/utility.tsx

@@ -1,5 +1,8 @@
 import * as React from "bloatless-react";
 
+import { MessageObject } from "./Model/chatModel";
+import { ObjectEntryView } from "./Views/Objects/objectEntryView";
+
 export const storageKeys = {
   viewType(id: string): string {
     return id + "view-type";