From 0a2dbe9e5d9056dfd18c1a41702c578cc897dd84 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: Thu, 18 Jul 2024 15:36:04 +0200
Subject: [PATCH] Add Checkout button to patch view

---
 src/views/projects/Patch.svelte               |  8 +++-
 .../projects/Patch/CheckoutButton.svelte      | 37 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/views/projects/Patch/CheckoutButton.svelte

diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index b9b537f6f..68b46237c 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -52,6 +52,7 @@
   import Badge from "@app/components/Badge.svelte";
   import Button from "@app/components/Button.svelte";
   import Changeset from "@app/views/projects/Changeset.svelte";
+  import CheckoutButton from "@app/views/projects/Patch/CheckoutButton.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
   import CompareButton from "@app/views/projects/Patch/CompareButton.svelte";
   import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
@@ -304,7 +305,12 @@
           {:else}
             <span class="txt-missing">No title</span>
           {/if}
-          <Share />
+          <div class="global-flex-item">
+            <Share />
+            <div class="global-hide-on-mobile-down">
+              <CheckoutButton id={patch.id} />
+            </div>
+          </div>
         </svelte:fragment>
         <svelte:fragment slot="state">
           <Badge size="tiny" variant={badgeColor(patch.state.status)}>
diff --git a/src/views/projects/Patch/CheckoutButton.svelte b/src/views/projects/Patch/CheckoutButton.svelte
new file mode 100644
index 000000000..1e0f7d99c
--- /dev/null
+++ b/src/views/projects/Patch/CheckoutButton.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Button from "@app/components/Button.svelte";
+  import Command from "@app/components/Command.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Popover from "@app/components/Popover.svelte";
+
+  export let id: string;
+</script>
+
+<style>
+  .label {
+    display: block;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    margin-bottom: 0.75rem;
+  }
+</style>
+
+<Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
+  <Button
+    slot="toggle"
+    let:toggle
+    variant="secondary-toggle-off"
+    on:click={() => {
+      toggle();
+    }}>
+    <IconSmall name="branch" />
+    <span class="global-hide-on-small-desktop-down">Checkout</span>
+  </Button>
+
+  <div slot="popover" style:width="20rem">
+    <span class="label">
+      Run this command from a Radicle working copy to checkout this patch.
+    </span>
+    <Command command={`rad patch checkout ${id}`} />
+  </div>
+</Popover>