Redesign flagged activity review as inbox-style two-column layout (#218)

* Improve flagged activity review with full context

Add media gallery, flagger info, metrics, notes, and activity
details to the admin flagged activity review page. Convert to
real-time client component for live updates during review.

Backend: getFlaggedActivityDetail now returns media URLs, cloudinary
IDs, individual flag records with flagger user info, comment count,
triggered bonuses, location/time context, and scoring config.

Frontend: New client component shows flag alert banner with reporter
details, full activity card with all context, and dedicated sections
for admin comments, actions, and history.

https://claude.ai/code/session_016USSPskfc25tKX1qmCsJv5

* Redesign flagged activity review as inbox-style two-column layout

Replaces the old list→detail page navigation with a persistent sidebar
+ detail panel layout optimized for fast admin triage:

- Two-column inbox layout: sidebar list (filterable, real-time) on the
  left, activity detail on the right — no more back-and-forth navigation
- Activity detail mirrors the user-facing activity page layout (user
  header, media, stats, caption) instead of admin-style card grids
- Admin actions promoted above the fold with collapsible comment/edit
  forms behind toggle buttons
- Keyboard shortcuts: arrow keys to navigate, R to resolve, C to comment,
  E to edit, ESC to close forms, Cmd/Ctrl+Enter to submit
- Shared context between sidebar and detail panel so arrow navigation
  always matches the visible filtered list
- Removed router.refresh() calls — Convex real-time queries handle updates

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

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: prazgaitis

apps/web/app/challenges/[id]/admin/flagged-activities/[activityId]/flagged-activity-comments.tsx

@@ -36,69 +36,59 @@ export function FlaggedActivityComments({ activityId }: { activityId: string })
 
   if (!comments || comments.length === 0) {
     return (
-      <div>
-        <h3 className="text-sm font-medium text-muted-foreground">
-          Admin Comments
-        </h3>
-        <p className="text-base text-muted-foreground">
-          No admin comments yet.
-        </p>
-      </div>
+      <p className="text-sm text-muted-foreground">
+        No admin comments yet.
+      </p>
     );
   }
 
   return (
-    <div>
-      <h3 className="text-sm font-medium text-muted-foreground mb-2">
-        Admin Comments
-      </h3>
-      <div className="space-y-2">
-        {comments.map((entry) => (
-          <div
-            key={entry.comment.id}
-            className="rounded-md border p-3 bg-muted/30"
-          >
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <UserAvatar
-                user={entry.author}
-                size="sm"
-                showName
-                disableLink
-                className="text-xs"
+    <div className="space-y-2">
+      {comments.map((entry) => (
+        <div
+          key={entry.comment.id}
+          className="rounded-md border p-3 bg-muted/30"
+        >
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <UserAvatar
+              user={entry.author}
+              size="sm"
+              showName
+              disableLink
+              className="text-xs"
+            />
+            <span>
+              {formatDistanceToNow(new Date(entry.comment.createdAt), {
+                addSuffix: true,
+              })}
+            </span>
+            {entry.comment.visibility && (
+              <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                {entry.comment.visibility}
+              </Badge>
+            )}
+          </div>
+          <p className="mt-1 whitespace-pre-wrap text-sm">
+            {entry.comment.content}
+          </p>
+          <div className="mt-1 flex items-center gap-1">
+            <button
+              type="button"
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              onClick={() =>
+                toggleLike({
+                  commentId: entry.comment.id as Id<"comments">,
+                })
+              }
+            >
+              <Heart
+                className={`h-3 w-3 ${entry.likedByMe ? "fill-red-500 text-red-500" : ""}`}
               />
-              <span>
-                {formatDistanceToNow(new Date(entry.comment.createdAt), {
-                  addSuffix: true,
-                })}
-              </span>
-              {entry.comment.visibility && (
-                <Badge variant="outline" className="text-[10px] px-1.5 py-0">
-                  {entry.comment.visibility}
-                </Badge>
-              )}
-            </div>
-            <p className="mt-1 whitespace-pre-wrap text-sm">
-              {entry.comment.content}
-            </p>
-            <div className="mt-1 flex items-center gap-1">
-              <button
-                type="button"
-                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                onClick={() =>
-                  toggleLike({
-                    commentId: entry.comment.id as Id<"comments">,
-                  })
-                }
-              >
-                <Heart
-                  className={`h-3 w-3 ${entry.likedByMe ? "fill-red-500 text-red-500" : ""}`}
-                />
-                {entry.likeCount > 0 && <span>{entry.likeCount}</span>}
-              </button>
-            </div>
+              {entry.likeCount > 0 && <span>{entry.likeCount}</span>}
+            </button>
           </div>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 }