From 641a58a1b5f3b3bd6237f041762391e2fa4f4653 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Tue, 25 Aug 2026 19:17:39 +0200
Subject: [PATCH] feat(admin): add button legend to Posts page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The post-card action row (comments, hide/unhide, pin/unpin, AI-disclosure
correction, delete) had no explanation of what each icon does — add a help
popover next to the "Posts" heading listing icon + action name.
---
 src/app/p/[secret]/posts/page.tsx | 36 +++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/app/p/[secret]/posts/page.tsx b/src/app/p/[secret]/posts/page.tsx
index 7803fae..6c9fbab 100644
--- a/src/app/p/[secret]/posts/page.tsx
+++ b/src/app/p/[secret]/posts/page.tsx
@@ -3,10 +3,11 @@
 import { useEffect, useState } from "react";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTRPC } from "@/trpc/client";
-import { Trash2, MessageSquare, Loader2, ChevronDown, Play, ImageOff, PawPrint, EyeOff, Eye, Sparkles, Pin, PinOff, Hash } from "lucide-react";
+import { Trash2, MessageSquare, Loader2, ChevronDown, Play, ImageOff, PawPrint, EyeOff, Eye, Sparkles, Pin, PinOff, Hash, HelpCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { getMediaUrl } from "@/lib/media-url";
 import { BlurImage } from "@/components/ui/blur-image";
 import { MILESTONE_META } from "@/lib/milestone-meta";
@@ -26,6 +27,16 @@ const GRID_COLS_CLASS: Record<GridSize, string> = {
 
 const GRID_SIZE_STORAGE_KEY = "pawfeed-admin-posts-grid-size";
 
+const POST_ACTION_LEGEND: { icon: React.ElementType; label: string; tone?: string }[] = [
+  { icon: MessageSquare, label: "View comments" },
+  { icon: EyeOff, label: "Hide post" },
+  { icon: Eye, label: "Unhide post" },
+  { icon: Pin, label: "Pin post" },
+  { icon: PinOff, label: "Unpin post" },
+  { icon: Sparkles, label: "Correct AI-content disclosure" },
+  { icon: Trash2, label: "Delete post", tone: "text-red-400" },
+];
+
 export default function AdminPostsPage() {
   const trpc = useTRPC();
   const qc = useQueryClient();
@@ -160,7 +171,28 @@ export default function AdminPostsPage() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-zinc-100">Posts</h1>
+        <div className="flex items-center gap-2">
+          <h1 className="text-2xl font-bold text-zinc-100">Posts</h1>
+          <Popover>
+            <PopoverTrigger
+              aria-label="What do the buttons do?"
+              className="flex h-6 w-6 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-200"
+            >
+              <HelpCircle className="h-4 w-4" />
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-64">
+              <p className="text-xs font-semibold text-muted-foreground mb-1">Post actions</p>
+              <ul className="space-y-2">
+                {POST_ACTION_LEGEND.map(({ icon: Icon, label, tone }) => (
+                  <li key={label} className="flex items-center gap-2.5 text-xs text-foreground">
+                    <Icon className={cn("h-3.5 w-3.5 shrink-0", tone ?? "text-muted-foreground")} aria-hidden="true" />
+                    {label}
+                  </li>
+                ))}
+              </ul>
+            </PopoverContent>
+          </Popover>
+        </div>
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-0.5 rounded-lg border border-zinc-700 p-0.5">
             {GRID_SIZES.map((size) => (