feat: edit report notes; unify card links

app/panel/inspect/message/[id]/page.tsx

@@ -22,7 +22,7 @@ export default async function Message({
     <div className="flex flex-col gap-2">
       <NavigationToolbar>Inspecting Message</NavigationToolbar>
 
-      <Card className="shadow-none">
+      <Card>
         <CardHeader>
           <p>{message.content}</p>
         </CardHeader>

app/panel/reports/[id]/page.tsx

@@ -3,25 +3,10 @@ import { MessageContextCard } from "@/components/cards/MessageContextCard";
 import { ReportCard } from "@/components/cards/ReportCard";
 import { ServerCard } from "@/components/cards/ServerCard";
 import { UserCard } from "@/components/cards/UserCard";
+import { CardLink } from "@/components/common/CardLink";
 import { NavigationToolbar } from "@/components/common/NavigationToolbar";
-import { Badge } from "@/components/ui/badge";
+import { ReportActions } from "@/components/inspector/ReportActions";
-import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
 import {
   fetchReportById,
   fetchReports,
@@ -56,51 +41,8 @@ export default async function Reports({ params }: { params: { id: string } }) {
   return (
     <div className="flex flex-col gap-2">
       <NavigationToolbar>Viewing Report</NavigationToolbar>
-
+      <ReportCard report={report} />
-      <Card className="shadow-none">
+      <ReportActions report={report} />
-        <CardHeader>
-          <CardTitle className="overflow-ellipsis whitespace-nowrap overflow-x-clip flex gap-2 items-center">
-            {report.content.report_reason.includes("Illegal") && (
-              <Badge variant="destructive">Urgent</Badge>
-            )}{" "}
-            {report.additional_context || "No reason specified"}
-          </CardTitle>
-          <CardDescription>
-            {report._id.toString().substring(20, 26)} &middot;{" "}
-            {report.content.report_reason} &middot; {report.content.type}
-          </CardDescription>
-        </CardHeader>
-      </Card>
-
-      <Textarea
-        placeholder="Enter notes here..."
-        className="!min-h-0 !h-[76px]"
-      />
-
-      <div className="flex gap-2">
-        <Button className="flex-1 bg-green-400 hover:bg-green-300">
-          Resolve
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button className="flex-1 bg-red-400 hover:bg-red-300">
-              Reject
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem>Custom Reason</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel>Presets</DropdownMenuLabel>
-            <DropdownMenuItem>Invalid</DropdownMenuItem>
-            <DropdownMenuItem>False or Spam</DropdownMenuItem>
-            <DropdownMenuItem>Duplicate</DropdownMenuItem>
-            <DropdownMenuItem>Not Enough Evidence</DropdownMenuItem>
-            <DropdownMenuItem>Request Clarification</DropdownMenuItem>
-            <DropdownMenuItem>Acknowledge Only</DropdownMenuItem>
-            <DropdownMenuItem>Ignore</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
 
       <Link href={`/panel/inspect/user/${author!._id}`}>
         <UserCard user={author!} subtitle="Report Author" />
@@ -132,7 +74,12 @@ export default async function Reports({ params }: { params: { id: string } }) {
               <div className="flex-1 min-w-0">
                 <h2 className="text-md text-center pb-2">Other Reports</h2>
                 {relatedReports[index].map((relatedReport) => (
-                  <ReportCard key={relatedReport._id} report={relatedReport} />
+                  <CardLink
+                    key={relatedReport._id}
+                    href={`/panel/reports/${relatedReport._id}`}
+                  >
+                    <ReportCard report={relatedReport} />
+                  </CardLink>
                 ))}
               </div>
             ) : undefined}

app/panel/reports/page.tsx

@@ -1,4 +1,5 @@
 import { ReportCard } from "@/components/cards/ReportCard";
+import { CardLink } from "@/components/common/CardLink";
 import { Input } from "@/components/ui/input";
 import { fetchReports } from "@/lib/db";
 
@@ -11,7 +12,9 @@ export default async function Reports() {
     <div className="flex flex-col gap-2">
       <Input placeholder="Search for reports..." disabled />
       {reports.map((report) => (
-        <ReportCard key={report._id} report={report} />
+        <CardLink key={report._id} href={`/panel/reports/${report._id}`}>
+          <ReportCard report={report} />
+        </CardLink>
       ))}
     </div>
   );

components/cards/ChannelCard.tsx

@@ -1,7 +1,6 @@
 import { Channel } from "revolt-api";
 import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import Link from "next/link";
 import { AUTUMN_URL } from "@/lib/constants";
 
 export function ChannelCard({
@@ -18,14 +17,12 @@ export function ChannelCard({
     channel.channel_type === "DirectMessage" ? "Direct Message" : channel.name;
 
   return (
-    <Card className="shadow-none">
+    <Card>
       <CardHeader>
         <CardTitle>
           <Avatar>
             {channel.channel_type !== "DirectMessage" && (
-              <AvatarImage
+              <AvatarImage src={`${AUTUMN_URL}/icons/${channel.icon?._id}`} />
-                src={`${AUTUMN_URL}/icons/${channel.icon?._id}`}
-              />
             )}
             <AvatarFallback>
               {name

components/cards/JsonCard.tsx

@@ -14,7 +14,7 @@ export function JsonCard({ obj }: { obj: any }) {
   const [shown, setShown] = useState(false);
 
   return (
-    <Card className="shadow-none">
+    <Card>
       <CardHeader>
         <CardTitle>Document</CardTitle>
         <CardDescription>Raw JSON representation</CardDescription>

components/cards/ReportCard.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { Report } from "revolt-api";
 import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
 import { Badge } from "../ui/badge";
@@ -10,28 +9,26 @@ dayjs.extend(relativeTime);
 
 export function ReportCard({ report }: { report: Report }) {
   return (
-    <Link href={`/panel/reports/${report._id}`}>
+    <Card>
-      <Card className="transition-all hover:-translate-y-1 hover:shadow-md">
+      <CardHeader>
-        <CardHeader>
+        <CardTitle
-          <CardTitle
+          className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
-            className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
+            report.status !== "Created" ? "text-gray-500" : ""
-              report.status !== "Created" ? "text-gray-500" : ""
+          }`}
-            }`}
+        >
-          >
+          {report.content.report_reason.includes("Illegal") && (
-            {report.content.report_reason.includes("Illegal") && (
+            <Badge className="align-middle" variant="destructive">
-              <Badge className="align-middle" variant="destructive">
+              Urgent
-                Urgent
+            </Badge>
-              </Badge>
+          )}{" "}
-            )}{" "}
+          {report.additional_context || "No reason specified"}
-            {report.additional_context || "No reason specified"}
+        </CardTitle>
-          </CardTitle>
+        <CardDescription>
-          <CardDescription>
+          {report._id.toString().substring(20, 26)} &middot;{" "}
-            {report._id.toString().substring(20, 26)} &middot;{" "}
+          {report.content.report_reason} &middot; {report.content.type} &middot;{" "}
-            {report.content.report_reason} &middot; {report.content.type}{" "}
+          {dayjs(decodeTime(report._id)).fromNow()}
-            &middot; {dayjs(decodeTime(report._id)).fromNow()}
+        </CardDescription>
-          </CardDescription>
+      </CardHeader>
-        </CardHeader>
+    </Card>
-      </Card>
-    </Link>
   );
 }

components/cards/ServerCard.tsx

@@ -1,7 +1,6 @@
 import { Server } from "revolt-api";
 import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import Link from "next/link";
 import { AUTUMN_URL } from "@/lib/constants";
 
 export function ServerCard({
@@ -12,13 +11,11 @@ export function ServerCard({
   subtitle: string;
 }) {
   return (
-    <Card className="shadow-none">
+    <Card>
       <CardHeader>
         <CardTitle>
           <Avatar>
-            <AvatarImage
+            <AvatarImage src={`${AUTUMN_URL}/icons/${server.icon?._id}`} />
-              src={`${AUTUMN_URL}/icons/${server.icon?._id}`}
-            />
             <AvatarFallback>
               {server.name
                 .split(" ")

components/cards/UserCard.tsx

@@ -7,7 +7,7 @@ import { AUTUMN_URL } from "@/lib/constants";
 export function UserCard({ user, subtitle }: { user: User; subtitle: string }) {
   return (
     <Card
-      className="shadow-none bg-no-repeat bg-right text-left"
+      className="bg-no-repeat bg-right text-left"
       style={{
         backgroundImage: user.profile?.background
           ? `linear-gradient(to right, white, rgba(255,0,0,0)), url('${AUTUMN_URL}/backgrounds/${user.profile.background._id}')`
@@ -18,9 +18,7 @@ export function UserCard({ user, subtitle }: { user: User; subtitle: string }) {
       <CardHeader>
         <CardTitle className="overflow-hidden overflow-ellipsis whitespace-nowrap">
           <Avatar>
-            <AvatarImage
+            <AvatarImage src={`${AUTUMN_URL}/avatars/${user.avatar?._id}`} />
-              src={`${AUTUMN_URL}/avatars/${user.avatar?._id}`}
-            />
             <AvatarFallback className="overflow-hidden overflow-ellipsis whitespace-nowrap">
               {(user.display_name ?? user.username)
                 .split(" ")

components/common/CardLink.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export function CardLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className="transition-all hover:-translate-y-1 hover:shadow-md rounded-xl"
+    >
+      {children}
+    </Link>
+  );
+}

components/inspector/RelevantReports.tsx

@@ -3,6 +3,7 @@
 import { Report } from "revolt-api";
 import { ListCompactor } from "../common/ListCompactor";
 import { ReportCard } from "../cards/ReportCard";
+import { CardLink } from "../common/CardLink";
 
 export function RelevantReports({
   byUser,
@@ -17,14 +18,22 @@ export function RelevantReports({
         <h2 className="text-md text-center pb-2">Created Reports</h2>
         <ListCompactor
           data={byUser}
-          Component={({ item }) => <ReportCard report={item} />}
+          Component={({ item }) => (
+            <CardLink href={`/panel/reports/${item._id}`}>
+              <ReportCard report={item} />
+            </CardLink>
+          )}
         />
       </div>
       <div className="flex-1 min-w-0 flex flex-col gap-2">
         <h2 className="text-md text-center pb-2">Reports Against User</h2>
         <ListCompactor
           data={forUser}
-          Component={({ item }) => <ReportCard report={item} />}
+          Component={({ item }) => (
+            <CardLink href={`/panel/reports/${item._id}`}>
+              <ReportCard report={item} />
+            </CardLink>
+          )}
         />
       </div>
     </div>

components/inspector/ReportActions.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Report } from "revolt-api";
+import { Textarea } from "../ui/textarea";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { useRef, useState } from "react";
+import { useToast } from "../ui/use-toast";
+import { updateReportNotes } from "@/lib/actions";
+
+export function ReportActions({ report }: { report: Report }) {
+  const { toast } = useToast();
+  const [reportDraft, setDraft] = useState(report);
+
+  return (
+    <>
+      <Textarea
+        placeholder="Enter notes here... (save on unfocus)"
+        className="!min-h-0 !h-[76px]"
+        defaultValue={report.notes}
+        onBlur={async (e) => {
+          const notes = e.currentTarget.value;
+          if (notes === reportDraft.notes ?? "") return;
+
+          try {
+            await updateReportNotes(report._id, notes);
+            setDraft((report) => ({ ...report, notes }));
+            toast({
+              title: "Updated report notes",
+            });
+          } catch (err) {
+            toast({
+              title: "Failed to update report notes",
+              description: String(err),
+              variant: "destructive",
+            });
+          }
+        }}
+      />
+
+      <div className="flex gap-2">
+        {report.status === "Created" ? (
+          <>
+            <Button className="flex-1 bg-green-400 hover:bg-green-300">
+              Resolve
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="flex-1 bg-red-400 hover:bg-red-300">
+                  Reject
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>Custom Reason</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel>Presets</DropdownMenuLabel>
+                <DropdownMenuItem>Invalid</DropdownMenuItem>
+                <DropdownMenuItem>False or Spam</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuItem>Not Enough Evidence</DropdownMenuItem>
+                <DropdownMenuItem>Request Clarification</DropdownMenuItem>
+                <DropdownMenuItem>Acknowledge Only</DropdownMenuItem>
+                <DropdownMenuItem>Ignore</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        ) : (
+          <>
+            <Button className="flex-1">Re-open</Button>
+            <Button className="flex-1">Send resolution notification</Button>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -8,14 +8,11 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
+    className={cn("rounded-lg border bg-card text-card-foreground", className)}
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
     {...props}
   />
-))
+));
-Card.displayName = "Card"
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +23,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
+));
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +38,8 @@ const CardTitle = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
+));
-CardContent.displayName = "CardContent"
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn(" flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
+));
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

lib/actions.ts

@@ -20,6 +20,7 @@ import {
   File,
   Member,
   Message,
+  Report,
   Server,
   SessionInfo,
   User,
@@ -40,6 +41,20 @@ export async function sendAlert(userId: string, content: string) {
   });
 }
 
+export async function updateReportNotes(reportId: string, notes: string) {
+  return await mongo()
+    .db("revolt")
+    .collection<Report>("safety_reports")
+    .updateOne(
+      { _id: reportId },
+      {
+        $set: {
+          notes,
+        },
+      }
+    );
+}
+
 export async function disableAccount(userId: string) {
   await mongo()
     .db("revolt")

package.json

@@ -28,6 +28,7 @@
     "dayjs": "^1.11.9",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.263.0",
     "mongodb": "^5.7.0",
     "next": "13.4.12",
@@ -45,6 +46,7 @@
     "ulid": "^2.3.0"
   },
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.7",
     "revolt.js": "7.0.0-beta.9"
   }
 }

pnpm-lock.yaml

@@ -58,6 +58,9 @@ dependencies:
   eslint-config-next:
     specifier: 13.4.12
     version: 13.4.12(eslint@8.45.0)(typescript@5.1.6)
+  lodash.debounce:
+    specifier: ^4.0.8
+    version: 4.0.8
   lucide-react:
     specifier: ^0.263.0
     version: 0.263.0(react@18.2.0)
@@ -105,6 +108,9 @@ dependencies:
     version: 2.3.0
 
 devDependencies:
+  '@types/lodash.debounce':
+    specifier: ^4.0.7
+    version: 4.0.7
   revolt.js:
     specifier: 7.0.0-beta.9
     version: 7.0.0-beta.9(typescript@5.1.6)
@@ -1352,6 +1358,16 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: false
 
+  /@types/lodash.debounce@4.0.7:
+    resolution: {integrity: sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==}
+    dependencies:
+      '@types/lodash': 4.14.196
+    dev: true
+
+  /@types/lodash@4.14.196:
+    resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==}
+    dev: true
+
   /@types/node@20.4.4:
     resolution: {integrity: sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==}
     dev: false
@@ -2947,6 +2963,10 @@ packages:
       p-locate: 5.0.0
     dev: false
 
+  /lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: false
+
   /lodash.defaultsdeep@4.6.1:
     resolution: {integrity: sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==}