feat(frontend): add inline data correction triggers on detail page and table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: TokenBrice

src/app/stablecoin/[id]/client.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowLeft, ArrowLeftRight } from "lucide-react";
+import { ArrowLeft, ArrowLeftRight, Flag } from "lucide-react";
+import { FeedbackModal } from "@/components/feedback-modal";
 import { useSupplyHistory, useStablecoins } from "@/hooks/use-stablecoins";
 import { useDepegEvents } from "@/hooks/use-depeg-events";
 import { usePegSummary } from "@/hooks/use-peg-summary";
@@ -56,6 +58,7 @@ interface StablecoinDetailClientProps {
 }
 
 export default function StablecoinDetailClient({ id, summary, coin, logoSrc }: StablecoinDetailClientProps) {
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
   const { data: supplyData, isLoading: supplyLoading, isError: supplyError } = useSupplyHistory(id);
   const { data: listData, isLoading: listLoading, isError: listError, dataUpdatedAt: listUpdatedAt } = useStablecoins();
   const { data: depegData } = useDepegEvents(id);
@@ -240,6 +243,13 @@ export default function StablecoinDetailClient({ id, summary, coin, logoSrc }: S
                       </span>
                     )}
                   </p>
+                  <button
+                    onClick={() => setFeedbackOpen(true)}
+                    className="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <Flag className="h-3 w-3" />
+                    Report data issue
+                  </button>
                 </div>
               </div>
             </div>
@@ -403,6 +413,15 @@ export default function StablecoinDetailClient({ id, summary, coin, logoSrc }: S
           <DepegHistory stablecoinId={id} earliestTrackingDate={earliestTrackingDate} />
         </section>
       )}
+
+      <FeedbackModal
+        open={feedbackOpen}
+        onOpenChange={setFeedbackOpen}
+        defaultType="data-correction"
+        stablecoinId={coin.id}
+        stablecoinName={coin.name}
+        pegValue={coinData.price != null ? `$${coinData.price.toFixed(6)}` : undefined}
+      />
     </div>
   );
 }

src/components/stablecoin-table.tsx

@@ -14,7 +14,8 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Download, Columns3 } from "lucide-react";
+import { Download, Columns3, Flag } from "lucide-react";
+import { FeedbackModal } from "@/components/feedback-modal";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -293,6 +294,8 @@ export function StablecoinTable({ data, isLoading, activeFilters, logos, pegRate
     });
   }, [filtered, sort, effectiveSortKey, pegScores, dexLiquidity, reportCards, pegRates, metaById]);
 
+  const [feedbackCoin, setFeedbackCoin] = useState<{ id: string; name: string } | null>(null);
+
   // Reset scroll when filters, search, or sort change
   const [prev, setPrev] = useState({ filtered, sort });
   if (prev.filtered !== filtered || prev.sort !== sort) {
@@ -518,6 +521,7 @@ export function StablecoinTable({ data, isLoading, activeFilters, logos, pegRate
               {isVisible("flags") && (
                 <TableHead className="hidden md:table-cell text-center">Flags</TableHead>
               )}
+              <TableHead className="w-8" />
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -537,7 +541,7 @@ export function StablecoinTable({ data, isLoading, activeFilters, logos, pegRate
               return (
                 <TableRow
                   key={coin.id}
-                  className="cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
+                  className="group cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
                   style={{ height: ROW_HEIGHT }}
                   onClick={() => router.push(`/stablecoin/${coin.id}`)}
                   onMouseEnter={() => prefetch(coin.id)}
@@ -700,6 +704,16 @@ export function StablecoinTable({ data, isLoading, activeFilters, logos, pegRate
                       </div>
                     </TableCell>
                   )}
+                  <TableCell className="w-8 p-1 text-center">
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setFeedbackCoin({ id: coin.id, name: coin.name }); }}
+                      className="opacity-0 group-hover:opacity-100 rounded p-1 text-muted-foreground hover:text-foreground transition-all"
+                      aria-label={`Report data issue for ${coin.name}`}
+                      title="Report data issue"
+                    >
+                      <Flag className="h-3 w-3" />
+                    </button>
+                  </TableCell>
                 </TableRow>
               );
             })}
@@ -742,6 +756,16 @@ export function StablecoinTable({ data, isLoading, activeFilters, logos, pegRate
           </span>
         </div>
       )}
+
+      {feedbackCoin && (
+        <FeedbackModal
+          open={!!feedbackCoin}
+          onOpenChange={(open) => { if (!open) setFeedbackCoin(null); }}
+          defaultType="data-correction"
+          stablecoinId={feedbackCoin.id}
+          stablecoinName={feedbackCoin.name}
+        />
+      )}
     </div>
   );
 }