implement board sorting

src/View/Components/boardEntry.tsx

@@ -16,6 +16,10 @@ export function BoardEntry(boardViewModel: BoardViewModel) {
     </button>
   );
 
+  boardViewModel.index.subscribe((newIndex) => {
+    view.style.order = newIndex;
+  });
+
   return view;
 }
 

src/ViewModel/Chat/chatListViewModel.ts

@@ -12,14 +12,16 @@ export default class ChatListViewModel {
   storageModel: StorageModel;
   settingsViewModel: SettingsViewModel;
 
-  // state
-  newChatPrimaryChannel: React.State<string> = new React.State("");
-  chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
-  indexManager: IndexManager<ChatViewModel> = new IndexManager(
+  // data
+  chatIndexManager: IndexManager<ChatViewModel> = new IndexManager(
     (chatViewModel: ChatViewModel) =>
       chatViewModel.settingsPageViewModel.primaryChannel.value
   );
 
+  // state
+  newChatPrimaryChannel: React.State<string> = new React.State("");
+  chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
+
   selectedChat: React.State<ChatViewModel | undefined> = new React.State<
     ChatViewModel | undefined
   >(undefined);
@@ -61,7 +63,7 @@ export default class ChatListViewModel {
   };
 
   updateIndices = (): void => {
-    this.indexManager.update([...this.chatViewModels.value.values()]);
+    this.chatIndexManager.update([...this.chatViewModels.value.values()]);
     for (const chatViewModel of this.chatViewModels.value) {
       chatViewModel.updateIndex();
     }

src/ViewModel/Chat/chatViewModel.ts

@@ -55,7 +55,7 @@ export default class ChatViewModel {
   };
 
   updateIndex = (): void => {
-    const index: number = this.chatListViewModel.indexManager.getIndex(this);
+    const index: number = this.chatListViewModel.chatIndexManager.getIndex(this);
     this.index.value = index;
   };
 

src/ViewModel/Pages/boardViewModel.ts

@@ -17,6 +17,8 @@ export default class BoardViewModel {
   isSelected: React.State<boolean>;
   isPresentingSettingsModal: React.State<boolean> = new React.State(false);
 
+  index: React.State<number> = new React.State(0);
+
   // view
   select = (): void => {
     this.taskPageViewModel.selectBoard(this);
@@ -35,6 +37,12 @@ export default class BoardViewModel {
     this.isPresentingSettingsModal.value = false;
   };
 
+  updateIndex = (): void => {
+    const index: number =
+      this.taskPageViewModel.boardIndexManager.getIndex(this);
+    this.index.value = index;
+  };
+
   // methods
   saveSettings = (): void => {
     const newBoardInfoFileContent: BoardInfoFileContent =

src/ViewModel/Pages/taskPageViewModel.ts

@@ -8,6 +8,7 @@ import TaskModel, {
 import BoardViewModel from "./boardViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
 import { FileContent } from "../../Model/Files/fileModel";
+import { IndexManager } from "../../Model/Utility/utility";
 import StorageModel from "../../Model/Global/storageModel";
 import { checkMatchesObjectStructure } from "../../Model/Utility/typeSafety";
 
@@ -17,6 +18,11 @@ export default class TaskPageViewModel {
 
   chatViewModel: ChatViewModel;
 
+  // data
+  boardIndexManager: IndexManager<BoardViewModel> = new IndexManager(
+    (boardViewModel: BoardViewModel) => boardViewModel.name.value
+  );
+
   // state
   newBoardNameInput: React.State<string> = new React.State("");
 
@@ -51,10 +57,12 @@ export default class TaskPageViewModel {
     this.newBoardNameInput.value = "";
 
     this.showBoardInList(boardInfoFileContent);
+    this.updateIndices();
   };
 
   updateBoard = (boardInfoFileContent: BoardInfoFileContent): void => {
     this.taskModel.updateBoard(boardInfoFileContent);
+    this.updateIndices();
   };
 
   // view
@@ -73,6 +81,13 @@ export default class TaskPageViewModel {
     this.chatViewModel.resetColor();
   };
 
+  updateIndices = (): void => {
+    this.boardIndexManager.update([...this.boardViewModels.value.values()]);
+    for (const boardViewModel of this.boardViewModels.value.values()) {
+      boardViewModel.updateIndex();
+    }
+  };
+
   // load
   loadData = (): void => {
     this.boardViewModels.clear();
@@ -85,6 +100,8 @@ export default class TaskPageViewModel {
 
       this.showBoardInList(boardInfo);
     }
+
+    this.updateIndices();
   };
 
   // init
@@ -102,6 +119,7 @@ export default class TaskPageViewModel {
     taskModel.boardHandlerManager.addHandler(
       (boardInfoFileContent: BoardInfoFileContent) => {
         this.showBoardInList(boardInfoFileContent);
+        this.updateIndices();
       }
     );
   }