improved component composition and added tests.

src/routes/Mail.svelte

@@ -9,19 +9,14 @@
    */
   import { untrack } from 'svelte'
   import type { Account, Notification } from '$lib/api/types'
-  import { session } from '$lib/stores/session.svelte'
+  import { useAppServices } from '$lib/app-services'
   import { Feed } from '$lib/stores/feed.svelte'
-  import {
-    authorizeFollowRequest,
-    fetchFollowRequests,
-    fetchNotifications,
-    rejectFollowRequest,
-  } from '$lib/api/endpoints'
   import { displayNameOf, fullHandle, profilePath } from '$lib/util/profile'
   import { toPlainText } from '$lib/util/html'
   import { stampDate } from '$lib/util/time'
   import Module from '$components/common/Module.svelte'
   import Pager from '$components/common/Pager.svelte'
+  import Avatar from '$components/common/Avatar.svelte'
 
   interface Props {
     folder?: string
@@ -29,6 +24,7 @@
 
   let { folder = 'inbox' }: Props = $props()
 
+  const { endpoints, session } = useAppServices()
   interface Folder {
     key: string
     label: string
@@ -73,11 +69,11 @@
 
     untrack(() => {
       if (key === 'requests') {
-        requests = new Feed<Account>((cursor) => fetchFollowRequests(session.api, cursor))
+        requests = new Feed<Account>((cursor) => endpoints.fetchFollowRequests(session.api, cursor))
         void requests.reload()
       } else {
         notifications = new Feed<Notification>((cursor) =>
-          fetchNotifications(session.api, cursor, types.length > 0 ? types : undefined),
+          endpoints.fetchNotifications(session.api, cursor, types.length > 0 ? types : undefined),
         )
         void notifications.reload()
       }
@@ -90,7 +86,10 @@
     busyIds = { ...busyIds, [account.id]: true }
     actionError = null
     try {
-      await (approve ? authorizeFollowRequest : rejectFollowRequest)(session.api, account.id)
+      await (approve ? endpoints.authorizeFollowRequest : endpoints.rejectFollowRequest)(
+        session.api,
+        account.id,
+      )
       requests.remove(account.id)
     } catch (cause) {
       actionError = cause instanceof Error ? cause.message : 'That didn’t work.'
@@ -156,7 +155,7 @@
                   <tr class="mail-row" data-kind="follow_request" data-account={account.acct}>
                     <td class="mail-table-from">
                       <a href={profilePath(account)}>
-                        <img src={account.avatar_static || account.avatar} alt="" loading="lazy" />
+                        <Avatar {account} plain />
                       </a>
                     </td>
                     <td>
@@ -210,7 +209,7 @@
                     <td class="mail-table-date">{stampDate(item.created_at)}</td>
                     <td class="mail-table-from">
                       <a href={profilePath(item.account)}>
-                        <img src={item.account.avatar_static || item.account.avatar} alt="" loading="lazy" />
+                        <Avatar account={item.account} plain />
                       </a>
                     </td>
                     <td class="mail-table-subject">