Put notification details in a modal

CHANGELOG.md

@@ -3,6 +3,7 @@
 # 0.3.3
 
 - [x] Add ability to start a chat from the messages list page (NIP 24 only)
+- [x] Move notification info to modal
 
 # 0.3.2
 

src/app/ModalRoutes.svelte

@@ -16,6 +16,7 @@
   import NoteShare from "src/app/views/NoteShare.svelte"
   import PublishInfo from "src/app/views/PublishInfo.svelte"
   import NoteDetail from "src/app/views/NoteDetail.svelte"
+  import NotificationInfo from "src/app/views/NotificationInfo.svelte"
   import ThreadDetail from "src/app/views/ThreadDetail.svelte"
   import PersonDetail from "src/app/views/PersonDetail.svelte"
   import PersonList from "src/app/shared/PersonList.svelte"
@@ -42,6 +43,8 @@
   <NoteZap note={m.note} />
 {:else if m.type === "note/share"}
   <NoteShare note={m.note} />
+{:else if m.type === "notification/info"}
+  <NotificationInfo zaps={m.zaps} likes={m.likes} replies={m.replies} />
 {:else if m.type === "thread/detail"}
   <ThreadDetail anchorId={m.anchorId} relays={m.relays} />
 {:else if m.type === "publish/info"}

src/app/views/Notification.svelte

@@ -6,9 +6,7 @@
   import PersonCircle from "src/app/shared/PersonCircle.svelte"
   import PersonName from "src/app/shared/PersonName.svelte"
   import Card from "src/partials/Card.svelte"
-  import Popover from "src/partials/Popover.svelte"
   import NoteContent from "src/app/shared/NoteContent.svelte"
-  import NotificationSection from "src/app/views/NotificationSection.svelte"
   import {modal} from "src/partials/state"
 
   export let event
@@ -35,6 +33,8 @@
 
     return "reacted to"
   })
+
+  const showDetails = () => modal.push({type: "notification/info", zaps, likes, replies})
 </script>
 
 {#if note}
@@ -51,24 +51,10 @@
             <span>mentioned you.</span>
           </div>
         {:else}
-          <Popover>
-            <div slot="trigger">
-              {quantify(pubkeys.length, "person", "people")}
-              {actionText} your note.
-            </div>
-            <div slot="tooltip" class="flex flex-col gap-4 py-2">
-              {#if zaps.length > 0}
-                <NotificationSection pubkeys={pluck("pubkey", zaps)}>Zapped by</NotificationSection>
-              {/if}
-              {#if likes.length > 0}
-                <NotificationSection pubkeys={pluck("pubkey", likes)}>Liked by</NotificationSection>
-              {/if}
-              {#if replies.length > 0}
-                <NotificationSection pubkeys={pluck("pubkey", replies)}
-                  >Replies</NotificationSection>
-              {/if}
-            </div>
-          </Popover>
+          <div on:click={showDetails}>
+            {quantify(pubkeys.length, "person", "people")}
+            {actionText} your note.
+          </div>
         {/if}
         <small>
           {formatTimestamp(event.created_at)}

src/app/views/NotificationInfo.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import {pluck} from 'ramda'
+  import type {Event} from 'src/engine/types'
+  import Content from "src/partials/Content.svelte"
+  import NotificationSection from "src/app/views/NotificationSection.svelte"
+
+  export let zaps: Event[]
+  export let likes: Event[]
+  export let replies: Event[]
+</script>
+
+<Content>
+  {#if zaps.length > 0}
+    <NotificationSection label="Zapped by" pubkeys={pluck("pubkey", zaps)} />
+  {/if}
+  {#if likes.length > 0}
+    <NotificationSection label="Liked by" pubkeys={pluck("pubkey", likes)} />
+  {/if}
+  {#if replies.length > 0}
+    <NotificationSection label="Replies" pubkeys={pluck("pubkey", replies)} />
+  {/if}
+</Content>

src/app/views/NotificationSection.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import PersonBadge from "src/app/shared/PersonBadge.svelte"
 
+  export let label
   export let pubkeys
 </script>
 
-<div class="flex flex-col gap-2">
-  <slot />
-  <div class="flex flex-col gap-2">
-    {#each pubkeys as pubkey}
-      <PersonBadge {pubkey} />
-    {/each}
-  </div>
+<p class="text-xl">{label}</p>
+<div class="flex flex-col gap-4">
+  {#each pubkeys as pubkey}
+    <PersonBadge {pubkey} />
+  {/each}
 </div>