servers list

src/lib/bindings.ts

@@ -17,6 +17,21 @@ async getFriend(id: string) : Promise<Friend | null> {
 async deleteFriend(id: string) : Promise<boolean> {
     return await TAURI_INVOKE("delete_friend", { id });
 },
+async createRemote(remote: RemoteInput) : Promise<Remote> {
+    return await TAURI_INVOKE("create_remote", { remote });
+},
+async listRemotes() : Promise<Remote[]> {
+    return await TAURI_INVOKE("list_remotes");
+},
+async getRemote(id: string) : Promise<Remote | null> {
+    return await TAURI_INVOKE("get_remote", { id });
+},
+async updateRemote(id: string, remote: RemoteInput) : Promise<Remote | null> {
+    return await TAURI_INVOKE("update_remote", { id, remote });
+},
+async deleteRemote(id: string) : Promise<boolean> {
+    return await TAURI_INVOKE("delete_remote", { id });
+},
 async getPublicKey() : Promise<string> {
     return await TAURI_INVOKE("get_public_key");
 }
@@ -26,9 +41,11 @@ async getPublicKey() : Promise<string> {
 
 
 export const events = __makeEvents__<{
-friendsChanged: FriendsChanged
+friendsChanged: FriendsChanged,
+remotesChanged: RemotesChanged
 }>({
-friendsChanged: "friends-changed"
+friendsChanged: "friends-changed",
+remotesChanged: "remotes-changed"
 })
 
 /** user-defined constants **/
@@ -39,6 +56,9 @@ friendsChanged: "friends-changed"
 
 export type Friend = { id: string; displayName: string }
 export type FriendsChanged = { friends: Friend[] }
+export type Remote = { id: string; address: string; name: string | null; port: number | null }
+export type RemoteInput = { address: string; name: string | null; port: number | null }
+export type RemotesChanged = { remotes: Remote[] }
 
 /** tauri-specta globals **/
 

src/lib/components/remotes-list.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { commands, events, type Remote, type RemoteInput } from "$lib/bindings";
+
+  let remotes: Remote[] = [];
+  let editingId: string | null = null;
+  let error = "";
+
+  onMount(() => {
+    const unlisten = events.remotesChanged.listen((event) => {
+      remotes = event.payload.remotes;
+    });
+
+    commands.listRemotes().catch((err) => {
+      error = String(err);
+    });
+
+    return () => {
+      unlisten.then((stop) => stop());
+    };
+  });
+
+  function remoteInput(form: HTMLFormElement): RemoteInput {
+    const data = new FormData(form);
+    const name = String(data.get("name") ?? "").trim();
+    const port = String(data.get("port") ?? "").trim();
+
+    return {
+      address: String(data.get("address") ?? "").trim(),
+      name: name || null,
+      port: port ? Number(port) : null,
+    };
+  }
+
+  async function createRemote(event: SubmitEvent) {
+    const form = event.currentTarget as HTMLFormElement;
+    error = "";
+
+    try {
+      await commands.createRemote(remoteInput(form));
+      form.reset();
+    } catch (err) {
+      error = String(err);
+    }
+  }
+
+  async function updateRemote(event: SubmitEvent, id: string) {
+    const form = event.currentTarget as HTMLFormElement;
+    error = "";
+
+    try {
+      await commands.updateRemote(id, remoteInput(form));
+      editingId = null;
+    } catch (err) {
+      error = String(err);
+    }
+  }
+
+  async function deleteRemote(id: string) {
+    error = "";
+
+    try {
+      await commands.deleteRemote(id);
+      if (editingId === id) {
+        editingId = null;
+      }
+    } catch (err) {
+      error = String(err);
+    }
+  }
+</script>
+
+<section>
+  <h1>Remotes</h1>
+
+  <form onsubmit={createRemote}>
+    <p>
+      <label>
+        Address
+        <input name="address" required />
+      </label>
+    </p>
+
+    <p>
+      <label>
+        Name (optional)
+        <input name="name" />
+      </label>
+    </p>
+
+    <p>
+      <label>
+        Port (optional)
+        <input name="port" type="number" min="1" max="65535" inputmode="numeric" />
+      </label>
+    </p>
+
+    <button type="submit">Create remote</button>
+  </form>
+
+  {#if error}
+    <p aria-live="polite">{error}</p>
+  {/if}
+
+  {#if remotes.length === 0}
+    <p>No remotes saved.</p>
+  {:else}
+    <ul>
+      {#each remotes as remote (remote.id)}
+        <li>
+          {#if editingId === remote.id}
+            <form onsubmit={(event) => updateRemote(event, remote.id)}>
+              <p>
+                <label>
+                  Address
+                  <input name="address" value={remote.address} required />
+                </label>
+              </p>
+
+              <p>
+                <label>
+                  Name (optional)
+                  <input name="name" value={remote.name ?? ""} />
+                </label>
+              </p>
+
+              <p>
+                <label>
+                  Port (optional)
+                  <input
+                    name="port"
+                    type="number"
+                    min="1"
+                    max="65535"
+                    inputmode="numeric"
+                    value={remote.port ?? ""}
+                  />
+                </label>
+              </p>
+
+              <button type="submit">Save</button>
+              <button type="button" onclick={() => (editingId = null)}>Cancel</button>
+            </form>
+          {:else}
+            <p>
+              <strong>{remote.name ?? remote.address}</strong>
+              {#if remote.name}
+                <span> — {remote.address}</span>
+              {/if}
+              {#if remote.port !== null}
+                <span>:{remote.port}</span>
+              {/if}
+            </p>
+            <p>ID: {remote.id}</p>
+            <button type="button" onclick={() => (editingId = remote.id)}>Edit</button>
+            <button type="button" onclick={() => deleteRemote(remote.id)}>Delete</button>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>

src/routes/+page.svelte

@@ -1,9 +1,13 @@
 <script>
   import FriendsList from "$lib/components/friends-list.svelte";
+  import RemotesList from "$lib/components/remotes-list.svelte";
 </script>
 
 <main>
   <div>
     <FriendsList />
   </div>
+  <div>
+    <RemotesList />
+  </div>
 </main>