feat: edit report notes; unify card links

2023-07-28 14:29:46 +01:00 · 2023-07-28 14:29:46 +01:00 · 3a246a7052
parent 9f5de75d26
commit 3a246a7052
15 changed files with 216 additions and 125 deletions
--- a/app/panel/inspect/message/[id]/page.tsx
+++ b/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>
--- a/app/panel/reports/[id]/page.tsx
+++ b/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 { 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 { ReportActions } from "@/components/inspector/ReportActions";
 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>
-
-      <Card className="shadow-none">
-        <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>
+      <ReportCard report={report} />
+      <ReportActions report={report} />

      <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}
--- a/app/panel/reports/page.tsx
+++ b/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>
  );
--- a/components/cards/ChannelCard.tsx
+++ b/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
-                src={`${AUTUMN_URL}/icons/${channel.icon?._id}`}
-              />
+              <AvatarImage src={`${AUTUMN_URL}/icons/${channel.icon?._id}`} />
            )}
            <AvatarFallback>
              {name
--- a/components/cards/JsonCard.tsx
+++ b/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>
--- a/components/cards/ReportCard.tsx
+++ b/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 className="transition-all hover:-translate-y-1 hover:shadow-md">
-        <CardHeader>
-          <CardTitle
-            className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
-              report.status !== "Created" ? "text-gray-500" : ""
-            }`}
-          >
-            {report.content.report_reason.includes("Illegal") && (
-              <Badge className="align-middle" 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}{" "}
-            &middot; {dayjs(decodeTime(report._id)).fromNow()}
-          </CardDescription>
-        </CardHeader>
-      </Card>
-    </Link>
+    <Card>
+      <CardHeader>
+        <CardTitle
+          className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
+            report.status !== "Created" ? "text-gray-500" : ""
+          }`}
+        >
+          {report.content.report_reason.includes("Illegal") && (
+            <Badge className="align-middle" 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} &middot;{" "}
+          {dayjs(decodeTime(report._id)).fromNow()}
+        </CardDescription>
+      </CardHeader>
+    </Card>
  );
 }
--- a/components/cards/ServerCard.tsx
+++ b/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
-              src={`${AUTUMN_URL}/icons/${server.icon?._id}`}
-            />
+            <AvatarImage src={`${AUTUMN_URL}/icons/${server.icon?._id}`} />
            <AvatarFallback>
              {server.name
                .split(" ")
--- a/components/cards/UserCard.tsx
+++ b/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
-              src={`${AUTUMN_URL}/avatars/${user.avatar?._id}`}
-            />
+            <AvatarImage src={`${AUTUMN_URL}/avatars/${user.avatar?._id}`} />
            <AvatarFallback className="overflow-hidden overflow-ellipsis whitespace-nowrap">
              {(user.display_name ?? user.username)
                .split(" ")
--- a/components/common/CardLink.tsx
+++ b/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>
+  );
+}
--- a/components/inspector/RelevantReports.tsx
+++ b/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>
--- a/components/inspector/ReportActions.tsx
+++ b/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>
+    </>
+  );
+}
--- a/components/ui/card.tsx
+++ b/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(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
+    className={cn("rounded-lg border bg-card text-card-foreground", 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,
+};
--- a/lib/actions.ts
+++ b/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")
--- a/package.json
+++ b/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"
  }
 }
--- a/pnpm-lock.yaml
+++ b/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==}