From 9d432d467df3d5ef3e0e9315a10d41458887f67f 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, 14 Jan 2025 15:45:21 -0600
Subject: [PATCH] Style patch tabs

---
 src/components/Border.svelte    |  22 +++-
 src/components/Changeset.svelte |   6 +-
 src/components/File.svelte      |   5 +-
 src/components/Tab.svelte       |  74 +++++++++++
 src/views/repo/Patch.svelte     | 223 +++++++++++++++++---------------
 5 files changed, 224 insertions(+), 106 deletions(-)
 create mode 100644 src/components/Tab.svelte

diff --git a/src/components/Border.svelte b/src/components/Border.svelte
index c1b6c58..c2c1751 100644
--- a/src/components/Border.svelte
+++ b/src/components/Border.svelte
@@ -11,10 +11,12 @@
     styleHeight?: string;
     styleMinHeight?: string;
     styleWidth?: string;
+    styleDisplay?: string;
     styleCursor?: "default" | "pointer" | "text";
     styleGap?: string;
     styleOverflow?: string;
     flatTop?: boolean;
+    flatBottom?: boolean;
     styleBackgroundColor?: string;
     styleFlexDirection?: string;
     styleAlignItems?: string;
@@ -31,10 +33,12 @@
     styleMinHeight,
     stylePosition,
     styleWidth,
+    styleDisplay = "flex",
     styleCursor = "default",
     styleGap = "0.5rem",
     styleOverflow,
     flatTop = false,
+    flatBottom = false,
     styleBackgroundColor = "var(--color-background-default)",
     styleFlexDirection = "row",
     styleAlignItems = "center",
@@ -130,7 +134,6 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    display: flex;
     background-color: var(--local-background-color);
   }
   .p3-4 {
@@ -196,6 +199,21 @@
   .flat-top > .p2-5 {
     background-color: var(--local-button-color-1);
   }
+
+  .flat-bottom > .p4-2,
+  .flat-bottom > .p4-4 {
+    background-color: transparent;
+  }
+
+  .flat-bottom > .p4-1,
+  .flat-bottom > .p4-5,
+  .flat-bottom > .p5-3,
+  .flat-bottom > .p5-1,
+  .flat-bottom > .p5-2,
+  .flat-bottom > .p5-4,
+  .flat-bottom > .p5-5 {
+    background-color: var(--local-button-color-1);
+  }
 </style>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -204,6 +222,7 @@
   style:cursor={styleCursor}
   class="container"
   class:flat-top={flatTop}
+  class:flat-bottom={flatBottom}
   {onclick}
   role="button"
   tabindex={onclick !== undefined ? 0 : -1}
@@ -226,6 +245,7 @@
   <div class="p3-2"></div>
   <div
     class="p3-3"
+    style:display={styleDisplay}
     style:position={stylePosition}
     style:padding={stylePadding}
     style:gap={styleGap}
diff --git a/src/components/Changeset.svelte b/src/components/Changeset.svelte
index 0a72fa0..8669c60 100644
--- a/src/components/Changeset.svelte
+++ b/src/components/Changeset.svelte
@@ -16,11 +16,15 @@
     display: flex;
     flex-direction: column;
   }
+
+  .diff:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
 </style>
 
 <div class="diff-list">
   {#each diff.files as file}
-    <div style:margin-bottom="1rem">
+    <div class="diff">
       <FileDiff
         filePath={"path" in file ? file.path : file.newPath}
         oldFilePath={"oldPath" in file ? file.oldPath : undefined}
diff --git a/src/components/File.svelte b/src/components/File.svelte
index 4745274..6f09423 100644
--- a/src/components/File.svelte
+++ b/src/components/File.svelte
@@ -13,9 +13,9 @@
 <style>
   .header {
     display: flex;
-    height: 3rem;
     align-items: center;
-    padding: 0 0.5rem 0 1rem;
+    height: 2.5rem;
+    padding-left: 1rem;
     z-index: 2;
     font-size: var(--font-size-small);
   }
@@ -46,6 +46,7 @@
   .container {
     position: relative;
     overflow-x: auto;
+    z-index: 1;
   }
   .container::after {
     position: absolute;
diff --git a/src/components/Tab.svelte b/src/components/Tab.svelte
new file mode 100644
index 0000000..29b7da6
--- /dev/null
+++ b/src/components/Tab.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    onclick?: () => void;
+    disabled?: boolean;
+    active?: boolean;
+    flatLeft?: boolean;
+    flatRight?: boolean;
+  }
+
+  const {
+    children,
+    onclick = undefined,
+    disabled = false,
+    active = false,
+    flatLeft = false,
+    flatRight = false,
+  }: Props = $props();
+</script>
+
+<style>
+  .container {
+    white-space: nowrap;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    display: flex;
+    flex-direction: row;
+    font-size: var(--font-size-small);
+  }
+
+  .wrapper {
+    position: relative;
+    display: flex;
+    gap: 0.5rem;
+    padding: 5px 0;
+  }
+
+  .active {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .wrapper.active::after {
+    position: absolute;
+    z-index: 1;
+    content: " ";
+    background-color: var(--color-fill-secondary);
+    height: 2px;
+    bottom: -4px;
+    width: 100%;
+  }
+
+  .container.disabled {
+    color: var(--color-foreground-disabled);
+  }
+</style>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  class="container"
+  style:cursor={!disabled ? "pointer" : "default"}
+  class:disabled
+  class:flat-right={flatRight}
+  class:flat-left={flatLeft}
+  onclick={!disabled ? onclick : undefined}
+  role="button"
+  tabindex="0">
+  <div class="wrapper" class:active>
+    {@render children()}
+  </div>
+</div>
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index 5045fd5..451fdf0 100644
--- a/src/views/repo/Patch.svelte
+++ b/src/views/repo/Patch.svelte
@@ -27,7 +27,6 @@
 
   import AssigneeInput from "@app/components/AssigneeInput.svelte";
   import Border from "@app/components/Border.svelte";
-  import Button from "@app/components/Button.svelte";
   import Changeset from "@app/components/Changeset.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
@@ -40,6 +39,7 @@
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
   import PatchTimeline from "@app/components/PatchTimeline.svelte";
   import Sidebar from "@app/components/Sidebar.svelte";
+  import Tab from "@app/components/Tab.svelte";
   import TextInput from "@app/components/TextInput.svelte";
 
   interface Props {
@@ -335,8 +335,9 @@
   }
 
   .patch-body {
-    margin: 1rem 0;
+    margin-bottom: 1rem;
     position: relative;
+    z-index: 1;
   }
   /* We put the background and clip-path in a separate element to prevent
      popovers being clipped in the main element. */
@@ -471,113 +472,131 @@
       {/if}
     </div>
 
-    <Border variant="ghost" styleGap="0">
-      <div class="metadata-section" style:min-width="8rem">
-        <div class="metadata-section-title">Status</div>
-        <PatchStateBadge state={patch.state} />
-      </div>
-
-      <div class="metadata-divider"></div>
-
-      <div class="metadata-section" style:flex="1">
-        <LabelInput
-          allowedToEdit={!!roles.isDelegateOrAuthor(
-            config.publicKey,
-            repo.delegates.map(delegate => delegate.did),
-            patch.author.did,
-          )}
-          labels={patch.labels}
-          submitInProgress={labelSaveInProgress}
-          save={saveLabels} />
-      </div>
-
-      <div class="metadata-divider"></div>
-
-      <div class="metadata-section" style:flex="1">
-        <AssigneeInput
-          allowedToEdit={!!roles.isDelegateOrAuthor(
-            config.publicKey,
-            repo.delegates.map(delegate => delegate.did),
-            patch.author.did,
-          )}
-          assignees={patch.assignees}
-          submitInProgress={assigneesSaveInProgress}
-          save={saveAssignees} />
-      </div>
-    </Border>
-
-    <div class="global-flex" style:gap="0" style:margin-top="1rem">
-      <Button
-        flatRight
-        active={tab === "patch"}
-        variant="ghost"
-        onclick={() => {
-          tab = "patch";
-        }}>
-        Patch
-      </Button>
-
-      <Button
-        flatLeft
-        variant="ghost"
-        active={tab === "revisions"}
-        onclick={() => {
-          tab = "revisions";
-        }}>
-        Revision: {formatOid(revisions.slice(-1)[0].id)}
-        <span class="global-counter" style:height="22px">latest</span>
-      </Button>
+    <div class="global-flex" style:gap="0.5rem">
+      <Border stylePosition="relative" variant="ghost" flatBottom>
+        <div
+          class="global-flex"
+          style:z-index="10"
+          style:gap="1rem"
+          style:padding="0 1rem">
+          <Tab
+            active={tab === "patch"}
+            onclick={() => {
+              tab = "patch";
+            }}>
+            Patch: {formatOid(patch.id)}
+          </Tab>
+
+          <Tab
+            active={tab === "revisions"}
+            onclick={() => {
+              tab = "revisions";
+            }}>
+            Revision: {formatOid(revisions.slice(-1)[0].id)}
+            <span class="global-counter" style:height="22px">latest</span>
+          </Tab>
+        </div>
+      </Border>
     </div>
 
     {#if tab === "patch"}
-      <div class="txt-small patch-body">
-        <CommentComponent
-          caption="opened"
-          rid={repo.rid}
-          id={patch.id}
-          lastEdit={revisions[0].description.length > 1
-            ? revisions[0].description.at(-1)
-            : undefined}
-          author={revisions[0].author}
-          reactions={revisions[0].reactions}
-          timestamp={revisions[0].timestamp}
-          body={revisions[0].description.slice(-1)[0].body}
-          reactOnComment={partial(
-            reactOnRevision,
-            config.publicKey,
-            revisions[0].id,
-          )}
-          editComment={roles.isDelegateOrAuthor(
-            config.publicKey,
-            repo.delegates.map(delegate => delegate.did),
-            revisions[0].author.did,
-          ) && partial(editRevision, revisions[0].id)}>
-        </CommentComponent>
-      </div>
-
-      <div>
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div
-          role="button"
-          tabindex="0"
-          class="txt-semibold global-flex"
-          style:margin-bottom="1rem"
-          style:cursor="pointer"
-          onclick={() => (hideTimeline = !hideTimeline)}>
-          <Icon
-            name={hideTimeline ? "chevron-right" : "chevron-down"} />Timeline
+      <Border
+        variant="ghost"
+        flatTop
+        styleWidth="100%"
+        stylePadding="1rem"
+        styleDisplay="block"
+        styleFlexDirection="column"
+        styleAlignItems="flex-start">
+        <div class="txt-small patch-body">
+          <CommentComponent
+            caption="opened"
+            rid={repo.rid}
+            id={patch.id}
+            lastEdit={revisions[0].description.length > 1
+              ? revisions[0].description.at(-1)
+              : undefined}
+            author={revisions[0].author}
+            reactions={revisions[0].reactions}
+            timestamp={revisions[0].timestamp}
+            body={revisions[0].description.slice(-1)[0].body}
+            reactOnComment={partial(
+              reactOnRevision,
+              config.publicKey,
+              revisions[0].id,
+            )}
+            editComment={roles.isDelegateOrAuthor(
+              config.publicKey,
+              repo.delegates.map(delegate => delegate.did),
+              revisions[0].author.did,
+            ) && partial(editRevision, revisions[0].id)}>
+          </CommentComponent>
         </div>
-        <div class:hide-timeline={hideTimeline}>
-          <PatchTimeline {activity} patchId={patch.id} />
+
+        <Border variant="ghost" styleGap="0">
+          <div class="metadata-section" style:min-width="8rem">
+            <div class="metadata-section-title">Status</div>
+            <PatchStateBadge state={patch.state} />
+          </div>
+
+          <div class="metadata-divider"></div>
+
+          <div class="metadata-section" style:flex="1">
+            <LabelInput
+              allowedToEdit={!!roles.isDelegateOrAuthor(
+                config.publicKey,
+                repo.delegates.map(delegate => delegate.did),
+                patch.author.did,
+              )}
+              labels={patch.labels}
+              submitInProgress={labelSaveInProgress}
+              save={saveLabels} />
+          </div>
+
+          <div class="metadata-divider"></div>
+
+          <div class="metadata-section" style:flex="1">
+            <AssigneeInput
+              allowedToEdit={!!roles.isDelegateOrAuthor(
+                config.publicKey,
+                repo.delegates.map(delegate => delegate.did),
+                patch.author.did,
+              )}
+              assignees={patch.assignees}
+              submitInProgress={assigneesSaveInProgress}
+              save={saveAssignees} />
+          </div>
+        </Border>
+
+        <div>
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <div
+            role="button"
+            tabindex="0"
+            class="txt-semibold global-flex"
+            style:margin="1rem 0"
+            style:cursor="pointer"
+            onclick={() => (hideTimeline = !hideTimeline)}>
+            <Icon
+              name={hideTimeline ? "chevron-right" : "chevron-down"} />Timeline
+          </div>
+          <div class:hide-timeline={hideTimeline}>
+            <PatchTimeline {activity} patchId={patch.id} />
+          </div>
         </div>
-      </div>
+      </Border>
     {:else}
-      {@const revision = revisions.slice(-1)[0]}
-      {#await loadHighlightedDiff(repo.rid, revision.base, revision.head) then diff}
-        <div style:margin-top="1rem">
+      <Border
+        variant="ghost"
+        flatTop
+        styleDisplay="block"
+        stylePadding="1rem"
+        styleAlignItems="flex-start">
+        {@const revision = revisions.slice(-1)[0]}
+        {#await loadHighlightedDiff(repo.rid, revision.base, revision.head) then diff}
           <Changeset {diff} repoId={repo.rid} />
-        </div>
-      {/await}
+        {/await}
+      </Border>
     {/if}
   </div>
 </Layout>