From d8d049518b2d7f5761e3dd4d384d4d20646d2281 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Thu, 27 Apr 2023 12:35:46 +0200
Subject: [PATCH] Improve patch timeline and add description

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 httpd-client/index.ts                         |  18 +-
 httpd-client/lib/project.ts                   |   2 +-
 httpd-client/lib/project/patch.ts             |   2 +-
 scripts/run-httpd-with-fixtures               |   2 +-
 src/components/Authorship.svelte              |  20 +-
 src/components/Comment.svelte                 |  12 +-
 src/components/Dropdown.svelte                |   2 +-
 src/components/ErrorMessage.svelte            |   3 +
 src/components/InlineMarkdown.svelte          |   5 +-
 src/components/Markdown.svelte                |   4 +
 src/components/TextInput.svelte               |   6 -
 src/components/Thread.svelte                  |  22 +-
 src/views/projects/Cob/AssigneeInput.svelte   |  23 +-
 src/views/projects/Cob/CobHeader.svelte       | 105 +++--
 src/views/projects/Cob/Revision.svelte        | 263 ++++++++++++
 src/views/projects/Cob/TagInput.svelte        |  23 +-
 src/views/projects/Commit/CommitTeaser.svelte |   1 -
 src/views/projects/Issue.svelte               |  89 ++--
 src/views/projects/Issue/New.svelte           |  60 ++-
 src/views/projects/Patch.svelte               | 382 +++++++++---------
 src/views/projects/View.svelte                |  10 +-
 tests/e2e/project.spec.ts                     |   6 +-
 tests/e2e/project/commits.spec.ts             |   6 +-
 23 files changed, 686 insertions(+), 380 deletions(-)
 create mode 100644 src/views/projects/Cob/Revision.svelte

diff --git a/httpd-client/index.ts b/httpd-client/index.ts
index b1bd7e86a..902b821bf 100644
--- a/httpd-client/index.ts
+++ b/httpd-client/index.ts
@@ -1,5 +1,11 @@
 import type { BaseUrl } from "./lib/fetcher.js";
-import type { Blob, Project, Remote, Tree } from "./lib/project.js";
+import type {
+  Blob,
+  Project,
+  Remote,
+  Tree,
+  DiffResponse,
+} from "./lib/project.js";
 import type { Comment } from "./lib/project/comment.js";
 import type {
   Commit,
@@ -9,7 +15,13 @@ import type {
   HunkLine,
 } from "./lib/project/commit.js";
 import type { Issue, IssueState } from "./lib/project/issue.js";
-import type { Merge, Patch, PatchState, Review } from "./lib/project/patch.js";
+import type {
+  Merge,
+  Patch,
+  PatchState,
+  Review,
+  Revision,
+} from "./lib/project/patch.js";
 import type { RequestOptions, Method } from "./lib/fetcher.js";
 import type { ZodSchema } from "zod";
 
@@ -27,6 +39,7 @@ export type {
   CommitHeader,
   Diff,
   DiffAddedDeletedModifiedChangeset,
+  DiffResponse,
   HunkLine,
   Issue,
   IssueState,
@@ -36,6 +49,7 @@ export type {
   Project,
   Remote,
   Review,
+  Revision,
   Tree,
 };
 
diff --git a/httpd-client/lib/project.ts b/httpd-client/lib/project.ts
index e6ba38b93..491c68c4a 100644
--- a/httpd-client/lib/project.ts
+++ b/httpd-client/lib/project.ts
@@ -153,7 +153,7 @@ const remoteSchema = strictObject({
 
 const remotesSchema = array(remoteSchema) satisfies ZodSchema<Remote[]>;
 
-interface DiffResponse {
+export interface DiffResponse {
   commits: CommitHeader[];
   diff: Diff;
 }
diff --git a/httpd-client/lib/project/patch.ts b/httpd-client/lib/project/patch.ts
index 200193e01..90c0f8e8f 100644
--- a/httpd-client/lib/project/patch.ts
+++ b/httpd-client/lib/project/patch.ts
@@ -85,7 +85,7 @@ const reviewSchema = strictObject({
   timestamp: number(),
 }) satisfies ZodSchema<Review>;
 
-interface Revision {
+export interface Revision {
   id: string;
   description: string;
   base: string;
diff --git a/scripts/run-httpd-with-fixtures b/scripts/run-httpd-with-fixtures
index 2da66cab7..25022c16d 100755
--- a/scripts/run-httpd-with-fixtures
+++ b/scripts/run-httpd-with-fixtures
@@ -1,7 +1,7 @@
 #!/bin/bash
 set -e
 
-REV=414477a31676d5e75efa7f3e8dc6624bcf2b2e52
+REV=b29321dbf7999ec7ec9b7ac9192071e512ada407
 
 REPO_ROOT=$(git rev-parse --show-toplevel)
 FIXTURE=$REPO_ROOT/tests/fixtures/seeds/palm.tar.bz2
diff --git a/src/components/Authorship.svelte b/src/components/Authorship.svelte
index 8fd717b95..368457790 100644
--- a/src/components/Authorship.svelte
+++ b/src/components/Authorship.svelte
@@ -15,7 +15,7 @@
   .authorship {
     display: inline-flex;
     align-items: center;
-    color: var(--color-foreground-6);
+    color: inherit;
     padding: 0.125rem 0;
     gap: 0.25rem;
   }
@@ -29,7 +29,7 @@
   }
 </style>
 
-<span class="authorship txt-tiny" title={relativeTimestamp(timestamp)}>
+<span class="authorship txt-tiny">
   {#if !noAvatar}
     <Avatar inline nodeId={authorId} />
   {/if}
@@ -39,14 +39,16 @@
   <span class="id layout-mobile">
     {formatNodeId(authorId).replace("did:key:", "")}
   </span>
-  <span class="body">
-    {#if !caption}
-      <slot />
-    {:else}
+  {#if !caption}
+    <slot />
+  {:else}
+    <span class="body">
       {caption}
-    {/if}
-  </span>
+    </span>
+  {/if}
   {#if timestamp}
-    {formatTimestamp(timestamp)}
+    <span title={relativeTimestamp(timestamp)}>
+      {formatTimestamp(timestamp)}
+    </span>
   {/if}
 </span>
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index 54a92eef6..5a7d7a52e 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -20,13 +20,12 @@
 
 <style>
   .comment {
-    margin-bottom: 1rem;
     display: flex;
   }
   .card {
     flex: 1;
-    border: 1px solid var(--color-foreground-4);
     border-radius: var(--border-radius);
+    background-color: var(--color-foreground-1);
   }
   .card-header {
     display: flex;
@@ -37,7 +36,7 @@
   }
   .card-body {
     font-size: var(--font-size-small);
-    padding: 0rem 1rem 1rem 1rem;
+    padding: 0 1rem 1rem 1rem;
   }
   .actions {
     display: flex;
@@ -52,12 +51,7 @@
 <div class="comment" {id}>
   <div class="card">
     <div class="card-header">
-      <div class="layout-desktop">
-        <Authorship {caption} {authorId} {timestamp} />
-      </div>
-      <div class="layout-mobile">
-        <Authorship {authorId} {timestamp} />
-      </div>
+      <Authorship {caption} {authorId} {timestamp} />
       <div class="actions">
         {#if showReplyIcon}
           <Button
diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte
index 4db9c2d6e..278b07c33 100644
--- a/src/components/Dropdown.svelte
+++ b/src/components/Dropdown.svelte
@@ -57,7 +57,7 @@
       on:click={() => onSelect(item)}
       title={item.title}>
       <slot name="item" {item}>
-        {item.value}
+        {item.title}
         {#if item.badge}
           <Badge variant="primary">{item.badge}</Badge>
         {/if}
diff --git a/src/components/ErrorMessage.svelte b/src/components/ErrorMessage.svelte
index c9f8834e3..b2cf95f80 100644
--- a/src/components/ErrorMessage.svelte
+++ b/src/components/ErrorMessage.svelte
@@ -8,11 +8,14 @@
 <style>
   .error {
     padding: 1rem;
+    font-size: var(--font-size-regular);
+    font-family: var(--font-family-sans-serif);
     color: var(--color-negative);
     border-radius: var(--border-radius);
     background-color: var(--color-negative-3);
     display: flex;
     align-items: center;
+    width: 100%;
   }
   .stack-trace {
     display: flex;
diff --git a/src/components/InlineMarkdown.svelte b/src/components/InlineMarkdown.svelte
index 3c734763d..a87bf91cd 100644
--- a/src/components/InlineMarkdown.svelte
+++ b/src/components/InlineMarkdown.svelte
@@ -6,7 +6,7 @@
   import { twemoji } from "@app/lib/utils";
 
   export let content: string;
-  export let fontSize: "small" | "medium" = "small";
+  export let fontSize: "tiny" | "small" | "medium" = "small";
 
   marked.use({
     renderer,
@@ -34,6 +34,7 @@
   class="markdown"
   use:twemoji
   class:txt-medium={fontSize === "medium"}
-  class:txt-small={fontSize === "small"}>
+  class:txt-small={fontSize === "small"}
+  class:txt-tiny={fontSize === "tiny"}>
   {@html render(content)}
 </span>
diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 71d194d88..826288d9e 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -280,6 +280,10 @@
   .markdown :global(.list-content) {
     margin: 1rem 0;
   }
+  /* Allows the parent to specify its own bottom margin */
+  .markdown :global(:last-child) {
+    margin-bottom: 0;
+  }
   .markdown :global(li > ul) {
     margin-bottom: 0rem;
   }
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
index 40019be59..f6d525872 100644
--- a/src/components/TextInput.svelte
+++ b/src/components/TextInput.svelte
@@ -14,8 +14,6 @@
   export let disabled: boolean = false;
   export let loading: boolean = false;
   export let valid: boolean = false;
-  // Changes the background color to the background of the page
-  export let transparent: boolean = false;
   export let validationMessage: string | undefined = undefined;
 
   const dispatch = createEventDispatcher<{
@@ -74,9 +72,6 @@
     color: var(--color-secondary);
     cursor: not-allowed;
   }
-  .transparent {
-    background: var(--color-background) !important;
-  }
   .regular {
     border: 1px solid var(--color-secondary);
     padding: 1rem 1.5rem;
@@ -148,7 +143,6 @@
     </div>
 
     <input
-      class:transparent
       class:regular={variant === "regular"}
       class:form={variant === "form"}
       style:padding-left={leftContainerWidth
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index 32c136bbb..de6c42ea2 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { Comment } from "@httpd-client";
 
   import Button from "@app/components/Button.svelte";
@@ -10,7 +10,6 @@
 
   export let thread: { root: Comment; replies: Comment[] };
   export let rawPath: string;
-  export let isDescription = false;
   export let showReplyTextarea = false;
 
   let replyText = "";
@@ -53,6 +52,7 @@
 <style>
   .reply {
     margin-left: 3rem;
+    margin-top: 1rem;
   }
   .actions {
     display: flex;
@@ -62,14 +62,16 @@
   }
 </style>
 
-<CommentComponent
-  {rawPath}
-  id={root.id}
-  authorId={root.author.id}
-  timestamp={root.timestamp}
-  body={root.body}
-  showReplyIcon={Boolean($sessionStore) && !isDescription}
-  on:toggleReply={toggleReply} />
+<div style:margin-top="1rem">
+  <CommentComponent
+    {rawPath}
+    id={root.id}
+    authorId={root.author.id}
+    timestamp={root.timestamp}
+    body={root.body}
+    showReplyIcon={Boolean($sessionStore)}
+    on:toggleReply={toggleReply} />
+</div>
 {#each replies as reply}
   <div class="reply">
     <CommentComponent
diff --git a/src/views/projects/Cob/AssigneeInput.svelte b/src/views/projects/Cob/AssigneeInput.svelte
index 6365cb8ea..a31ded703 100644
--- a/src/views/projects/Cob/AssigneeInput.svelte
+++ b/src/views/projects/Cob/AssigneeInput.svelte
@@ -11,7 +11,7 @@
   const dispatch = createEventDispatcher<{ save: string[] }>();
 
   export let action: "create" | "edit" | "view";
-  export let edit: boolean = false;
+  export let editInProgress: boolean = false;
   export let assignees: string[] = [];
 
   let updatedAssignees: string[] = assignees;
@@ -45,9 +45,6 @@
 </script>
 
 <style>
-  .metadata-section {
-    margin-bottom: 4rem;
-  }
   .header {
     display: flex;
     gap: 1rem;
@@ -75,28 +72,28 @@
   }
 </style>
 
-<div class="metadata-section">
+<div>
   <div class="header">
     <span>Assignees</span>
     {#if action === "edit"}
-      {#if !edit}
+      {#if editInProgress}
         <Button
           size="tiny"
           variant="text"
           on:click={() => {
-            edit = !edit;
+            dispatch("save", updatedAssignees);
+            editInProgress = !editInProgress;
           }}>
-          edit
+          save
         </Button>
       {:else}
         <Button
           size="tiny"
           variant="text"
           on:click={() => {
-            dispatch("save", updatedAssignees);
-            edit = !edit;
+            editInProgress = !editInProgress;
           }}>
-          save
+          edit
         </Button>
       {/if}
     {/if}
@@ -105,7 +102,7 @@
     {#each updatedAssignees as assignee, key (assignee)}
       <Chip
         on:remove={removeAssignee}
-        removeable={edit || action === "create"}
+        removeable={editInProgress || action === "create"}
         {key}>
         <div class="chip-content">
           <Avatar inline nodeId={assignee} />
@@ -116,7 +113,7 @@
       <div class="empty">No assignees</div>
     {/each}
   </div>
-  {#if edit || action === "create"}
+  {#if editInProgress || action === "create"}
     <div style:margin-bottom="1rem">
       <TextInput
         bind:value={inputValue}
diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte
index d9bca5621..a9e835daf 100644
--- a/src/views/projects/Cob/CobHeader.svelte
+++ b/src/views/projects/Cob/CobHeader.svelte
@@ -1,8 +1,7 @@
 <script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
 
-  import { formatObjectId } from "@app/lib/utils";
-
+  import * as utils from "@app/lib/utils";
   import Button from "@app/components/Button.svelte";
   import Clipboard from "@app/components/Clipboard.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
@@ -19,76 +18,58 @@
 
 <style>
   header {
-    background: var(--color-foreground-1);
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
     border-radius: var(--border-radius);
-    margin-bottom: 1rem;
+    border: 1px solid var(--color-foreground-3);
     padding: 1rem;
   }
-  .summary {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    padding-right: 0.5rem;
-  }
-  .summary-title {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    gap: 0.5rem;
-    width: 90%;
-  }
-  .id {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: var(--font-size-tiny);
-    font-family: var(--font-family-monospace);
-    color: var(--color-foreground-6);
-  }
   .title {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .summary-state {
+  .subtitle {
     display: flex;
     flex-direction: row;
-    gap: 1rem;
-    border-radius: var(--border-radius);
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: var(--font-size-tiny);
+    font-family: var(--font-family-monospace);
+    color: var(--color-foreground-6);
+  }
+  .summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+  .id {
+    display: flex;
+    align-items: center;
+  }
+  .description {
+    font-size: var(--font-size-small);
+    margin-top: 1rem;
   }
 </style>
 
 <header>
-  <div class="summary">
-    <div class="summary-title txt-medium">
-      {#if editable}
-        <TextInput transparent variant="form" bind:value={title} />
-      {:else}
-        {#if title}
-          <div class="title">
-            <InlineMarkdown fontSize="medium" content={title} />
-          </div>
-        {:else}
-          <span class="txt-missing">No title</span>
-        {/if}
-        <slot name="revision" />
-        {#if id}
-          <div class="id">
-            <div class="layout-desktop">{id}</div>
-            <div class="layout-mobile">
-              {formatObjectId(id)}
-            </div>
-            <Clipboard small text={id} />
-          </div>
-        {/if}
-      {/if}
-    </div>
+  <div class="summary txt-medium">
+    {#if editable}
+      <TextInput variant="form" placeholder="Title" bind:value={title} />
+    {:else if title}
+      <div class="title">
+        <InlineMarkdown fontSize="medium" content={title} />
+      </div>
+    {:else}
+      <span class="txt-missing">No title</span>
+    {/if}
     {#if action === "edit"}
       <Button
-        variant="text"
+        variant="foreground"
         size="small"
         on:click={() => {
           editable = !editable;
@@ -102,7 +83,17 @@
       </Button>
     {/if}
   </div>
-  <div class="summary-state">
+  <div class="subtitle">
     <slot name="state" />
+    {#if id}
+      <div class="id">
+        {utils.formatObjectId(id)}
+        <Clipboard text={id} small />
+      </div>
+    {/if}
+    <slot name="author" />
+  </div>
+  <div class="description">
+    <slot name="description" />
   </div>
 </header>
diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte
new file mode 100644
index 000000000..1db0ca522
--- /dev/null
+++ b/src/views/projects/Cob/Revision.svelte
@@ -0,0 +1,263 @@
+<script lang="ts">
+  import type { BaseUrl, DiffResponse } from "@httpd-client";
+  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 Authorship from "@app/components/Authorship.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
+  import Clipboard from "@app/components/Clipboard.svelte";
+  import CommentComponent from "@app/components/Comment.svelte";
+  import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
+  import ErrorMessage from "@app/components/ErrorMessage.svelte";
+  import Icon from "@app/components/Icon.svelte";
+  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
+  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import ThreadComponent from "@app/components/Thread.svelte";
+
+  export let authorId: string;
+  export let baseUrl: BaseUrl;
+  export let expanded: boolean = true;
+  export let patchId: string;
+  export let projectHead: string;
+  export let projectId: string;
+  export let revisionBase: string;
+  export let revisionId: string;
+  export let revisionOid: string;
+  export let revisionTimestamp: number;
+  export let timelines: Timeline[];
+
+  const api = new HttpdClient(baseUrl);
+
+  function formatVerdict(revision: string, verdict?: string | null) {
+    switch (verdict) {
+      case "accept":
+        return `accepted revision ${utils.formatObjectId(revision)}`;
+      case "reject":
+        return `rejected revision ${utils.formatObjectId(revision)}`;
+      default:
+        return `left a comment on revision ${utils.formatObjectId(revision)}`;
+    }
+  }
+
+  let response: DiffResponse | undefined = undefined;
+  let error: any | undefined = undefined;
+
+  onMount(async () => {
+    try {
+      response = await api.project.getDiff(
+        projectId,
+        revisionBase,
+        revisionOid,
+      );
+    } catch (err: any) {
+      error = err;
+    }
+  });
+</script>
+
+<style>
+  .action {
+    background-color: var(--color-foreground-1);
+    border-radius: var(--border-radius);
+    padding: 0.5rem 1rem;
+  }
+  .action-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .merge {
+    color: var(--color-primary);
+    background-color: var(--color-primary-3);
+  }
+  .positive-review {
+    color: var(--color-positive);
+    background-color: var(--color-positive-3);
+  }
+  .revision {
+    border: 1px solid var(--color-foreground-3);
+    border-radius: var(--border-radius-small);
+    margin-bottom: 1rem;
+  }
+  .revision-header {
+    height: 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: none;
+    padding: 1rem;
+    padding-right: 1.5rem;
+  }
+  .revision-name {
+    display: flex;
+    user-select: none;
+  }
+  .revision-data {
+    gap: 0.5rem;
+    display: flex;
+  }
+  .revision-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0 1.5rem;
+    margin-bottom: 1rem;
+    border-radius: var(--border-radius-small);
+  }
+  .expand-button {
+    margin-right: 0.5rem;
+    user-select: none;
+    cursor: pointer;
+  }
+  .commit-event {
+    color: var(--color-foreground-6);
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .commit-event span {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+</style>
+
+<div class="revision">
+  <div class="revision-header">
+    <div class="revision-name">
+      <div class="expand-button">
+        <Icon
+          name={expanded ? "chevron-down" : "chevron-right"}
+          on:click={() => (expanded = !expanded)} />
+      </div>
+      <span>
+        Revision {utils.formatObjectId(revisionId)}
+      </span>
+      <Clipboard text={revisionId} small />
+    </div>
+    <div class="txt-small" />
+    <div class="revision-data">
+      {#if response?.diff.stats}
+        {@const { insertions, deletions } = response.diff.stats}
+        <DiffStatBadge {insertions} {deletions} />
+      {/if}
+      <span class="layout-desktop txt-small">
+        {utils.formatTimestamp(revisionTimestamp)}
+      </span>
+    </div>
+  </div>
+  {#if expanded}
+    <div class="revision-body">
+      {#each timelines as element}
+        {#if element.type === "thread"}
+          <ThreadComponent
+            rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+            thread={element.inner}
+            on:reply />
+        {: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}
+            <CommentComponent
+              {caption}
+              {authorId}
+              timestamp={element.timestamp}
+              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+              body={element.inner.description} />
+          {:else}
+            <div class="action txt-tiny">
+              <Authorship {authorId} timestamp={element.timestamp}>
+                {caption}
+              </Authorship>
+            </div>
+          {/if}
+          {#if response?.commits}
+            <div class="action txt-tiny">
+              {#each response.commits as commit}
+                <div class="commit-event">
+                  <span>
+                    <Avatar inline nodeId={authorId} />
+                    <ProjectLink
+                      projectParams={{
+                        view: { resource: "commits" },
+                        revision: commit.id,
+                        search: undefined,
+                      }}>
+                      <InlineMarkdown
+                        content={commit.summary}
+                        fontSize="tiny" />
+                    </ProjectLink>
+                  </span>
+                  <span>
+                    {utils.formatCommit(commit.id)}
+                  </span>
+                </div>
+              {/each}
+            </div>
+          {/if}
+          {#if error}
+            <div class="txt-monospace">
+              <ErrorMessage
+                message="Failed to load diff for this revision."
+                stackTrace={error.stack.toString()} />
+            </div>
+          {/if}
+        {:else if element.type === "merge"}
+          <div class="action merge layout-desktop txt-tiny">
+            <div class="action-content">
+              <Authorship
+                authorId={element.inner.node}
+                timestamp={element.timestamp}>
+                merged
+                {utils.formatCommit(element.inner.commit)}
+              </Authorship>
+            </div>
+          </div>
+          <div class="action merge layout-mobile txt-tiny">
+            <div class="action-content">
+              <Authorship authorId={element.inner.node}>
+                merged
+                {utils.formatCommit(element.inner.commit)}
+              </Authorship>
+            </div>
+          </div>
+        {:else if element.type === "review"}
+          {@const [revisionId, author, review] = element.inner}
+          <div
+            class="action layout-desktop txt-tiny"
+            class:positive-review={element.inner[2].verdict === "accept"}>
+            <div class="action-content">
+              <Authorship authorId={author} timestamp={element.timestamp}>
+                {formatVerdict(revisionId, review.verdict)}
+              </Authorship>
+            </div>
+          </div>
+          <div
+            class="layout-mobile txt-tiny"
+            class:positive-review={element.inner[2].verdict === "accept"}>
+            <div class="action-content">
+              <Authorship authorId={author}>
+                {formatVerdict(revisionId, review.verdict)}
+              </Authorship>
+            </div>
+          </div>
+          {#if review.comment}
+            <CommentComponent
+              caption="left a comment"
+              authorId={author}
+              timestamp={review.timestamp}
+              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+              body={review.comment} />
+          {/if}
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/src/views/projects/Cob/TagInput.svelte b/src/views/projects/Cob/TagInput.svelte
index 0e2131c89..2bfe58037 100644
--- a/src/views/projects/Cob/TagInput.svelte
+++ b/src/views/projects/Cob/TagInput.svelte
@@ -8,7 +8,7 @@
   const dispatch = createEventDispatcher<{ save: string[] }>();
 
   export let action: "create" | "edit" | "view" = "view";
-  export let edit: boolean = false;
+  export let editInProgress: boolean = false;
   export let tags: string[] = [];
 
   let updatedTags: string[] = tags;
@@ -42,9 +42,6 @@
 </script>
 
 <style>
-  .metadata-section {
-    margin-bottom: 4rem;
-  }
   .metadata-section-header {
     display: flex;
     gap: 1rem;
@@ -70,28 +67,28 @@
   }
 </style>
 
-<div class="metadata-section">
+<div>
   <div class="metadata-section-header">
     <span>Tags</span>
     {#if action === "edit"}
-      {#if !edit}
+      {#if editInProgress}
         <Button
           size="tiny"
           variant="text"
           on:click={() => {
-            edit = !edit;
+            dispatch("save", updatedTags);
+            editInProgress = !editInProgress;
           }}>
-          edit
+          save
         </Button>
       {:else}
         <Button
           size="tiny"
           variant="text"
           on:click={() => {
-            dispatch("save", updatedTags);
-            edit = !edit;
+            editInProgress = !editInProgress;
           }}>
-          save
+          edit
         </Button>
       {/if}
     {/if}
@@ -100,7 +97,7 @@
     {#each updatedTags as tag, key (tag)}
       <Chip
         on:remove={removeTag}
-        removeable={edit || action === "create"}
+        removeable={editInProgress || action === "create"}
         {key}>
         <div class="tag">{tag}</div>
       </Chip>
@@ -108,7 +105,7 @@
       <div class="metadata-section-empty">No tags</div>
     {/each}
   </div>
-  {#if edit || action === "create"}
+  {#if editInProgress || action === "create"}
     <div style:margin-bottom="1rem">
       <TextInput
         bind:value={inputValue}
diff --git a/src/views/projects/Commit/CommitTeaser.svelte b/src/views/projects/Commit/CommitTeaser.svelte
index e6e451a1f..60646c99d 100644
--- a/src/views/projects/Commit/CommitTeaser.svelte
+++ b/src/views/projects/Commit/CommitTeaser.svelte
@@ -47,7 +47,6 @@
   }
   .browse {
     display: flex;
-    z-index: 10;
     width: 100%;
     height: 100%;
   }
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 86c8d0b47..e0d50b180 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -14,6 +14,7 @@
   import Button from "@app/components/Button.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
   import CobStateButton from "@app/views/projects/Cob/CobStateButton.svelte";
+  import Markdown from "@app/components/Markdown.svelte";
   import TagInput from "./Cob/TagInput.svelte";
   import Textarea from "@app/components/Textarea.svelte";
   import Thread from "@app/components/Thread.svelte";
@@ -147,6 +148,7 @@
 
   $: selectedItem = issue.state.status === "closed" ? items[0] : items[1];
   $: threads = issue.discussion
+    .slice(1) // Skip the first comment, which is the issue description
     .filter(comment => !comment.replyTo)
     .map(thread => {
       return {
@@ -168,6 +170,9 @@
     margin-bottom: 4.5rem;
   }
   .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
     border-radius: var(--border-radius);
     font-size: var(--font-size-small);
     padding-left: 1rem;
@@ -181,6 +186,15 @@
     margin: 0 0 2.5rem 0;
     gap: 1rem;
   }
+  .author {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+  }
+  .comments {
+    margin: 1rem 0;
+  }
 
   @media (max-width: 960px) {
     .issue {
@@ -212,47 +226,50 @@
             {issue.state.reason}
           </Badge>
         {/if}
-        <Authorship
-          timestamp={issue.discussion[0].timestamp}
-          authorId={issue.author.id}
-          caption="opened this issue" />
       </svelte:fragment>
+      <div slot="description">
+        <Markdown
+          content={issue.discussion[0].body}
+          rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)} />
+      </div>
+      <div class="author" slot="author">
+        opened by <Authorship authorId={issue.author.id} />
+        {utils.formatTimestamp(issue.discussion[0].timestamp)}
+      </div>
     </CobHeader>
-    <div>
-      {#each threads as thread, index (thread.root.id)}
-        <Thread
-          {thread}
-          {rawPath}
-          isDescription={index === 0}
-          on:reply={createReply} />
+    <div class="comments">
+      {#each threads as thread (thread.root.id)}
+        <Thread {thread} {rawPath} on:reply={createReply} />
       {/each}
-      {#if $sessionStore}
-        <Textarea
-          resizable
-          on:submit={() => {
-            createComment(commentBody);
-            commentBody = "";
-          }}
-          bind:value={commentBody}
-          placeholder="Leave your comment" />
-        <div class="actions txt-small">
-          <CobStateButton
-            {items}
-            {selectedItem}
-            state={issue.state}
-            on:saveStatus={saveStatus} />
-          <Button
-            variant="secondary"
-            size="small"
-            disabled={!commentBody}
-            on:click={() => {
+      <div style:margin-top="1rem">
+        {#if $sessionStore}
+          <Textarea
+            resizable
+            on:submit={() => {
               createComment(commentBody);
               commentBody = "";
-            }}>
-            Comment
-          </Button>
-        </div>
-      {/if}
+            }}
+            bind:value={commentBody}
+            placeholder="Leave your comment" />
+          <div class="actions txt-small">
+            <CobStateButton
+              {items}
+              {selectedItem}
+              state={issue.state}
+              on:saveStatus={saveStatus} />
+            <Button
+              variant="secondary"
+              size="small"
+              disabled={!commentBody}
+              on:click={() => {
+                createComment(commentBody);
+                commentBody = "";
+              }}>
+              Comment
+            </Button>
+          </div>
+        {/if}
+      </div>
     </div>
   </div>
   <div class="metadata">
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index 4f2a5b0e9..051ebb12a 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/src/views/projects/Issue/New.svelte
@@ -15,8 +15,9 @@
   import Badge from "@app/components/Badge.svelte";
   import Button from "@app/components/Button.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
-  import Comment from "@app/components/Comment.svelte";
+  import Markdown from "@app/components/Markdown.svelte";
   import TagInput from "@app/views/projects/Cob/TagInput.svelte";
+  import Textarea from "@app/components/Textarea.svelte";
 
   export let session: StoredSession;
   export let projectId: string;
@@ -32,7 +33,7 @@
       : "view";
 
   let issueTitle = "";
-  let issueText = "";
+  let issueText: string | undefined = undefined;
   let assignees: string[] = [];
   let tags: string[] = [];
 
@@ -44,7 +45,7 @@
         projectId,
         {
           title: issueTitle,
-          description: issueText,
+          description: issueText ?? "",
           assignees: utils.stripDidPrefix(assignees),
           tags: tags,
         },
@@ -82,6 +83,9 @@
     margin-top: 1rem;
   }
   .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
     border-radius: var(--border-radius);
     font-size: var(--font-size-small);
     padding-left: 1rem;
@@ -91,6 +95,11 @@
     flex: 2;
     padding-right: 1rem;
   }
+  .author {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
   @media (max-width: 960px) {
     main {
       padding-left: 2rem;
@@ -100,6 +109,14 @@
     .form {
       grid-template-columns: minmax(0, 1fr);
     }
+    .editor {
+      padding-right: 0;
+    }
+    .metadata {
+      margin-left: 0;
+      padding-left: 0;
+      gap: 2rem;
+    }
   }
 </style>
 
@@ -108,22 +125,31 @@
     <div class="editor">
       <CobHeader {action} bind:title={issueTitle}>
         <svelte:fragment slot="state">
-          <Badge variant="positive">open</Badge>
-          <Authorship
-            timestamp={Date.now()}
-            authorId={session.publicKey}
-            caption="opened this issue" />
+          {#if action === "view"}
+            <Badge variant="positive">open</Badge>
+          {/if}
         </svelte:fragment>
+        <svelte:fragment slot="description">
+          {#if action === "create"}
+            <Textarea
+              resizable
+              bind:value={issueText}
+              on:submit={createIssue}
+              placeholder="Write a description" />
+          {:else if !issueText}
+            <p class="txt-missing">No description</p>
+          {:else}
+            <Markdown
+              content={issueText}
+              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)} />
+          {/if}
+        </svelte:fragment>
+        <div class="author" slot="author">
+          {#if action === "view"}
+            opened by <Authorship authorId={session.publicKey} /> now
+          {/if}
+        </div>
       </CobHeader>
-      <div class="comments">
-        <Comment
-          bind:body={issueText}
-          on:submit={createIssue}
-          authorId={session.publicKey}
-          timestamp={Date.now()}
-          {action}
-          rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)} />
-      </div>
       <div class="actions">
         <Button
           size="small"
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 98aaa2134..4f9f3f539 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -1,6 +1,5 @@
-<script lang="ts">
-  import type { BaseUrl, Comment, Merge, Patch, Review } from "@httpd-client";
-  import type { Variant } from "@app/components/Badge.svelte";
+<script lang="ts" context="module">
+  import type { Comment, Review, Revision, Merge } from "@httpd-client";
 
   interface Thread {
     root: Comment;
@@ -8,11 +7,17 @@
   }
 
   interface TimelineReview {
-    inner: [string, Review];
+    inner: [string, string, Review];
     type: "review";
     timestamp: number;
   }
 
+  interface TimelineRevision {
+    inner: Revision;
+    type: "revision";
+    timestamp: number;
+  }
+
   interface TimelineMerge {
     inner: Merge;
     type: "merge";
@@ -25,32 +30,44 @@
     timestamp: number;
   }
 
-  import capitalize from "lodash/capitalize";
+  export type Timeline =
+    | TimelineMerge
+    | TimelineReview
+    | TimelineRevision
+    | TimelineThread;
+</script>
+
+<script lang="ts">
+  import type { BaseUrl, Patch } from "@httpd-client";
+  import type { Variant } from "@app/components/Badge.svelte";
 
-  import * as router from "@app/lib/router";
   import * as utils from "@app/lib/utils";
+  import * as router from "@app/lib/router";
+  import { capitalize } from "lodash";
   import { HttpdClient } from "@httpd-client";
   import { sessionStore } from "@app/lib/session";
 
   import Authorship from "@app/components/Authorship.svelte";
   import Badge from "@app/components/Badge.svelte";
-  import Changeset from "./SourceBrowser/Changeset.svelte";
+  import Changeset from "@app/views/projects/SourceBrowser/Changeset.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
-  import CommentComponent from "@app/components/Comment.svelte";
-  import CommitTeaser from "./Commit/CommitTeaser.svelte";
+  import CommitTeaser from "@app/views/projects/Commit/CommitTeaser.svelte";
   import Dropdown from "@app/components/Dropdown.svelte";
+  import ErrorMessage from "@app/components/ErrorMessage.svelte";
   import Floating from "@app/components/Floating.svelte";
+  import Markdown from "@app/components/Markdown.svelte";
+  import Placeholder from "@app/components/Placeholder.svelte";
   import ProjectLink from "@app/components/ProjectLink.svelte";
+  import RevisionComponent from "@app/views/projects/Cob/Revision.svelte";
   import SquareButton from "@app/components/SquareButton.svelte";
-  import TagInput from "./Cob/TagInput.svelte";
-  import ThreadComponent from "@app/components/Thread.svelte";
+  import TagInput from "@app/views/projects/Cob/TagInput.svelte";
 
   export let projectId: string;
   export let baseUrl: BaseUrl;
   export let patch: Patch;
   export let projectHead: string;
-  export let revision: string | undefined = undefined;
-  export let currentTab: "activity" | "commits";
+  export let revision: string;
+  export let currentTab: "activity" | "commits" | "files";
 
   const api = new HttpdClient(baseUrl);
 
@@ -75,6 +92,19 @@
       patch = await api.project.getPatchById(projectId, patch.id);
     }
   }
+  function badgeColor(status: string): Variant {
+    if (status === "draft") {
+      return "foreground";
+    } else if (status === "open") {
+      return "positive";
+    } else if (status === "archived") {
+      return "caution";
+    } else if (status === "merged") {
+      return "primary";
+    } else {
+      return "foreground";
+    }
+  }
 
   async function saveTags({ detail: tags }: CustomEvent<string[]>) {
     if ($sessionStore) {
@@ -92,80 +122,63 @@
     }
   }
 
-  function formatVerdict(verdict?: string | null) {
-    switch (verdict) {
-      case "accept":
-        return "accepted this revision";
-      case "reject":
-        return "rejected this revision";
-      default:
-        return "left a comment";
-    }
-  }
-
   const action: "create" | "edit" | "view" =
     $sessionStore && utils.isLocal(baseUrl.hostname) ? "edit" : "view";
-
-  // Reactive due to eventual changes in patch.revisions
-  $: enumeratedRevisions = patch.revisions.map((r, i) => [r, i] as const);
-  $: currentRevisionTuple =
-    enumeratedRevisions.find(([rev]) => rev.id === revision) ||
-    enumeratedRevisions[enumeratedRevisions.length - 1];
-  $: [currentRevision, currentRevisionIndex] = currentRevisionTuple;
-  $: options = ["activity", "commits", "files"].map(o => ({
+  const options = ["activity", "commits", "files"].map(o => ({
     value: o,
     title: capitalize(o),
     disabled: false,
   }));
-  $: reviews = currentRevision.reviews.map<TimelineReview>(
-    ([author, review]) => ({
-      timestamp: review.timestamp,
-      type: "review",
-      inner: [author, review],
-    }),
-  );
-  $: merges = currentRevision.merges.map<TimelineMerge>(inner => ({
-    timestamp: inner.timestamp,
-    type: "merge",
-    inner,
-  }));
-  $: threads = currentRevision.discussions
-    .filter(comment => !comment.replyTo)
-    .map<TimelineThread>(
-      thread => ({
-        timestamp: thread.timestamp,
-        type: "thread",
-        inner: {
-          root: thread,
-          replies: currentRevision.discussions
-            .filter(comment => comment.replyTo === thread.id)
-            .sort((a, b) => a.timestamp - b.timestamp),
-        },
-      }),
-      [],
-    );
-  $: timeline = [...reviews, ...merges, ...threads].sort(
-    (a, b) => a.timestamp - b.timestamp,
-  );
-  $: diffPromise = api.project.getDiff(
-    projectId,
-    currentRevision.base,
-    currentRevision.oid,
-  );
 
-  function badgeColor(status: string): Variant {
-    if (status === "draft") {
-      return "foreground";
-    } else if (status === "open") {
-      return "positive";
-    } else if (status === "archived") {
-      return "caution";
-    } else if (status === "merged") {
-      return "primary";
-    } else {
-      return "foreground";
-    }
-  }
+  const currentRevision =
+    patch.revisions.find(r => r.id === revision) || patch.revisions[0];
+  $: timelineTuple = patch.revisions.map<
+    [
+      {
+        revisionId: string;
+        revisionTimestamp: number;
+        revisionBase: string;
+        revisionOid: string;
+      },
+      Timeline[],
+    ]
+  >(rev => [
+    {
+      revisionId: rev.id,
+      revisionTimestamp: rev.timestamp,
+      revisionBase: rev.base,
+      revisionOid: rev.oid,
+    },
+    [
+      ...rev.reviews.map<TimelineReview>(([author, review]) => ({
+        timestamp: review.timestamp,
+        type: "review",
+        inner: [rev.id, author, review],
+      })),
+      ...rev.merges.map<TimelineMerge>(inner => ({
+        timestamp: inner.timestamp,
+        type: "merge",
+        inner,
+      })),
+      ...rev.discussions
+        .filter(comment => !comment.replyTo)
+        .map<TimelineThread>(thread => ({
+          timestamp: thread.timestamp,
+          type: "thread",
+          inner: {
+            root: thread,
+            replies: rev.discussions
+              .filter(comment => comment.replyTo === thread.id)
+              .sort((a, b) => a.timestamp - b.timestamp),
+          },
+        })),
+      {
+        type: "revision",
+        timestamp: rev.timestamp,
+        inner: rev,
+      } as TimelineRevision,
+    ].sort((a, b) => a.timestamp - b.timestamp),
+  ]);
 </script>
 
 <style>
@@ -176,20 +189,32 @@
     margin-bottom: 4.5rem;
   }
   .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
     border-radius: var(--border-radius);
     font-size: var(--font-size-small);
     padding-left: 1rem;
     margin-left: 1rem;
   }
-  .action {
-    margin: 1rem;
-    color: var(--color-foreground-5);
-  }
   .commit-list {
     border-radius: var(--border-radius);
     overflow: hidden;
     margin-top: 1rem;
   }
+  .tab-line {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1rem 0;
+  }
+  .author {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+  }
 
   @media (max-width: 1092px) {
     .patch {
@@ -210,25 +235,78 @@
 <div class="patch">
   <div>
     <CobHeader id={patch.id} title={patch.title}>
-      <span slot="revision" class="txt-monospace txt-tiny">
+      <svelte:fragment slot="state">
+        <Badge variant={badgeColor(patch.state.status)}>
+          {patch.state.status}
+        </Badge>
+      </svelte:fragment>
+      <svelte:fragment slot="description">
+        {#if patch.description}
+          <Markdown
+            content={patch.description}
+            rawPath={utils.getRawBasePath(
+              projectId,
+              baseUrl,
+              currentRevision.oid,
+            )} />
+        {:else}
+          <span class="txt-missing">No description available</span>
+        {/if}
+      </svelte:fragment>
+      <div class="author" slot="author">
+        opened by <Authorship authorId={patch.author.id} />
+        {utils.formatTimestamp(patch.revisions[0].timestamp)}
+      </div>
+    </CobHeader>
+
+    <div class="tab-line">
+      <div style="display: flex; gap: 0.5rem;">
+        {#each options as option}
+          {#if !option.disabled}
+            <ProjectLink
+              projectParams={{
+                search: `tab=${option.value}`,
+              }}>
+              <SquareButton
+                size="small"
+                clickable={option.disabled}
+                active={option.value === currentTab}
+                disabled={option.disabled}>
+                {option.title}
+              </SquareButton>
+            </ProjectLink>
+          {:else}
+            <SquareButton
+              size="small"
+              clickable={option.disabled}
+              active={option.value === currentTab}
+              disabled={option.disabled}>
+              {option.title}
+            </SquareButton>
+          {/if}
+        {/each}
+      </div>
+
+      {#if currentTab !== "activity"}
         <Floating disabled={patch.revisions.length === 1}>
           <svelte:fragment slot="toggle">
             <SquareButton
+              size="small"
               clickable={patch.revisions.length > 1}
               disabled={patch.revisions.length === 1}>
-              Revision {currentRevisionIndex}
+              Revision {utils.formatObjectId(currentRevision.id)}
             </SquareButton>
           </svelte:fragment>
           <svelte:fragment slot="modal">
             <Dropdown
-              items={enumeratedRevisions.map(([r, i]) => {
+              items={patch.revisions.map(r => {
                 return {
-                  title: `Revision ${i} (${utils.formatObjectId(r.id)})`,
+                  title: `Revision ${utils.formatObjectId(r.id)}`,
                   value: r.id,
                   badge: null,
                 };
               })}
-              selected={currentRevision.toString()}
+              selected={currentRevision.id}
               on:select={({ detail: item }) => {
                 router.updateProjectRoute({
                   view: {
@@ -243,121 +321,43 @@
             </Dropdown>
           </svelte:fragment>
         </Floating>
-      </span>
-      <svelte:fragment slot="state">
-        <Badge variant={badgeColor(patch.state.status)}>
-          {patch.state.status}
-        </Badge>
-        <div class="layout-desktop">
-          <Authorship
-            timestamp={patch.revisions[0].timestamp}
-            authorId={patch.author.id}
-            caption="opened this patch" />
-        </div>
-        <div class="layout-mobile">
-          <Authorship authorId={patch.author.id} />
-        </div>
-      </svelte:fragment>
-    </CobHeader>
-    <div style="display: flex; gap: 0.5rem;">
-      {#each options as option}
-        {#if !option.disabled}
-          <ProjectLink
-            projectParams={{
-              search: `tab=${option.value}`,
-            }}>
-            <SquareButton
-              size="small"
-              clickable={option.disabled}
-              active={option.value === currentTab}
-              disabled={option.disabled}>
-              {option.title}
-            </SquareButton>
-          </ProjectLink>
-        {:else}
-          <SquareButton
-            size="small"
-            clickable={option.disabled}
-            active={option.value === currentTab}
-            disabled={option.disabled}>
-            {option.title}
-          </SquareButton>
-        {/if}
-      {/each}
+      {/if}
     </div>
     {#if currentTab === "activity"}
-      <div style:margin-top="1rem">
-        <div class="txt-tiny">
-          <CommentComponent
-            caption="created this revision"
-            authorId={patch.author.id}
-            timestamp={currentRevision.timestamp}
-            rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
-            body={currentRevisionIndex === 0
-              ? patch.description
-              : currentRevision.description} />
-        </div>
-        {#each timeline as element}
-          {#if element.type === "thread"}
-            <!-- TODO: Implement reply creation and comment editing -->
-            <ThreadComponent
-              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
-              isDescription={false}
-              thread={element.inner}
-              on:reply={createReply}
-              on:select={({ detail: index }) => (currentRevision = index)} />
-          {:else if element.type === "merge"}
-            <div class="action layout-desktop txt-tiny">
-              <Authorship
-                authorId={element.inner.node}
-                timestamp={element.timestamp}>
-                merged
-                {utils.formatCommit(element.inner.commit)}
-              </Authorship>
-            </div>
-            <div class="action layout-mobile txt-tiny">
-              <Authorship authorId={element.inner.node}>
-                merged
-                {utils.formatCommit(element.inner.commit)}
-              </Authorship>
-            </div>
-          {:else if element.type === "review"}
-            <!-- TODO: Implement inline code comments -->
-            {@const [author, review] = element.inner}
-            <div class="action layout-desktop txt-tiny">
-              <Authorship authorId={author} timestamp={element.timestamp}>
-                {formatVerdict(review.verdict)}
-              </Authorship>
-            </div>
-            <div class="action layout-mobile txt-tiny">
-              <Authorship authorId={author}>
-                {formatVerdict(review.verdict)}
-              </Authorship>
-            </div>
-            {#if review.comment}
-              <CommentComponent
-                caption="left a comment"
-                authorId={author}
-                timestamp={review.timestamp}
-                rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
-                body={review.comment} />
-            {/if}
-          {/if}
-        {/each}
-      </div>
+      {#each timelineTuple as [revision, timelines], index}
+        <RevisionComponent
+          {baseUrl}
+          {projectId}
+          {timelines}
+          {projectHead}
+          {...revision}
+          on:reply={createReply}
+          patchId={patch.id}
+          authorId={patch.author.id}
+          expanded={index === patch.revisions.length - 1} />
+      {:else}
+        <Placeholder emoji="🍂">
+          <div slot="title">No activity</div>
+          <div slot="body">No activity on this patch yet</div>
+        </Placeholder>
+      {/each}
     {:else if currentTab === "commits"}
-      {#await diffPromise then diff}
+      {#await api.project.getDiff(projectId, currentRevision.base, currentRevision.oid) then diff}
         <div class="commit-list">
           {#each diff.commits as commit}
             <CommitTeaser {commit} />
           {/each}
         </div>
+      {:catch e}
+        <ErrorMessage message="Not able to load commits." stackTrace={e} />
       {/await}
     {:else if currentTab === "files"}
-      {#await diffPromise then diff}
+      {#await api.project.getDiff(projectId, currentRevision.base, currentRevision.oid) then diff}
         <div style:margin-top="1rem">
           <Changeset revision={currentRevision.oid} diff={diff.diff} />
         </div>
+      {:catch e}
+        <ErrorMessage message="Not able to load files diff." stackTrace={e} />
       {/await}
     {/if}
   </div>
diff --git a/src/views/projects/View.svelte b/src/views/projects/View.svelte
index 1f38ba43f..ad550cdf1 100644
--- a/src/views/projects/View.svelte
+++ b/src/views/projects/View.svelte
@@ -34,7 +34,7 @@
   $: searchParams = new URLSearchParams(activeRoute.params.search || "");
   $: issueFilter = (searchParams.get("state") as IssueStatus) || "open";
   $: patchTabFilter =
-    (searchParams.get("tab") as "activity" | "commits") || "activity";
+    (searchParams.get("tab") as "activity" | "commits" | "files") || "activity";
   $: patchFilter = (searchParams.get("state") as PatchStatus) || "open";
   $: baseUrl = utils.extractBaseUrl(activeRoute.params.hostnamePort);
   $: api = new HttpdClient(baseUrl);
@@ -254,13 +254,15 @@
         {#await api.project.getPatchById(project.id, activeRoute.params.view.params.patch)}
           <Loading center />
         {:then patch}
+          {@const latestRevision = patch.revisions[patch.revisions.length - 1]}
           <Patch
+            {patch}
             {baseUrl}
             projectId={project.id}
             projectHead={project.head}
-            revision={activeRoute.params.view.params.revision}
-            currentTab={patchTabFilter}
-            {patch} />
+            revision={activeRoute.params.view.params.revision ??
+              latestRevision.id}
+            currentTab={patchTabFilter} />
         {:catch e}
           <div class="message">
             <ErrorMessage message="Couldn't load patch." stackTrace={e} />
diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts
index 3e3339349..3a500e732 100644
--- a/tests/e2e/project.spec.ts
+++ b/tests/e2e/project.spec.ts
@@ -267,9 +267,9 @@ test("peer and branch switching", async ({ page }) => {
     await page.getByTitle("Change peer").click();
     await page.locator(`text=${aliceRemote}`).click();
     await expect(page.getByTitle("Change peer")).toHaveText(
-      ` did:key:${aliceRemote.substring(8).substring(0, 6)}…${aliceRemote.slice(
-        -6,
-      )} `,
+      `  did:key:${aliceRemote
+        .substring(8)
+        .substring(0, 6)}…${aliceRemote.slice(-6)} delegate`,
     );
     await expect(
       page.locator(
diff --git a/tests/e2e/project/commits.spec.ts b/tests/e2e/project/commits.spec.ts
index 86fede649..e077eee4b 100644
--- a/tests/e2e/project/commits.spec.ts
+++ b/tests/e2e/project/commits.spec.ts
@@ -15,9 +15,9 @@ test("peer and branch switching", async ({ page }) => {
     await page.getByTitle("Change peer").click();
     await page.locator(`text=${aliceRemote}`).click();
     await expect(page.getByTitle("Change peer")).toHaveText(
-      ` did:key:${aliceRemote.substring(8).substring(0, 6)}…${aliceRemote.slice(
-        -6,
-      )} `,
+      `  did:key:${aliceRemote
+        .substring(8)
+        .substring(0, 6)}…${aliceRemote.slice(-6)} delegate`,
     );
 
     await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible();