feat: email classification UI

app/panel/shield/classifications/page.tsx

@@ -0,0 +1,22 @@
+import EmailClassificationRow from "@/components/pages/shield/EmailClassificationRow";
+import { Card } from "@/components/ui/card";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export default function Classifications() {
+  return (
+    <Card>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Domain</TableHead>
+            <TableHead>Classification</TableHead>
+            <TableHead>Action</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <EmailClassificationRow domain="sex.org" classification="DISPOSABLE" />
+        </TableBody>
+      </Table>
+    </Card>
+  );
+}

app/panel/shield/page.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default function Shield() {
+    // todo add a list of buttons here once there's more categories
+    redirect("/panel/shield/classifications");
+    // return (
+    //   <div className="flex flex-row gap-2">
+    //     <Link href="/panel/shield/classifications"><Button>Email Classifications</Button></Link>
+    //   </div>
+    // );
+  }
+  

components/common/NavigationLinks.tsx

@@ -7,6 +7,7 @@ import {
   Home,
   ScrollText,
   Search,
+  Shield,
   Siren,
   Sparkles,
   TrendingUp,
@@ -39,6 +40,12 @@ export function NavigationLinks() {
       >
         <Search className="h-4 w-4" />
       </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/shield"
+      >
+        <Shield className="h-4 w-4" />
+      </Link>
       <Link
         className={buttonVariants({ variant: "outline", size: "icon" })}
         href="/panel/backups"

components/pages/shield/EmailClassificationRow.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { Button } from "@/components/ui/button";
+import { Command, CommandItem } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+const CLASSIFICATIONS = [
+    "DISPOSABLE",
+    "GAYSEX",
+    "HOMOSEXUAL",
+    "FDGIUHDIFUIOFZH",
+  ];
+
+export default function EmailClassificationRow({ domain, ...props }: { domain: string, classification: string }) {
+    const [selectClassification, setSelectClassification] = useState(false);
+    const [classification, setClassification] = useState(props.classification);
+    const [deleted, setDeleted] = useState(false);
+  
+    return deleted ? null : (
+      <TableRow>
+        <TableCell>{domain}</TableCell>
+        <TableCell>
+          <Popover open={selectClassification} onOpenChange={setSelectClassification}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={selectClassification}
+              >{classification}</Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <Command>
+                {CLASSIFICATIONS.map((c) => (
+                  <CommandItem
+                  key={c}
+                  onSelect={() => {
+                    setSelectClassification(false);
+                    setClassification(c);
+                  }}
+                >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        c == classification
+                          ? "opacity-100"
+                          : "opacity-0"
+                      )}
+                    />
+                    {c}
+                  </CommandItem>
+                ))}
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </TableCell>
+        <TableCell>
+          <Button
+            variant="destructive"
+            onClick={() => setDeleted(true)}
+          >Remove</Button>
+        </TableCell>
+      </TableRow>
+    );
+  }