client server connection UI

src/lib/bindings.ts

@@ -40,6 +40,9 @@ async updateProfile(displayName: string) : Promise<User> {
 },
 async getPublicKey() : Promise<string> {
     return await TAURI_INVOKE("get_public_key");
+},
+async listStatuses() : Promise<ConnectionStatus[]> {
+    return await TAURI_INVOKE("list_statuses");
 }
 }
 
@@ -48,10 +51,12 @@ async getPublicKey() : Promise<string> {
 
 export const events = __makeEvents__<{
 friendsChanged: FriendsChanged,
+networkStatusChanged: NetworkStatusChanged,
 profileChanged: ProfileChanged,
 remotesChanged: RemotesChanged
 }>({
 friendsChanged: "friends-changed",
+networkStatusChanged: "network-status-changed",
 profileChanged: "profile-changed",
 remotesChanged: "remotes-changed"
 })
@@ -62,7 +67,10 @@ remotesChanged: "remotes-changed"
 
 /** user-defined types **/
 
+export type ConnectionState = "connecting" | "connected" | "disconnected"
+export type ConnectionStatus = { remoteId: string; address: string; name: string | null; state: ConnectionState }
 export type FriendsChanged = { friends: User[] }
+export type NetworkStatusChanged = { statuses: ConnectionStatus[] }
 export type ProfileChanged = { profile: User }
 export type Remote = { id: string; address: string; name: string | null; port: number | null }
 export type RemoteInput = { address: string; name: string | null; port: number | null }

src/lib/components/connection-status.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { commands, events, type ConnectionStatus } from "$lib/bindings";
+
+  let statuses: ConnectionStatus[] = [];
+  let error = "";
+
+  onMount(() => {
+    const unlisten = events.networkStatusChanged.listen((event) => {
+      statuses = event.payload.statuses;
+    });
+
+    commands
+      .listStatuses()
+      .then((current) => {
+        statuses = current;
+      })
+      .catch((err) => {
+        error = String(err);
+      });
+
+    return () => {
+      unlisten.then((stop) => stop());
+    };
+  });
+</script>
+
+<section>
+  <h1>Connections</h1>
+
+  {#if error}
+    <p aria-live="polite">{error}</p>
+  {:else if statuses.length === 0}
+    <p>No remote connections configured.</p>
+  {:else}
+    <ul aria-live="polite">
+      {#each statuses as status (status.remoteId)}
+        <li>
+          <strong>{status.name ?? status.address}</strong>: {status.state}
+          {#if status.name}
+            <span> — {status.address}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import FriendsList from "$lib/components/friends-list.svelte";
+  import ConnectionStatus from "$lib/components/connection-status.svelte";
   import Profile from "$lib/components/profile.svelte";
   import RemotesList from "$lib/components/remotes-list.svelte";
 </script>
@@ -14,4 +15,7 @@
   <div>
     <RemotesList />
   </div>
+  <div>
+    <ConnectionStatus />
+  </div>
 </main>