sort chats alphabetically

src/Model/chatListModel.ts

@@ -8,10 +8,12 @@ export default class ChatListModel {
 
   // data
   chatModels = new Set<ChatModel>();
+  sortedPrimaryChannels: string[] = [];
 
   // store & add
   addChatModel = (chatModel: ChatModel) => {
     this.chatModels.add(chatModel);
+    this.updateIndices();
   };
 
   createChat = (primaryChannel: string): ChatModel => {
@@ -26,6 +28,19 @@ export default class ChatListModel {
 
   untrackChat = (chat: ChatModel): void => {
     this.chatModels.delete(chat);
+    this.updateIndices();
+  };
+
+  // sorting
+  updateIndices = () => {
+    this.sortedPrimaryChannels = [];
+
+    let allChannels: string[] = [];
+    for (const chatModel of this.chatModels) {
+      allChannels.push(chatModel.info.primaryChannel);
+    }
+
+    this.sortedPrimaryChannels = allChannels.sort((a, b) => a.localeCompare(b));
   };
 
   // restore

src/View/Components/chatEntry.tsx

@@ -5,7 +5,7 @@ import * as React from "bloatless-react";
 import ChatViewModel from "../../ViewModel/chatViewModel";
 
 export function ChatEntry(chatViewModel: ChatViewModel) {
-  return (
+  const view = (
     <button class="chat-entry tile" on:click={chatViewModel.open}>
       <span
         class="shadow"
@@ -14,6 +14,12 @@ export function ChatEntry(chatViewModel: ChatViewModel) {
       <h2 subscribe:innerText={chatViewModel.primaryChannel}></h2>
     </button>
   );
+
+  chatViewModel.index.subscribe((newIndex) => {
+    view.style.order = newIndex;
+  });
+
+  return view;
 }
 
 export const ChatViewModelToChatEntry: React.StateItemConverter<

src/ViewModel/chatListViewModel.tsx

@@ -14,7 +14,7 @@ export default class ChatListViewModel {
   chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
 
   selectedChat: React.State<ChatViewModel | undefined> = new React.State<
-  ChatViewModel | undefined
+    ChatViewModel | undefined
   >(undefined);
 
   // guards
@@ -23,6 +23,15 @@ export default class ChatListViewModel {
     () => this.newChatPrimaryChannel.value == ""
   );
 
+  // sorting
+  get sortedPrimaryChannels(): string[] {
+    return this.chatListModel.sortedPrimaryChannels;
+  }
+
+  getIndexOfChat(chat: ChatViewModel): number {
+    return this.sortedPrimaryChannels.indexOf(chat.primaryChannel.value);
+  }
+
   // methods
   createChat = (): void => {
     const chatModel: ChatModel = this.chatListModel.createChat(

src/ViewModel/chatViewModel.tsx

@@ -11,6 +11,8 @@ export default class ChatViewModel {
   storageModel: StorageModel;
 
   // state
+  index: React.State<number> = new React.State(0);
+
   primaryChannel: React.State<string> = new React.State("");
   primaryChannelInput: React.State<string> = new React.State("");
 
@@ -26,6 +28,12 @@ export default class ChatViewModel {
       this.primaryChannelInput.value == this.primaryChannel.value
   );
 
+  // sorting
+  updateIndex = (): void => {
+    const index = this.chatListViewModel.getIndexOfChat(this);
+    this.index.value = index;
+  };
+
   // methods
   open = (): void => {
     this.chatListViewModel.openChat(this);
@@ -58,6 +66,7 @@ export default class ChatViewModel {
     this.primaryChannelInput.value = chatModel.info.primaryChannel;
 
     this.restorePageSelection();
+    this.updateIndex();
   }
 }