Move Compare tab in Patch view to where revision button is

src/views/projects/Patch.svelte

@@ -66,6 +66,7 @@
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
   import CobStateButton from "@app/views/projects/Cob/CobStateButton.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
+  import CompareButton from "@app/views/projects/Patch/CompareButton.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
   import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
   import Embeds from "@app/views/projects/Cob/Embeds.svelte";
@@ -688,10 +689,6 @@
     gap: 0.5rem;
     width: 100%;
   }
-  .diff-button-range {
-    font-family: var(--font-family-monospace);
-    font-weight: var(--font-weight-bold);
-  }
   .connector {
     width: 1px;
     height: 1.5rem;
@@ -898,35 +895,15 @@
             <Link {route}>
               <Button
                 size="large"
-                variant={name === view.name ? "tab-active" : "tab"}>
+                variant={name === view.name ||
+                (view.name === "diff" && name === "changes")
+                  ? "tab-active"
+                  : "tab"}>
                 <IconSmall name={icon} />
                 {capitalize(name)}
               </Button>
             </Link>
           {/each}
-          {#if view.name === "diff"}
-            <Link
-              route={{
-                resource: "project.patch",
-                project: project.id,
-                node: baseUrl,
-                patch: patch.id,
-                view: {
-                  name: "diff",
-                  fromCommit: view.fromCommit,
-                  toCommit: view.toCommit,
-                },
-              }}>
-              <Button size="large" variant="tab-active">
-                Compare <span class="diff-button-range">
-                  {view.fromCommit.substring(0, 6)}..{view.toCommit.substring(
-                    0,
-                    6,
-                  )}
-                </span>
-              </Button>
-            </Link>
-          {/if}
         </Radio>
 
         {#if view.name === "changes"}
@@ -936,6 +913,17 @@
             <RevisionSelector {view} {baseUrl} {patch} {project} />
           </div>
         {/if}
+        {#if view.name === "diff"}
+          <div
+            class="global-hide-on-mobile-down"
+            style="margin-left: auto; margin-top: -0.5rem;">
+            <div style:margin-left="auto">
+              <CompareButton
+                fromCommit={view.fromCommit}
+                toCommit={view.toCommit} />
+            </div>
+          </div>
+        {/if}
         <div class="tabs-spacer" />
       </div>
       <div class="bottom">
@@ -945,12 +933,19 @@
             style:padding="0 1rem"
             style:display="flex"
             class="global-hide-on-small-desktop-up">
-            <div style:margin-left="auto">
-              <RevisionSelector {view} {baseUrl} {patch} {project} />
-            </div>
+            <RevisionSelector {view} {baseUrl} {patch} {project} />
           </div>
         {/if}
         {#if view.name === "diff"}
+          <div
+            style:width="100%"
+            style:padding="0 1rem"
+            style:display="flex"
+            class="global-hide-on-small-desktop-up">
+            <CompareButton
+              fromCommit={view.fromCommit}
+              toCommit={view.toCommit} />
+          </div>
           <Changeset
             {baseUrl}
             projectId={project.id}

src/views/projects/Patch/CompareButton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Button from "@app/components/Button.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+
+  export let fromCommit: string;
+  export let toCommit: string;
+</script>
+
+<Button size="regular" disabled>
+  <span style:color="var(--color-foreground-contrast)">Compare</span>
+  <span
+    style:color="var(--color-fill-secondary)"
+    style:font-family="var(--font-family-monospace)">
+    {fromCommit.substring(0, 6)}..{toCommit.substring(0, 6)}
+  </span>
+  <IconSmall name={"chevron-down"} />
+</Button>