sort chats alphabetically

dist/index.js

@@ -479,10 +479,12 @@
   var ChatListModel = class {
     storageModel;
     // data
-    chatModels = /* @__PURE__ */ new Map();
+    chatModels = /* @__PURE__ */ new Set();
+    sortedPrimaryChannels = [];
     // store & add
     addChatModel = (chatModel) => {
-      this.chatModels.set(chatModel.id, chatModel);
+      this.chatModels.add(chatModel);
+      this.updateIndices();
     };
     createChat = (primaryChannel) => {
       const id = v4_default();
@@ -492,7 +494,17 @@
       return chatModel;
     };
     untrackChat = (chat) => {
-      this.chatModels.delete(chat.id);
+      this.chatModels.delete(chat);
+      this.updateIndices();
+    };
+    // sorting
+    updateIndices = () => {
+      this.sortedPrimaryChannels = [];
+      let allChannels = [];
+      for (const chatModel of this.chatModels) {
+        allChannels.push(chatModel.info.primaryChannel);
+      }
+      this.sortedPrimaryChannels = allChannels.sort((a, b) => a.localeCompare(b));
     };
     // restore
     loadChats = () => {
@@ -516,6 +528,7 @@
     chatListViewModel;
     storageModel;
     // state
+    index = new State(0);
     primaryChannel = new State("");
     primaryChannelInput = new State("");
     selectedPage = new State(
@@ -526,6 +539,11 @@
       [this.primaryChannel, this.primaryChannelInput],
       () => this.primaryChannelInput.value == "" || this.primaryChannelInput.value == this.primaryChannel.value
     );
+    // sorting
+    updateIndex = () => {
+      const index = this.chatListViewModel.getIndexOfChat(this);
+      this.index.value = index;
+    };
     // methods
     open = () => {
       this.chatListViewModel.openChat(this);
@@ -552,6 +570,7 @@
       this.primaryChannel.value = chatModel.info.primaryChannel;
       this.primaryChannelInput.value = chatModel.info.primaryChannel;
       this.restorePageSelection();
+      this.updateIndex();
     }
   };
 
@@ -568,6 +587,13 @@
       [this.newChatPrimaryChannel],
       () => this.newChatPrimaryChannel.value == ""
     );
+    // sorting
+    get sortedPrimaryChannels() {
+      return this.chatListModel.sortedPrimaryChannels;
+    }
+    getIndexOfChat(chat) {
+      return this.sortedPrimaryChannels.indexOf(chat.primaryChannel.value);
+    }
     // methods
     createChat = () => {
       const chatModel = this.chatListModel.createChat(
@@ -1078,13 +1104,17 @@
 
   // src/View/Components/chatEntry.tsx
   function ChatEntry(chatViewModel) {
-    return /* @__PURE__ */ createElement("button", { class: "chat-entry tile", "on:click": chatViewModel.open }, /* @__PURE__ */ createElement(
+    const view = /* @__PURE__ */ createElement("button", { class: "chat-entry tile", "on:click": chatViewModel.open }, /* @__PURE__ */ createElement(
       "span",
       {
         class: "shadow",
         "subscribe:innerText": chatViewModel.primaryChannel
       }
     ), /* @__PURE__ */ createElement("h2", { "subscribe:innerText": chatViewModel.primaryChannel }));
+    chatViewModel.index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
+    return view;
   }
   var ChatViewModelToChatEntry = (chatViewModel) => {
     return ChatEntry(chatViewModel);

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();
   }
 }