🤖 fix: improve review UI visual hierarchy and add action buttons (#1131)

ammar-agent · web-flow · commit 422ec9c55297 · 2025-12-12T13:46:32.000-06:00
## Summary

- Fix section header styling in ReviewsBanner (remove
font-medium/uppercase to reduce visual weight)
- Add complete/detach/trash buttons to attached reviews in ChatInput
- Trash button separated with margin as destructive action

## Changes

1. **ReviewsBanner**: Simplified Pending/Completed section headers from
`text-[10px] font-medium tracking-wide uppercase` to just `text-[10px]`
for proper visual hierarchy
2. **ReviewBlock**: Added `onComplete`, `onDetach`, `onDelete` props
with proper button grouping (safe actions together, trash separated)
3. **ChatInput types**: Added `onCheckReview` and `onDeleteReview`
callbacks
4. **AIView**: Wired up new callbacks to useReviews hook methods

_Generated with `mux`_
diff --git a/src/browser/components/AIView.tsx b/src/browser/components/AIView.tsx
@@ -749,7 +749,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
           attachedReviews={reviews.attachedReviews}
           onDetachReview={reviews.detachReview}
           onDetachAllReviews={reviews.detachAllAttached}
+          onCheckReview={reviews.checkReview}
           onCheckReviews={handleCheckReviews}
+          onDeleteReview={reviews.removeReview}
           onUpdateReviewNote={reviews.updateReviewNote}
         />
       </div>
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
@@ -1420,9 +1420,15 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
                 <ReviewBlockFromData
                   key={review.id}
                   data={review.data}
-                  onRemove={
+                  onComplete={
+                    props.onCheckReview ? () => props.onCheckReview!(review.id) : undefined
+                  }
+                  onDetach={
                     props.onDetachReview ? () => props.onDetachReview!(review.id) : undefined
                   }
+                  onDelete={
+                    props.onDeleteReview ? () => props.onDeleteReview!(review.id) : undefined
+                  }
                   onEditComment={
                     props.onUpdateReviewNote
                       ? (newNote) => props.onUpdateReviewNote!(review.id, newNote)
diff --git a/src/browser/components/ChatInput/types.ts b/src/browser/components/ChatInput/types.ts
@@ -36,8 +36,12 @@ export interface ChatInputWorkspaceVariant {
   onDetachReview?: (reviewId: string) => void;
   /** Detach all attached reviews from chat input */
   onDetachAllReviews?: () => void;
-  /** Mark reviews as checked after sending */
+  /** Mark a single review as checked (completed) */
+  onCheckReview?: (reviewId: string) => void;
+  /** Mark multiple reviews as checked after sending */
   onCheckReviews?: (reviewIds: string[]) => void;
+  /** Permanently delete a review */
+  onDeleteReview?: (reviewId: string) => void;
   /** Update a review's comment/note */
   onUpdateReviewNote?: (reviewId: string, newNote: string) => void;
 }
diff --git a/src/browser/components/ReviewsBanner.tsx b/src/browser/components/ReviewsBanner.tsx
@@ -407,9 +407,7 @@ const ReviewsBannerInner: React.FC<ReviewsBannerInnerProps> = ({ workspaceId })
           {pendingList.length > 0 && (
             <div className="space-y-1.5">
               <div className="flex items-center justify-between">
-                <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
-                  Pending ({pendingList.length})
-                </div>
+                <div className="text-muted text-[10px]">Pending ({pendingList.length})</div>
                 {pendingList.length > 1 && (
                   <button
                     type="button"
@@ -439,9 +437,7 @@ const ReviewsBannerInner: React.FC<ReviewsBannerInnerProps> = ({ workspaceId })
           {completedList.length > 0 && (
             <div className="space-y-1.5">
               <div className="flex items-center justify-between">
-                <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
-                  Completed ({completedList.length})
-                </div>
+                <div className="text-muted text-[10px]">Completed ({completedList.length})</div>
                 {completedList.length > 0 && (
                   <button
                     type="button"
diff --git a/src/browser/components/shared/ReviewBlock.tsx b/src/browser/components/shared/ReviewBlock.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useCallback, useRef, useMemo } from "react";
-import { MessageSquare, X, Pencil, Check } from "lucide-react";
+import { MessageSquare, X, Pencil, Check, Trash2 } from "lucide-react";
 import { DiffRenderer } from "./DiffRenderer";
 import { Button } from "../ui/button";
 import { matchesKeybind, formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
@@ -22,7 +22,12 @@ interface ReviewBlockCoreProps {
   lineRange: string;
   code: string;
   comment: string;
-  onRemove?: () => void;
+  /** Detach from chat (sets status back to pending) */
+  onDetach?: () => void;
+  /** Mark as complete (checked) */
+  onComplete?: () => void;
+  /** Permanently delete the review */
+  onDelete?: () => void;
   onEditComment?: (newComment: string) => void;
 }
 
@@ -34,7 +39,9 @@ const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
   lineRange,
   code,
   comment,
-  onRemove,
+  onDetach,
+  onComplete,
+  onDelete,
   onEditComment,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
@@ -83,20 +90,42 @@ const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
 
   return (
     <div className="min-w-0 overflow-hidden rounded border border-[var(--color-review-accent)]/30 bg-[var(--color-review-accent)]/5">
-      {/* Header */}
-      <div className="flex items-center gap-1.5 border-b border-[var(--color-review-accent)]/20 bg-[var(--color-review-accent)]/10 px-2 py-1 text-xs">
+      {/* Header - actions left of file path (consistent with ReviewsBanner), trash on right */}
+      <div className="flex items-center gap-1 border-b border-[var(--color-review-accent)]/20 bg-[var(--color-review-accent)]/10 px-2 py-1 text-xs">
+        {/* Safe actions on left: complete and detach */}
+        {onComplete && (
+          <button
+            type="button"
+            onClick={onComplete}
+            className="text-muted hover:text-success flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Mark as done"
+          >
+            <Check className="size-3" />
+          </button>
+        )}
+        {onDetach && (
+          <button
+            type="button"
+            onClick={onDetach}
+            className="text-muted hover:text-secondary flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Detach from message"
+          >
+            <X className="size-3" />
+          </button>
+        )}
         <MessageSquare className="size-3 shrink-0 text-[var(--color-review-accent)]" />
         <span className="text-primary min-w-0 flex-1 truncate font-mono">
           {filePath}:{lineRange}
         </span>
-        {onRemove && (
+        {/* Destructive action on right */}
+        {onDelete && (
           <button
             type="button"
-            onClick={onRemove}
-            className="text-muted hover:text-error -mr-0.5 flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
-            title="Remove from message"
+            onClick={onDelete}
+            className="text-muted hover:text-error flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Delete review"
           >
-            <X className="size-3" />
+            <Trash2 className="size-3" />
           </button>
         )}
       </div>
@@ -183,8 +212,12 @@ const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
 interface ReviewBlockFromDataProps {
   /** Structured review data (no parsing needed) */
   data: ReviewNoteDataForDisplay;
-  /** Optional callback to remove the review */
-  onRemove?: () => void;
+  /** Detach from chat (sets status back to pending) */
+  onDetach?: () => void;
+  /** Mark as complete (checked) */
+  onComplete?: () => void;
+  /** Permanently delete the review */
+  onDelete?: () => void;
   /** Optional callback to edit the comment */
   onEditComment?: (newComment: string) => void;
 }
@@ -195,7 +228,9 @@ interface ReviewBlockFromDataProps {
  */
 export const ReviewBlockFromData: React.FC<ReviewBlockFromDataProps> = ({
   data,
-  onRemove,
+  onDetach,
+  onComplete,
+  onDelete,
   onEditComment,
 }) => {
   return (
@@ -204,7 +239,9 @@ export const ReviewBlockFromData: React.FC<ReviewBlockFromDataProps> = ({
       lineRange={data.lineRange}
       code={data.selectedCode}
       comment={data.userNote}
-      onRemove={onRemove}
+      onDetach={onDetach}
+      onComplete={onComplete}
+      onDelete={onDelete}
       onEditComment={onEditComment}
     />
   );
