Improve share and get link interactions

src/views/projects/Header/ShareButton.svelte

@@ -10,6 +10,7 @@
   import Command from "@app/components/Command.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Loading from "@app/components/Loading.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
 
   export let preferredSeeds: string[];
   export let publicExplorer: string;
@@ -72,6 +73,7 @@
     gap: 0.5rem;
     width: 100%;
     min-width: 0;
+    margin-right: 0.5rem;
   }
 
   .help {
@@ -122,21 +124,33 @@
               {path.replace("/nodes/", "")}
             </span>
           </div>
-          <div style="display: flex; gap: 0.5rem; align-items: center;">
+          <div style="display: flex; align-items: center;">
             {#if state === "found"}
-              <Clipboard
-                text={formatPublicExplorer(
-                  publicExplorer,
-                  seed.node.hostname,
-                  seed.project,
-                  path,
-                )} />
-              <a href={path} target="_blank">
-                <IconSmall name="arrow-box-up-right" />
-              </a>
+              <IconButton>
+                <Clipboard
+                  text={formatPublicExplorer(
+                    publicExplorer,
+                    seed.node.hostname,
+                    seed.project,
+                    path,
+                  )} />
+              </IconButton>
+              <IconButton>
+                <a
+                  href={path}
+                  target="_blank"
+                  style=" width: 1.5rem;
+                height: 1.5rem; display: flex; align-items: center; justify-content: center;">
+                  <IconSmall name="arrow-box-up-right" />
+                </a>
+              </IconButton>
             {:else}
-              <IconSmall name="clipboard" />
-              <IconSmall name="arrow-box-up-right" />
+              <IconButton>
+                <IconSmall name="clipboard" />
+              </IconButton>
+              <IconButton>
+                <IconSmall name="arrow-box-up-right" />
+              </IconButton>
             {/if}
           </div>
         </li>

src/views/projects/Share.svelte

@@ -15,15 +15,18 @@
   export let baseUrl: BaseUrl;
 
   const caption = "Link to seed";
-  let icon: "link" | "checkmark" = "link";
+  let linkIcon: "link" | "checkmark" = "link";
+  let shareIcon: "share" | "checkmark" = "share";
 
   const restoreIcon = debounce(() => {
-    icon = "link";
+    linkIcon = "link";
+    shareIcon = "share";
   }, 800);
 
   async function copy(text: string) {
     await toClipboard(text);
-    icon = "checkmark";
+    linkIcon = "checkmark";
+    shareIcon = "checkmark";
     restoreIcon();
   }
 </script>
@@ -39,7 +42,7 @@
       slot="toggle"
       let:toggle
       on:click={toggle}>
-      <IconSmall name={icon} />
+      <IconSmall name={linkIcon} />
       {caption}
     </Button>
     <ShareButton {publicExplorer} {preferredSeeds} slot="popover" />
@@ -52,7 +55,7 @@
       void copy(
         new URL(publicExplorer).origin.concat(window.location.pathname),
       )}>
-    <IconSmall name={icon} />
-    {caption}
+    <IconSmall name={shareIcon} />
+    {shareIcon === "share" ? "Share" : "Link copied"}
   </Button>
 {/if}