Server list

src/App.tsx

@@ -1,5 +1,6 @@
 import { useRef } from "react";
 import Enclave from "@/app/app";
+import ServerList from "./components/view/serverList";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -15,13 +16,7 @@ export default function App() {
 
   return (
     <main className="size-screen dark bg-background">
-      <aside className="bg-card w-16 h-screen p-2 flex flex-col gap-2.5">
+      <ServerList appRef={appRef} />
-        <img
-          src="https://github.com/selimaj-dev.png"
-          className="rounded-full"
-        />
-        <img src="https://github.com/selimaj-dev.png" className="rounded-lg" />
-      </aside>
     </main>
   );
 }

src/components/view/serverList.tsx

@@ -0,0 +1,22 @@
+import Enclave from "@/app/app";
+
+export default function ServerList({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  return (
+    <aside className="bg-card w-16 h-screen p-2 flex flex-col gap-2.5">
+      {appRef.current?.serverList.map((server) => (
+        <img
+          src={`http://${server.hostname}/icon`}
+          className={
+            server.publicKey === appRef.current?.server?.hostname
+              ? "rounded-lg"
+              : "rounded-full"
+          }
+        />
+      ))}
+    </aside>
+  );
+}