Ordered server list

src/app/app.ts

@@ -37,7 +37,7 @@ export default class Enclave<P = Page> {
   public config?: Config;
 
   public constructor() {
-    this.serverList = {};
+    this.serverList = [];
     this.forceRender = () => {};
     this.isSettingsOpen = false;
   }
@@ -113,13 +113,17 @@ export default class Enclave<P = Page> {
       return;
     }
 
+    const serveridx = this.serverList.findIndex((server) => {
+      server.hostname === hostname;
+    });
+
     if (
-      this.serverList[hostname] &&
-      this.serverList[hostname].publicKey !==
+      this.serverList[serveridx] &&
+      this.serverList[serveridx].publicKey !==
         base58.encode(this.server.serverPublicKey)
     ) {
       console.error("Server's new public key doesn't match old one", {
-        old: this.serverList[hostname].publicKey,
+        old: this.serverList[serveridx].publicKey,
         new: base58.encode(this.server.serverPublicKey),
       });
       return;
@@ -156,12 +160,19 @@ export default class Enclave<P = Page> {
 
     this.server.meta = metaResponse.data as any;
 
-    this.serverList[hostname] = {
-      meta: metaResponse.data as any,
-      isSecure,
+    const serverItem = {
+      hostname,
       publicKey: base58.encode(this.server.serverPublicKey),
+      isSecure,
+      meta: metaResponse.data as any,
     };
 
+    if (this.serverList[serveridx]) {
+      this.serverList[serveridx] = serverItem;
+    } else {
+      this.serverList.push(serverItem);
+    }
+
     this.forceRender();
   }
 

src/components/view/ServerList.tsx

@@ -12,14 +12,14 @@ export default function ServerList({
 
   return (
     <aside className="w-16 h-screen p-2 flex flex-col gap-2.5 border-r border-r-border shrink-0">
-      {Object.entries(appRef.current.serverList).map(([hostname, server]) => {
+      {appRef.current.serverList.map((server) => {
         return (
           <img
-            src={getHTTPUrl(hostname, server.isSecure, "/icon")}
-            key={hostname}
+            src={getHTTPUrl(server.hostname, server.isSecure, "/icon")}
+            key={server.hostname}
             className={cn(
               "rounded-lg",
-              hostname === appRef.current?.server?.hostname &&
+              server.hostname === appRef.current?.server?.hostname &&
                 "border-primary border border-2",
             )}
 
@@ -29,7 +29,7 @@ export default function ServerList({
                 return;
               }
 
-              appRef.current.connectToServer(hostname, server.isSecure);
+              appRef.current.connectToServer(server.hostname, server.isSecure);
             }}
           />
         );

src/lib/serverList.ts

@@ -2,12 +2,13 @@ import { invoke } from "@tauri-apps/api/core";
 import { ServerMeta } from "./types";
 
 export interface KnownServer {
-  meta: ServerMeta;
+  hostname: string;
   publicKey: string;
   isSecure: boolean;
+  meta: ServerMeta;
 }
 
-export type ServerList = Record<string, KnownServer>;
+export type ServerList = KnownServer[];
 
 export async function saveServerList(servers: ServerList): Promise<void> {
   await invoke("save_server_list", { servers });