Support for radicle.local seeds

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

src/App.svelte

@@ -108,7 +108,7 @@
         </span>
 
         <span slot="body">
-          {err}
+          {err.message ? err.message : JSON.stringify(err)}
         </span>
       </Modal>
     </div>

src/SeedAddress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { formatSeedAddress, formatSeedId } from "@app/utils";
+  import { formatSeedAddress, formatSeedId, formatSeedHost } from "@app/utils";
   import type { Seed } from "@app/base/seeds/Seed";
   import Clipboard from "@app/Clipboard.svelte";
 
@@ -29,10 +29,10 @@
   <div class="seed-address">
     <span class="seed-icon">{seed.emoji}</span>
     {#if full}
-      <span><a href="/seeds/{seed.host}" class="link">{formatSeedId(seed.id)}@{seed.host}</a></span>
+      <span><a href="/seeds/{formatSeedHost(seed.host)}" class="link">{formatSeedId(seed.id)}@{seed.host}</a></span>
       <span class="faded">:{port}</span>
     {:else}
-      <span><a href="/seeds/{seed.host}" class="link">{seed.host}</a></span>
+      <span><a href="/seeds/{formatSeedHost(seed.host)}" class="link">{formatSeedHost(seed.host)}</a></span>
     {/if}
   </div>
   <Clipboard small text={full ? formatSeedAddress(seed.id, seed.host, port) : seed.host} />

src/base/seeds/Routes.svelte

@@ -8,6 +8,10 @@
   export let session: Session | null;
 </script>
 
+<Route path="/seeds/radicle.local" let:params>
+  <View {config} {session} host={"0.0.0.0"}/>
+</Route>
+
 <Route path="/seeds/:seed" let:params>
   <View {config} {session} host={params.seed}/>
 </Route>

src/base/seeds/Seed.ts

@@ -1,7 +1,7 @@
 import { Request, type Host } from '@app/api';
 import type { Config } from '@app/config';
 import * as proj from "@app/project";
-import { isDomain } from '@app/utils';
+import { isDomain, isLocal } from '@app/utils';
 import { assert } from '@app/error';
 
 export class InvalidSeed {
@@ -66,6 +66,8 @@ export class Seed {
     const meta = cfg.seeds.pinned[seed.host];
     if (meta) {
       this.emoji = meta.emoji;
+    } else if (isLocal(seed.host)) {
+      this.emoji = "🏠";
     } else {
       this.emoji = "🌱";
     }

src/base/seeds/View.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Config } from "@app/config";
-  import { formatSeedId } from "@app/utils";
+  import { formatSeedId, formatSeedHost } from "@app/utils";
   import { Seed } from "@app/base/seeds/Seed";
   import Loading from "@app/Loading.svelte";
   import SeedAddress from "@app/SeedAddress.svelte";
@@ -16,6 +16,7 @@
   export let session: Session | null;
   export let host: string;
 
+  const hostName = formatSeedHost(host);
   let siweSession: SeedSession | null = null;
 
   $: if (session?.siwe) {
@@ -92,7 +93,7 @@
 </style>
 
 <svelte:head>
-  <title>{host}</title>
+  <title>{hostName}</title>
 </svelte:head>
 
 {#await Seed.lookup(host, config)}
@@ -104,7 +105,7 @@
     <header>
       <span class="title">
         <span class="bold">
-          {host} <span class="desktop inline">{seed.emoji}</span>
+          {hostName} <span class="desktop inline">{seed.emoji}</span>
         </span>
       </span>
       <!-- User Session -->

src/utils.ts

@@ -87,6 +87,14 @@ export function formatSeedAddress(id: string, host: string, port: number): strin
   return `${id}@${host}:${port}`;
 }
 
+export function formatSeedHost(host: string): string {
+  if (isLocal(host)) {
+    return "radicle.local";
+  } else {
+    return host;
+  }
+}
+
 export function formatLocationHash(hash: string | null): number | null {
   if (hash && hash.match(/^#L[0-9]+$/)) return parseInt(hash.slice(2));
   return null;
@@ -489,6 +497,10 @@ export function isDomain(input: string): boolean {
     || (! import.meta.env.PROD && /^0.0.0.0$/.test(input));
 }
 
+// Check whether the given address is a local host address.
+export function isLocal(addr: string): boolean {
+  return addr === "127.0.0.1" || addr === "0.0.0.0";
+}
 
 // Get the gravatar URL of an email.
 export function gravatarURL(email: string): string {