style: use drip-list-badge in streams table (closes #700)

src/lib/components/table/cells/user-badge.cell.svelte

@@ -3,11 +3,17 @@
   import IdentityBadge from '$lib/components/identity-badge/identity-badge.svelte';
   import { z } from 'zod';
   import type { AddressDriverAccount, NFTDriverAccount } from '$lib/stores/streams/types';
+  import DripListBadge from '$lib/components/drip-list-badge/drip-list-badge.svelte';
+  import DripListService from '$lib/utils/driplist/DripListService';
+  import type { AccountId } from '$lib/utils/common-types';
+  import type { DripList } from '$lib/utils/metadata/types';
   import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
 
   export let context: CellContext<unknown, unknown>;
 
   let user: AddressDriverAccount | NFTDriverAccount;
+  let dripList: DripList | null | undefined;
+
   $: {
     const value = context.getValue();
 
@@ -24,35 +30,31 @@
     ]);
 
     user = userSchema.parse(value);
+
+    if (user.driver === 'nft' && dripList === undefined) {
+      getDripList(user.accountId);
+    }
+  }
+
+  async function getDripList(listId: AccountId) {
+    const dripListService = await DripListService.new();
+    dripList = await dripListService.getByTokenId(listId);
   }
 </script>
 
 {#if user.driver === 'address'}
   <IdentityBadge address={user.address} />
 {:else}
   <!-- TODO: Donʼt presume any NFT account is a Drip List. -->
-  <div class="drip-list-badge">
-    <div class="icon">
-      <DripListIcon style="fill: var(--color-background); height: 1.25rem;" />
+  {#if dripList}
+    <DripListBadge
+      listName={dripList.name}
+      listId={user.accountId}
+      owner={dripList.account.owner.address}
+    />
+  {:else}
+    <div class="flex items-center gap-2">
+      <DripListIcon /> <span class="animate-pulse">...</span>
     </div>
-    <span class="typo-text">Your Drip List</span>
-  </div>
+  {/if}
 {/if}
-
-<style>
-  .drip-list-badge {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .icon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--color-foreground);
-    border-radius: 50%;
-  }
-</style>

src/routes/app/(app)/[accountId]/tokens/[token]/streams/[dripId]/+page.svelte

@@ -73,7 +73,7 @@
     if (stream) {
       streamName =
         stream.receiver.driver === 'nft'
-          ? 'Drip List Support Stream'
+          ? 'Drip List support stream'
           : stream.name ?? 'Unnamed stream';
     }
   }

src/routes/app/(app)/streams/sections/streams.section.svelte

@@ -92,7 +92,7 @@
       // TODO: Donʼt presume that any stream to an NFT subaccount is going to a Drip List.
       const streamName =
         stream.receiver.driver === 'nft'
-          ? 'Drip List Support Stream'
+          ? 'Drip List support stream'
           : stream.name ?? 'Unnamed stream';
 
       return {