Moderation

packages/frontpage/README.md

@@ -2,15 +2,15 @@
 
 Frontpage AppView and frontend client.
 
-## Running locally
+<!-- ## Running locally -->
 
 If you just need to work on the app in a logged-out state, then you just need to run the following:
 
 ```bash
 pnpm run dev
 ```
 
-If you need to login, you need to setup some additional env vars and serve your dev server over the public internet. You can do this with `cloudflared` altho other options are available eg. `ngrok` or `tailscale`:
+If you need to login, you need to setup some additional env vars and serve your dev server over the public internet. You can do this with `cloudflared` although other options are available eg. `ngrok` or `tailscale`:
 
 ```bash
 pnpm exec tsx ./scripts/generate-jwk.mts # Copy this output into .env.local

packages/frontpage/app/(app)/_components/delete-button.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  AlertDialogHeader,
+  AlertDialogFooter,
+} from "@/lib/components/ui/alert-dialog";
+import { toast } from "@/lib/components/ui/use-toast";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "@/lib/components/ui/alert-dialog";
+import { DropdownMenuItem } from "@/lib/components/ui/dropdown-menu";
+import { useEllipsisDropdownContext } from "./ellipsis-dropdown";
+import { TrashIcon } from "@radix-ui/react-icons";
+
+type DeleteButtonProps = {
+  deleteAction: () => Promise<void>;
+};
+
+export function DeleteButton({ deleteAction }: DeleteButtonProps) {
+  const ellipsisDropdownContext = useEllipsisDropdownContext();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <DropdownMenuItem
+          className="text-red-600"
+          onSelect={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <TrashIcon className="mr-2 scale-125" />
+          Delete
+        </DropdownMenuItem>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will delete your entry. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="mt-3">
+          <AlertDialogAction
+            onClick={() => {
+              void deleteAction();
+              toast({
+                title: "Your entry will be deleted shortly",
+                type: "foreground",
+              });
+              ellipsisDropdownContext.close();
+            }}
+          >
+            Confirm
+          </AlertDialogAction>
+          <AlertDialogCancel onClick={() => ellipsisDropdownContext.close()}>
+            Cancel
+          </AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

packages/frontpage/app/(app)/_components/ellipsis-dropdown.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Button } from "@/lib/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/lib/components/ui/dropdown-menu";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import React, { ReactNode } from "react";
+
+interface EllipsisDropdownProps {
+  children: ReactNode;
+}
+
+const EllipsisDropdownContext = React.createContext<null | {
+  close: () => void;
+}>(null);
+
+export function EllipsisDropdown({ children }: EllipsisDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <EllipsisDropdownContext.Provider value={{ close: () => setOpen(false) }}>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <DotsHorizontalIcon className="scale-125" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>{children}</DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </EllipsisDropdownContext.Provider>
+  );
+}
+
+export const useEllipsisDropdownContext = () => {
+  const context = React.useContext(EllipsisDropdownContext);
+  if (!context) {
+    throw new Error(
+      "useEllipsisDropdownContext must be used within a EllipsisDropdown",
+    );
+  }
+  return context;
+};

packages/frontpage/app/(app)/_components/post-card.tsx

@@ -4,10 +4,16 @@ import { getVoteForPost } from "@/lib/data/db/vote";
 import { ensureUser, getUser } from "@/lib/data/user";
 import { TimeAgo } from "@/lib/components/time-ago";
 import { VoteButton } from "./vote-button";
-import { PostCollection } from "@/lib/data/atproto/post";
+import { PostCollection, deletePost } from "@/lib/data/atproto/post";
 import { getVerifiedHandle } from "@/lib/data/atproto/identity";
 import { UserHoverCard } from "@/lib/components/user-hover-card";
 import type { DID } from "@/lib/data/atproto/did";
+import { parseReportForm } from "@/lib/data/db/report-shared";
+import { createReport } from "@/lib/data/db/report";
+import { EllipsisDropdown } from "./ellipsis-dropdown";
+import { revalidatePath } from "next/cache";
+import { ReportDialogDropdownButton } from "./report-dialog";
+import { DeleteButton } from "./delete-button";
 
 type PostProps = {
   id: number;
@@ -34,7 +40,10 @@ export async function PostCard({
   cid,
   isUpvoted,
 }: PostProps) {
-  const handle = await getVerifiedHandle(author);
+  const [handle, user] = await Promise.all([
+    getVerifiedHandle(author),
+    getUser(),
+  ]);
   const postHref = `/post/${handle}/${rkey}`;
 
   return (
@@ -87,7 +96,7 @@ export async function PostCard({
         </h2>
         <div className="flex flex-wrap text-gray-500 dark:text-gray-400 sm:gap-4">
           <div className="flex gap-2 flex-wrap md:flex-nowrap">
-            <div className="flex gap-2">
+            <div className="flex gap-2 items-center">
               <span aria-hidden>•</span>
               <UserHoverCard did={author} asChild>
                 <Link href={`/profile/${handle}`} className="hover:underline">
@@ -108,8 +117,61 @@ export async function PostCard({
               </Link>
             </div>
           </div>
+
+          {user ? (
+            <div className="ml-auto">
+              <EllipsisDropdown>
+                <ReportDialogDropdownButton
+                  reportAction={reportPostAction.bind(null, {
+                    rkey,
+                    cid,
+                    author,
+                  })}
+                />
+                {user?.did === author ? (
+                  <DeleteButton
+                    deleteAction={deletePostAction.bind(null, rkey)}
+                  />
+                ) : null}
+              </EllipsisDropdown>
+            </div>
+          ) : null}
         </div>
       </div>
     </article>
   );
 }
+
+export async function deletePostAction(rkey: string) {
+  "use server";
+  await ensureUser();
+  await deletePost(rkey);
+
+  revalidatePath("/");
+}
+
+export async function reportPostAction(
+  input: {
+    rkey: string;
+    cid: string;
+    author: DID;
+  },
+  formData: FormData,
+) {
+  "use server";
+  await ensureUser();
+
+  const formResult = parseReportForm(formData);
+  if (!formResult.success) {
+    throw new Error("Invalid form data");
+  }
+
+  await createReport({
+    ...formResult.data,
+    subjectUri: `at://${input.author}/${PostCollection}/${input.rkey}`,
+    subjectDid: input.author,
+    subjectCollection: PostCollection,
+    subjectRkey: input.rkey,
+    subjectCid: input.cid,
+  });
+}

packages/frontpage/app/(app)/_components/report-dialog.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import {
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogCancel,
+} from "@/lib/components/ui/alert-dialog";
+import { Button } from "@/lib/components/ui/button";
+import { Textarea } from "@/lib/components/ui/textarea";
+import { toast } from "@/lib/components/ui/use-toast";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/lib/components/ui/select";
+import { ReportReasons } from "@/lib/data/db/report-shared";
+import { ReactNode, useState } from "react";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { useEllipsisDropdownContext } from "./ellipsis-dropdown";
+import { DropdownMenuItem } from "@/lib/components/ui/dropdown-menu";
+
+type ReportDialogProps = {
+  reportAction: (formData: FormData) => Promise<void>;
+  children: ReactNode;
+};
+
+function ReportDialog({ reportAction, children }: ReportDialogProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will report the entry. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <form
+          action={async (formData) => {
+            try {
+              await reportAction(formData);
+            } catch (_) {
+              toast({
+                title: "Something went wrong",
+                type: "foreground",
+              });
+              return;
+            }
+            toast({
+              title: "Report submitted",
+              type: "foreground",
+            });
+            setOpen(false);
+          }}
+        >
+          <Select name="reportReason">
+            <SelectTrigger className="w-44">
+              <SelectValue placeholder="Please select one" />
+            </SelectTrigger>
+            <SelectContent>
+              {ReportReasons.map((reason) => (
+                <SelectItem key={reason} value={reason}>
+                  {reason}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Textarea
+            id="textArea"
+            name="creatorComment"
+            placeholder="Enter your report reason here..."
+            className="resize-y my-3"
+            maxLength={250}
+          />
+          <AlertDialogFooter>
+            <Button variant="success" type="submit">
+              Confirm
+            </Button>
+            <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
+          </AlertDialogFooter>
+        </form>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export function ReportDialogIcon({
+  reportAction,
+}: Pick<ReportDialogProps, "reportAction">) {
+  return (
+    <ReportDialog reportAction={reportAction}>
+      <Button size="icon" variant="outline">
+        <ExclamationTriangleIcon className="h-4 w-4 text-red-500" />
+      </Button>
+    </ReportDialog>
+  );
+}
+
+export function ReportDialogDropdownButton({
+  reportAction,
+}: Pick<ReportDialogProps, "reportAction">) {
+  const ellipsisDropdownContext = useEllipsisDropdownContext();
+  return (
+    <ReportDialog
+      reportAction={async (formData: FormData) => {
+        await reportAction(formData);
+        ellipsisDropdownContext.close();
+      }}
+    >
+      <DropdownMenuItem
+        //this prevents the alert dialog from closing when the dropdown item is clicked
+        //alternatively wrap the whole dropdown in the dialog as per https://github.com/radix-ui/primitives/issues/1836
+        //but that defeats the purpose of this reusable component
+        onSelect={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <ExclamationTriangleIcon className="mr-2 h-4 w-4" />
+        Report
+      </DropdownMenuItem>
+    </ReportDialog>
+  );
+}

packages/frontpage/app/(app)/layout.tsx

@@ -2,7 +2,7 @@ import { deleteAuthCookie, getSession, signOut } from "@/lib/auth";
 import Link from "next/link";
 import { Suspense } from "react";
 import { Button } from "@/lib/components/ui/button";
-import { isBetaUser } from "@/lib/data/user";
+import { isAdmin, isBetaUser } from "@/lib/data/user";
 import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 import { ThemeToggle } from "./_components/theme-toggle";
 import {
@@ -123,6 +123,17 @@ async function LoginOrLogout() {
               Profile
             </Link>
           </DropdownMenuItem>
+          <Suspense fallback={null}>
+            {isAdmin().then((isAdmin) =>
+              isAdmin ? (
+                <DropdownMenuItem asChild>
+                  <Link href="/moderation" className="cursor-pointer">
+                    Moderation
+                  </Link>
+                </DropdownMenuItem>
+              ) : null,
+            )}
+          </Suspense>
           <DropdownMenuSeparator />
           <form
             action={async () => {