handle added, deleted, modified name cases, space for large number

Author: liuliu-dev

src/components/DiffSection/ChangedFileDetails.tsx

@@ -14,6 +14,8 @@ export default function ChangedFileDetails({ file }: Props) {
   // const path = file.filename.split("/").slice(0, -1).join("/") + "/";
   switch (file.status) {
     case "added":
+    case "new":
+    case "created":
       return (
         <li>
           <FiPlus className={css.added} />
@@ -22,6 +24,9 @@ export default function ChangedFileDetails({ file }: Props) {
         </li>
       );
     case "modified":
+    case "changed":
+    case "updated":
+    case "edited":
       return (
         <li>
           <RiPencilFill className={css.modified} />
@@ -36,6 +41,8 @@ export default function ChangedFileDetails({ file }: Props) {
         </li>
       );
     case "deleted":
+    case "removed":
+    case "dropped":
       return (
         <li>
           <FiMinus className={css.deleted} />

src/components/DiffSection/index.module.css

@@ -59,6 +59,8 @@
     align-items: center;
     svg {
       flex-shrink: 0;
+      width: 0.75rem;
+      margin-right: 0.75rem;
     }
   }
 }
@@ -67,23 +69,23 @@
   color: #c5a15a;
   margin-right: 0.25rem;
   font-weight: 600;
-  width: 0.75rem;
+  width: 1.25rem;
 }
 
 .deleted {
   color: #fa7978;
   margin-right: 0.25rem;
   font-weight: 600;
   stroke-width: 3px;
-  width: 0.75rem;
+  width: 1.25rem;
 }
 
 .added {
   color: #29e3c1;
   margin-right: 0.25rem;
   font-weight: 600;
   stroke-width: 3px;
-  width: 0.75rem;
+  width: 1.25rem;
 }
 
 .file {

src/components/DiffSection/index.tsx

@@ -41,7 +41,6 @@ export default function DiffSection({ commit, diff, forDolt, loading }: Props) {
         </div>
         <div className={css.message}>{commit.commit.message}</div>
         {loading && <SmallLoader loaded={!loading} className={css.loading} />}
-        {/* {err && <div className={css.error}>{err}</div>} */}
       </div>
       {!!files?.length && (
         <>
@@ -89,12 +88,19 @@ function getChanged(files: ChangedItem[]): GetChangedReturnType {
   files.forEach(file => {
     switch (file.status) {
       case "added":
+      case "new":
+      case "created":
         added++;
         break;
       case "modified":
+      case "changed":
+      case "updated":
+      case "edited":
         modified++;
         break;
       case "deleted":
+      case "removed":
+      case "dropped":
         deleted++;
         break;
     }