feat(don): add image button in admin

app/(ui)/donate/admin/api.ts

@@ -58,3 +58,15 @@ export async function resendPopup(id: string) {
       : undefined,
   });
 }
+
+export async function getImage(id: string) {
+  if (!(await adminCheck())) throw new Error("Unauthorized");
+  const [sub] = await db
+    .select({ image: donations.image })
+    .from(donations)
+    .where(eq(donations.id, id));
+  if (!sub) throw new Error("not found");
+  if (!sub.image) throw new Error("no image");
+
+  return new Blob([Buffer.from(sub.image)], { type: "image/jpeg" });
+}

app/(ui)/donate/admin/client.tsx

@@ -15,11 +15,12 @@ import {
   BugPlay,
   ChevronsLeftRightEllipsis,
   Copy,
+  ImageIcon,
   MessageCircleWarning,
 } from "lucide-react";
 import { useEllipsisVisible } from "react-hook-text-overflow";
 import { ActionButton } from "../../../../components/action-button";
-import { reloadWidget, resendPopup, testPopup } from "./api";
+import { getImage, reloadWidget, resendPopup, testPopup } from "./api";
 import { useEffect } from "react";
 import posthog from "posthog-js";
 import { sse } from "@/lib/db/sse-endpoints";
@@ -98,6 +99,7 @@ const columns: ColumnDef<typeof donations.$inferSelect>[] = [
           className={cn(
             "flex gap-1",
             row.row.original.uid ||
+              row.row.original.image ||
               "opacity-0 transition-opacity group-hover:opacity-100",
           )}
         >
@@ -127,6 +129,26 @@ const columns: ColumnDef<typeof donations.$inferSelect>[] = [
               </ActionButton>
             </SimpleTooltip>
           )}
+          {row.row.original.image && (
+            <SimpleTooltip text="Open Image">
+              <ActionButton
+                size="icon-sm"
+                variant="outline"
+                action={async () => {
+                  await getImage(row.row.original.id).then((blob) => {
+                    const url = URL.createObjectURL(blob);
+
+                    const tab = window.open("about:blank", "_blank");
+                    if (tab) {
+                      tab.location.href = url;
+                    }
+                  });
+                }}
+              >
+                <ImageIcon />
+              </ActionButton>
+            </SimpleTooltip>
+          )}
         </div>
       );
     },

app/(ui)/donate/admin/page.tsx

@@ -10,7 +10,10 @@ export default async function () {
     redirect(`/login?next=${encodeURIComponent("/donate/admin")}`);
 
   const data = await db
-    .select({ ...getTableColumns(donations), image: sql<Buffer>`NULL` })
+    .select({
+      ...getTableColumns(donations),
+      image: sql<Buffer>`${donations.image} IS NOT NULL`,
+    })
     .from(donations)
     .limit(100)
     .orderBy(desc(donations.id));