Add New Patch button

src/components/Command.svelte

@@ -25,13 +25,16 @@
   <Border
     hoverable
     onclick={() => clipboard.copy()}
+    styleOverflow="hidden"
     styleBackgroundColor="var(--color-background-float)"
     styleCursor="pointer"
     styleJustifyContent="space-between"
     stylePadding="0.25rem 0.5rem"
     {styleWidth}
     variant="ghost">
-    $ {command}
+    <span class="txt-overflow">
+      $ {command}
+    </span>
     <Clipboard bind:this={clipboard} text={command} />
   </Border>
 </div>

src/components/NewPatchButton.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Border from "./Border.svelte";
+  import Button from "./Button.svelte";
+  import Command from "./Command.svelte";
+  import Icon from "./Icon.svelte";
+  import OutlineButton from "./OutlineButton.svelte";
+  import Popover from "./Popover.svelte";
+
+  interface Props {
+    outline?: boolean;
+    rid: string;
+  }
+
+  const { outline = false, rid }: Props = $props();
+</script>
+
+<Popover popoverPositionRight="0" popoverPositionTop="3rem">
+  {#snippet toggle(onclick)}
+    {#if outline}
+      <OutlineButton styleHeight="2.5rem" variant="ghost" {onclick}>
+        <Icon name="add" />New patch<Icon name="chevron-down" />
+      </OutlineButton>
+    {:else}
+      <Button styleHeight="2.5rem" variant="secondary" {onclick}>
+        <Icon name="add" />New patch<Icon name="chevron-down" />
+      </Button>
+    {/if}
+  {/snippet}
+
+  {#snippet popover()}
+    <div class="txt-small">
+      <Border
+        styleAlignItems="flex-start"
+        styleBackgroundColor="var(--color-background-float)"
+        styleFlexDirection="column"
+        styleGap="2rem"
+        stylePadding="1rem"
+        styleWidth="28rem"
+        variant="ghost">
+        <div>
+          <div class="txt-semibold" style:margin-bottom="0.5rem">
+            Create a new patch
+          </div>
+          <div
+            class="global-flex"
+            style:flex-direction="column"
+            style:align-items="flex-start"
+            style:gap="0.5rem">
+            Create a new branch in your working copy, commit your changes, and
+            run:
+            <Command
+              command="git push rad HEAD:refs/patches"
+              styleWidth="100%" />
+          </div>
+        </div>
+
+        <div style:margin-bottom="1rem">
+          <div class="txt-semibold" style:margin-bottom="0.5rem">
+            Don't have a working copy yet?
+          </div>
+          <div
+            class="global-flex"
+            style:flex-direction="column"
+            style:align-items="flex-start"
+            style:gap="0.5rem">
+            To checkout a working copy of this repo, run:
+            <Command command={`rad checkout ${rid}`} styleWidth="100%" />
+          </div>
+        </div>
+      </Border>
+    </div>
+  {/snippet}
+</Popover>

src/views/repo/Issues.svelte

@@ -126,20 +126,18 @@
             {/snippet}
           </TextInput>
         {/if}
-        <div class="txt-regular txt-semibold">
-          <Button
-            styleHeight="2.5rem"
-            variant="secondary"
-            onclick={() => {
-              void router.push({
-                resource: "repo.createIssue",
-                status,
-                rid: repo.rid,
-              });
-            }}>
-            <Icon name="add" />New
-          </Button>
-        </div>
+        <Button
+          styleHeight="2.5rem"
+          variant="secondary"
+          onclick={() => {
+            void router.push({
+              resource: "repo.createIssue",
+              status,
+              rid: repo.rid,
+            });
+          }}>
+          <Icon name="add" />New
+        </Button>
       </div>
     </div>
 

src/views/repo/Patch.svelte

@@ -33,11 +33,13 @@
   import CopyableId from "@app/components/CopyableId.svelte";
   import DropdownList from "@app/components/DropdownList.svelte";
   import DropdownListItem from "@app/components/DropdownListItem.svelte";
+  import EditableTitle from "@app/components/EditableTitle.svelte";
   import Icon from "@app/components/Icon.svelte";
   import LabelInput from "@app/components/LabelInput.svelte";
   import Layout from "./Layout.svelte";
   import Link from "@app/components/Link.svelte";
   import NakedButton from "@app/components/NakedButton.svelte";
+  import NewPatchButton from "@app/components/NewPatchButton.svelte";
   import OutlineButton from "@app/components/OutlineButton.svelte";
   import PatchStateButton from "@app/components/PatchStateButton.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
@@ -50,7 +52,6 @@
   import Sidebar from "@app/components/Sidebar.svelte";
   import Tab from "@app/components/Tab.svelte";
   import TextInput from "@app/components/TextInput.svelte";
-  import EditableTitle from "@app/components/EditableTitle.svelte";
 
   interface Props {
     repo: RepoInfo;
@@ -389,7 +390,7 @@
           Patches
         </Link>
       </div>
-      <div style:margin-left="auto">
+      <div class="global-flex" style:margin-left="auto">
         <NakedButton
           styleHeight="2.5rem"
           keyShortcuts="ctrl+f"
@@ -405,6 +406,7 @@
           }}>
           <Icon name="filter" />
         </NakedButton>
+        <NewPatchButton rid={repo.rid} outline />
       </div>
     </div>
     {#if showFilters}

src/views/repo/Patches.svelte

@@ -16,6 +16,7 @@
   import CopyableId from "@app/components/CopyableId.svelte";
   import Icon from "@app/components/Icon.svelte";
   import Layout from "./Layout.svelte";
+  import NewPatchButton from "@app/components/NewPatchButton.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
   import PatchesSecondColumn from "@app/components/PatchesSecondColumn.svelte";
   import TextInput from "@app/components/TextInput.svelte";
@@ -112,6 +113,7 @@
     align-items: center;
     min-height: 2.5rem;
     margin-bottom: 1rem;
+    gap: 0.75rem;
   }
 </style>
 
@@ -132,8 +134,8 @@
     <div class="header">
       Patches
 
-      {#if items.length > 0}
-        <div class="global-flex" style:margin-left="auto">
+      <div class="global-flex" style:margin-left="auto">
+        {#if items.length > 0}
           <TextInput
             onFocus={async () => {
               try {
@@ -171,8 +173,9 @@
               </div>
             {/snippet}
           </TextInput>
-        </div>
-      {/if}
+        {/if}
+        <NewPatchButton rid={repo.rid} />
+      </div>
     </div>
 
     <div class="list">