Show Connect button only when not connected and authenticated

src/App/Header.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
+  import type { HttpdState } from "@app/lib/httpd";
+
   import { httpdStore } from "@app/lib/httpd";
 
   import Authenticate from "./Header/Authenticate.svelte";
   import Breadcrumbs from "./Header/Breadcrumbs.svelte";
-  import Connect from "@app/App/Header/Connect.svelte";
+  import Button from "@app/components/Button.svelte";
+  import Command from "@app/components/Command.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import NodeInfo from "@app/App/Header/NodeInfo.svelte";
+  import Popover from "@app/components/Popover.svelte";
+
+  const buttonTitle: Record<HttpdState["state"], string> = {
+    stopped: "radicle-httpd is stopped",
+    running: "radicle-httpd is running",
+    authenticated: "radicle-httpd is running - signed in",
+  };
 </script>
 
 <style>
@@ -28,7 +39,26 @@
     height: var(--button-regular-height);
     margin-right: 0.5rem;
   }
-
+  .label {
+    display: block;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    margin-bottom: 0.75rem;
+  }
+  .connect-popover {
+    max-width: 20rem;
+  }
+  .divider {
+    height: 1px;
+    width: 100%;
+    background-color: var(--color-fill-separator);
+    margin: 1rem 0;
+  }
+  .heading {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-bold);
+    margin-bottom: 0.5rem;
+  }
   @media (max-width: 720px) {
     header .right {
       gap: 1rem;
@@ -52,10 +82,40 @@
   </div>
 
   <div class="right layout-desktop-flex">
-    {#if $httpdStore.state !== "stopped"}
+    {#if $httpdStore.state === "stopped"}
+      <Popover popoverPositionTop="3rem" popoverPositionRight="0">
+        <Button
+          slot="toggle"
+          let:toggle
+          on:click={toggle}
+          title={buttonTitle[$httpdStore.state]}
+          size="large"
+          variant="secondary-toggle-off">
+          <IconSmall name="device" />
+          Connect
+        </Button>
+        <div slot="popover" class="connect-popover">
+          <div class="heading">Connect & Authenticate</div>
+          <div class="label">
+            Start the local node to browse projecs on your local machine, create
+            issues, and participate in discussions.
+          </div>
+          <Command fullWidth command={`rad web ${window.origin}`} />
+
+          <div class="divider" />
+          <div class="heading">New to Radicle?</div>
+          <div class="label">
+            Run the following command and follow the instructions to install
+            Radicle and get started.
+          </div>
+          <Command
+            fullWidth
+            command="sh <(curl -sSf https://radicle.xyz/install)" />
+        </div>
+      </Popover>
+    {:else}
       <NodeInfo running={$httpdStore.node === "running"} />
       <Authenticate />
     {/if}
-    <Connect />
   </div>
 </header>

src/App/Header/Authenticate.svelte

@@ -17,7 +17,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    min-width: 18rem;
+    width: 18rem;
   }
   .status {
     font-size: var(--font-size-tiny);
@@ -28,21 +28,21 @@
     display: flex;
     font-family: var(--font-family-monospace);
   }
-  .indicator {
-    width: 0.75rem;
-    height: 0.75rem;
-    background-color: var(--color-fill-secondary);
-    border-radius: var(--border-radius-round);
-    position: absolute;
-    top: -0.375rem;
-    right: -0.375rem;
-  }
   .user {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
   }
+  .connect-popover {
+    max-width: 20rem;
+  }
+  .label {
+    display: block;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    margin-bottom: 0.75rem;
+  }
 </style>
 
 {#if $httpdStore.state === "authenticated"}
@@ -87,13 +87,12 @@
       variant="secondary-toggle-off">
       <IconSmall name="key" />
       Authenticate
-      <div class="indicator" />
     </Button>
     <div slot="popover" class="connect-popover">
-      <div style:margin-bottom="1em">
-        Authenticate with your local backend to make changes
+      <div class="label">
+        Authenticate with your local node to make changes.
       </div>
-      <Command fullWidth command={`rad-web ${window.origin} --connect`} />
+      <Command fullWidth command={`rad web ${window.origin} --connect`} />
     </div>
   </Popover>
 {/if}

src/App/Header/Connect.svelte

@@ -1,98 +0,0 @@
-<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 Command from "@app/components/Command.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",
-    running: "radicle-httpd is running",
-    authenticated: "radicle-httpd is running - signed in",
-  };
-</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);
-  }
-  .status {
-    font-size: var(--font-size-tiny);
-    color: var(--color-fill-gray);
-    text-align: left;
-  }
-  .connect-popover {
-    font-size: var(--font-size-small);
-  }
-</style>
-
-{#if $httpdStore.state === "stopped"}
-  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
-    <Button
-      slot="toggle"
-      let:toggle
-      on:click={toggle}
-      title={buttonTitle[$httpdStore.state]}
-      size="large"
-      variant="secondary-toggle-off">
-      <IconSmall name="device" />
-      Connect
-    </Button>
-    <div slot="popover" class="connect-popover">
-      <div style:margin-bottom="1em">
-        Start the backend to browse projecs on your local machine, create
-        issues, and participate in discussions.
-      </div>
-      <Command fullWidth command={`rad-web ${window.origin}`} />
-    </div>
-  </Popover>
-{:else}
-  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
-    <Button
-      slot="toggle"
-      let:toggle
-      on:click={toggle}
-      title={buttonTitle[$httpdStore.state]}
-      size="large"
-      variant="secondary-toggle-on">
-      <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/views/session/Index.svelte

@@ -8,7 +8,6 @@
   import * as httpd from "@app/lib/httpd";
   import Loading from "@app/components/Loading.svelte";
 
-  import AuthenticatedModal from "@app/modals/AuthenticatedModal.svelte";
   import AuthenticationErrorModal from "@app/modals/AuthenticationErrorModal.svelte";
 
   export let activeRoute: Extract<Route, { resource: "session" }>;
@@ -21,7 +20,7 @@
     const isAuthenticated = await httpd.authenticate(activeRoute.params);
 
     if (isAuthenticated) {
-      modal.show({ component: AuthenticatedModal, props: {} });
+      // TODO: Show toast.
     } else {
       modal.show({
         component: AuthenticationErrorModal,