diff --git a/DESIGN.md b/DESIGN.md index 7cf2f352..eed3a0ae 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -416,6 +416,9 @@ Do not add motion for decoration. New animation must honor File/folder rows, filter, summary toggle, and review progress retain desktop control heights and spacing; do not apply the general mobile enlargement here. - Hide redundant summary/shortcut detail before removing essential actions. + Keep the Files changed total and inline added/deleted/modified/renamed counts + visible in the drawer. Use file icons, semantic status colors, hover labels, + and accessible names; wrap the group when the sidebar is too narrow. - At mobile widths or coarse pointers, app-owned controls target 44px hit heights; icon controls also reach 44px width. Text-input sizing uses `--text-input-touch`. The compact View options and collapse/expand icons match the theme control's diff --git a/apps/web/src/ReviewTools.tsx b/apps/web/src/ReviewTools.tsx index 16891e0f..e9294b90 100644 --- a/apps/web/src/ReviewTools.tsx +++ b/apps/web/src/ReviewTools.tsx @@ -1,4 +1,11 @@ -import { ChevronDownIcon, CopyIcon } from "lucide-react"; +import { + ChevronDownIcon, + CopyIcon, + FileMinus2Icon, + FilePenLineIcon, + FilePlus2Icon, + FileSymlinkIcon, +} from "lucide-react"; import { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { @@ -145,6 +152,34 @@ export function ChangeSummary() { save("summary-collapsed", String(summaryCollapsed)); }, [summaryCollapsed]); const allFiles = repository?.files ?? []; + const fileChanges = [ + { + kind: "added", + Icon: FilePlus2Icon, + count: allFiles.filter((file) => ["A", "?", "C"].includes(file.status)) + .length, + description: "Files added (including untracked and copied files)", + }, + { + kind: "deleted", + Icon: FileMinus2Icon, + count: allFiles.filter((file) => file.status === "D").length, + description: "Files deleted", + }, + { + kind: "modified", + Icon: FilePenLineIcon, + count: allFiles.filter((file) => ["M", "T", "U"].includes(file.status)) + .length, + description: "Files modified (including type changes and conflicts)", + }, + { + kind: "renamed", + Icon: FileSymlinkIcon, + count: allFiles.filter((file) => file.status === "R").length, + description: "Files renamed", + }, + ]; const additions = allFiles.reduce((sum, file) => sum + file.additions, 0); const deletions = allFiles.reduce((sum, file) => sum + file.deletions, 0); const reviewedCount = allFiles.filter(isReviewed).length; @@ -166,9 +201,30 @@ export function ChangeSummary() {