Tweak sync/authenticate/connect buttons

- simplify positioning
- make sure they expand depending on content, yet have a min width
- add a popover for the connected button state, move httpd info from the
  authenticated button into this popover
- fix external link styling
- make the hover outline color pink

src/App/Header/Authenticate.svelte

@@ -8,7 +8,6 @@
   import ConnectModal from "@app/modals/ConnectModal.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
-  import Link from "@app/components/Link.svelte";
   import NodeId from "@app/components/NodeId.svelte";
   import Popover from "@app/components/Popover.svelte";
 </script>
@@ -17,23 +16,14 @@
   .container {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
-  }
-  .host {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: var(--font-size-small);
+    gap: 0.5rem;
+    min-width: 18rem;
   }
   .status {
     font-size: var(--font-size-tiny);
     color: var(--color-fill-gray);
     text-align: left;
   }
-  .separator {
-    height: 1px;
-    background-color: var(--color-border-hint);
-  }
   .avatar {
     height: 1.5rem;
     color: var(--color-fill-primary) !important;
@@ -53,15 +43,11 @@
     top: -0.375rem;
     right: -0.375rem;
   }
-  .row {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
   .user {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
   }
   .identity {
     color: var(--color-fill-secondary);
@@ -70,10 +56,7 @@
 </style>
 
 {#if $httpdStore.state === "authenticated"}
-  <Popover
-    popoverPositionTop="3rem"
-    popoverPositionRight="-10rem"
-    popoverPositionLeft="0">
+  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
     <Button
       slot="toggle"
       let:toggle
@@ -91,44 +74,20 @@
     </Button>
 
     <div slot="popover" class="container">
-      <div class="row">
-        <div class="status">Httpd server running</div>
-
-        <div class="host">
-          radicle.local
-
-          <Link
-            on:afterNavigate={closeFocused}
-            route={{
-              resource: "nodes",
-              params: {
-                baseUrl: httpd.api.baseUrl,
-                projectPageIndex: 0,
-              },
-            }}>
-            <IconButton>Browse</IconButton>
-          </Link>
-        </div>
-      </div>
-
-      <div class="separator" />
-
-      <div class="row">
-        <div class="status">Authenticated as</div>
-        <div class="user">
-          <div class="identity">
-            <NodeId
-              nodeId={$httpdStore.session.publicKey}
-              alias={$httpdStore.session.alias} />
-          </div>
-          <IconButton
-            on:click={() => {
-              void httpd.disconnect();
-              closeFocused();
-            }}>
-            Disconnect
-          </IconButton>
+      <div class="status">Authenticated as</div>
+      <div class="user">
+        <div class="identity">
+          <NodeId
+            nodeId={$httpdStore.session.publicKey}
+            alias={$httpdStore.session.alias} />
         </div>
+        <IconButton
+          on:click={() => {
+            void httpd.disconnect();
+            closeFocused();
+          }}>
+          Disconnect
+        </IconButton>
       </div>
     </div>
   </Popover>
@@ -141,7 +100,7 @@
       });
     }}
     size="large"
-    variant="outline">
+    variant="primary-outline">
     <IconSmall name="key" />
     Authenticate
     <div class="indicator" />
@@ -155,7 +114,7 @@
       });
     }}
     size="large"
-    variant="outline">
+    variant="primary-outline">
     <IconSmall name="chat" />
     Authenticate
   </Button>

src/App/Header/Connect.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
   import type { HttpdState } from "@app/lib/httpd";
 
+  import * as httpd from "@app/lib/httpd";
+  import { closeFocused } from "@app/components/Popover.svelte";
   import { httpdStore } from "@app/lib/httpd";
 
   import Button from "@app/components/Button.svelte";
-  import IconSmall from "@app/components/IconSmall.svelte";
-  import Popover from "@app/components/Popover.svelte";
   import Command from "@app/components/Command.svelte";
+  import ExternalLink from "@app/components/ExternalLink.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
+  import Link from "@app/components/Link.svelte";
+  import Popover from "@app/components/Popover.svelte";
 
   const buttonTitle: Record<HttpdState["state"], string> = {
     stopped: "radicle-httpd is stopped",
@@ -16,52 +21,87 @@
 </script>
 
 <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 18rem;
+  }
+  .host {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--font-size-small);
+  }
   .label {
     display: block;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-regular);
     margin-bottom: 0.75rem;
   }
+  .status {
+    font-size: var(--font-size-tiny);
+    color: var(--color-fill-gray);
+    text-align: left;
+  }
 </style>
 
 {#if $httpdStore.state === "stopped"}
-  <Popover
-    popoverPositionTop="3rem"
-    popoverPositionRight="0"
-    popoverPositionLeft="-13rem">
+  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
     <Button
       slot="toggle"
       let:toggle
       on:click={toggle}
       title={buttonTitle[$httpdStore.state]}
       size="large"
-      variant="outline">
+      variant="primary-outline">
       <IconSmall name="device" />
       Connect
     </Button>
 
-    <svelte:fragment slot="popover">
-      <div>
-        <div class="label">
-          Use the <a
-            target="_blank"
-            rel="noreferrer"
-            href="https://radicle.xyz/#try"
-            class="txt-link txt-bold">
-            Radicle CLI
-          </a>
-          to connect your device.
-        </div>
-        <div class="label">
-          Run the following command to start the httpd daemon.
-        </div>
-        <Command command="radicle-httpd" fullWidth />
+    <div slot="popover" style:width="23rem">
+      <div class="label">
+        Use the
+        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
+        to connect your device.
       </div>
-    </svelte:fragment>
+      <div class="label">
+        Run the following command to start the httpd daemon.
+      </div>
+      <Command command="radicle-httpd" fullWidth />
+    </div>
   </Popover>
 {:else}
-  <Button title={buttonTitle[$httpdStore.state]} size="large" variant="primary">
-    <IconSmall name="device" />
-    Connected
-  </Button>
+  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
+    <Button
+      slot="toggle"
+      let:toggle
+      on:click={toggle}
+      title={buttonTitle[$httpdStore.state]}
+      size="large"
+      variant="primary">
+      <IconSmall name="device" />
+      Connected
+    </Button>
+
+    <div slot="popover" class="container">
+      <div class="status">Httpd server running</div>
+
+      <div class="host">
+        radicle.local
+
+        <Link
+          on:afterNavigate={closeFocused}
+          route={{
+            resource: "nodes",
+            params: {
+              baseUrl: httpd.api.baseUrl,
+              projectPageIndex: 0,
+            },
+          }}>
+          <IconButton>Browse</IconButton>
+        </Link>
+      </div>
+    </div>
+  </Popover>
 {/if}

src/App/Header/NodeInfo.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import Button from "@app/components/Button.svelte";
-  import Popover from "@app/components/Popover.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 running: boolean = false;
 </script>
@@ -16,16 +17,13 @@
   }
 </style>
 
-<Popover
-  popoverPositionTop="3rem"
-  popoverPositionRight="-13rem"
-  popoverPositionLeft="0">
+<Popover popoverPositionTop="3rem" popoverPositionRight="0">
   <Button
     slot="toggle"
     let:toggle
     on:click={toggle}
     size="large"
-    variant={running ? "primary" : "outline"}>
+    variant={running ? "primary" : "primary-outline"}>
     <IconSmall name="broadcasting" />
     {#if running}
       Syncing
@@ -34,31 +32,21 @@
     {/if}
   </Button>
 
-  <svelte:fragment slot="popover">
+  <div slot="popover" style:width="18rem">
     {#if running}
       <div class="label">
-        Use the <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://radicle.xyz/#try"
-          class="txt-link txt-bold">
-          Radicle CLI
-        </a>
+        Use the
+        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
         to stop your node.
       </div>
       <Command command="rad node stop" fullWidth />
     {:else}
       <div class="label">
-        Use the <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://radicle.xyz/#try"
-          class="txt-link txt-bold">
-          Radicle CLI
-        </a>
+        Use the
+        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
         to start your node.
       </div>
       <Command command="rad node start" fullWidth />
     {/if}
-  </svelte:fragment>
+  </div>
 </Popover>

src/components/Button.svelte

@@ -8,6 +8,7 @@
     | "gray-white"
     | "none"
     | "outline"
+    | "primary-outline"
     | "primary"
     | "secondary"
     | "tab" = "gray";
@@ -137,6 +138,21 @@
     color: var(--color-foreground-contrast);
   }
 
+  .primary-outline {
+    background-color: transparent;
+    color: var(--color-foreground-contrast);
+    border: 1px solid var(--color-border-hint);
+  }
+  .primary-outline[disabled] {
+    background-color: transparent;
+    color: var(--color-fill-gray);
+  }
+  .primary-outline:not([disabled]):hover {
+    background-color: transparent;
+    border: 1px solid var(--color-fill-primary);
+    color: var(--color-foreground-contrast);
+  }
+
   .primary {
     color: var(--color-fill-primary);
     background-color: var(--color-fill-merged);
@@ -207,6 +223,7 @@
   class:gray-white={variant === "gray-white"}
   class:none={variant === "none"}
   class:outline={variant === "outline"}
+  class:primary-outline={variant === "primary-outline"}
   class:primary={variant === "primary"}
   class:secondary={variant === "secondary"}
   class:tab={variant === "tab"}>