Add Checkout button to patch view

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)}>

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>