improved component composition and added tests.

src/components/profile/ContactBox.svelte

@@ -7,8 +7,7 @@
    * rather than disappearing, so the box keeps its shape.
    */
   import type { Account, Relationship } from '$lib/api/types'
-  import { session } from '$lib/stores/session.svelte'
-  import { blockAccount, followAccount, unblockAccount, unfollowAccount } from '$lib/api/endpoints'
+  import { useAppServices } from '$lib/app-services'
   import { displayNameOf } from '$lib/util/profile'
   import Module from '../common/Module.svelte'
 
@@ -20,6 +19,7 @@
 
   let { account, relationship, onrelationship }: Props = $props()
 
+  const { endpoints, session } = useAppServices()
   let busy = $state(false)
   let error = $state<string | null>(null)
 
@@ -56,17 +56,19 @@
 
   function toggleFollow(): void {
     if (blocking) {
-      void run(() => unblockAccount(session.api, account.id))
+      void run(() => endpoints.unblockAccount(session.api, account.id))
     } else if (following || requested) {
-      void run(() => unfollowAccount(session.api, account.id))
+      void run(() => endpoints.unfollowAccount(session.api, account.id))
     } else {
-      void run(() => followAccount(session.api, account.id))
+      void run(() => endpoints.followAccount(session.api, account.id))
     }
   }
 
   function toggleBlock(): void {
     void run(() =>
-      blocking ? unblockAccount(session.api, account.id) : blockAccount(session.api, account.id),
+      blocking
+        ? endpoints.unblockAccount(session.api, account.id)
+        : endpoints.blockAccount(session.api, account.id),
     )
   }
 </script>