Show "Local Node" breadcrumb on node page only

src/App/Header/Breadcrumbs.svelte

@@ -24,7 +24,7 @@
   <!-- Don't render breadcrumbs for these routes. -->
 {:else if $activeRouteStore.resource === "nodes"}
   <div class="breadcrumbs">
-    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} />
+    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} showLocalNode />
   </div>
 {:else if $activeRouteStore.resource === "project.source" || $activeRouteStore.resource === "project.history" || $activeRouteStore.resource === "project.commit" || $activeRouteStore.resource === "project.issues" || $activeRouteStore.resource === "project.newIssue" || $activeRouteStore.resource === "project.issue" || $activeRouteStore.resource === "project.patches" || $activeRouteStore.resource === "project.patch"}
   <div class="breadcrumbs">

src/App/Header/Breadcrumbs/NodeSegment.svelte

@@ -7,6 +7,7 @@
   import Link from "@app/components/Link.svelte";
 
   export let baseUrl: BaseUrl;
+  export let showLocalNode: boolean = false;
 </script>
 
 <style>
@@ -28,6 +29,9 @@
     }}>
     {#if isLocal(baseUrl.hostname)}
       <IconSmall name="device" />
+      {#if showLocalNode}
+        Local Node
+      {/if}
     {:else}
       <IconSmall name="globe" />
       {baseUrl.hostname}

src/views/nodes/View.svelte

@@ -38,7 +38,7 @@
     }
   }
 
-  $: hostname = isLocal(baseUrl.hostname) ? "radicle.local" : baseUrl.hostname;
+  $: hostname = isLocal(baseUrl.hostname) ? "Local Node" : baseUrl.hostname;
   $: showMoreButton =
     !loadingProjects &&
     !error &&

tests/e2e/node.spec.ts

@@ -21,9 +21,7 @@ test("node metadata", async ({ page, peerManager }) => {
 
   await page.goto(peer.uiUrl());
 
-  await expect(
-    page.locator(".header").getByText("radicle.local"),
-  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Local Node" })).toBeVisible();
   await expect(
     page.getByText(`${shortNodeRemote}@seed.radicle.test:8123`),
   ).toBeVisible();