Ordered server list

src-tauri/src/commands/server_list.rs

@@ -1,5 +1,5 @@
 use serde::{Deserialize, Serialize};
-use std::{collections::HashMap, fs};
+use std::fs;
 use tauri::{AppHandle, Manager};
 
 use crate::types::ServerMeta;
@@ -7,12 +7,13 @@ use crate::types::ServerMeta;
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct KnownServer {
-    pub meta: ServerMeta,
+    pub hostname: String,
     pub public_key: String,
     pub is_secure: bool,
+    pub meta: ServerMeta,
 }
 
-type ServerList = HashMap<String, KnownServer>;
+type ServerList = Vec<KnownServer>;
 
 fn servers_file_path(app: &AppHandle) -> Result<std::path::PathBuf, String> {
     let dir = app

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[serveridx] &&
-      this.serverList[hostname].publicKey !==
+      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] = {
+    const serverItem = {
-      meta: metaResponse.data as any,
+      hostname,
-      isSecure,
       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")}
+            src={getHTTPUrl(server.hostname, server.isSecure, "/icon")}
-            key={hostname}
+            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 });