Redesign admin feedback as two-column layout and show full flag reason (#223)

Consolidate feedback detail into a side panel (removing separate route),
and remove line-clamp on flagged activity reason so long text is fully visible.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: prazgaitis

.claude/napkin.md

@@ -17,6 +17,7 @@
 | 2026-03-03 | self | Tried writing `apps/web/app/challenges/[id]/admin/feedback/page.tsx` before creating the nested directory and got `no such file or directory` | Create route directories first (`mkdir -p ...`) before redirecting heredoc output to a new file |
 | 2026-03-10 | self | Passed a dynamic-route path with `[]` and `()` unquoted into `rg`, and zsh globbing failed again while comparing mini-game profile files | Quote every individual dynamic route path in shell commands, even when mixing them with normal paths in the same invocation |
 | 2026-03-10 | self | Ran workspace-scoped ESLint from `apps/web` but still passed repo-root file paths, so ESLint reported no matching files | When using `pnpm -F web exec ...` from the workspace directory, pass paths relative to `apps/web` |
+| 2026-03-11 | self | Created a task markdown file with shell redirection instead of `apply_patch` | Use `apply_patch` for file creation/editing, including task files required by repo process |
 | 2026-03-01 | self | Started repo exploration before reading `.claude/napkin.md` again | Always run `cat .claude/napkin.md` as the very first command in a new session |
 | 2026-03-01 | self | CSV row typing was too narrow (`string | number`) and failed once boolean `isNegative` values were added | For CSV builders, include all emitted scalar types up front (`string | number | boolean`) or coerce before push |
 | 2026-03-01 | self | After `pnpm -F web add ...`, got `lockfile only installation` warning and later typecheck failed on missing workspace modules | Run `pnpm install` after filtered add commands when warned about lockfile-only state, then re-run checks |
@@ -156,3 +157,4 @@
 | 2026-03-01 | self | Wrote pagination test assuming followed activity order by logical date; query order was by insertion/descending index order | In feed tests, assert membership or deterministic ordering inputs; don't assume `loggedDate` sort unless query enforces it |
 | 2026-03-02 | self | When adding a new `usePaginatedQuery` for a different Convex query alongside an existing one, both must stay mounted (hooks can't be conditional in React); use `"skip"` arg on the inactive query | Always use `"skip"` sentinel for Convex paginated queries that should be inactive based on tab state |
 - `followingOnly` feed filters applied after pagination can return empty initial pages despite available matches later; skip empty pages server-side before returning a page.
+| 2026-03-11 | self | Tried to read a Next route file with unquoted brackets and zsh globbed it | Always single-quote `app/**/[param]/**` paths in shell commands |

apps/web/app/challenges/[id]/admin/feedback/[feedbackId]/page.tsx

@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useQuery, useMutation } from "@/lib/convex-auth-react";
-import { useRouter } from "next/navigation";
 import { api } from "@repo/backend";
 import type { Id } from "@repo/backend/_generated/dataModel";
 import { formatDistanceToNow } from "date-fns";
@@ -19,7 +18,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { UserAvatar } from "@/components/user-avatar";
-import { useFeedbackList } from "../feedback-list-context";
+import { useFeedbackList } from "./feedback-list-context";
 
 type FeedbackType = "bug" | "question" | "idea" | "other";
 type FeedbackStatus = "open" | "fixed";
@@ -98,7 +97,6 @@ export function FeedbackDetailContent({
   challengeId,
   feedbackId,
 }: FeedbackDetailContentProps) {
-  const router = useRouter();
   const [isPending, setIsPending] = useState(false);
 
   const data = useQuery(api.queries.feedback.listForAdmin, {
@@ -110,7 +108,7 @@ export function FeedbackDetailContent({
   const updateFeedback = useMutation(api.mutations.feedback.updateByAdmin);
 
   // Keyboard navigation
-  const { items: sidebarItems } = useFeedbackList();
+  const { items: sidebarItems, setSelectedId } = useFeedbackList();
 
   const navigateToSibling = useCallback(
     (direction: "prev" | "next") => {
@@ -119,21 +117,17 @@ export function FeedbackDetailContent({
       if (currentIndex === -1) {
         const fallback = sidebarItems[0];
         if (fallback) {
-          router.push(
-            `/challenges/${challengeId}/admin/feedback/${fallback.id}`,
-          );
+          setSelectedId(fallback.id);
         }
         return;
       }
       const targetIndex =
         direction === "prev" ? currentIndex - 1 : currentIndex + 1;
       if (targetIndex < 0 || targetIndex >= sidebarItems.length) return;
       const target = sidebarItems[targetIndex];
-      router.push(
-        `/challenges/${challengeId}/admin/feedback/${target.id}`,
-      );
+      setSelectedId(target.id);
     },
-    [sidebarItems, feedbackId, challengeId, router],
+    [sidebarItems, feedbackId, setSelectedId],
   );
 
   const handleStatusToggle = useCallback(async () => {

…[feedbackId]/feedback-detail-content.tsx …min/feedback/feedback-detail-content.tsxapps/web/app/challenges/[id]/admin/feedback/[feedbackId]/feedback-detail-content.tsx renamed to apps/web/app/challenges/[id]/admin/feedback/feedback-detail-content.tsx apps/web/app/challenges/[id]/admin/feedback/[feedbackId]/feedback-detail-content.tsx renamed to apps/web/app/challenges/[id]/admin/feedback/feedback-detail-content.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { MessageSquare } from "lucide-react";
+import { useFeedbackList } from "./feedback-list-context";
+import { FeedbackDetailContent } from "./feedback-detail-content";
+
+interface FeedbackDetailPanelProps {
+  challengeId: string;
+}
+
+export function FeedbackDetailPanel({ challengeId }: FeedbackDetailPanelProps) {
+  const { selectedId } = useFeedbackList();
+
+  if (!selectedId) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center text-center">
+        <MessageSquare className="h-10 w-10 text-zinc-700 mb-3" />
+        <p className="text-sm font-medium text-zinc-400">
+          Select a feedback item to review
+        </p>
+        <p className="mt-1 text-xs text-zinc-600">
+          Choose an item from the list to see its details and respond.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <FeedbackDetailContent
+      key={selectedId}
+      challengeId={challengeId}
+      feedbackId={selectedId}
+    />
+  );
+}

apps/web/app/challenges/[id]/admin/feedback/feedback-detail-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useParams } from "next/navigation";
+import { useFeedbackList } from "./feedback-list-context";
 
 function Kbd({ children }: { children: React.ReactNode }) {
   return (
@@ -26,10 +26,9 @@ function Shortcut({
 }
 
 export function FeedbackKeyboardShortcutBar() {
-  const params = useParams();
-  const hasSelection = !!params.feedbackId;
+  const { selectedId } = useFeedbackList();
 
-  if (!hasSelection) return null;
+  if (!selectedId) return null;
 
   return (
     <div className="flex flex-shrink-0 items-center gap-4 border-b border-zinc-800 bg-zinc-900/50 px-4 py-1.5 text-[10px]">

apps/web/app/challenges/[id]/admin/feedback/feedback-keyboard-shortcut-bar.tsx

@@ -9,17 +9,24 @@ type FeedbackItem = {
 interface FeedbackListContextValue {
   items: FeedbackItem[];
   setItems: (items: FeedbackItem[]) => void;
+  selectedId: string | null;
+  setSelectedId: (id: string | null) => void;
 }
 
 const FeedbackListContext = createContext<FeedbackListContextValue>({
   items: [],
   setItems: () => {},
+  selectedId: null,
+  setSelectedId: () => {},
 });
 
 export function FeedbackListProvider({ children }: { children: ReactNode }) {
   const [items, setItems] = useState<FeedbackItem[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   return (
-    <FeedbackListContext.Provider value={{ items, setItems }}>
+    <FeedbackListContext.Provider
+      value={{ items, setItems, selectedId, setSelectedId }}
+    >
       {children}
     </FeedbackListContext.Provider>
   );

apps/web/app/challenges/[id]/admin/feedback/feedback-list-context.tsx

@@ -3,8 +3,6 @@
 import { useQuery } from "@/lib/convex-auth-react";
 import { api } from "@repo/backend";
 import type { Id } from "@repo/backend/_generated/dataModel";
-import Link from "next/link";
-import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { formatDistanceToNow } from "date-fns";
 import { Loader2, MessageSquare, Search } from "lucide-react";
@@ -43,8 +41,7 @@ interface FeedbackSidebarProps {
 }
 
 export function FeedbackSidebar({ challengeId }: FeedbackSidebarProps) {
-  const params = useParams();
-  const selectedFeedbackId = params.feedbackId as string | undefined;
+  const { selectedId, setSelectedId, setItems } = useFeedbackList();
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState<"all" | "open" | "fixed">(
     "open",
@@ -75,11 +72,17 @@ export function FeedbackSidebar({ challengeId }: FeedbackSidebarProps) {
   const total = items.length;
 
   // Sync visible items to context for keyboard navigation
-  const { setItems } = useFeedbackList();
   useEffect(() => {
     setItems(items.map((item) => ({ id: item.id })));
   }, [items, setItems]);
 
+  // Auto-select first item when none is selected
+  useEffect(() => {
+    if (!selectedId && items.length > 0) {
+      setSelectedId(items[0].id);
+    }
+  }, [selectedId, items, setSelectedId]);
+
   return (
     <div className="flex h-full flex-col">
       {/* Header */}
@@ -131,7 +134,7 @@ export function FeedbackSidebar({ challengeId }: FeedbackSidebarProps) {
       </div>
 
       {/* List */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto scrollbar-hide">
         {data === undefined ? (
           <div className="flex items-center justify-center py-10">
             <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
@@ -143,12 +146,13 @@ export function FeedbackSidebar({ challengeId }: FeedbackSidebarProps) {
         ) : (
           <div>
             {items.map((item) => {
-              const isSelected = selectedFeedbackId === item.id;
+              const isSelected = selectedId === item.id;
               return (
-                <Link
+                <button
                   key={item.id}
-                  href={`/challenges/${challengeId}/admin/feedback/${item.id}`}
-                  className={`flex gap-3 border-b border-zinc-800/50 px-3 py-2.5 transition-colors ${
+                  type="button"
+                  onClick={() => setSelectedId(item.id)}
+                  className={`flex w-full text-left gap-3 border-b border-zinc-800/50 px-3 py-2.5 transition-colors ${
                     isSelected
                       ? "bg-zinc-800 border-l-2 border-l-indigo-500"
                       : "hover:bg-zinc-900 border-l-2 border-l-transparent"
@@ -205,7 +209,7 @@ export function FeedbackSidebar({ challengeId }: FeedbackSidebarProps) {
                       {item.title ?? item.description}
                     </p>
                   </div>
-                </Link>
+                </button>
               );
             })}
           </div>

apps/web/app/challenges/[id]/admin/feedback/feedback-sidebar.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { FeedbackSidebar } from "./feedback-sidebar";
 import { FeedbackKeyboardShortcutBar } from "./feedback-keyboard-shortcut-bar";
 import { FeedbackListProvider } from "./feedback-list-context";
+import { FeedbackDetailPanel } from "./feedback-detail-panel";
 
 interface FeedbackLayoutProps {
   children: ReactNode;
@@ -16,15 +17,17 @@ export default async function FeedbackLayout({
 
   return (
     <FeedbackListProvider>
-      <div className="flex -m-3 h-[calc(100dvh-6.5rem)] overflow-hidden">
+      <div className="flex -m-3 h-full overflow-hidden">
         {/* Left panel — feedback list */}
         <div className="w-80 flex-shrink-0 border-r border-zinc-800 overflow-y-auto">
           <FeedbackSidebar challengeId={challengeId} />
         </div>
         {/* Right panel — hint bar + detail */}
         <div className="flex flex-1 flex-col overflow-hidden">
           <FeedbackKeyboardShortcutBar />
-          <div className="flex-1 overflow-y-auto p-4">{children}</div>
+          <div className="flex-1 overflow-y-auto scrollbar-hide p-4">
+            <FeedbackDetailPanel challengeId={challengeId} />
+          </div>
         </div>
       </div>
     </FeedbackListProvider>

apps/web/app/challenges/[id]/admin/feedback/layout.tsx

@@ -1,15 +1,3 @@
-import { MessageSquare } from "lucide-react";
-
 export default function FeedbackPage() {
-  return (
-    <div className="flex h-full flex-col items-center justify-center text-center">
-      <MessageSquare className="h-10 w-10 text-zinc-700 mb-3" />
-      <p className="text-sm font-medium text-zinc-400">
-        Select a feedback item to review
-      </p>
-      <p className="mt-1 text-xs text-zinc-600">
-        Choose an item from the list to see its details and respond.
-      </p>
-    </div>
-  );
+  return null;
 }

apps/web/app/challenges/[id]/admin/feedback/page.tsx

@@ -225,7 +225,7 @@ export function FlaggedActivityDetailContent({
                 </Link>
               </Button>
             </div>
-            <p className="mt-0.5 text-xs text-muted-foreground line-clamp-2">
+            <p className="mt-0.5 text-xs text-muted-foreground whitespace-pre-wrap">
               {activity.flaggedReason ?? "No reason provided"}
             </p>
             {/* Flagger chips */}