Add "Clone" button to projects

Signed-off-by: Alexis Sellier <self@cloudhead.io>

public/index.css

@@ -12,6 +12,8 @@
 	--color-primary-5: #dd44dd;
 	--color-primary-6: #ffd4ff;
 	--color-primary-faded: #ff55ff77;
+	--color-primary-background: #ff55ff11;
+	--color-primary-background-lighter: #ff55ff22;
 	--color-secondary: #5555ff;
 	--color-secondary-background: #5555ff11;
 	--color-secondary-faded: #5555ff77;
@@ -46,8 +48,8 @@
 	--color-foreground-faded: #777788;
 	--color-foreground-subtle: #444455;
 	--color-foreground-subtler: #333344;
-	--color-foreground-background: #77778811;
-	--color-foreground-background-subtle: #7777880a;
+	--color-foreground-background: #121a21;
+	--color-foreground-background-subtle: #10171e;
 	--color-foreground-1: #242e38;
 	--color-foreground-2: #29343d;
 	--color-foreground-3: #333e47;

src/base/orgs/Org.ts

@@ -156,7 +156,7 @@ export class Org {
       config.abi.org,
       config.provider
     );
-    const unpadded = utils.parseRadicleId(urn);
+    const unpadded = utils.decodeRadicleId(urn);
     const id = ethers.utils.zeroPad(unpadded, 32);
 
     try {

src/base/projects/Browser.svelte

@@ -32,6 +32,8 @@
 
   // When the component is loaded the first time, the blob is yet to be loaded.
   let state: State = { status: Status.Idle };
+  // Whether the clone dropdown is visible.
+  let cloneDropdown = false;
 
   const loadBlob = async (path: string): Promise<proj.Blob> => {
     if (state.status == Status.Loaded && state.path === path) {
@@ -117,6 +119,47 @@
     margin-right: 0;
   }
 
+  .clone {
+    color: var(--color-primary);
+    background-color: var(--color-primary-background);
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    user-select: none;
+  }
+  .clone:hover {
+    background-color: var(--color-primary-background-lighter);
+  }
+  .clone-dropdown {
+    background-color: var(--color-foreground-background);
+    padding: 1rem;
+    margin-top: 0.5rem;
+    border-radius: 0.25rem;
+    display: none;
+    position: absolute;
+  }
+  .clone-dropdown.clone-dropdown-visible {
+    display: block;
+  }
+  .clone-dropdown input {
+    font-size: 0.75rem;
+    color: var(--color-primary);
+    font-family: var(--font-family-monospace);
+    padding: 0.5rem;
+    background: var(--color-primary-background);
+    border: none;
+    outline: none;
+    width: 24rem;
+    text-overflow: ellipsis;
+    border-radius: 0.25rem;
+  }
+  .clone-dropdown label {
+    display: block;
+    color: var(--color-foreground-faded);
+    padding: 0.5rem 0.5rem 0 0.25rem;
+    font-size: 0.75rem;
+  }
+
   .stat {
     font-family: var(--font-family-monospace);
     padding: 0.5rem 0.75rem;
@@ -208,6 +251,15 @@
         <div class="stat" title="Project data is fetched from this seed">
           <span>{config.seed.host}</span>
         </div>
+        <span>
+          <div class="clone" on:click={() => cloneDropdown = !cloneDropdown}>
+            Clone ↓
+          </div>
+          <div class="clone-dropdown" class:clone-dropdown-visible={cloneDropdown}>
+            <input readonly name="clone-url" value="https://{config.seed.host}/{utils.parseRadicleId(urn)}"/>
+            <label for="clone-url">Use Git to clone this repository from the URL above.</label>
+          </div>
+        </span>
       {/if}
     </header>
     <div class="container center-content">

src/utils.ts

@@ -197,8 +197,13 @@ export function formatRadicleId(hash: Uint8Array): string {
 }
 
 // Parse a Radicle Id (URN).
-export function parseRadicleId(urn: string): Uint8Array {
-  const encoded = urn.replace(/^rad:[a-z]+:/, "");
+export function parseRadicleId(urn: string): string {
+  return urn.replace(/^rad:[a-z]+:/, "");
+}
+
+// Decode a Radicle Id (URN).
+export function decodeRadicleId(urn: string): Uint8Array {
+  const encoded = parseRadicleId(urn);
   const multihash = multibase.decode(encoded);
   const hash = multihashes.decode(multihash);