extracted event listeners out of debug components into dedicated files

src/lib/components/friends-list.svelte

@@ -1,24 +1,9 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { commands, events, type User } from "$lib/bindings";
+  import { commands } from "$lib/bindings";
+  import { friends, friendsListenerError } from "$lib/listeners/friends";
 
-  let friends: User[] = [];
   let error = "";
 
-  onMount(() => {
-    const unlisten = events.friendsChanged.listen((event) => {
-      friends = event.payload.friends;
-    });
-
-    commands.listFriends().catch((err) => {
-      error = String(err);
-    });
-
-    return () => {
-      unlisten.then((stop) => stop());
-    };
-  });
-
   async function createFriend(event: SubmitEvent) {
     const form = event.currentTarget as HTMLFormElement;
     const data = new FormData(form);
@@ -68,15 +53,15 @@
     <button type="submit">Create friend</button>
   </form>
 
-  {#if error}
-    <p>{error}</p>
+  {#if error || $friendsListenerError}
+    <p>{error || $friendsListenerError}</p>
   {/if}
 
-  {#if friends.length === 0}
+  {#if $friends.length === 0}
     <p>No friends saved.</p>
   {:else}
     <ul>
-      {#each friends as friend (friend.id)}
+      {#each $friends as friend (friend.id)}
         <li>
           <span>{friend.displayName} ({friend.id})</span>
           <button type="button" onclick={() => deleteFriend(friend.id)}>Delete</button>