From 7f567e354a01bf6154954e045ce3e06756b41706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 17 Sep 2024 17:19:05 +0200
Subject: [PATCH] Style issue and patch list views

---
 public/index.css                  | 38 ++++++++++++++
 public/typography.css             |  3 +-
 src/components/Header.svelte      | 19 +------
 src/components/IssueTeaser.svelte | 78 +++++++++++++++++++++++++++++
 src/components/NodeId.svelte      |  1 -
 src/components/PatchTeaser.svelte | 83 +++++++++++++++++++++++++++++++
 src/views/repo/Issues.svelte      | 26 ++--------
 src/views/repo/Layout.svelte      |  2 +-
 src/views/repo/Patches.svelte     | 32 ++----------
 9 files changed, 211 insertions(+), 71 deletions(-)
 create mode 100644 src/components/IssueTeaser.svelte
 create mode 100644 src/components/PatchTeaser.svelte

diff --git a/public/index.css b/public/index.css
index 9ba95fa79..6ef8ebd81 100644
--- a/public/index.css
+++ b/public/index.css
@@ -126,4 +126,42 @@ body {
     2px calc(100% - 6px),
     0 calc(100% - 6px)
   );
+
+  --3px-top-corner-fill: polygon(
+    0 6px,
+    2px 6px,
+    2px 4px,
+    4px 4px,
+    4px 2px,
+    6px 2px,
+    6px 0,
+    calc(100% - 6px) 0,
+    calc(100% - 6px) 2px,
+    calc(100% - 4px) 2px,
+    calc(100% - 4px) 4px,
+    calc(100% - 2px) 4px,
+    calc(100% - 2px) 6px,
+    100% 6px,
+    100% 100%,
+    0 100%
+  );
+
+  --3px-bottom-corner-fill: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 6px),
+    calc(100% - 2px) calc(100% - 6px),
+    calc(100% - 2px) calc(100% - 4px),
+    calc(100% - 4px) calc(100% - 4px),
+    calc(100% - 4px) calc(100% - 2px),
+    calc(100% - 6px) calc(100% - 2px),
+    calc(100% - 6px) 100%,
+    6px 100%,
+    6px calc(100% - 2px),
+    4px calc(100% - 2px),
+    4px calc(100% - 4px),
+    2px calc(100% - 4px),
+    2px calc(100% - 6px),
+    0 calc(100% - 6px)
+  );
 }
diff --git a/public/typography.css b/public/typography.css
index a771557bd..9b14fb025 100644
--- a/public/typography.css
+++ b/public/typography.css
@@ -91,7 +91,8 @@ html {
    * otherwise Safari breaks. */
   font-size: 16px;
   font-weight: var(--font-weight-regular);
-  line-height: 1.5;
+  /* On Safari this aligns text with different font-faces properly vertically. */
+  line-height: 22px;
 }
 
 p {
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 5e5200c74..9acb16062 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -31,24 +31,7 @@
     z-index: -1;
 
     background-color: var(--color-background-float);
-    clip-path: polygon(
-      0 0,
-      100% 0,
-      100% calc(100% - 6px),
-      calc(100% - 2px) calc(100% - 6px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 4px) calc(100% - 4px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 6px) calc(100% - 2px),
-      calc(100% - 6px) 100%,
-      6px 100%,
-      6px calc(100% - 2px),
-      4px calc(100% - 2px),
-      4px calc(100% - 4px),
-      2px calc(100% - 4px),
-      2px calc(100% - 6px),
-      0 calc(100% - 6px)
-    );
+    clip-path: var(--3px-bottom-corner-fill);
   }
   .breadcrumbs {
     gap: 0.5rem;
diff --git a/src/components/IssueTeaser.svelte b/src/components/IssueTeaser.svelte
new file mode 100644
index 000000000..2f3c387b5
--- /dev/null
+++ b/src/components/IssueTeaser.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Issue } from "@bindings/Issue";
+
+  import { formatOid } from "@app/lib/utils";
+
+  import Icon from "./Icon.svelte";
+  import NodeId from "./NodeId.svelte";
+
+  export let issue: Issue;
+
+  const statusColor: Record<Issue["state"]["status"], string> = {
+    open: "var(--color-fill-success)",
+    closed: "var(--color-foreground-red)",
+  };
+  const statusBackgroundColor: Record<Issue["state"]["status"], string> = {
+    open: "var(--color-fill-diff-green)",
+    closed: "var(--color-fill-diff-red)",
+  };
+</script>
+
+<style>
+  .issue-teaser {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+    height: 5rem;
+    background-color: var(--color-background-float);
+    padding: 1rem;
+    cursor: pointer;
+    font-size: var(--font-size-regular);
+  }
+  .issue-teaser:hover {
+    background-color: var(--color-fill-float-hover);
+  }
+  .status {
+    padding: 0;
+    margin-right: 1rem;
+  }
+  .issue-teaser:first-of-type {
+    clip-path: var(--3px-top-corner-fill);
+  }
+  .issue-teaser:last-of-type {
+    clip-path: var(--3px-bottom-corner-fill);
+  }
+  .issue-teaser:only-of-type {
+    clip-path: var(--3px-corner-fill);
+  }
+</style>
+
+<div class="issue-teaser">
+  <div class="global-flex">
+    <div
+      class="global-counter status"
+      style:color={statusColor[issue.state.status]}
+      style:background-color={statusBackgroundColor[issue.state.status]}>
+      <Icon name="issue" />
+    </div>
+    <div
+      class="global-flex"
+      style:flex-direction="column"
+      style:align-items="flex-start">
+      {issue.title}
+      <div class="global-flex txt-small">
+        <NodeId
+          nodeId={issue.author.did.replace("did:key:", "")}
+          alias={issue.author.alias} />
+        opened
+        <div class="global-oid">{formatOid(issue.id)}</div>
+      </div>
+    </div>
+  </div>
+  <div class="global-flex">
+    {#each issue.labels as label}
+      <div class="global-counter txt-small">{label}</div>
+    {/each}
+  </div>
+</div>
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
index a801af913..6ce1fb357 100644
--- a/src/components/NodeId.svelte
+++ b/src/components/NodeId.svelte
@@ -15,7 +15,6 @@
     display: flex;
     align-items: center;
     gap: 0.375rem;
-    height: 1rem;
     font-weight: var(--font-weight-semibold);
   }
   .no-alias {
diff --git a/src/components/PatchTeaser.svelte b/src/components/PatchTeaser.svelte
new file mode 100644
index 000000000..84e8a4c7e
--- /dev/null
+++ b/src/components/PatchTeaser.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { Patch } from "@bindings/Patch";
+
+  import { formatOid } from "@app/lib/utils";
+
+  import Icon from "./Icon.svelte";
+  import NodeId from "./NodeId.svelte";
+
+  export let patch: Patch;
+
+  const statusColor: Record<Patch["state"]["status"], string> = {
+    draft: "var(--color-fill-gray)",
+    open: "var(--color-fill-success)",
+    archived: "var(--color-foreground-yellow)",
+    merged: "var(--color-fill-primary)",
+  };
+
+  const statusBackgroundColor: Record<Patch["state"]["status"], string> = {
+    draft: "var(--color-fill-ghost)",
+    open: "var(--color-fill-diff-green)",
+    archived: "var(--color-fill-private)",
+    merged: "var(--color-fill-delegate)",
+  };
+</script>
+
+<style>
+  .patch-teaser {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+    height: 5rem;
+    background-color: var(--color-background-float);
+    padding: 1rem;
+    cursor: pointer;
+    font-size: var(--font-size-regular);
+  }
+  .patch-teaser:hover {
+    background-color: var(--color-fill-float-hover);
+  }
+  .status {
+    padding: 0;
+    margin-right: 1rem;
+  }
+  .patch-teaser:first-of-type {
+    clip-path: var(--3px-top-corner-fill);
+  }
+  .patch-teaser:last-of-type {
+    clip-path: var(--3px-bottom-corner-fill);
+  }
+  .patch-teaser:only-of-type {
+    clip-path: var(--3px-corner-fill);
+  }
+</style>
+
+<div class="patch-teaser">
+  <div class="global-flex">
+    <div
+      class="global-counter status"
+      style:color={statusColor[patch.state.status]}
+      style:background-color={statusBackgroundColor[patch.state.status]}>
+      <Icon name="patch" />
+    </div>
+    <div
+      class="global-flex"
+      style:flex-direction="column"
+      style:align-items="flex-start">
+      {patch.title}
+      <div class="global-flex txt-small">
+        <NodeId
+          nodeId={patch.author.did.replace("did:key:", "")}
+          alias={patch.author.alias} />
+        opened
+        <div class="global-oid">{formatOid(patch.id)}</div>
+      </div>
+    </div>
+  </div>
+  <div class="global-flex">
+    {#each patch.labels as label}
+      <div class="global-counter txt-small">{label}</div>
+    {/each}
+  </div>
+</div>
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte
index 37b774d78..2343ef536 100644
--- a/src/views/repo/Issues.svelte
+++ b/src/views/repo/Issues.svelte
@@ -4,11 +4,10 @@
   import type { IssueStatus } from "./router";
   import type { RepoInfo } from "@bindings/RepoInfo";
 
-  import { formatOid } from "@app/lib/utils";
-
   import Layout from "./Layout.svelte";
 
   import Icon from "@app/components/Icon.svelte";
+  import IssueTeaser from "@app/components/IssueTeaser.svelte";
   import Link from "@app/components/Link.svelte";
   import NodeId from "@app/components/NodeId.svelte";
 
@@ -17,14 +16,6 @@
   export let config: Config;
   export let status: IssueStatus;
 
-  const statusColor: Record<Issue["state"]["status"], string> = {
-    open: "var(--color-fill-success)",
-    closed: "var(--color-foreground-red)",
-  };
-  const statusBackgroundColor: Record<Issue["state"]["status"], string> = {
-    open: "var(--color-fill-diff-green)",
-    closed: "var(--color-fill-diff-red)",
-  };
   $: project = repo.payloads["xyz.radicle.project"]!;
 </script>
 
@@ -32,7 +23,8 @@
   .list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 2px;
+    padding: 0 1rem 1rem 1rem;
   }
 </style>
 
@@ -106,17 +98,7 @@
 
   <div class="list">
     {#each issues as issue}
-      <div class="global-flex">
-        <div
-          class="global-counter"
-          style:padding="0"
-          style:color={statusColor[issue.state.status]}
-          style:background-color={statusBackgroundColor[issue.state.status]}>
-          <Icon name="issue" />
-        </div>
-        <div class="global-oid">{formatOid(issue.id)}</div>
-        {issue.title}
-      </div>
+      <IssueTeaser {issue} />
     {/each}
 
     {#if issues.length === 0}
diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte
index 2f521cba3..886fbb811 100644
--- a/src/views/repo/Layout.svelte
+++ b/src/views/repo/Layout.svelte
@@ -29,7 +29,7 @@
   .sidebar {
     grid-column: 1 / 2;
     margin-left: 1rem;
-    margin-right: 1.5rem;
+    margin-right: 0.5rem;
     min-width: 14rem;
   }
 
diff --git a/src/views/repo/Patches.svelte b/src/views/repo/Patches.svelte
index c250db406..a59f8f481 100644
--- a/src/views/repo/Patches.svelte
+++ b/src/views/repo/Patches.svelte
@@ -4,33 +4,18 @@
   import type { PatchStatus } from "./router";
   import type { RepoInfo } from "@bindings/RepoInfo";
 
-  import { formatOid } from "@app/lib/utils";
-
   import Layout from "./Layout.svelte";
 
   import Icon from "@app/components/Icon.svelte";
   import Link from "@app/components/Link.svelte";
   import NodeId from "@app/components/NodeId.svelte";
+  import PatchTeaser from "@app/components/PatchTeaser.svelte";
 
   export let repo: RepoInfo;
   export let patches: Patch[];
   export let config: Config;
   export let status: PatchStatus;
 
-  const statusColor: Record<Patch["state"]["status"], string> = {
-    draft: "var(--color-fill-gray)",
-    open: "var(--color-fill-success)",
-    archived: "var(--color-foreground-yellow)",
-    merged: "var(--color-fill-primary)",
-  };
-
-  const statusBackgroundColor: Record<Patch["state"]["status"], string> = {
-    draft: "var(--color-fill-ghost)",
-    open: "var(--color-fill-diff-green)",
-    archived: "var(--color-fill-private)",
-    merged: "var(--color-fill-delegate)",
-  };
-
   $: project = repo.payloads["xyz.radicle.project"]!;
 </script>
 
@@ -38,7 +23,8 @@
   .list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 2px;
+    padding: 0 1rem 1rem 1rem;
   }
 </style>
 
@@ -131,17 +117,7 @@
 
   <div class="list">
     {#each patches as patch}
-      <div class="global-flex">
-        <div
-          class="global-counter"
-          style:padding="0"
-          style:color={statusColor[patch.state.status]}
-          style:background-color={statusBackgroundColor[patch.state.status]}>
-          <Icon name="patch" />
-        </div>
-        <div class="global-oid">{formatOid(patch.id)}</div>
-        {patch.title}
-      </div>
+      <PatchTeaser {patch} />
     {/each}
 
     {#if patches.length === 0}