From 46176bd46b918b1cd87cf48fb36aa484acfc645c Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Mon, 1 Aug 2022 13:19:26 +0200
Subject: [PATCH] Various patch improvements

Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 cypress/e2e/project.spec.ts                     |  2 +-
 src/Comment.svelte                              |  6 +++++-
 src/base/projects/Issues.svelte                 | 12 ++----------
 src/base/projects/Patch.svelte                  |  6 ++----
 src/base/projects/Patch/PatchSideBar.svelte     |  1 -
 src/base/projects/Patch/PatchTabBar.svelte      | 17 +++++++++++------
 src/base/projects/Patch/PatchTimeline.svelte    |  3 +--
 src/base/projects/Patches.svelte                | 12 ++++--------
 src/base/projects/ProjectMeta.svelte            |  1 +
 .../projects/SourceBrowser/Changeset.svelte     | 16 ++++++++--------
 src/base/projects/SourceBrowser/FileDiff.svelte |  2 +-
 11 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/cypress/e2e/project.spec.ts b/cypress/e2e/project.spec.ts
index a2d374cef..768506b53 100644
--- a/cypress/e2e/project.spec.ts
+++ b/cypress/e2e/project.spec.ts
@@ -155,7 +155,7 @@ describe("Project view", () => {
     cy.get("header .summary .text-medium").should("have.text", "initial commit");
     cy.get("header pre.description").should("have.text", "this is the first commit of many");
     cy.get("header .committer").should("have.text", "dabit3");
-    cy.get("div.changeset-summary").should("have.text", "1 file(s) created, 1 file(s) deleted and 1 file(s) changed\n  with\n  0 addition(s)\n  and\n  0 deletion(s)");
+    cy.get("div.changeset-summary").should("have.text", "1 file(s) changed, 1 file(s) created, 1 file(s) deleted\n  with\n  0 addition(s)\n  and\n  0 deletion(s)");
     cy.get("header.file-header:nth-child(1) p.file-path")
       .first()
       .should("have.text", "test.md")
diff --git a/src/Comment.svelte b/src/Comment.svelte
index 667b2a357..d44232a1a 100644
--- a/src/Comment.svelte
+++ b/src/Comment.svelte
@@ -84,7 +84,11 @@
       <ReactionSelector on:select={selectReaction} />
     </div>
     <div class="card-body">
-      <Markdown content={comment.body} {getImage} />
+      {#if comment.body === ""}
+        <span class="subtle">No description.</span>
+      {:else}
+        <Markdown content={comment.body} {getImage} />
+      {/if}
       {#if comment.reactions.length > 0}
         <div class="reactions">
           <Reactions
diff --git a/src/base/projects/Issues.svelte b/src/base/projects/Issues.svelte
index f2c231aac..3be1e4f67 100644
--- a/src/base/projects/Issues.svelte
+++ b/src/base/projects/Issues.svelte
@@ -26,21 +26,13 @@
     font-size: 0.875rem;
   }
   .issues-list {
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-medium);
     overflow: hidden;
   }
-
-  .teaser:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-  .teaser:last-child {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
   .teaser:not(:last-child) {
     border-bottom: 1px dashed var(--color-background);
   }
+
   @media (max-width: 960px) {
     .issues {
       padding-left: 2rem;
diff --git a/src/base/projects/Patch.svelte b/src/base/projects/Patch.svelte
index 0307e0f5c..d1ab212a4 100644
--- a/src/base/projects/Patch.svelte
+++ b/src/base/projects/Patch.svelte
@@ -87,10 +87,6 @@
   .flex {
     display: flex;
   }
-  main {
-    background-color: var(--color-foreground-background);
-    padding: 0 1rem;
-  }
 
   @media (max-width: 960px) {
     .patch {
@@ -122,12 +118,14 @@
       timestamp={patch.timestamp}
       caption="opened" />
   </header>
+
   <PatchTabBar
     {activeTab}
     {revisionNumber}
     revisions={patch.revisions}
     on:switchTab={onSwitch}
     on:revisionChanged={onRevisionChanged} />
+
   <main>
     {#if activeTab === PatchTab.Timeline}
       <div class="flex">
diff --git a/src/base/projects/Patch/PatchSideBar.svelte b/src/base/projects/Patch/PatchSideBar.svelte
index acfe63199..b1f7a9531 100644
--- a/src/base/projects/Patch/PatchSideBar.svelte
+++ b/src/base/projects/Patch/PatchSideBar.svelte
@@ -11,7 +11,6 @@
     border-radius: var(--border-radius-medium);
     font-size: 0.875rem;
     padding-left: 1rem;
-    margin: 1.5rem 0;
   }
   .metadata-section {
     margin-bottom: 1rem;
diff --git a/src/base/projects/Patch/PatchTabBar.svelte b/src/base/projects/Patch/PatchTabBar.svelte
index ea7ff7b63..dad476c68 100644
--- a/src/base/projects/Patch/PatchTabBar.svelte
+++ b/src/base/projects/Patch/PatchTabBar.svelte
@@ -32,22 +32,27 @@
 
 <style>
   .bar {
-    background-color: var(--color-foreground-background);
-    padding: 1rem;
+    padding: 1rem 0;
     border-bottom: solid 1px var(--color-background);
   }
   .tabs {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+  }
+  .tab {
     color: var(--color-foreground-80);
-    width: 21rem;
+    font-family: var(--font-family-monospace);
+    font-size: 0.75rem;
   }
   .tab:hover {
     color: var(--color-foreground);
     cursor: pointer;
   }
+  .separator {
+    color: var(--color-foreground-faded);
+    margin: 0 0.5rem;
+  }
   .active {
     color: var(--color-foreground);
     cursor: default !important;
@@ -72,13 +77,13 @@
       on:click={() => dispatch("switchTab", PatchTab.Timeline)}>
       Patch
     </div>
-    <div>|</div>
+    <span class="separator">&middot;</span>
     <div
       class="tab" class:active={activeTab === PatchTab.Diff}
       on:click={() => dispatch("switchTab", PatchTab.Diff)}>
       Changeset
     </div>
-    <div>|</div>
+    <span class="separator">&middot;</span>
     <div class="revision-toggle">
       <button
         class:tab={revisions.length > 1}
diff --git a/src/base/projects/Patch/PatchTimeline.svelte b/src/base/projects/Patch/PatchTimeline.svelte
index d6456abd5..2a4187e48 100644
--- a/src/base/projects/Patch/PatchTimeline.svelte
+++ b/src/base/projects/Patch/PatchTimeline.svelte
@@ -28,7 +28,6 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    margin: 1.5rem 0;
   }
   .replies {
     margin-left: 2rem;
@@ -48,7 +47,7 @@
             urn: element.inner.peer.person.urn,
             profile: element.inner.peer.person,
           }}
-          caption={`did merge to ${formatSeedId(element.inner.peer.id)}`}
+          caption={`merged to ${formatSeedId(element.inner.peer.id)}`}
           timestamp={element.timestamp}
           {config} />
       </div>
diff --git a/src/base/projects/Patches.svelte b/src/base/projects/Patches.svelte
index beef2ec6e..34d33151a 100644
--- a/src/base/projects/Patches.svelte
+++ b/src/base/projects/Patches.svelte
@@ -25,18 +25,14 @@
     padding: 0 2rem 0 8rem;
     font-size: 0.875rem;
   }
-
-  .teaser:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-  .teaser:last-child {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+  .patches-list {
+    border-radius: var(--border-radius-medium);
+    overflow: hidden;
   }
   .teaser:not(:last-child) {
     border-bottom: 1px dashed var(--color-background);
   }
+
   @media (max-width: 960px) {
     .patches {
       padding-left: 2rem;
diff --git a/src/base/projects/ProjectMeta.svelte b/src/base/projects/ProjectMeta.svelte
index ca0400368..d0291cf5c 100644
--- a/src/base/projects/ProjectMeta.svelte
+++ b/src/base/projects/ProjectMeta.svelte
@@ -16,6 +16,7 @@
       path: "/",
       revision: null,
       issue: null,
+      patch: null,
     });
   }
 </script>
diff --git a/src/base/projects/SourceBrowser/Changeset.svelte b/src/base/projects/SourceBrowser/Changeset.svelte
index cafa7b1c7..c38a48e3f 100644
--- a/src/base/projects/SourceBrowser/Changeset.svelte
+++ b/src/base/projects/SourceBrowser/Changeset.svelte
@@ -7,17 +7,18 @@
   export let stats: DiffStats;
 
   const diffDescription = ({ modified, created, deleted }: Diff): string => {
-    let s = "";
+    let s = [];
+
+    if (modified.length) {
+      s.push(`${modified.length} file(s) changed`);
+    }
     if (created.length) {
-      s = s.concat(`${created.length} file(s) created`);
+      s.push(`${created.length} file(s) created`);
     }
     if (deleted.length) {
-      s = s.concat(`, ${deleted.length} file(s) deleted`);
+      s.push(`${deleted.length} file(s) deleted`);
     }
-    if (modified.length) {
-      s = s.concat(` and ${modified.length} file(s) changed`);
-    }
-    return s;
+    return s.join(", ");
   };
 </script>
 
@@ -35,7 +36,6 @@
   .diff-listing {
     /* This border forces to keep the FileDiff margin-bottom visible */
     border: 1px solid transparent;
-    margin: 0 1rem;
   }
 </style>
 
diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte
index a1de30721..85739242b 100644
--- a/src/base/projects/SourceBrowser/FileDiff.svelte
+++ b/src/base/projects/SourceBrowser/FileDiff.svelte
@@ -127,7 +127,7 @@
   }
   .file-header .diff-type {
     margin-left: 1rem;
-    padding: 0.25rem 0.5rem;
+    padding: 0rem 0.5rem;
     border-radius: var(--border-radius-medium);
   }
 </style>