refactor: simplify git diff status icons

Author: Dimillian

package-lock.json

@@ -17,7 +17,6 @@
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-file-icon": "^1.6.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   },

package.json

@@ -1,4 +1,3 @@
-import { FileIcon, defaultStyles } from "react-file-icon";
 import type { GitLogEntry } from "../types";
 import type { MouseEvent as ReactMouseEvent } from "react";
 import { Menu, MenuItem } from "@tauri-apps/api/menu";
@@ -48,6 +47,40 @@ function splitNameAndExtension(name: string) {
   };
 }
 
+function getStatusSymbol(status: string) {
+  switch (status) {
+    case "A":
+      return "+";
+    case "M":
+      return "M";
+    case "D":
+      return "-";
+    case "R":
+      return "R";
+    case "T":
+      return "T";
+    default:
+      return "?";
+  }
+}
+
+function getStatusClass(status: string) {
+  switch (status) {
+    case "A":
+      return "diff-icon-added";
+    case "M":
+      return "diff-icon-modified";
+    case "D":
+      return "diff-icon-deleted";
+    case "R":
+      return "diff-icon-renamed";
+    case "T":
+      return "diff-icon-typechange";
+    default:
+      return "diff-icon-unknown";
+  }
+}
+
 export function GitDiffPanel({
   mode,
   onModeChange,
@@ -153,8 +186,9 @@ export function GitDiffPanel({
           {files.map((file) => {
             const { name } = splitPath(file.path);
             const { base, extension } = splitNameAndExtension(name);
-            const style = extension ? defaultStyles[extension] : undefined;
             const isSelected = file.path === selectedPath;
+            const statusSymbol = getStatusSymbol(file.status);
+            const statusClass = getStatusClass(file.status);
             return (
               <div
                 key={file.path}
@@ -169,8 +203,8 @@ export function GitDiffPanel({
                   }
                 }}
               >
-                <span className="diff-icon" aria-hidden>
-                  <FileIcon extension={extension || "file"} {...style} />
+                <span className={`diff-icon ${statusClass}`} aria-hidden>
+                  {statusSymbol}
                 </span>
                 <div className="diff-file">
                   <div className="diff-path">

src/components/GitDiffPanel.tsx

@@ -72,7 +72,7 @@
 .diff-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 3px;
   overflow-y: auto;
   flex: 1;
   padding-right: 2px;
@@ -93,8 +93,8 @@
 .diff-row {
   display: flex;
   gap: 8px;
-  align-items: flex-start;
-  padding: 6px 6px;
+  align-items: center;
+  padding: 4px 6px;
   border-radius: 8px;
   cursor: pointer;
 }
@@ -109,15 +109,41 @@
 }
 
 .diff-icon {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   display: grid;
   place-items: center;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  line-height: 1;
 }
 
-.diff-icon svg {
-  width: 16px;
-  height: 16px;
+.diff-icon-added {
+  color: #47d488;
+  border-color: rgba(71, 212, 136, 0.4);
+  background: rgba(71, 212, 136, 0.12);
+}
+
+.diff-icon-modified {
+  color: #f5c363;
+  border-color: rgba(245, 195, 99, 0.4);
+  background: rgba(245, 195, 99, 0.12);
+}
+
+.diff-icon-deleted {
+  color: #ff6b6b;
+  border-color: rgba(255, 107, 107, 0.45);
+  background: rgba(255, 107, 107, 0.12);
+}
+
+.diff-icon-renamed,
+.diff-icon-typechange,
+.diff-icon-unknown {
+  color: var(--text-faint);
+  border-color: var(--border-subtle);
+  background: var(--surface-control);
 }
 
 .diff-file {