implement uniform sorting on all views

src/Model/chatModel.ts

@@ -49,6 +49,19 @@ export interface MessageObjectContent {
   time?: string;
 }
 
+export interface MessageObjectWithIndex extends MessageObject {
+  index: React.State<number>;
+}
+
+export class MessageObjectWithIndex implements MessageObjectWithIndex {
+  constructor(messageObject: MessageObject, index: number = 0) {
+    this.id = messageObject.id;
+    this.title = messageObject.title;
+    this.contentVersions = messageObject.contentVersions;
+    this.index = new React.State(index);
+  }
+}
+
 // chat
 export class Chat {
   id: string;

src/Views/Objects/allObjectsView.tsx

@@ -1,13 +1,13 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { ObjectGridView } from "./objectGridView";
 import { translation } from "../../translations";
 
 export function AllObjectsView(
   chat: Chat,
-  messageObjects: React.MapState<MessageObject>,
+  messageObjects: React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {

src/Views/Objects/calendarView.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { DayView } from "./dayView";
 import { MiniatureDayView } from "./miniatureDayView";
@@ -9,7 +9,7 @@ import { translation } from "../../translations";
 
 export function CalendarView(
   chat: Chat,
-  messageObjects: React.MapState<MessageObject>,
+  messageObjects: React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {

src/Views/Objects/dayView.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
 import { dayInCalendar } from "../../Model/model";
@@ -8,14 +8,14 @@ import { dayInCalendar } from "../../Model/model";
 export function DayView(
   chat: Chat,
   messageObjects:
-    | React.ListState<MessageObject>
-    | React.MapState<MessageObject>,
+    | React.ListState<MessageObjectWithIndex>
+    | React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const objectsForDayView = new React.ListState<MessageObject>();
+  const objectsForDayView = new React.ListState<MessageObjectWithIndex>();
 
-  function processObject(messageObject: MessageObject) {
+  function processObject(messageObject: MessageObjectWithIndex) {
     const latest = chat.getMostRecentContent(messageObject);
     if (!latest.date || latest.date != dayInCalendar.value) return;
 
@@ -31,26 +31,15 @@ export function DayView(
     messageObjects.value.forEach(processObject);
   })
 
-  const objectConverter: React.StateItemConverter<MessageObject> = (
+  const objectConverter: React.StateItemConverter<MessageObjectWithIndex> = (
     messageObject
   ) => {
-    const latest = chat.getMostRecentContent(messageObject);
-    const timeString = latest.time || "00:00";
-    const [hour, minute] = timeString.split(":");
-    const hourInMinutes = parseInt(hour) * 60;
-    const minutesTotal = parseInt(minute) + hourInMinutes;
-    const priority = latest.priority ?? 0;
-    const priorityInverse = 100 - priority;
-    const order = `${minutesTotal}${priorityInverse}`;
-
-    const view = ObjectEntryView(
+    return ObjectEntryView(
       chat,
       messageObject,
       selectedObject,
       isShowingObjectModal
     );
-    view.style.order = order;
-    return view;
   };
 
   return (

src/Views/Objects/kanbanView.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
 import { RenameView } from "../renameView";
@@ -17,7 +17,7 @@ interface KanbanBoardItem {
 
 export function KanbanView(
   chat: Chat,
-  messageObjects: React.MapState<MessageObject>,
+  messageObjects: React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
@@ -116,14 +116,12 @@ function KanbanBoardView(
   const itemToViewEntry: React.StateItemConverter<KanbanBoardItem> = (
     kanbanBoardItem
   ) => {
-    const view = ObjectEntryView(
+    return ObjectEntryView(
       chat,
       kanbanBoardItem.messageObject,
       selectedObject,
       isShowingObjectModal
     );
-    view.style.order = kanbanBoardItem.priority * -1;
-    return view;
   };
 
   return (

src/Views/Objects/miniatureDayView.tsx

@@ -1,21 +1,22 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { dayInCalendar } from "../../Model/model";
+import { getRawObjectIndex } from "../../utility";
 
 export function MiniatureDayView(
   chat: Chat,
   messageObjects:
-    | React.ListState<MessageObject>
-    | React.MapState<MessageObject>,
+    | React.ListState<MessageObjectWithIndex>
+    | React.MapState<MessageObjectWithIndex>,
   dateObject: Date
 ) {
   const objectsForDayView = new React.ListState<MessageObject>();
 
   const dateString = dateObject.toISOString().split("T")[0];
 
-  function processObject(messageObject: MessageObject) {
+  function processObject(messageObject: MessageObjectWithIndex) {
     const latest = chat.getMostRecentContent(messageObject);
     if (!latest.date || latest.date != dateString) return;
 
@@ -41,24 +42,17 @@ export function MiniatureDayView(
 
   messageObjects.handleAddition(processObject);
 
-  const objectConverter: React.StateItemConverter<MessageObject> = (
+  const objectConverter: React.StateItemConverter<MessageObjectWithIndex> = (
     messageObject
   ) => {
-    const latest = chat.getMostRecentContent(messageObject);
-    const timeString = latest.time || "00:00";
-    const [hour, minute] = timeString.split(":");
-    const hourInMinutes = parseInt(hour) * 60;
-    const minutesTotal = parseInt(minute) + hourInMinutes;
-    const priority = latest.priority ?? 0;
-    const priorityInverse = 100 - priority;
-    const order = `${minutesTotal}${priorityInverse}`;
-
     const view = (
       <span class="secondary ellipsis">
         {chat.getObjectTitle(messageObject)}
       </span>
     );
-    view.style.order = order;
+    messageObject.index.subscribe(newIndex => {
+      view.style.order = newIndex;
+    })
     return view;
   };
 

src/Views/Objects/noteObjectsView.tsx

@@ -1,12 +1,12 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { ObjectGridView } from "./objectGridView";
 
 export function NoteObjectsView(
   chat: Chat,
-  messageObjects: React.MapState<MessageObject>,
+  messageObjects: React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {

src/Views/Objects/objectEntryView.tsx

@@ -4,13 +4,14 @@ import {
   Chat,
   MessageObject,
   MessageObjectContent,
+  MessageObjectWithIndex,
 } from "../../Model/chatModel";
 
 import { icons } from "../../icons";
 
 export function ObjectEntryView(
   chat: Chat,
-  messageObject: MessageObject,
+  messageObject: MessageObjectWithIndex,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
@@ -54,7 +55,7 @@ export function ObjectEntryView(
     );
   });
 
-  return (
+  const view = (
     <button
       class="tile flex-no"
       on:click={select}
@@ -73,4 +74,8 @@ export function ObjectEntryView(
       </div>
     </button>
   );
+  messageObject.index.subscribe(newIndex => {
+    view.style.order = newIndex;
+  })
+  return view;
 }

src/Views/Objects/objectGridView.tsx

@@ -1,18 +1,18 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
 
 export function ObjectGridView(
   chat: Chat,
   messageObjects:
-    | React.ListState<MessageObject>
-    | React.MapState<MessageObject>,
+    | React.ListState<MessageObjectWithIndex>
+    | React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const objectConverter: React.StateItemConverter<MessageObject> = (
+  const objectConverter: React.StateItemConverter<MessageObjectWithIndex> = (
     messageObject
   ) => {
     return ObjectEntryView(

src/Views/Objects/objectPane.tsx

@@ -1,6 +1,11 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import {
+  Chat,
+  MessageObject,
+  MessageObjectWithIndex,
+} from "../../Model/chatModel";
+import { getRawObjectIndex, stringToOptionTag } from "../../utility";
 import { objectFilterInput, previousObjectSearches } from "../../Model/model";
 
 import { AllObjectsView } from "./allObjectsView";
@@ -11,7 +16,6 @@ import { ObjectDetailModal } from "./objectDetailModal";
 import { ObjectGridView } from "./objectGridView";
 import { StatusView } from "./statusView";
 import { icons } from "../../icons";
-import { stringToOptionTag } from "../../utility";
 import { translation } from "../../translations";
 
 export const viewTypes = {
@@ -51,7 +55,7 @@ export function ObjectPane(chat: Chat) {
   const resultText = React.createProxyState([appliedFilter, resultCount], () =>
     translation.searchTitleText(appliedFilter.value, resultCount.value)
   );
-  const showingMessageObjects = new React.MapState<MessageObject>();
+  const visibleMessageObjects = new React.MapState<MessageObjectWithIndex>();
   const isFilterEmpty = React.createProxyState(
     [appliedFilter],
     () => appliedFilter.value == ""
@@ -68,22 +72,22 @@ export function ObjectPane(chat: Chat) {
       previousObjectSearches.add(appliedFilter.value);
 
     const allObjects = [...chat.objects.value.values()];
-    allObjects.forEach((object, i) => {
-      const doesMatch = checkIfMatchesFilter(object);
+    allObjects.forEach((messageObject, i) => {
+      const doesMatch = checkIfMatchesFilter(messageObject);
       if (doesMatch) {
-        showingMessageObjects.set(object.id, object);
+        visibleMessageObjects.set(messageObject.id, new MessageObjectWithIndex(messageObject));
       } else {
-        showingMessageObjects.remove(object.id);
+        visibleMessageObjects.remove(messageObject.id);
       }
     });
-    resultCount.value = showingMessageObjects.value.size;
+    resultCount.value = visibleMessageObjects.value.size;
   }
 
   chat.objects.handleAddition((messageObject) => {
     if (checkIfMatchesFilter(messageObject) == false) return;
-    showingMessageObjects.set(messageObject.id, messageObject);
+    visibleMessageObjects.set(messageObject.id, new MessageObjectWithIndex(messageObject));
     chat.objects.handleRemoval(messageObject, () => {
-      showingMessageObjects.remove(messageObject.id);
+      visibleMessageObjects.remove(messageObject.id);
     });
   });
 
@@ -122,6 +126,21 @@ export function ObjectPane(chat: Chat) {
 
   applyFilter();
 
+  // sorting
+  visibleMessageObjects.subscribe((visibleMessageObjects) => {
+    let indices = [...visibleMessageObjects.values()]
+      .map((messageObject) => {
+        const latest = chat.getMostRecentContent(messageObject);
+        return getRawObjectIndex(latest);
+      })
+      .sort();
+
+    visibleMessageObjects.forEach((messageObject) => {
+      const latest = chat.getMostRecentContent(messageObject);
+      messageObject.index.value = indices.indexOf(getRawObjectIndex(latest));
+    });
+  });
+
   // view
   const objectModal = React.createProxyState(
     [chat.objects, selectedObject],
@@ -154,7 +173,7 @@ export function ObjectPane(chat: Chat) {
 
     return getViewFunction()(
       chat,
-      showingMessageObjects,
+      visibleMessageObjects,
       selectedObject,
       isShowingObjectModal
     );
@@ -238,7 +257,7 @@ export function ObjectPane(chat: Chat) {
 
             {ObjectGridView(
               chat,
-              showingMessageObjects,
+              visibleMessageObjects,
               selectedObject,
               isShowingObjectModal
             )}

src/Views/Objects/statusView.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
 import { RenameView } from "../renameView";
@@ -29,7 +29,7 @@ interface StatusData {
 
 export function StatusView(
   chat: Chat,
-  messageObjects: React.MapState<MessageObject>,
+  messageObjects: React.MapState<MessageObjectWithIndex>,
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {

src/utility.tsx

@@ -1,7 +1,6 @@
 import * as React from "bloatless-react";
 
-import { MessageObject } from "./Model/chatModel";
-import { ObjectEntryView } from "./Views/Objects/objectEntryView";
+import { MessageObjectContent } from "./Model/chatModel";
 
 export const storageKeys = {
   viewType(id: string): string {
@@ -47,4 +46,26 @@ export const storageKeys = {
 
 export const stringToOptionTag: React.StateItemConverter<string> = (value) => {
   return <option>{value}</option>;
-};
+};
+
+export function getRawObjectIndex(latest: MessageObjectContent): string {
+  // date
+  const dateString = latest.date || "0000-00-00";
+  const [year, month, date] = dateString.split("-")
+
+  // time
+  const timeString = latest.time || "00:00";
+  const [hour, minute] = timeString.split(":");
+
+  const hourInMinutes = parseInt(hour) * 60;
+  const minutesTotal = parseInt(minute) + hourInMinutes;
+  const paddedMinutes = minutesTotal.toString().padStart(4, "0")
+
+  // priority
+  const priority = latest.priority ?? 0;
+  const priorityInverse = 100 - priority;
+  const paddedPriority = priorityInverse.toString().padStart(3, "0");
+
+  // final
+  return `${year}${month}${date}${paddedMinutes}${paddedPriority}`;
+}