Show file contents for created and deleted files

Signed-off-by: Rūdolfs Ošiņš <[email protected]>

Author: rudolfs

proxy-client/commit.ts

@@ -81,6 +81,16 @@ export interface CopiedFile {
   oldPath: string;
 }
 
+export interface CreatedFile {
+  diff: FileDiff;
+  path: string;
+}
+
+export interface DeletedFile {
+  diff: FileDiff;
+  path: string;
+}
+
 export interface ModifiedFile {
   diff: FileDiff;
   path: string;
@@ -93,8 +103,8 @@ export interface MovedFile {
 
 export interface Diff {
   copied: CopiedFile[];
-  created: string[];
-  deleted: string[];
+  created: CreatedFile[];
+  deleted: DeletedFile[];
   modified: ModifiedFile[];
   moved: MovedFile[];
 }
@@ -106,8 +116,8 @@ const diffSchema: zod.Schema<Diff> = zod.object({
       oldPath: zod.string(),
     })
   ),
-  created: zod.array(zod.string()),
-  deleted: zod.array(zod.string()),
+  created: zod.array(zod.object({ path: zod.string(), diff: fileDiffSchema })),
+  deleted: zod.array(zod.object({ path: zod.string(), diff: fileDiffSchema })),
   modified: zod.array(
     zod.object({
       path: zod.string(),

ui/App/ProjectScreen/Source/SourceBrowser/Changeset.svelte

@@ -8,12 +8,21 @@
 <script lang="ts">
   import type { Diff, CommitStats } from "proxy-client/commit";
 
-  import FileIcon from "design-system/icons/File.svelte";
-
   import FileDiff from "./FileDiff.svelte";
 
   export let diff: Diff;
   export let stats: CommitStats;
+
+  const changedFileCount: number =
+    diff.modified.length + diff.created.length + diff.deleted.length;
+
+  function pluralize(word: string, count: number) {
+    if (count > 1) {
+      return `${count} ${word}s`;
+    } else {
+      return `${count} ${word}`;
+    }
+  }
 </script>
 
 <style>
@@ -30,62 +39,30 @@
   .changeset-summary .deletions {
     color: var(--color-negative);
   }
-
-  .file-header {
-    height: 3rem;
-    display: flex;
-    align-items: center;
-    background: none;
-    border-bottom: 1px solid var(--color-foreground-level-3);
-    border-radius: 0;
-    padding: 0.75rem;
-  }
-
-  .file-header:last-child {
-    border-bottom: none;
-    margin-bottom: 1rem;
-  }
-
-  .file-header .diff-type {
-    margin-left: 1rem;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-  }
-
-  .file-header .diff-type.created {
-    color: var(--color-positive);
-    background-color: var(--color-positive-level-1);
-  }
-
-  .file-header .diff-type.deleted {
-    color: var(--color-negative);
-    background-color: var(--color-negative-level-1);
-  }
 </style>
 
 <div class="changeset-summary">
-  {#if diff.modified.length > 0}
-    <span class="typo-semi-bold"> {diff.modified.length} file(s) changed </span>
+  {#if changedFileCount > 0}
+    <span class="typo-semi-bold">
+      {pluralize("file", changedFileCount)}
+      changed
+    </span>
     with
-    <span class="additions typo-semi-bold"> {stats.additions} additions </span>
+    <span class="additions typo-semi-bold">
+      {pluralize("addition", stats.additions)}
+    </span>
     and
-    <span class="deletions typo-semi-bold"> {stats.deletions} deletions </span>
+    <span class="deletions typo-semi-bold">
+      {pluralize("deletion", stats.deletions)}
+    </span>
   {/if}
 </div>
 <div>
-  {#each diff.created as path (path)}
-    <header class="file-header">
-      <FileIcon style="margin-right: 8px;" />
-      <p class="typo-text-bold">{path}</p>
-      <span class="diff-type created">created</span>
-    </header>
+  {#each diff.created as created (created)}
+    <FileDiff file={created} label="created" />
   {/each}
-  {#each diff.deleted as path (path)}
-    <header class="file-header">
-      <FileIcon style="margin-right: 8px;" />
-      <p class="typo-text-bold">{path}</p>
-      <span class="diff-type deleted">deleted</span>
-    </header>
+  {#each diff.deleted as deleted (deleted)}
+    <FileDiff file={deleted} label="deleted" />
   {/each}
 </div>
 

ui/App/ProjectScreen/Source/SourceBrowser/FileDiff.svelte

@@ -6,14 +6,19 @@
  LICENSE file.
 -->
 <script lang="ts">
-  import type { ModifiedFile } from "ui/src/source/diff";
+  import type {
+    ModifiedFile,
+    CreatedFile,
+    DeletedFile,
+  } from "ui/src/source/diff";
   import { lineNumberL, lineNumberR, lineSign } from "ui/src/source/diff";
 
   import ChevronDownIcon from "design-system/icons/ChevronDown.svelte";
   import ChevronRightIcon from "design-system/icons/ChevronRight.svelte";
   import FileIcon from "design-system/icons/File.svelte";
 
-  export let file: ModifiedFile;
+  export let file: ModifiedFile | CreatedFile | DeletedFile;
+  export let label: "created" | "deleted" | undefined = undefined;
 
   let collapsed: boolean = false;
 </script>
@@ -107,6 +112,20 @@
   .collapse-button:hover :global(svg) {
     fill: var(--color-foreground-level-6);
   }
+  .created {
+    color: var(--color-positive);
+    background-color: var(--color-positive-level-1);
+  }
+
+  .deleted {
+    color: var(--color-negative);
+    background-color: var(--color-negative-level-1);
+  }
+  .diff-type {
+    margin-left: 1rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+  }
 </style>
 
 <article class="changeset-file">
@@ -123,6 +142,12 @@
     </div>
     <FileIcon style="margin-right: 0.5rem;" />
     <p class="typo-text-bold">{file.path}</p>
+    {#if label}
+      <span
+        class="diff-type"
+        class:created={label === "created"}
+        class:deleted={label === "deleted"}>{label}</span>
+    {/if}
   </header>
   {#if !collapsed}
     <main>

ui/src/source/diff.ts

@@ -5,13 +5,15 @@
 // LICENSE file.
 
 import {
+  CreatedFile,
+  DeletedFile,
+  Diff,
   LineDiff,
   LineDiffType,
   ModifiedFile,
-  Diff,
 } from "proxy-client/commit";
 
-export type { ModifiedFile, Diff };
+export type { CreatedFile, DeletedFile, ModifiedFile, Diff };
 
 export const lineNumberR = (line: LineDiff): string | number => {
   switch (line.type) {