From 2b491a1d09683bad5894190e0ffbba4b01ea9741 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: Sat, 6 Jul 2024 19:50:53 +0200
Subject: [PATCH] Reinstate Seed button

---
 src/views/projects/Header/SeedButton.svelte   | 65 +++++++++++++++++++
 src/views/projects/Sidebar.svelte             |  2 -
 src/views/projects/Sidebar/ContextRepo.svelte |  7 --
 .../projects/Source/ProjectNameHeader.svelte  |  2 +
 4 files changed, 67 insertions(+), 9 deletions(-)
 create mode 100644 src/views/projects/Header/SeedButton.svelte

diff --git a/src/views/projects/Header/SeedButton.svelte b/src/views/projects/Header/SeedButton.svelte
new file mode 100644
index 000000000..ffb89293b
--- /dev/null
+++ b/src/views/projects/Header/SeedButton.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import Button from "@app/components/Button.svelte";
+  import Command from "@app/components/Command.svelte";
+  import ExternalLink from "@app/components/ExternalLink.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Popover from "@app/components/Popover.svelte";
+
+  export let projectId: string;
+  export let seedCount: number;
+</script>
+
+<style>
+  .seed-label {
+    display: block;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    margin-bottom: 0.75rem;
+  }
+  .title-counter {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .counter {
+    font-weight: var(--font-weight-regular);
+    border-radius: var(--border-radius-tiny);
+    background-color: var(--color-fill-ghost-hover);
+    border: 1px solid var(--color-border-secondary-counter);
+    color: var(--color-foreground-contrast);
+    padding: 0 0.25rem;
+  }
+  .not-seeding {
+    background-color: var(--color-fill-secondary-counter);
+    color: var(--color-foreground-match-background);
+  }
+</style>
+
+<Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
+  <Button
+    slot="toggle"
+    disabled={false}
+    let:toggle
+    on:click={() => {
+      toggle();
+    }}
+    variant="secondary-toggle-off">
+    <IconSmall name="seedling" />
+    <span class="title-counter">
+      Seed
+      <span
+        class="counter not-seeding"
+        style:font-weight="var(--font-weight-regular)">
+        {seedCount}
+      </span>
+    </span>
+  </Button>
+
+  <div slot="popover" style:width="auto">
+    <span class="seed-label">
+      Use the <ExternalLink href="https://radicle.xyz">
+        Radicle CLI
+      </ExternalLink> to start seeding this repository.
+    </span>
+    <Command command={`rad seed ${projectId}`} />
+  </div>
+</Popover>
diff --git a/src/views/projects/Sidebar.svelte b/src/views/projects/Sidebar.svelte
index e01ff68fc..84db91b8c 100644
--- a/src/views/projects/Sidebar.svelte
+++ b/src/views/projects/Sidebar.svelte
@@ -239,7 +239,6 @@
   <div class="bottom">
     <div class="repo box" class:expanded>
       <ContextRepo
-        projectSeeds={project.seeding}
         projectThreshold={project.threshold}
         projectDelegates={project.delegates}
         {seedingPolicy} />
@@ -286,7 +285,6 @@
 
         <div slot="popover" class="txt-small" style:width="18rem">
           <ContextRepo
-            projectSeeds={project.seeding}
             projectThreshold={project.threshold}
             projectDelegates={project.delegates}
             {seedingPolicy} />
diff --git a/src/views/projects/Sidebar/ContextRepo.svelte b/src/views/projects/Sidebar/ContextRepo.svelte
index f5529beee..3c3af883e 100644
--- a/src/views/projects/Sidebar/ContextRepo.svelte
+++ b/src/views/projects/Sidebar/ContextRepo.svelte
@@ -9,7 +9,6 @@
 
   export let projectThreshold: number;
   export let projectDelegates: Project["delegates"];
-  export let projectSeeds: number;
   export let seedingPolicy: SeedingPolicy;
 
   let delegateExpanded = false;
@@ -35,12 +34,6 @@
   }
 </style>
 
-<div class="item-header" style:height="2rem">
-  <span>Seeds</span>
-  <div class="global-flex-item txt-bold" style:padding-right="2.25rem">
-    {projectSeeds}
-  </div>
-</div>
 <div class="item-header">
   <span>Delegates</span>
   <div class="global-flex-item">
diff --git a/src/views/projects/Source/ProjectNameHeader.svelte b/src/views/projects/Source/ProjectNameHeader.svelte
index 1d99d6b2f..48f89dc88 100644
--- a/src/views/projects/Source/ProjectNameHeader.svelte
+++ b/src/views/projects/Source/ProjectNameHeader.svelte
@@ -10,6 +10,7 @@
   import IconSmall from "@app/components/IconSmall.svelte";
   import Id from "@app/components/Id.svelte";
   import Link from "@app/components/Link.svelte";
+  import SeedButton from "@app/views/projects/Header/SeedButton.svelte";
   import Share from "@app/views/projects/Share.svelte";
 
   export let project: Project;
@@ -87,6 +88,7 @@
         style:gap="0.5rem"
         class="global-hide-on-mobile-down">
         <CloneButton {baseUrl} id={project.id} name={project.name} />
+        <SeedButton seedCount={project.seeding} projectId={project.id} />
       </div>
     </div>
   </div>