From daba9fca8281405134d64036bde300f2181f73fe Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 18 Mar 2024 14:32:13 +0100
Subject: [PATCH] Make revision actions less tall and refine paddings

---
 src/components/Comment.svelte           | 85 ++++++++++++++-----------
 src/components/ReactionSelector.svelte  |  2 +-
 src/components/Reactions.svelte         |  1 -
 src/views/projects/Cob/CobHeader.svelte |  3 +
 src/views/projects/Cob/Revision.svelte  | 30 +++++----
 src/views/projects/Issue.svelte         | 10 +--
 src/views/projects/Patch.svelte         |  1 +
 7 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index e046fd4b9..8165efd2e 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -45,7 +45,7 @@
   .card {
     display: flex;
     flex-direction: column;
-    padding: 1rem 0;
+    padding: 0.5rem 0;
     gap: 0.5rem;
   }
   .card:not(:last-child) {
@@ -54,7 +54,7 @@
   .card-header {
     display: flex;
     align-items: center;
-    padding: 0 0.5rem;
+    padding: 0 0.75rem;
     height: 1.5rem;
     gap: 0.5rem;
     font-size: var(--font-size-small);
@@ -81,19 +81,28 @@
     gap: 0.5rem;
   }
   .card-body {
+    display: flex;
+    align-items: center;
+    min-height: 1.625rem;
     word-wrap: break-word;
     font-size: var(--font-size-small);
-    padding-left: 2rem;
-    padding-right: 2rem;
+    padding: 0 2.25rem;
+  }
+  .card-empty-body {
+    padding: 0;
   }
   .actions {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 0.5rem;
-    padding-left: 2rem;
+    padding-left: 2.25rem;
     margin-left: -0.25rem;
   }
+  .timestamp {
+    font-size: var(--font-size-small);
+    color: var(--color-fill-gray);
+  }
   .edit-buttons {
     display: flex;
     gap: 0.25rem;
@@ -104,15 +113,15 @@
   }
   .connector-line {
     width: 1px;
-    height: 28px;
+    height: 21px;
     position: absolute;
-    top: -16px;
+    top: -9px;
     left: -1px;
     background-color: var(--color-fill-separator);
   }
 </style>
 
-<div class="card" {id} class:reply={isReply}>
+<div class="card" class:card-empty-body={!body} {id} class:reply={isReply}>
   <div style:position="relative">
     {#if isReply}
       <div class="reply-dot" />
@@ -126,7 +135,7 @@
       </div>
       <NodeId nodeId={authorId} alias={authorAlias} />
       <slot name="caption">{caption}</slot>
-      <span class="card-metadata" title={utils.absoluteTimestamp(timestamp)}>
+      <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>
         {utils.formatTimestamp(timestamp)}
       </span>
       {#if lastEdit}
@@ -152,36 +161,36 @@
     </div>
   </div>
 
-  <div class="card-body">
-    {#if editComment && state !== "read"}
-      {@const editComment_ = editComment}
-      <ExtendedTextarea
-        {rawPath}
-        {body}
-        {embeds}
-        {enableAttachments}
-        submitInProgress={state === "submit"}
-        submitCaption="Save"
-        placeholder="Leave your comment"
-        on:submit={async ({ detail: { comment, embeds } }) => {
-          state = "submit";
-          try {
-            await editComment_(comment, Array.from(embeds.values()));
-          } finally {
+  {#if body}
+    <div class="card-body">
+      {#if editComment && state !== "read"}
+        {@const editComment_ = editComment}
+        <ExtendedTextarea
+          {rawPath}
+          {body}
+          {embeds}
+          {enableAttachments}
+          submitInProgress={state === "submit"}
+          submitCaption="Save"
+          placeholder="Leave your comment"
+          on:submit={async ({ detail: { comment, embeds } }) => {
+            state = "submit";
+            try {
+              await editComment_(comment, Array.from(embeds.values()));
+            } finally {
+              state = "read";
+            }
+          }}
+          on:close={async () => {
+            body = body;
+            await tick();
             state = "read";
-          }
-        }}
-        on:close={async () => {
-          body = body;
-          await tick();
-          state = "read";
-        }} />
-    {:else if body.trim() === ""}
-      <span class="txt-missing">No description</span>
-    {:else}
-      <Markdown {rawPath} content={body} />
-    {/if}
-  </div>
+          }} />
+      {:else}
+        <Markdown {rawPath} content={body} />
+      {/if}
+    </div>
+  {/if}
   {#if (id && reactOnComment) || (id && reactions && reactions.length > 0)}
     <div class="actions">
       {#if id && reactOnComment}
diff --git a/src/components/ReactionSelector.svelte b/src/components/ReactionSelector.svelte
index 7fb2411b0..6ff2814fe 100644
--- a/src/components/ReactionSelector.svelte
+++ b/src/components/ReactionSelector.svelte
@@ -40,7 +40,7 @@
   }
 </style>
 
-<div style="margin-top: 0.875rem;">
+<div>
   <Popover
     popoverPositionBottom="2rem"
     popoverPositionLeft="0"
diff --git a/src/components/Reactions.svelte b/src/components/Reactions.svelte
index 6f1a5d68e..09e6a3bd8 100644
--- a/src/components/Reactions.svelte
+++ b/src/components/Reactions.svelte
@@ -21,7 +21,6 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-top: 0.875rem;
   }
   .reaction {
     display: inline-flex;
diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte
index 9cde00cb8..bea9f8845 100644
--- a/src/views/projects/Cob/CobHeader.svelte
+++ b/src/views/projects/Cob/CobHeader.svelte
@@ -21,6 +21,9 @@
     margin-bottom: 0.5rem;
   }
   .description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
     font-size: var(--font-size-small);
     margin-top: 2rem;
     word-break: break-word;
diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte
index 5a20105e5..54d5ea8e8 100644
--- a/src/views/projects/Cob/Revision.svelte
+++ b/src/views/projects/Cob/Revision.svelte
@@ -145,7 +145,8 @@
 <style>
   .action {
     border-radius: var(--border-radius-small);
-    min-height: 3rem;
+    min-height: 2.5rem;
+    display: flex;
     align-items: center;
   }
   .merge {
@@ -211,17 +212,21 @@
   .patch-header {
     background-color: var(--color-fill-float);
     border-bottom: 1px solid var(--color-fill-separator);
+    border-top: 1px solid var(--color-fill-separator);
     display: flex;
     flex-direction: column;
-    padding-bottom: 1rem;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.5rem;
+    padding: 0.5rem 0;
     font-size: var(--font-size-small);
   }
   .authorship-header {
     display: flex;
     align-items: center;
-    min-height: 3.5rem;
+    padding: 0 0.75rem;
+    height: 1.5rem;
     gap: 0.5rem;
-    padding: 0 0.5rem;
     font-size: var(--font-size-small);
   }
   .timestamp {
@@ -240,7 +245,7 @@
     display: flex;
     flex-direction: column;
     font-size: 0.875rem;
-    margin-left: 1rem;
+    margin-left: 1.25rem;
     gap: 0.5rem;
     padding: 1rem 1rem;
     border-left: 1px solid var(--color-fill-separator);
@@ -269,7 +274,7 @@
   .connector {
     width: 1px;
     height: 1.5rem;
-    margin-left: 1rem;
+    margin-left: 1.25rem;
     background-color: var(--color-fill-separator);
   }
 </style>
@@ -382,16 +387,11 @@
     {#if expanded}
       <div>
         <div class="patch-header">
-          <div
-            class="authorship-header"
-            style:border-top="1px solid var(--color-fill-separator)">
+          <div class="authorship-header">
             <div style:color={badgeColor(patchState)}>
               <IconSmall name="patch" />
             </div>
-
-            <NodeId nodeId={revisionAuthor.id} alias={revisionAuthor.alias}>
-            </NodeId>
-
+            <NodeId nodeId={revisionAuthor.id} alias={revisionAuthor.alias} />
             {#if patchId === revisionId}
               opened this patch on base
               <span class="global-oid">
@@ -409,7 +409,9 @@
                 </span>
               {/if}
             {/if}
-            <span title={utils.absoluteTimestamp(revisionTimestamp)}>
+            <span
+              class="timestamp"
+              title={utils.absoluteTimestamp(revisionTimestamp)}>
               {utils.formatTimestamp(revisionTimestamp)}
             </span>
             {#if revisionEdits.length > 1 && lastEdit}
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 8996560f9..d61c62b0d 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -545,7 +545,7 @@
             </Badge>
           {/if}
         </svelte:fragment>
-        <div slot="description">
+        <svelte:fragment slot="description">
           {#if $experimental && issueState !== "read"}
             <ExtendedTextarea
               isValid={() => newTitle.length > 0}
@@ -607,7 +607,7 @@
                   partial(reactOnComment, session, issue.id)} />
             {/if}
           </div>
-        </div>
+        </svelte:fragment>
         <div class="author" slot="author">
           <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
           opened
@@ -634,7 +634,7 @@
         {#if threads.length > 0}
           <div class="connector" />
           <div class="threads">
-            {#each threads as thread (thread.root.id)}
+            {#each threads as thread, i (thread.root.id)}
               <ThreadComponent
                 enableAttachments
                 {thread}
@@ -653,7 +653,9 @@
                 reactOnComment={$experimental &&
                   session &&
                   partial(reactOnComment, session)} />
-              <div class="connector" />
+              {#if i < threads.length - 1}
+                <div class="connector" />
+              {/if}
             {/each}
           </div>
         {/if}
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 9526be056..a9c71d4ce 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -704,6 +704,7 @@
   .revision-description {
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
     width: 100%;
   }
   .diff-button-range {