From 30d5dc9bf20f1bb7213dd762d0871c2f9c8f2836 Mon Sep 17 00:00:00 2001
From: Xyphyn <james@xylight.dev>
Date: Sun, 17 Sep 2023 14:40:50 -0700
Subject: [PATCH] feat: rewrite report/inbox handling

---
 package.json                                  |   2 +-
 src/lib/auth.ts                               |  39 ----
 .../lemmy/inbox/PrivateMessage.svelte         |  44 +++++
 .../lemmy/modal/PrivateMessageModal.svelte    |  61 ++++++
 src/lib/components/lemmy/user/UserLink.svelte |  43 +++--
 src/lib/lemmy/inbox.ts                        | 154 +++++----------
 src/lib/lemmy/report.ts                       |  93 +++++++++
 src/routes/inbox/+page.svelte                 |   4 +-
 src/routes/inbox/+page.ts                     |  17 +-
 src/routes/inbox/InboxItem.svelte             | 182 +++++++-----------
 src/routes/moderation/+page.ts                |  22 ++-
 src/routes/moderation/Report.svelte           | 176 +++++++++--------
 src/routes/u/[name]/+page.svelte              |  58 +-----
 13 files changed, 467 insertions(+), 428 deletions(-)
 create mode 100644 src/lib/components/lemmy/inbox/PrivateMessage.svelte
 create mode 100644 src/lib/components/lemmy/modal/PrivateMessageModal.svelte
 create mode 100644 src/lib/lemmy/report.ts

diff --git a/package.json b/package.json
index ddb98c7a..a31afbd8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 018531e6..9d51d815 100644
--- a/src/lib/auth.ts
+++ b/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())
-}
diff --git a/src/lib/components/lemmy/inbox/PrivateMessage.svelte b/src/lib/components/lemmy/inbox/PrivateMessage.svelte
new file mode 100644
index 00000000..db2bef3e
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/lemmy/modal/PrivateMessageModal.svelte b/src/lib/components/lemmy/modal/PrivateMessageModal.svelte
new file mode 100644
index 00000000..f4adb6f2
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/lemmy/user/UserLink.svelte b/src/lib/components/lemmy/user/UserLink.svelte
index 17802c50..d3b13ac5 100644
--- a/src/lib/components/lemmy/user/UserLink.svelte
+++ b/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>
diff --git a/src/lib/lemmy/inbox.ts b/src/lib/lemmy/inbox.ts
index f547611b..eb95e47d 100644
--- a/src/lib/lemmy/inbox.ts
+++ b/src/lib/lemmy/inbox.ts
@@ -1,10 +1,12 @@
+import { publishedToDate } from '$lib/components/util/date.js'
 import { getClient } from '$lib/lemmy.js'
 import type { Result } from '$lib/lemmy/item.js'
 import type {
+  Comment,
   CommentReplyView,
+  CommentView,
   Person,
   PersonMentionView,
-  PersonView,
   PrivateMessageView,
 } from 'lemmy-js-client'
 
@@ -13,110 +15,58 @@ export type InboxItemView =
   | CommentReplyView
   | PrivateMessageView
 
-export function getInboxItemPublished(item: InboxItemView): string {
-  if ('comment_reply' in item) {
-    return item.comment_reply.published
-  }
-
-  if ('private_message' in item) {
-    return item.private_message.published
-  }
-
-  return item.person_mention.published
+export const generalizeCommentReply = (item: CommentReplyView): InboxItem => ({
+  type: 'comment_reply',
+  id: item.comment_reply.id,
+  published: item.comment_reply.published,
+  item: { ...item },
+  creator: item.creator,
+  read: item.comment_reply.read,
+})
+
+export const generalizePersonMention = (
+  item: PersonMentionView
+): InboxItem => ({
+  type: 'person_mention',
+  id: item.person_mention.id,
+  published: item.person_mention.published,
+  item: {
+    ...item,
+  },
+  creator: item.creator,
+  read: item.person_mention.read,
+})
+
+export const generalizePrivateMessage = (
+  item: PrivateMessageView
+): InboxItem => ({
+  type: 'private_message',
+  id: item.private_message.id,
+  published: item.private_message.published,
+  item: item,
+  creator: item.creator,
+  read: item.private_message.read,
+})
+
+interface PrivateMessage {
+  type: 'private_message'
+  item: PrivateMessageView
 }
-
-export function isRead(
-  item: PersonMentionView | CommentReplyView | PrivateMessageView
-) {
-  if ('person_mention' in item) {
-    return (item as PersonMentionView).person_mention.read
-  }
-
-  if ('comment_reply' in item) {
-    return (item as CommentReplyView).comment_reply.read
-  }
-
-  if ('private_message' in item) {
-    return (item as PrivateMessageView).private_message.read
-  }
-
-  return false
+interface CommentReply {
+  type: 'comment_reply'
+  item: CommentView
 }
-
-export const getInbox = async (
-  jwt: string,
-  until?: number
-): Promise<InboxItem[]> => {
-  const client = getClient()
-
-  const params = {
-    limit: 50,
-    auth: jwt,
-    unread_only: true,
-  }
-
-  const [replies, mentions, privateMessages] = await Promise.all([
-    client.getReplies({
-      ...params,
-      sort: 'New',
-    }),
-    client.getPersonMentions({
-      ...params,
-      sort: 'New',
-    }),
-    client.getPrivateMessages({ ...params }),
-  ])
-
-  let items = [
-    ...replies.replies,
-    ...mentions.mentions,
-    ...privateMessages.private_messages,
-  ]
-    .map(toInboxItem)
-    .sort((a, b) => b.created - a.created)
-
-  if (until) {
-    items = items.filter((item) => item.created > until)
-  }
-
-  return items
+interface PersonMention {
+  type: 'person_mention'
+  item: CommentView
 }
 
-const toInboxItem = (item: InboxItemView): InboxItem => {
-  let type: 'private_message' | 'comment_reply' | 'person_mention'
-  let body: string
-  let personView: Person
-  let created: number
-  if ('comment_reply' in item) {
-    type = 'comment_reply'
-    body = item.comment.content
-    personView = item.creator
-    created = Date.parse(`${item.comment_reply.published}Z`)
-  } else if ('person_mention' in item) {
-    type = 'person_mention'
-    body = item.comment.content
-    personView = item.creator
-    created = Date.parse(`${item.person_mention.published}Z`)
-  } else if ('private_message' in item) {
-    type = 'private_message'
-    body = item.private_message.content
-    personView = item.creator
-    created = Date.parse(`${item.private_message.published}Z`)
-  } else {
-    throw new Error('Invalid item')
-  }
-
-  return {
-    type: type,
-    body: body,
-    person: personView,
-    created,
-  }
+interface BaseInboxItem {
+  creator: Person
+  published: string
+  read: boolean
+  id: number
 }
 
-interface InboxItem {
-  type: 'private_message' | 'comment_reply' | 'person_mention'
-  body: string
-  person: Person
-  created: number
-}
+export type InboxItem = BaseInboxItem &
+  (PrivateMessage | CommentReply | PersonMention)
diff --git a/src/lib/lemmy/report.ts b/src/lib/lemmy/report.ts
new file mode 100644
index 00000000..600d977f
--- /dev/null
+++ b/src/lib/lemmy/report.ts
@@ -0,0 +1,93 @@
+import { publishedToDate } from '$lib/components/util/date.js'
+import type {
+  CommentReportView,
+  CommentView,
+  Person,
+  PostReportView,
+  PostView,
+  PrivateMessage,
+  PrivateMessageReportView,
+  PrivateMessageView,
+} from 'lemmy-js-client'
+
+interface CommentReport {
+  type: 'comment'
+  item: CommentView
+}
+
+interface PostReport {
+  type: 'post'
+  item: PostView
+}
+
+interface PrivateMessageReport {
+  type: 'message'
+  item: PrivateMessage
+  reportee: Person
+}
+
+interface BaseReport {
+  creator: Person
+  reason: string
+  reportee?: Person
+  timestamp: Date
+  resolved: boolean
+  id: number
+}
+
+export const generalizeCommentReport = (
+  report: CommentReportView
+): ReportView => ({
+  creator: report.creator,
+  item: {
+    ...report,
+    subscribed: 'NotSubscribed',
+    saved: false,
+    creator_blocked: false,
+    creator: report.comment_creator,
+  },
+  reason: report.comment_report.reason,
+  type: 'comment',
+  timestamp: publishedToDate(report.comment_report.published),
+  resolved: report.comment_report.resolved,
+  id: report.comment_report.id,
+})
+
+export const generalizePostReport = (report: PostReportView): ReportView => ({
+  creator: report.creator,
+  item: {
+    ...report,
+    unread_comments: 0,
+    saved: false,
+    creator_blocked: false,
+    read: false,
+    subscribed: 'NotSubscribed',
+    creator: report.post_creator,
+  },
+  reason: report.post_report.reason,
+  type: 'post',
+  timestamp: publishedToDate(report.post_report.published),
+  resolved: report.post_report.resolved,
+  id: report.post_report.id,
+})
+
+export const generalizePrivateMessageReport = (
+  report: PrivateMessageReportView
+): ReportView => ({
+  creator: report.creator,
+  item: report.private_message,
+  reason: report.private_message_report.reason,
+  type: 'message',
+  reportee: report.private_message_creator,
+  timestamp: publishedToDate(report.private_message_report.published),
+  resolved: report.private_message_report.resolved,
+  id: report.private_message_report.id,
+})
+
+export type Report =
+  | CommentReportView
+  | PostReportView
+  | PrivateMessageReportView
+
+export type ReportView = BaseReport &
+  (CommentReport | PostReport | PrivateMessageReport)
diff --git a/src/routes/inbox/+page.svelte b/src/routes/inbox/+page.svelte
index 736a07e5..441ad77f 100644
--- a/src/routes/inbox/+page.svelte
+++ b/src/routes/inbox/+page.svelte
@@ -11,9 +11,7 @@
   import { getClient } from '$lib/lemmy.js'
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
-  import { isRead } from '$lib/lemmy/inbox.js'
   import Pageination from '$lib/components/ui/Pageination.svelte'
-  import MultiSelect from '$lib/components/input/Switch.svelte'
   import { profile } from '$lib/auth.js'
   import Placeholder from '$lib/components/ui/Placeholder.svelte'
   import { fly } from 'svelte/transition'
@@ -109,7 +107,7 @@
   {:else}
     {#each data.data as item}
       <div in:fly={{ duration: 500, y: -6, opacity: 0 }}>
-        <InboxItem {item} read={isRead(item)} />
+        <InboxItem {item} />
       </div>
     {/each}
     <Pageination
diff --git a/src/routes/inbox/+page.ts b/src/routes/inbox/+page.ts
index cf1c0bfc..a40305cd 100644
--- a/src/routes/inbox/+page.ts
+++ b/src/routes/inbox/+page.ts
@@ -1,6 +1,11 @@
 import { profile } from '$lib/auth.js'
+import { publishedToDate } from '$lib/components/util/date.js'
 import { getClient } from '$lib/lemmy.js'
-import { getInboxItemPublished } from '$lib/lemmy/inbox.js'
+import {
+  generalizeCommentReply,
+  generalizePersonMention,
+  generalizePrivateMessage,
+} from '$lib/lemmy/inbox.js'
 import { get } from 'svelte/store'
 
 type InboxFeedType = 'replies' | 'mentions' | 'messages' | 'all'
@@ -45,13 +50,13 @@ export async function load({ url, fetch }) {
   ])
 
   const data = [
-    ...replies.replies,
-    ...mentions.mentions,
-    ...privateMessages.private_messages,
+    ...replies.replies.map(generalizeCommentReply),
+    ...mentions.mentions.map(generalizePersonMention),
+    ...privateMessages.private_messages.map(generalizePrivateMessage),
   ].sort(
     (a, b) =>
-      Date.parse(getInboxItemPublished(b)) -
-      Date.parse(getInboxItemPublished(a))
+      publishedToDate(b.published).getTime() -
+      publishedToDate(a.published).getTime()
   )
 
   return { unreadOnly: unreadOnly, type: type, page: page, data: data }
diff --git a/src/routes/inbox/InboxItem.svelte b/src/routes/inbox/InboxItem.svelte
index db8897a5..8908fbfc 100644
--- a/src/routes/inbox/InboxItem.svelte
+++ b/src/routes/inbox/InboxItem.svelte
@@ -12,26 +12,18 @@
   } from 'lemmy-js-client'
   import { ChatBubbleOvalLeft, Check, Icon } from 'svelte-hero-icons'
   import { page } from '$app/stores'
-  import { Material, toast } from 'mono-svelte'
+  import { Material, Modal, toast } from 'mono-svelte'
   import PostMeta from '$lib/components/lemmy/post/PostMeta.svelte'
   import SectionTitle from '$lib/components/ui/SectionTitle.svelte'
   import { Button } from 'mono-svelte'
   import MarkdownEditor from '$lib/components/markdown/MarkdownEditor.svelte'
   import RelativeDate from '$lib/components/util/RelativeDate.svelte'
   import { publishedToDate } from '$lib/components/util/date.js'
+  import type { InboxItem, InboxItemView } from '$lib/lemmy/inbox.js'
+  import PrivateMessage from '$lib/components/lemmy/inbox/PrivateMessage.svelte'
+  import PrivateMessageModal from '$lib/components/lemmy/modal/PrivateMessageModal.svelte'
 
-  export let item: CommentReplyView | PersonMentionView | PrivateMessageView
-  export let read: boolean
-
-  function isPrivateMessage(
-    item: CommentReplyView | PersonMentionView | PrivateMessageView
-  ): item is PrivateMessageView {
-    return 'private_message' in item
-  }
-
-  const isCommentReply = (
-    item: CommentReplyView | PersonMentionView | PrivateMessageView
-  ): item is CommentReplyView => 'comment_reply' in item
+  export let item: InboxItem
 
   let replying = false
   let reply = ''
@@ -74,132 +66,94 @@
 
     loading = true
 
-    if ('person_mention' in item) {
+    if (item.type == 'person_mention') {
       await getClient().markPersonMentionAsRead({
         auth: $profile?.jwt,
-        person_mention_id: item.person_mention.id,
+        person_mention_id: item.id,
         read: isRead,
       })
-    } else if ('comment_reply' in item) {
+    } else if (item.type == 'comment_reply') {
       await getClient().markCommentReplyAsRead({
         auth: $profile?.jwt,
-        comment_reply_id: item.comment_reply.id,
+        comment_reply_id: item.id,
         read: isRead,
       })
     }
 
-    read = isRead
+    item.read = isRead
     if ($profile.user) $profile.user.unreads += isRead ? -1 : 1
 
     loading = false
   }
 </script>
 
+{#if replying && item.type == 'private_message'}
+  <PrivateMessageModal bind:open={replying} user={item.item.creator} />
+{/if}
+
 <Material padding="lg" class="flex flex-col max-w-full gap-2">
-  {#if !isPrivateMessage(item)}
-    <div class="flex flex-col gap-1">
-      <span class="text-xs text-slate-600 dark:text-zinc-400">
-        {#if isCommentReply(item)}
-          <RelativeDate date={publishedToDate(item.comment_reply.published)} />
-        {:else}
-          <RelativeDate date={publishedToDate(item.person_mention.published)} />
-        {/if}
-      </span>
-      <PostMeta title={item.post.name} id={item.post.id} />
-    </div>
-    <div
-      class="flex flex-col"
-      class:mt-2={$profile?.user &&
-        item.post.creator_id != $profile.user.local_user_view.person.id}
-    >
-      <SectionTitle class="mb-2 text-xs">Reply</SectionTitle>
-      {#if $profile?.user && item.post.creator_id != $profile.user.local_user_view.person.id}
-        <div class="flex flex-row text-xs items-center gap-2">
-          <div
-            class="border-t w-8 rounded-tl h-2 border-l ml-2 border-zinc-700"
+  <div class="flex flex-col gap-1">
+    <span class="text-xs text-slate-600 dark:text-zinc-400">
+      <RelativeDate date={publishedToDate(item.published)} />
+    </span>
+    {#if item.type != 'private_message'}
+      <PostMeta title={item.item.post.name} id={item.item.post.id} />
+    {/if}
+  </div>
+  <div class="flex flex-col">
+    <SectionTitle class="mb-2 text-xs">
+      {#if item.type == 'private_message'}
+        Message
+      {:else if item.type == 'person_mention'}
+        Mention
+      {:else if item.type == 'comment_reply'}
+        Reply
+      {/if}
+    </SectionTitle>
+    {#if item.type != 'private_message' && $profile?.user && item.item.post.creator_id != $profile.user.local_user_view.person.id}
+      <div class="flex flex-row text-xs items-center gap-2">
+        <div
+          class="border-t w-8 rounded-tl h-2 border-l ml-2 border-zinc-700"
+        />
+        <div>
+          <UserLink
+            avatar
+            avatarSize={16}
+            user={$profile.user.local_user_view.person}
           />
-          <div>
-            <UserLink
-              avatar
-              avatarSize={16}
-              user={$profile.user.local_user_view.person}
-            />
-          </div>
         </div>
-      {/if}
+      </div>
+    {/if}
+    {#if item.type == 'private_message'}
+      <PrivateMessage message={item.item} />
+    {:else}
       <Comment
-        postId={item.post.id}
-        node={{ children: [], comment_view: item, depth: 1 }}
+        postId={item.item.post.id}
+        node={{ children: [], comment_view: item.item, depth: 1 }}
         replying={false}
         class="!p-0"
       />
-    </div>
-    <div class="flex flex-row ml-auto gap-2">
-      <Button
-        class={read ? '!text-green-500' : ''}
-        size="square-md"
-        {loading}
-        disabled={loading}
-        on:click={() => markAsRead(!read)}
-      >
-        <Icon slot="prefix" src={Check} mini size="16" />
-      </Button>
+    {/if}
+  </div>
+  <div class="flex flex-row ml-auto gap-2 h-8">
+    <Button
+      class={item.read ? '!text-green-500' : ''}
+      size="square-md"
+      {loading}
+      disabled={loading}
+      on:click={() => markAsRead(!item.read)}
+    >
+      <Icon slot="prefix" src={Check} mini size="16" />
+    </Button>
 
-      <Button href="/comment/{item.comment.id}" size="md" class="h-8">
+    {#if item.type == 'private_message'}
+      {#if item.item.creator.id != $profile?.user?.local_user_view.person.id}
+        <Button size="md" on:click={() => (replying = !replying)}>Reply</Button>
+      {/if}
+    {:else}
+      <Button href="/comment/{item.item.comment.id}" size="md" class="h-full">
         Jump
       </Button>
-    </div>
-  {:else}
-    <div class="flex flex-row items-center">
-      <div
-        class="text-sm max-w-[80ch] whitespace-nowrap text-ellipsis
-    overflow-hidden flex flex-row items-center gap-1 {read ? 'opacity-80' : ''}"
-      >
-        <span class="font-bold flex items-center">
-          {#if item.creator.id == $profile?.user?.local_user_view.person.id}
-            You
-          {:else}
-            <UserLink avatar user={item.creator} />
-          {/if}
-        </span>
-        <span>messaged</span>
-        <span class="font-bold flex items-center">
-          {#if item.recipient.id == $profile?.user?.local_user_view.person.id}
-            You
-          {:else}
-            <UserLink avatar user={item.recipient} />
-          {/if}
-        </span>
-      </div>
-    </div>
-    <p class="text-sm py-2">
-      <Markdown source={item.private_message.content} />
-    </p>
-    {#if item.recipient.id == $profile?.user?.local_user_view.person.id}
-      <div class="flex flex-row gap-2">
-        <Button color="ghost" on:click={() => (replying = !replying)}>
-          <Icon mini src={ChatBubbleOvalLeft} width={16} />
-          Reply
-        </Button>
-      </div>
-    {/if}
-    {#if isPrivateMessage(item)}
-      {#if replying}
-        <div class="mt-2 flex flex-col gap-2">
-          <MarkdownEditor placeholder="Message" bind:value={reply} rows={4} />
-          <div class="ml-auto w-24">
-            <Button
-              disabled={loading}
-              {loading}
-              on:click={() => replyToMessage(item)}
-              color="primary"
-              size="sm"
-            >
-              Submit
-            </Button>
-          </div>
-        </div>
-      {/if}
     {/if}
-  {/if}
+  </div>
 </Material>
diff --git a/src/routes/moderation/+page.ts b/src/routes/moderation/+page.ts
index 81b41a90..cd371701 100644
--- a/src/routes/moderation/+page.ts
+++ b/src/routes/moderation/+page.ts
@@ -1,6 +1,11 @@
 import { profile } from '$lib/auth.js'
+import { isAdmin } from '$lib/components/lemmy/moderation/moderation.js'
 import { getClient } from '$lib/lemmy.js'
-import { getItemPublished } from '$lib/lemmy/item.js'
+import {
+  generalizeCommentReport,
+  generalizePostReport,
+  generalizePrivateMessageReport,
+} from '$lib/lemmy/report.js'
 import { get } from 'svelte/store'
 
 type ReportListType = 'unread' | 'all'
@@ -33,18 +38,25 @@ export async function load({ url, fetch }) {
     unresolved_only: type == 'unread',
   }
 
-  const [posts, comments] = await Promise.all([
+  const admin = get(profile)?.user ? isAdmin(get(profile)!.user!) : false
+
+  const [posts, comments, messages] = await Promise.all([
     client.listPostReports({
       ...params,
     }),
     client.listCommentReports({
       ...params,
     }),
+    admin ? client.listPrivateMessageReports({ ...params }) : undefined,
   ])
 
-  const everything = [...posts.post_reports, ...comments.comment_reports].sort(
-    (a, b) => Date.parse(getItemPublished(b)) - Date.parse(getItemPublished(a))
-  )
+  const everything = [
+    ...posts.post_reports.map(generalizePostReport),
+    ...comments.comment_reports.map(generalizeCommentReport),
+    ...(messages?.private_message_reports ?? []).map(
+      generalizePrivateMessageReport
+    ),
+  ].sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
 
   return {
     type: type,
diff --git a/src/routes/moderation/Report.svelte b/src/routes/moderation/Report.svelte
index 233213e2..ac3dde2f 100644
--- a/src/routes/moderation/Report.svelte
+++ b/src/routes/moderation/Report.svelte
@@ -12,14 +12,10 @@
   import { Check, Icon } from 'svelte-hero-icons'
   import { profile } from '$lib/auth.js'
   import { Button } from 'mono-svelte'
+  import type { ReportView } from '$lib/lemmy/report.js'
+  import PrivateMessage from '$lib/components/lemmy/inbox/PrivateMessage.svelte'
 
-  export let item: PostReportView | CommentReportView | PrivateMessageReportView
-
-  $: resolved = isCommentReport(item)
-    ? item.comment_report.resolved
-    : isPostReport(item)
-    ? item.post_report.resolved
-    : false
+  export let item: ReportView
 
   let resolving = false
   async function resolve() {
@@ -27,31 +23,60 @@
     resolving = true
 
     try {
-      if (isCommentReport(item)) {
-        await getClient().resolveCommentReport({
-          auth: $profile.jwt,
-          report_id: item.comment_report.id,
-          resolved: !resolved,
-        })
+      switch (item.type) {
+        case 'comment': {
+          const res = await getClient().resolveCommentReport({
+            auth: $profile.jwt,
+            report_id: item.id,
+            resolved: !item.resolved,
+          })
+
+          item.resolved = res.comment_report_view.comment_report.resolved
+
+          toast({
+            content: `${
+              item.resolved ? 'Resolved' : 'Unresolved'
+            } that report.`,
+            type: 'success',
+          })
 
-        resolved = !resolved
+          break
+        }
+        case 'post': {
+          const res = await getClient().resolvePostReport({
+            auth: $profile.jwt,
+            report_id: item.id,
+            resolved: !item.resolved,
+          })
 
-        toast({
-          content: `${resolved ? 'Resolved' : 'Unresolved'} that report.`,
-          type: 'success',
-        })
-      } else if (isPostReport(item)) {
-        await getClient().resolvePostReport({
-          auth: $profile.jwt,
-          report_id: item.post_report.id,
-          resolved: !resolved,
-        })
+          item.resolved = res.post_report_view.post_report.resolved
+          toast({
+            content: `${
+              item.resolved ? 'Resolved' : 'Unresolved'
+            } that report.`,
+            type: 'success',
+          })
 
-        resolved = !resolved
-        toast({
-          content: `${resolved ? 'Resolved' : 'Unresolved'} that report.`,
-          type: 'success',
-        })
+          break
+        }
+        case 'message': {
+          const res = await getClient().resolvePrivateMessageReport({
+            auth: $profile.jwt,
+            report_id: item.id,
+            resolved: !item.resolved,
+          })
+
+          item.resolved =
+            res.private_message_report_view.private_message_report.resolved
+          toast({
+            content: `${
+              item.resolved ? 'Resolved' : 'Unresolved'
+            } that report.`,
+            type: 'success',
+          })
+
+          break
+        }
       }
 
       const reports = await getClient().getReportCount({
@@ -73,66 +98,39 @@
   }
 </script>
 
-{#if isCommentReport(item)}
-  <CommentItem
-    comment={{
-      ...item,
-      subscribed: 'NotSubscribed',
-      creator_blocked: false,
-      saved: false,
-      creator: item.comment_creator,
+{#if item.type == 'comment'}
+  <CommentItem comment={item.item} />
+{:else if item.type == 'post'}
+  <Post post={item.item} />
+{:else if item.type == 'message'}
+  <PrivateMessage
+    message={{
+      creator: item.reportee,
+      private_message: item.item,
+      recipient: item.creator,
     }}
   />
-  <div class="flex flex-row gap-4 items-center">
-    <div>
-      <span class="text-xs font-bold dark:text-zinc-400 text-slate-600">
-        Reason
-      </span>
-      <p>
-        {item.comment_report.reason}
-      </p>
-    </div>
-    <Button
-      on:click={resolve}
-      class="w-8 h-8 !p-1 ml-auto {resolved ? '!text-green-500' : ''}"
-      aria-label="Resolve"
-      title="Resolve"
-      loading={resolving}
-      disabled={resolving}
-    >
-      <Icon src={Check} mini size="16" slot="prefix" />
-    </Button>
-  </div>
-{:else if isPostReport(item)}
-  <Post
-    post={{
-      ...item,
-      saved: false,
-      subscribed: 'NotSubscribed',
-      unread_comments: 0,
-      read: false,
-      creator_blocked: false,
-      creator: item.post_creator,
-    }}
-  />
-  <div class="flex flex-row gap-4 items-center">
-    <div>
-      <span class="text-xs font-bold dark:text-zinc-400 text-slate-600">
-        Reason
-      </span>
-      <p>
-        {item.post_report.reason}
-      </p>
-    </div>
-    <Button
-      on:click={resolve}
-      class="w-8 h-8 !p-1 ml-auto {resolved ? '!text-green-500' : ''}"
-      aria-label="Resolve"
-      title="Resolve"
-      loading={resolving}
-      disabled={resolving}
-    >
-      <Icon src={Check} mini size="16" slot="prefix" />
-    </Button>
-  </div>
 {/if}
+
+<div class="flex flex-row gap-4 items-center">
+  <div>
+    <span class="text-xs font-bold dark:text-zinc-400 text-slate-600">
+      Reason
+    </span>
+    <p>
+      {item.reason}
+    </p>
+  </div>
+  <Button
+    on:click={resolve}
+    class="w-8 h-8 !p-1 ml-auto {item.resolved
+      ? '!text-green-600 dark:!text-green-400'
+      : ''}"
+    aria-label="Resolve"
+    title="Resolve"
+    loading={resolving}
+    disabled={resolving}
+  >
+    <Icon src={Check} mini size="16" slot="prefix" />
+  </Button>
+</div>
diff --git a/src/routes/u/[name]/+page.svelte b/src/routes/u/[name]/+page.svelte
index 28dc9579..3a83d818 100644
--- a/src/routes/u/[name]/+page.svelte
+++ b/src/routes/u/[name]/+page.svelte
@@ -35,6 +35,7 @@
   import { Button, Modal, Select } from 'mono-svelte'
   import MarkdownEditor from '$lib/components/markdown/MarkdownEditor.svelte'
   import { publishedToDate } from '$lib/components/util/date.js'
+  import PrivateMessageModal from '$lib/components/lemmy/modal/PrivateMessageModal.svelte'
 
   export let data
 
@@ -77,37 +78,7 @@
     blocking = false
   }
 
-  let loadingMessage = false
   let messaging = false
-  let message = ''
-
-  async function sendMessage() {
-    if (!$profile?.jwt || message == '') return
-
-    loadingMessage = true
-
-    try {
-      await getClient().createPrivateMessage({
-        auth: $profile.jwt,
-        content: message,
-        recipient_id: data.person_view.person.id,
-      })
-
-      toast({
-        content: 'Successfully sent that person a message.',
-        type: 'success',
-      })
-
-      messaging = false
-    } catch (err) {
-      toast({
-        content: err as any,
-        type: 'error',
-      })
-    }
-
-    loadingMessage = false
-  }
 </script>
 
 <svelte:head>
@@ -115,29 +86,10 @@
 </svelte:head>
 
 {#if $profile?.user}
-  <Modal bind:open={messaging}>
-    <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={data.person_view.person} /> a message
-      </p>
-      <MarkdownEditor
-        bind:value={message}
-        label="Message"
-        placeholder="your hair looks nice today"
-        rows={4}
-      />
-      <Button
-        color="primary"
-        size="lg"
-        submit
-        loading={loadingMessage}
-        disabled={loadingMessage}
-      >
-        Send
-      </Button>
-    </form>
-  </Modal>
+  <PrivateMessageModal
+    bind:user={data.person_view.person}
+    bind:open={messaging}
+  />
 {/if}
 
 <div class="flex flex-col-reverse xl:flex-row gap-4 max-w-full w-full">