From 3c939e8e694bbba5b16bd13d617fb0d41f229eb0 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 12 Feb 2026 11:20:38 -0800
Subject: [PATCH] Use Lucide icons for ChatView git action menu

- Replace custom inline SVGs with Lucide commit, push, and GitHub icons
- Keep git action behavior unchanged while applying minor style cleanup
---
 apps/web/src/components/ChatView.tsx | 86 +++++-----------------------
 1 file changed, 15 insertions(+), 71 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 7770ebf0397c5f62c61937992e62a4f657885fe5..12a07299b002a49350f591f42b97f9bc7e1f3263 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -40,6 +40,7 @@ import BranchToolbar from "./BranchToolbar";
 import { isTerminalToggleShortcut } from "../terminal-shortcuts";
 import ChatMarkdown from "./ChatMarkdown";
 import ThreadTerminalDrawer from "./ThreadTerminalDrawer";
+import { CloudUploadIcon, GitCommitIcon, GithubIcon } from "lucide-react";
 
 function formatMessageMeta(createdAt: string, duration: string | null): string {
   if (!duration) return formatTimestamp(createdAt);
@@ -70,62 +71,14 @@ function GitActionIcon(props: { icon: GitActionMenuItem["icon"]; disabled: boole
   const toneClass = props.disabled ? "text-muted-foreground/45" : "text-foreground/85";
 
   if (props.icon === "commit") {
-    return (
-      <svg
-        viewBox="0 0 20 20"
-        aria-hidden="true"
-        className={`h-5 w-5 shrink-0 ${toneClass}`}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.8"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="10" cy="10" r="4.2" />
-        <path d="M1.8 10h4.2" />
-        <path d="M14 10h4.2" />
-      </svg>
-    );
+    return <GitCommitIcon className={`h-5 w-5 shrink-0 ${toneClass}`} />;
   }
 
   if (props.icon === "push") {
-    return (
-      <svg
-        viewBox="0 0 20 20"
-        aria-hidden="true"
-        className={`h-5 w-5 shrink-0 ${toneClass}`}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.8"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M5.2 16h9.6a3.2 3.2 0 0 0 .2-6.4h-.5A4.8 4.8 0 0 0 5 9 3.7 3.7 0 0 0 5.2 16Z" />
-        <path d="M10 5.8v6.2" />
-        <path d="m7.7 8.1 2.3-2.3 2.3 2.3" />
-      </svg>
-    );
+    return <CloudUploadIcon className={`h-5 w-5 shrink-0 ${toneClass}`} />;
   }
 
-  return (
-    <svg
-      viewBox="0 0 20 20"
-      aria-hidden="true"
-      className={`h-5 w-5 shrink-0 ${toneClass}`}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="6" cy="5" r="1.7" />
-      <circle cx="6" cy="15" r="1.7" />
-      <circle cx="14" cy="10" r="1.7" />
-      <path d="M6 6.8v6.5" />
-      <path d="M7.8 6.1c2.9 0 3.8 1.4 5.1 2.9" />
-      <path d="M7.8 13.9c2.9 0 3.8-1.4 5.1-2.9" />
-    </svg>
-  );
+  return <GithubIcon className={`h-5 w-5 shrink-0 ${toneClass}`} />;
 }
 
 function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
@@ -334,8 +287,7 @@ export default function ChatView() {
           sandboxMode: "workspace-write",
         } as const);
   const gitCwd = activeThread?.worktreePath ?? activeProject?.cwd ?? null;
-  const gitBaseDisabled =
-    !api || !gitCwd || !gitStatus || isGitActionRunning;
+  const gitBaseDisabled = !api || !gitCwd || !gitStatus || isGitActionRunning;
   const gitActionMenuItems = useMemo<GitActionMenuItem[]>(() => {
     if (!gitStatus) return [];
 
@@ -343,7 +295,9 @@ export default function ChatView() {
     const hasOpenPr = gitStatus.openPr !== null;
     const canCommit = !gitBaseDisabled && gitStatus.hasWorkingTreeChanges;
     const canPush =
-      !gitBaseDisabled && hasBranch && (gitStatus.hasWorkingTreeChanges || gitStatus.aheadCount > 0);
+      !gitBaseDisabled &&
+      hasBranch &&
+      (gitStatus.hasWorkingTreeChanges || gitStatus.aheadCount > 0);
     const canViewPr =
       !gitBaseDisabled &&
       hasBranch &&
@@ -403,9 +357,7 @@ export default function ChatView() {
           action,
         });
       } catch (error) {
-        setGitActionError(
-          error instanceof Error ? error.message : "Git action failed.",
-        );
+        setGitActionError(error instanceof Error ? error.message : "Git action failed.");
       } finally {
         setIsGitActionRunning(false);
         try {
@@ -425,9 +377,7 @@ export default function ChatView() {
     (activeThread.messages.length > 0 ||
       (activeThread.session !== null && activeThread.session.status !== "closed")),
   );
-  const terminalShortcutHint = navigator.platform.includes("Mac")
-    ? "\u2318J"
-    : "Ctrl+J";
+  const terminalShortcutHint = navigator.platform.includes("Mac") ? "\u2318J" : "Ctrl+J";
   const focusComposer = useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
@@ -505,11 +455,7 @@ export default function ChatView() {
       } catch (error) {
         if (!cancelled) {
           setGitStatus(null);
-          setGitActionError(
-            error instanceof Error
-              ? error.message
-              : "Failed to read git status.",
-          );
+          setGitActionError(error instanceof Error ? error.message : "Failed to read git status.");
         }
       }
     };
@@ -927,9 +873,7 @@ export default function ChatView() {
               </button>
               {isGitMenuOpen && (
                 <div className="absolute right-0 top-full z-50 mt-1 w-[280px] rounded-3xl border border-border bg-popover p-3 shadow-xl">
-                  <p className="px-3 pb-2 text-[13px] text-muted-foreground/75">
-                    Git actions
-                  </p>
+                  <p className="px-3 pb-2 text-[13px] text-muted-foreground/75">Git actions</p>
                   {gitActionMenuItems.map((item) => {
                     return (
                       <button
@@ -1036,7 +980,7 @@ export default function ChatView() {
                   </button>
                   <button
                     type="button"
-                    className="rounded-md border border-sky-300/30 bg-sky-500/[0.15] px-2 py-1 text-[11px] text-sky-100 transition-colors duration-150 hover:bg-sky-500/[0.22] disabled:cursor-not-allowed disabled:opacity-50"
+                    className="rounded-md border border-sky-300/30 bg-sky-500/15 px-2 py-1 text-[11px] text-sky-100 transition-colors duration-150 hover:bg-sky-500/22 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isResponding}
                     onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")}
                   >
@@ -1052,7 +996,7 @@ export default function ChatView() {
                   </button>
                   <button
                     type="button"
-                    className="rounded-md border border-rose-300/30 bg-rose-500/[0.12] px-2 py-1 text-[11px] text-rose-100 transition-colors duration-150 hover:bg-rose-500/[0.2] disabled:cursor-not-allowed disabled:opacity-50"
+                    className="rounded-md border border-rose-300/30 bg-rose-500/12 px-2 py-1 text-[11px] text-rose-100 transition-colors duration-150 hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isResponding}
                     onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
                   >
@@ -1171,7 +1115,7 @@ export default function ChatView() {
                   <Fragment key={timelineEntry.id}>
                     <div className="flex justify-end">
                       <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3">
-                        <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-foreground">
+                        <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">
                           {timelineEntry.message.text}
                         </pre>
                         <p className="mt-1.5 text-right text-[10px] text-muted-foreground/30">
-- 
2.54.0