feat: various inspector components

components/inspector/RelevantModerationNotices.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { AccountStrike, Message } from "revolt-api";
+import { ListCompactor } from "../common/ListCompactor";
+import { CompactMessage } from "../cards/CompactMessage";
+
+export function RelevantModerationNotices({
+  strikes,
+  notices,
+}: {
+  strikes: AccountStrike[];
+  notices: Message[];
+}) {
+  return (
+    <div className="flex gap-2">
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <h2 className="text-md text-center pb-2">Strikes</h2>
+        <ListCompactor data={strikes} Component={({ item }) => null} />
+      </div>
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <h2 className="text-md text-center pb-2">Alerts</h2>
+        <ListCompactor
+          data={notices}
+          Component={({ item }) => <CompactMessage message={item} hideUser />}
+        />
+      </div>
+    </div>
+  );
+}

components/inspector/RelevantObjects.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Server, User } from "revolt-api";
+import { ListCompactor } from "../common/ListCompactor";
+import { UserCard } from "../cards/UserCard";
+import { ServerCard } from "../cards/ServerCard";
+import Link from "next/link";
+
+export function RelevantObjects({
+  users,
+  servers,
+  userId,
+}: {
+  users: User[];
+  servers: Server[];
+  userId: string;
+}) {
+  return (
+    <div className="flex gap-2">
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <h2 className="text-md text-center pb-2">Bots & Friends</h2>
+        <ListCompactor
+          data={users}
+          Component={({ item }) => (
+            <Link href={`/panel/inspect/user/${item._id}`}>
+              <UserCard user={item} subtitle="" />
+            </Link>
+          )}
+        />
+      </div>
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <h2 className="text-md text-center pb-2">Servers</h2>
+        <ListCompactor
+          data={servers}
+          Component={({ item }) => (
+            <Link href={`/panel/inspect/server/${item._id}`}>
+              <ServerCard
+                server={item}
+                subtitle={userId === item.owner ? "Server Owner" : ""}
+              />
+            </Link>
+          )}
+        />
+      </div>
+    </div>
+  );
+}

components/inspector/RelevantReports.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Report } from "revolt-api";
+import { ListCompactor } from "../common/ListCompactor";
+import { ReportCard } from "../cards/ReportCard";
+
+export function RelevantReports({
+  byUser,
+  forUser,
+}: {
+  byUser: Report[];
+  forUser: Report[];
+}) {
+  return (
+    <div className="flex gap-2">
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <h2 className="text-md text-center pb-2">Created Reports</h2>
+        <ListCompactor
+          data={byUser}
+          Component={({ item }) => <ReportCard report={item} />}
+        />
+      </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} />}
+        />
+      </div>
+    </div>
+  );
+}

components/inspector/UserActions.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import Link from "next/link";
+import { Button, buttonVariants } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { Input } from "../ui/input";
+import { sendAlert } from "@/lib/actions";
+import { useRef } from "react";
+
+export function UserActions({ id }: { id: string }) {
+  const alertMessage = useRef("");
+
+  return (
+    <div className="flex gap-2">
+      <Link
+        className={`flex-1 ${buttonVariants({ variant: "secondary" })}`}
+        href={`/panel/inspect/account/${id}`}
+      >
+        Account
+      </Link>
+      <Button className="flex-1 bg-orange-400 hover:bg-orange-300">
+        Suspend
+      </Button>
+      <Button className="flex-1" variant="destructive">
+        Ban
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="flex-1">
+            More Options
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <AlertDialog>
+            <AlertDialogTrigger className="w-full">
+              <DropdownMenuItem
+                onClick={() => {
+                  throw "Cancel immediate propagation.";
+                }}
+              >
+                Send Alert
+              </DropdownMenuItem>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Send Alert</AlertDialogTitle>
+                <AlertDialogDescription className="flex flex-col gap-2">
+                  <span>
+                    This will send a message from the Platform Moderation
+                    account.
+                  </span>
+                  <Input
+                    placeholder="Enter a message..."
+                    name="message"
+                    onChange={(e) =>
+                      (alertMessage.current = e.currentTarget.value)
+                    }
+                  />
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => {
+                    if (!alertMessage.current) return;
+                    sendAlert(id, alertMessage.current);
+                    alertMessage.current = "";
+                  }}
+                >
+                  Send
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <DropdownMenuItem>Inspect Messages</DropdownMenuItem>
+          <DropdownMenuItem>Wipe Messages</DropdownMenuItem>
+          <DropdownMenuItem>Clear Friends</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}