feat: link to user page from account page

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

@@ -40,7 +40,7 @@ export default async function User({
   return (
     <div className="flex flex-col gap-2">
       <NavigationToolbar>Inspecting Account</NavigationToolbar>
-      {user && <UserCard user={user} subtitle={account.email} />}
+      {user && <UserCard user={user} subtitle={account.email} withLink />}
       <AccountActions account={account} user={user as User} />
       <EmailClassificationCard email={account.email} />
 

components/cards/UserCard.tsx

@@ -3,8 +3,10 @@ import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Badge } from "../ui/badge";
 import { AUTUMN_URL } from "@/lib/constants";
+import Link from "next/link";
+import { ExternalLinkIcon } from "lucide-react";
 
-export function UserCard({ user, subtitle }: { user: User; subtitle: string }) {
+export function UserCard({ user, subtitle, withLink }: { user: User; subtitle: string, withLink?: boolean }) {
   return (
     <Card
       className="bg-no-repeat bg-right text-left"
@@ -28,7 +30,16 @@ export function UserCard({ user, subtitle }: { user: User; subtitle: string }) {
             </AvatarFallback>
           </Avatar>
           {user.bot && <Badge className="align-middle">Bot</Badge>}{" "}
-          {user.username}#{user.discriminator} {user.display_name}
+          <div className="flex gap-2">
+            {user.username}#{user.discriminator} {user.display_name}
+            {
+              withLink
+                ? <Link href={`/panel/inspect/user/${user._id}`}>
+                  <ExternalLinkIcon className="text-gray-500 hover:text-gray-700 transition-all" />
+                </Link>
+                : <></>
+            }
+            </div>
         </CardTitle>
         <CardDescription>{subtitle}</CardDescription>
       </CardHeader>