Skip to content

Commit df348e1

Browse files
committed
Add collapsible review card footer
1 parent b027795 commit df348e1

2 files changed

Lines changed: 21 additions & 7 deletions

File tree

src/ui/workspace-app.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,9 @@ body {
222222
}
223223

224224
.review-more {
225+
display: flex;
226+
align-items: center;
227+
justify-content: space-between;
225228
width: 100%;
226229
min-height: 44px;
227230
padding: 0 16px;
@@ -240,6 +243,10 @@ body {
240243
color: var(--color-text-primary, #f5f5f6);
241244
}
242245

246+
.review-more .chevron {
247+
flex: none;
248+
}
249+
243250
.review-diff {
244251
display: grid;
245252
max-height: 520px;

src/ui/workspace-app.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -352,8 +352,7 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
352352
unmountPayload();
353353

354354
const files = card.files ?? [];
355-
const visibleFiles = reviewFilesExpanded ? files : files.slice(0, 3);
356-
const hiddenCount = Math.max(0, files.length - visibleFiles.length);
355+
const hiddenCount = Math.max(0, files.length - 3);
357356
const expandable = isExpandableCard(card);
358357
const main = element("main", { className: "shell" });
359358
const section = element("section", { className: "tool-card review" });
@@ -398,16 +397,24 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
398397
body.append(payload);
399398

400399
if (hiddenCount > 0) {
401-
const showMore = element("button", {
400+
const toggleFiles = element("button", {
402401
className: "review-more",
403402
type: "button",
404-
text: `Show ${hiddenCount} more ${hiddenCount === 1 ? "file" : "files"}`,
403+
ariaExpanded: String(reviewFilesExpanded),
405404
});
406-
showMore.addEventListener("click", () => {
407-
reviewFilesExpanded = true;
405+
toggleFiles.append(
406+
element("span", {
407+
text: reviewFilesExpanded
408+
? "Collapse files"
409+
: `Show ${hiddenCount} more ${hiddenCount === 1 ? "file" : "files"}`,
410+
}),
411+
renderChevron(reviewFilesExpanded, true),
412+
);
413+
toggleFiles.addEventListener("click", () => {
414+
reviewFilesExpanded = !reviewFilesExpanded;
408415
render();
409416
});
410-
body.append(showMore);
417+
body.append(toggleFiles);
411418
}
412419

413420
section.append(body);

0 commit comments

Comments
 (0)