From 4367441be86f61adc0cef3ff8a18be1273c8e354 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: Fri, 24 Jan 2025 15:25:36 -0600
Subject: [PATCH] Tweak patch tab bar

- Square the dropdown icon
- Set the tab bar height to what it is in the design system
- Move dropdown button inside the tab
---
 src/components/NakedButton.svelte      |  7 ++++---
 src/components/RevisionSelector.svelte | 15 ++++++++++++---
 src/components/Tab.svelte              |  3 ++-
 src/views/repo/Patch.svelte            | 23 ++++++++++++-----------
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/components/NakedButton.svelte b/src/components/NakedButton.svelte
index 5f4799bd7..4ee8061e7 100644
--- a/src/components/NakedButton.svelte
+++ b/src/components/NakedButton.svelte
@@ -5,8 +5,9 @@
     children: Snippet;
     title?: string;
     variant: "primary" | "secondary" | "ghost";
-    onclick?: () => void;
+    onclick?: (e: MouseEvent) => void;
     styleHeight?: string;
+    stylePadding?: string;
   }
 
   const {
@@ -15,6 +16,7 @@
     variant,
     onclick,
     styleHeight = "2rem",
+    stylePadding = "0 8px",
   }: Props = $props();
 
   const style = $derived(
@@ -71,7 +73,6 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    padding: 0 8px;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -232,7 +233,7 @@
 
   <div class="pixel p3-1"></div>
   <div class="pixel p3-2"></div>
-  <div class="pixel p3-3 txt-semibold txt-small">
+  <div class="pixel p3-3 txt-semibold txt-small" style:padding={stylePadding}>
     {@render children()}
   </div>
   <div class="pixel p3-4"></div>
diff --git a/src/components/RevisionSelector.svelte b/src/components/RevisionSelector.svelte
index ae93c00ed..5613f0925 100644
--- a/src/components/RevisionSelector.svelte
+++ b/src/components/RevisionSelector.svelte
@@ -54,10 +54,19 @@
   }
 </style>
 
-<Popover popoverPadding="0" popoverPositionTop="2.5rem" popoverPositionLeft="0">
+<Popover popoverPadding="0" popoverPositionTop="37px" popoverPositionLeft="0">
   {#snippet toggle(onclick)}
-    <NakedButton variant="ghost" {onclick}>
-      <Icon name="chevron-down" />
+    <NakedButton
+      variant="ghost"
+      onclick={(e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onclick();
+      }}
+      stylePadding="0 4px">
+      <div style:color="var(--color-foreground-contrast)">
+        <Icon name="chevron-down" />
+      </div>
     </NakedButton>
   {/snippet}
 
diff --git a/src/components/Tab.svelte b/src/components/Tab.svelte
index afb7b5125..8c9fd453e 100644
--- a/src/components/Tab.svelte
+++ b/src/components/Tab.svelte
@@ -30,13 +30,14 @@
     display: flex;
     flex-direction: row;
     font-size: var(--font-size-small);
+    height: 38px;
   }
 
   .wrapper {
     position: relative;
     display: flex;
     gap: 0.5rem;
-    padding: 5px 0;
+    padding: 3px 0;
     align-items: center;
   }
 
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index 8cbe2638b..7d5418321 100644
--- a/src/views/repo/Patch.svelte
+++ b/src/views/repo/Patch.svelte
@@ -546,7 +546,7 @@
             {formatOid(patch.id)}
             <span
               class="global-counter"
-              style:height="22px"
+              style:height="24px"
               style:color="var(--color-foreground-contrast)">
               Initial
             </span>
@@ -558,17 +558,18 @@
                 tab = "revisions";
               }}>
               {formatOid(selectedRevision.id)}
-              <RevisionBadges revision={selectedRevision} {revisions} />
+              <div class="global-flex" style:gap="0.25rem">
+                <RevisionBadges revision={selectedRevision} {revisions} />
+                <RevisionSelector
+                  {patch}
+                  {revisions}
+                  {selectedRevision}
+                  selectRevision={rev => {
+                    selectedRevision = rev;
+                    tab = "revisions";
+                  }} />
+              </div>
             </Tab>
-
-            <RevisionSelector
-              {patch}
-              {revisions}
-              {selectedRevision}
-              selectRevision={rev => {
-                selectedRevision = rev;
-                tab = "revisions";
-              }} />
           {/if}
 
           <div style:margin-left="auto">