Improve patch view visuals

- underline in commit hover state
- indent revision comments
- dim "Revision" text in header
- fix vertical alignment of header items in right-hand-side
- don't show first revision description, it's already shown as part of the
  patch description

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

public/typography.css

@@ -141,9 +141,6 @@ p {
   color: var(--color-foreground-5);
   font-style: italic;
 }
-.txt-faded {
-  color: var(--color-foreground-5);
-}
 .txt-link {
   color: var(--color-foreground-6);
   text-decoration: none;

src/components/Thread.svelte

@@ -66,7 +66,7 @@
   }
 </style>
 
-<div class="comment" style:margin-top="1rem">
+<div class="comment">
   <CommentComponent
     {rawPath}
     id={root.id}

src/views/projects/Blob.svelte

@@ -222,7 +222,7 @@
   <header>
     <div class="file-header">
       <span class="file-name">
-        <span class="txt-faded">{parentDir}</span>
+        <span style:color="var(--color-foreground-5)">{parentDir}</span>
         &#8203;
         <span>{blob.name}</span>
       </span>

src/views/projects/Cob/Revision.svelte

@@ -3,8 +3,9 @@
   import type { Timeline } from "@app/views/projects/Patch.svelte";
 
   import * as utils from "@app/lib/utils";
-  import { onMount } from "svelte";
   import { HttpdClient } from "@httpd-client";
+  import { onMount } from "svelte";
+  import { twemoji } from "@app/lib/utils";
 
   import Authorship from "@app/components/Authorship.svelte";
   import Avatar from "@app/components/Avatar.svelte";
@@ -36,6 +37,7 @@
   export let timelines: Timeline[];
   export let previousRevId: string | undefined = undefined;
   export let previousRevOid: string | undefined = undefined;
+  export let first: boolean;
 
   const api = new HttpdClient(baseUrl);
 
@@ -78,10 +80,8 @@
 </script>
 
 <style>
-  .action-padding {
-    padding: 0.5rem 1rem;
-  }
-  .action-background {
+  .action {
+    padding: 1rem;
     background-color: var(--color-foreground-1);
     border-radius: var(--border-radius);
   }
@@ -97,6 +97,7 @@
   .review {
     background-color: var(--color-foreground-1);
     border-radius: var(--border-radius);
+    margin-left: 1rem;
   }
   .positive-review {
     color: var(--color-positive-6);
@@ -129,6 +130,7 @@
   .revision-data {
     gap: 0.5rem;
     display: flex;
+    align-items: center;
   }
   .revision-body {
     display: flex;
@@ -143,6 +145,9 @@
     user-select: none;
     cursor: pointer;
   }
+  .commits {
+    margin-top: 0.5rem;
+  }
   .commit-event {
     color: var(--color-foreground-6);
     padding: 0.5rem 0.5rem 0.5rem 0.25rem;
@@ -152,6 +157,9 @@
     justify-content: space-between;
     font-family: var(--font-family-monospace);
   }
+  .commit-event:last-child {
+    padding: 0.5rem 0.5rem 0 0.25rem;
+  }
   .commit-event span {
     display: flex;
     gap: 0.25rem;
@@ -170,6 +178,9 @@
     left: -1.155rem;
     user-select: none;
   }
+  .commit-summary:hover {
+    text-decoration: underline;
+  }
 </style>
 
 <div class="revision">
@@ -181,7 +192,8 @@
           on:click={() => (expanded = !expanded)} />
       </div>
       <span>
-        Revision {utils.formatObjectId(revisionId)}
+        <span style:color="var(--color-foreground-6)">Revision</span>
+        {utils.formatObjectId(revisionId)}
       </span>
       <Clipboard text={revisionId} small />
     </div>
@@ -241,26 +253,30 @@
     <div class="revision-body">
       {#each timelines as element}
         {#if element.type === "thread"}
-          <ThreadComponent
-            rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
-            thread={element.inner}
-            on:reply />
+          <div class="review">
+            <ThreadComponent
+              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+              thread={element.inner}
+              on:reply />
+          </div>
         {:else if element.type === "revision"}
           {@const caption =
             patchId === element.inner.id
               ? "opened this patch"
               : `updated to ${utils.formatObjectId(element.inner.id)}`}
-          {#if element.inner.description}
-            <Markdown
-              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
-              content={element.inner.description} />
+          {#if element.inner.description && !first}
+            <div class="txt-small">
+              <Markdown
+                rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+                content={element.inner.description} />
+            </div>
           {/if}
-          <div class="action-padding action-background txt-tiny">
+          <div class="action txt-tiny">
             <Authorship {authorId} {authorAlias} timestamp={element.timestamp}>
               {caption}
             </Authorship>
             {#if response?.commits}
-              <div style="margin-top: 0.5rem;" class="action txt-tiny">
+              <div class="commits txt-tiny">
                 {#each response.commits as commit, i}
                   <div class="commit-event">
                     <span>
@@ -275,9 +291,11 @@
                           revision: commit.id,
                           search: undefined,
                         }}>
-                        <InlineMarkdown
-                          content={commit.summary}
-                          fontSize="tiny" />
+                        <div class="commit-summary" use:twemoji>
+                          <InlineMarkdown
+                            content={commit.summary}
+                            fontSize="tiny" />
+                        </div>
                       </ProjectLink>
                     </span>
                     <span>
@@ -296,8 +314,7 @@
             </div>
           {/if}
         {:else if element.type === "merge"}
-          <div
-            class="action-padding action-background merge layout-desktop txt-tiny">
+          <div class="action merge layout-desktop txt-tiny">
             <div class="action-content">
               <Authorship
                 authorId={element.inner.author.id}
@@ -309,8 +326,7 @@
               </Authorship>
             </div>
           </div>
-          <div
-            class="action-padding action-background merge layout-mobile txt-tiny">
+          <div class="action merge layout-mobile txt-tiny">
             <div class="action-content">
               <Authorship
                 authorId={element.inner.author.id}
@@ -338,7 +354,7 @@
             </div>
           {:else}
             <div
-              class="action-padding action-background layout-desktop txt-tiny"
+              class="action layout-desktop txt-tiny"
               class:positive-review={element.inner[2].verdict === "accept"}
               class:negative-review={element.inner[2].verdict === "reject"}>
               <div class="action-content">

src/views/projects/Issue.svelte

@@ -257,7 +257,9 @@
     </CobHeader>
     <div class="comments">
       {#each threads as thread (thread.root.id)}
-        <Thread {thread} {rawPath} on:reply={createReply} />
+        <div style:margin-top="1rem">
+          <Thread {thread} {rawPath} on:reply={createReply} />
+        </div>
       {/each}
       <div style:margin-top="1rem">
         {#if $httpdStore.state === "authenticated"}

src/views/projects/Patch.svelte

@@ -223,7 +223,7 @@
     gap: 0.5rem;
   }
   .draft {
-    color: var(--color-foreground-4);
+    color: var(--color-foreground-6);
   }
   .open {
     color: var(--color-positive-6);
@@ -382,6 +382,7 @@
             {projectDefaultBranch}
             {projectHead}
             {...revision}
+            first={index === 0}
             on:reply={createReply}
             patchId={patch.id}
             authorId={patch.author.id}

src/views/projects/Patch/PatchTeaser.svelte

@@ -88,7 +88,7 @@
     text-overflow: ellipsis;
   }
   .draft {
-    color: var(--color-foreground-4);
+    color: var(--color-foreground-6);
   }
   .open {
     color: var(--color-positive-6);