From 170c6ec759299874ac5c617de1dba4958c6f8844 Mon Sep 17 00:00:00 2001 From: d-kimsuon Date: Sun, 19 Oct 2025 18:46:36 +0900 Subject: [PATCH 1/2] feat: enhance commit section in DiffModal with collapsible UI - Added a collapsible section for commit changes in the DiffModal, improving user experience by allowing users to expand or collapse the commit controls. - Integrated file selection controls and commit message input within the collapsible section for better organization. - Updated styling and layout for improved clarity and interaction. --- .../components/diffModal/DiffModal.tsx | 283 ++++++++++-------- 1 file changed, 159 insertions(+), 124 deletions(-) diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/diffModal/DiffModal.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/diffModal/DiffModal.tsx index c29bab8..2c123f7 100644 --- a/src/app/projects/[projectId]/sessions/[sessionId]/components/diffModal/DiffModal.tsx +++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/diffModal/DiffModal.tsx @@ -1,6 +1,13 @@ "use client"; -import { FileText, GitBranch, Loader2, RefreshCcwIcon } from "lucide-react"; +import { + ChevronDown, + ChevronUp, + FileText, + GitBranch, + Loader2, + RefreshCcwIcon, +} from "lucide-react"; import type { FC } from "react"; import { useCallback, useEffect, useId, useState } from "react"; import { toast } from "sonner"; @@ -145,6 +152,9 @@ export const DiffModal: FC = ({ // Commit message state const [commitMessage, setCommitMessage] = useState(""); + // Commit section collapse state (default: collapsed) + const [isCommitSectionExpanded, setIsCommitSectionExpanded] = useState(false); + // API hooks const { data: branchesData, isLoading: isLoadingBranches } = useGitBranches(projectId); @@ -435,133 +445,158 @@ export const DiffModal: FC = ({ {/* Commit UI Section */} {compareTo === "working" && ( -
- {/* File selection controls */} -
-
- - - - {selectedCount} / {diffData.data.files.length} files - selected - -
-
+
+ {/* Section header with toggle */} + - {/* File list with checkboxes */} -
- {diffData.data.files.map((file) => ( -
- handleToggleFile(file.filePath)} - disabled={commitMutation.isPending} - /> - + {/* Collapsible content */} + {isCommitSectionExpanded && ( +
+ {/* File selection controls */} +
+
+ + + + {selectedCount} / {diffData.data.files.length} files + selected + +
- ))} -
- {/* Commit message input */} -
- -