feat: rewrite report/inbox handling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/auth.ts

@@ -2,7 +2,6 @@ import { amModOfAny } from '$lib/components/lemmy/moderation/moderation.js'
 import { toast } from 'mono-svelte'
 import { DEFAULT_INSTANCE_URL, instance } from '$lib/instance.js'
 import { getClient, site } from '$lib/lemmy.js'
-import { getInbox, getInboxItemPublished } from '$lib/lemmy/inbox.js'
 import { userSettings } from '$lib/settings.js'
 import { moveItem } from '$lib/util.js'
 import {
@@ -294,41 +293,3 @@ setInterval(async () => {
     user: user,
   }))
 }, get(userSettings).notifications.pollRate ?? 30 * 1000)
-
-setFromStorage('seenUntil', Date.now().toString(), false)
-
-export async function getInboxNotifications(dontUpdate: boolean = false) {
-  if (!get(profile) || !get(userSettings).notifications.enabled) return
-
-  const { jwt } = get(profile)!
-  if (!jwt) return
-
-  let until = Number(localStorage.getItem('seenUntil'))
-
-  if (Number.isNaN(until) || until == 0) {
-    const now = Date.now()
-    localStorage.setItem('seenUntil', now.toString())
-    until = now
-  }
-
-  const inbox = await getInbox(jwt, until)
-
-  inbox.forEach((item) => {
-    const notif = new Notification(
-      item.person.display_name ?? item.person.name,
-      {
-        body: item.body,
-        timestamp: item.created,
-        icon: item.person.avatar,
-      }
-    )
-
-    notif.onclick = (e) => {
-      window.open('/inbox')
-    }
-  })
-
-  if (dontUpdate) return
-
-  localStorage.setItem('seenUntil', Date.now().toString())
-}

src/lib/components/lemmy/inbox/PrivateMessage.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { profile } from '$lib/auth.js'
+  import UserLink from '$lib/components/lemmy/user/UserLink.svelte'
+  import Markdown from '$lib/components/markdown/Markdown.svelte'
+  import type { PrivateMessageView } from 'lemmy-js-client'
+  import { Icon, PaperAirplane } from 'svelte-hero-icons'
+
+  export let message: PrivateMessageView
+</script>
+
+<div class="flex flex-col gap-2">
+  <div class="flex flex-row gap-2 items-center flex-wrap">
+    <span class="font-medium text-xs">From</span>
+    <UserLink
+      showInstance={false}
+      user={message.creator}
+      avatar
+      avatarSize={20}
+      shownBadges={{
+        admin: true,
+        banned: true,
+        bot: true,
+        you: $profile?.user?.local_user_view.person.id == message.creator.id,
+      }}
+    />
+    {#if $profile?.user?.local_user_view.person.id != message.recipient.id}
+      to
+      <UserLink
+        showInstance={false}
+        user={message.recipient}
+        avatar
+        avatarSize={20}
+        shownBadges={{
+          admin: true,
+          banned: true,
+          bot: true,
+          you:
+            $profile?.user?.local_user_view.person.id == message.recipient.id,
+        }}
+      />
+    {/if}
+  </div>
+  <Markdown source={message.private_message.content} />
+</div>

src/lib/components/lemmy/modal/PrivateMessageModal.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { profile } from '$lib/auth.js'
+  import UserLink from '$lib/components/lemmy/user/UserLink.svelte'
+  import MarkdownEditor from '$lib/components/markdown/MarkdownEditor.svelte'
+  import { getClient } from '$lib/lemmy.js'
+  import type { Person } from 'lemmy-js-client'
+  import { Button, Modal, toast } from 'mono-svelte'
+
+  export let open: boolean = false
+  export let user: Person
+
+  let message = ''
+
+  let loading = false
+
+  async function sendMessage() {
+    if (!$profile?.jwt || message == '') return
+
+    loading = true
+
+    try {
+      await getClient().createPrivateMessage({
+        auth: $profile.jwt,
+        content: message,
+        recipient_id: user.id,
+      })
+
+      toast({
+        content: 'Successfully sent that person a message.',
+        type: 'success',
+      })
+
+      open = false
+    } catch (err) {
+      toast({
+        content: err as any,
+        type: 'error',
+      })
+    }
+
+    loading = false
+  }
+</script>
+
+<Modal bind:open>
+  <h1 class="text-2xl font-bold" slot="title">Message</h1>
+  <form on:submit|preventDefault={sendMessage} class="flex flex-col gap-4">
+    <p class="inline-flex flex-row gap-2 items-center">
+      Sending <UserLink avatar {user} /> a message
+    </p>
+    <MarkdownEditor
+      bind:value={message}
+      label="Message"
+      placeholder="your hair looks nice today"
+      rows={4}
+    />
+    <Button color="primary" size="lg" submit {loading} disabled={loading}>
+      Send
+    </Button>
+  </form>
+</Modal>

src/lib/components/lemmy/user/UserLink.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { profile } from '$lib/auth.js'
   import ShieldIcon from '$lib/components/lemmy/moderation/ShieldIcon.svelte'
   import Avatar from '$lib/components/ui/Avatar.svelte'
   import { userSettings } from '$lib/settings.js'
   import type { Person } from 'lemmy-js-client'
+  import { Badge } from 'mono-svelte'
   import { Icon, NoSymbol } from 'svelte-hero-icons'
 
   export let user: Person
@@ -11,6 +13,12 @@
   export let badges: boolean = true
   export let inComment: boolean = false
   export let showInstance: boolean = false
+  export let shownBadges = {
+    admin: true,
+    you: false,
+    bot: true,
+    banned: true,
+  }
 
   function linkFromCommunity(user: Person) {
     const domain = new URL(user.actor_id).hostname
@@ -44,21 +52,24 @@
       </span>
     {/if}
   </span>
-  {#if badges && (user.admin || user.banned || user.bot_account)}
-    <span>
-      {#if user.admin}
-        <div class="text-red-500" title="Admin">
-          <ShieldIcon width={12} filled />
-        </div>
-      {/if}
-      {#if user.banned}
-        <div class="text-red-500" title="Banned">
-          <Icon src={NoSymbol} mini size="12" />
-        </div>
-      {/if}
-      {#if user.bot_account}
-        <div class="text-blue-500 font-bold" title="Bot">BOT</div>
-      {/if}
-    </span>
+  {#if badges}
+    {#if shownBadges.you}
+      <Badge color="green-subtle" label="You" class="text-[10px] px-1 py-[1px]">
+        You
+      </Badge>
+    {/if}
+    {#if shownBadges.admin && user.admin}
+      <div class="text-red-500" title="Admin">
+        <ShieldIcon width={12} filled />
+      </div>
+    {/if}
+    {#if shownBadges.banned && user.banned}
+      <div class="text-red-500" title="Banned">
+        <Icon src={NoSymbol} mini size="12" />
+      </div>
+    {/if}
+    {#if shownBadges.bot && user.bot_account}
+      <div class="text-blue-500 font-bold" title="Bot">BOT</div>
+    {/if}
   {/if}
 </a>