feat: flesh out app

app/not-found.tsx

@@ -1,4 +1,5 @@
 import { NavigateBack } from "@/components/common/NavigateBack";
+import { NavigationLinks } from "@/components/common/NavigationLinks";
 import Image from "next/image";
 
 export default function NotFound() {
@@ -11,6 +12,9 @@ export default function NotFound() {
         alt="pinkie pie: http error 404 page not found"
       />
       <NavigateBack />
+      <div className="gap-2 flex">
+        <NavigationLinks />
+      </div>
     </div>
   );
 }

app/panel/layout.tsx

@@ -1,15 +1,6 @@
 import Image from "next/image";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { buttonVariants } from "@/components/ui/button";
-import {
-  Globe2,
-  Home,
-  ScrollText,
-  Search,
-  Siren,
-  Sparkles,
-} from "lucide-react";
-import Link from "next/link";
+import { NavigationLinks } from "@/components/common/NavigationLinks";
 
 export default function PanelLayout({
   children,
@@ -36,48 +27,7 @@ export default function PanelLayout({
       </div>
       <div className="flex">
         <div className="pt-2 pl-4 pr-0 gap-2 flex flex-col">
-          <Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel"
-          >
-            <Home className="h-4 w-4" />
-          </Link>
-          {/*<Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel/grafana"
-          >
-            <TrendingUp className="h-4 w-4" />
-          </Link>*/}
-          <Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel/search"
-          >
-            <Search className="h-4 w-4" />
-          </Link>
-          <Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel/reports"
-          >
-            <Siren className="h-4 w-4" />
-          </Link>
-          <Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel/discover"
-          >
-            <Globe2 className="h-4 w-4" />
-          </Link>
-          <Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel/audit"
-          >
-            <ScrollText className="h-4 w-4" />
-          </Link>
-          <Link
-            className={buttonVariants({ variant: "outline", size: "icon" })}
-            href="/panel/sparkle"
-          >
-            <Sparkles className="h-4 w-4" />
-          </Link>
+          <NavigationLinks />
         </div>
         <div className="flex-grow overflow-hidden p-2 pr-4">{children}</div>
       </div>

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

@@ -1,22 +1,33 @@
+import { JsonCard } from "@/components/cards/JsonCard";
 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 { NavigationToolbar } from "@/components/common/NavigationToolbar";
 import { Badge } from "@/components/ui/badge";
-import { buttonVariants } from "@/components/ui/button";
+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,
   fetchSnapshotsByReport,
   fetchUserById,
 } from "@/lib/db";
-import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Fragment } from "react";
@@ -44,12 +55,7 @@ export default async function Reports({ params }: { params: { id: string } }) {
 
   return (
     <div className="flex flex-col gap-2">
-      <Link
-        className={buttonVariants({ variant: "outline", size: "icon" })}
-        href="/panel/reports"
-      >
-        <ArrowLeft className="h-4 w-4" />
-      </Link>
+      <NavigationToolbar>Viewing Report</NavigationToolbar>
 
       <Card className="shadow-none">
         <CardHeader>
@@ -65,7 +71,40 @@ export default async function Reports({ params }: { params: { id: string } }) {
           </CardDescription>
         </CardHeader>
       </Card>
-      <UserCard user={author!} subtitle="Report Author" />
+
+      <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" />
+      </Link>
 
       {snapshots.map((snapshot, index) => (
         <Fragment key={snapshot._id}>
@@ -78,9 +117,19 @@ export default async function Reports({ params }: { params: { id: string } }) {
               {snapshot._type === "Message" && (
                 <MessageContextCard snapshot={snapshot} />
               )}
+              {snapshot._type === "User" && (
+                <Link href={`/panel/inspect/user/${snapshot!._id}`}>
+                  <UserCard user={snapshot} subtitle="Reported User" />
+                </Link>
+              )}
+              {snapshot._type === "Server" && (
+                <Link href={`/panel/inspect/server/${snapshot!._id}`}>
+                  <ServerCard server={snapshot} subtitle="Reported Server" />
+                </Link>
+              )}
             </div>
             {relatedReports[index].length ? (
-              <div className="flex-1">
+              <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} />
@@ -90,6 +139,9 @@ export default async function Reports({ params }: { params: { id: string } }) {
           </div>
         </Fragment>
       ))}
+
+      <Separator className="my-2" />
+      <JsonCard obj={snapshots} />
     </div>
   );
 }

app/panel/reports/page.tsx

@@ -3,9 +3,9 @@ import { Input } from "@/components/ui/input";
 import { fetchReports } from "@/lib/db";
 
 export default async function Reports() {
-  const reports = (await fetchReports()).sort((b, _) =>
-    b.content.report_reason.includes("Illegal") ? -1 : 0
-  );
+  const reports = (await fetchReports())
+    .reverse()
+    .sort((b, _) => (b.content.report_reason.includes("Illegal") ? -1 : 0));
 
   return (
     <div className="flex flex-col gap-2">