Add notification badges

src/app/components/ChatItem.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {remove} from "@welshman/lib"
+  import {remove, assoc} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {pubkey, loadInboxRelaySelections} from "@welshman/app"
+  import {fade} from "@lib/transition"
   import Link from "@lib/components/Link.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import {makeChatPath} from "@app/routes"
+  import {CHAT_FILTERS, deriveNotification} from "@app/notifications"
 
   export let id: string
   export let pubkeys: string[]
@@ -17,6 +19,8 @@
   const message = messages[0]
   const others = remove($pubkey!, pubkeys)
   const active = $page.params.chat === id
+  const path = makeChatPath(pubkeys)
+  const notification = deriveNotification(path, CHAT_FILTERS.map(assoc("authors", pubkeys)))
 
   onMount(() => {
     for (const pk of others) {
@@ -30,7 +34,7 @@
     class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
     class:bg-base-100={active}>
     <div class="flex flex-col justify-start gap-1">
-      <div class="flex justify-between gap-2">
+      <div class="flex items-center justify-between gap-2">
         <div class="flex min-w-0 items-center gap-2">
           {#if others.length === 1}
             <ProfileCircle pubkey={others[0]} size={5} />
@@ -44,6 +48,9 @@
             </p>
           {/if}
         </div>
+        {#if !active && $notification}
+          <div class="h-2 w-2 rounded-full bg-primary" transition:fade />
+        {/if}
       </div>
       <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
         {message.content}