From b80ae05820fcb67ba0581408b01217babb300b9b Mon Sep 17 00:00:00 2001
From: Lea <lea@janderedev.xyz>
Date: Sun, 3 Sep 2023 15:04:15 +0200
Subject: [PATCH] feat: user stream UI

---
 app/panel/stream/page.tsx                  | 46 +++++++++++
 components/common/NavigationLinks.tsx      |  7 ++
 components/pages/stream/UserReviewCard.tsx | 96 ++++++++++++++++++++++
 3 files changed, 149 insertions(+)
 create mode 100644 app/panel/stream/page.tsx
 create mode 100644 components/pages/stream/UserReviewCard.tsx

diff --git a/app/panel/stream/page.tsx b/app/panel/stream/page.tsx
new file mode 100644
index 0000000..628aa15
--- /dev/null
+++ b/app/panel/stream/page.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { UserReviewCard } from "@/components/pages/stream/UserReviewCard";
+import { Card, CardDescription } from "@/components/ui/card";
+import { Account, fetchAccountById, fetchUserById } from "@/lib/db";
+import { Circle } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { User } from "revolt-api";
+
+export default function UserStream() {
+  const [connectionState, setConnectionState] = useState<"Connecting"|"Connected"|"Disconnected">("Connecting");
+  const [user, setUser] = useState<User | null>(null);
+  const [account, setAccount] = useState<Account | null>(null);
+
+  const connectionColour = useMemo(() => {
+    switch(connectionState) {
+      case "Connected": return "#55aa7f";
+      case "Connecting": return "#fb923c";
+      case "Disconnected": return "#ef4444";
+    }
+  }, [connectionState]);
+
+  useEffect(() => {
+    fetchUserById("01H6BZB5F4B6GTKSJCV6TRGZ22").then(setUser);
+    fetchAccountById("01H6BZB5F4B6GTKSJCV6TRGZ22").then(setAccount);
+
+    setTimeout(() => setConnectionState("Connected"), 1000);
+  }, []);
+
+  return account ? (
+    <div className="flex flex-col gap-2">
+      <Card className="flex flex-row justify-end pr-2 h-[40px]">
+        <CardDescription className="flex flex-row gap-2 items-center">
+          <span className="flex flex-row items-center gap-1">
+            {connectionState}
+            <Circle color={connectionColour} fill={connectionColour} />
+          </span>
+        </CardDescription>
+      </Card>
+      <div className="flex flex-col gap-2">
+        <UserReviewCard user={user ?? undefined} account={account} />
+        <UserReviewCard user={undefined} account={account} />
+      </div>
+    </div>
+  ) : null;
+}
diff --git a/components/common/NavigationLinks.tsx b/components/common/NavigationLinks.tsx
index 1a147c9..53a47c3 100644
--- a/components/common/NavigationLinks.tsx
+++ b/components/common/NavigationLinks.tsx
@@ -11,6 +11,7 @@ import {
   Siren,
   Sparkles,
   TrendingUp,
+  ClipboardList,
 } from "lucide-react";
 
 export function NavigationLinks() {
@@ -40,6 +41,12 @@ export function NavigationLinks() {
       >
         <Search className="h-4 w-4" />
       </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/stream"
+      >
+        <ClipboardList className="h-4 w-4" />
+      </Link>
       <Link
         className={buttonVariants({ variant: "outline", size: "icon" })}
         href="/panel/shield"
diff --git a/components/pages/stream/UserReviewCard.tsx b/components/pages/stream/UserReviewCard.tsx
new file mode 100644
index 0000000..d1a0c97
--- /dev/null
+++ b/components/pages/stream/UserReviewCard.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { toast } from "@/components/ui/use-toast";
+import { Account } from "@/lib/db";
+import { DropdownMenu } from "@radix-ui/react-dropdown-menu";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { MoreHorizontal } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { User } from "revolt-api";
+import { decodeTime } from "ulid";
+
+dayjs.extend(relativeTime);
+
+export function UserReviewCard({ user, account }: { user?: User, account: Account }) {
+  const router = useRouter();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  return <Card className="flex">
+    <CardHeader className="flex-1">
+      {
+        user
+          ? <CardTitle>{user.username}#{user.discriminator}</CardTitle>
+          : <CardTitle className="text-gray-500">Pending onboarding</CardTitle>
+      }
+      <CardDescription>{account.email} &middot; {dayjs(decodeTime(account._id)).fromNow()}</CardDescription>
+    </CardHeader>
+    <CardContent className="flex items-center py-0 gap-2">
+      <Button className="bg-orange-400 hover:bg-orange-300">Suspend</Button>
+      <Button variant="destructive">Ban</Button>
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="px-2"><MoreHorizontal /></Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="flex flex-col">
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setDropdownOpen(false);
+              navigator.clipboard.writeText(account._id);
+              toast({
+                title: "Copied ID",
+                description: account._id,
+              });
+            }}
+          >
+            Copy ID
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setDropdownOpen(false);
+              navigator.clipboard.writeText(account.email);
+              toast({
+                title: "Copied email",
+                description: account.email,
+              });
+            }}
+          >
+            Copy email
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setDropdownOpen(false);
+              router.push(`/panel/inspect/account/${account._id}`);
+            }}
+          >
+            Inspect account
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setDropdownOpen(false);
+              router.push(`/panel/inspect/user/${user?._id}`);
+            }}
+            disabled={!user}
+          >
+            Inspect user
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => alert("todo")}
+            disabled={true}
+          >
+            Block email provider
+          </Button>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </CardContent>
+  </Card>;
+}