Add bookmarking ability to seed selector

radicle-dev · Aug 7, 2024 · f36caff · f36caff
1 parent 06fa429
commit f36caff
Show file tree

Hide file tree

Showing 15 changed files with 404 additions and 373 deletions.
diff --git a/config/custom-environment-variables.json b/config/custom-environment-variables.json
@@ -10,7 +10,7 @@
   },
   "supportWebsite": "SUPPORT_WEBSITE",
   "fallbackPreferredSeed": {
-    "__name": "FALLBACK_PREFERRED_SEED",
+    "__name": "PREFERRED_SEEDS",
     "__format": "json"
   }
 }
diff --git a/config/default.json b/config/default.json
@@ -9,9 +9,21 @@
     "commitsPerPage": 30
   },
   "supportWebsite": "https://radicle.zulipchat.com",
-  "fallbackPreferredSeed": {
-    "hostname": "seed.radicle.garden",
-    "port": 443,
-    "scheme": "https"
-  }
+  "preferredSeeds": [
+    {
+      "hostname": "ash.radicle.garden",
+      "port": 443,
+      "scheme": "https"
+    },
+    {
+      "hostname": "seed.radicle.xyz",
+      "port": 443,
+      "scheme": "https"
+    },
+    {
+      "hostname": "seed.radicle.garden",
+      "port": 443,
+      "scheme": "https"
+    }
+  ]
 }
diff --git a/config/test.json b/config/test.json
@@ -3,9 +3,11 @@
     "defaultHttpdPort": 8081,
     "defaultHttpdScheme": "http"
   },
-  "fallbackPreferredSeed": {
-    "hostname": "127.0.0.1",
-    "port": 8081,
-    "scheme": "http"
-  }
+  "preferredSeeds": [
+    {
+      "hostname": "127.0.0.1",
+      "port": 8081,
+      "scheme": "http"
+    }
+  ]
 }
diff --git a/module.d.ts b/module.d.ts
@@ -12,7 +12,7 @@ declare module "virtual:*" {
     };
     reactions: string[];
     supportWebsite: string;
-    fallbackPreferredSeed: BaseUrl;
+    preferredSeeds: BaseUrl[];
   };
 
   export default config;

diff --git a/src/components/DropdownList.svelte b/src/components/DropdownList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   export let items: T[];
   export let styleDropdownMinWidth: string | undefined = undefined;
+  export let styleDropdownPadding: string = "0 0 0.25rem 0";
 </script>
 
 <style>
@@ -14,19 +15,21 @@
     padding: 0.25rem 0.25rem 0 0.25rem;
     font-size: var(--font-size-small);
   }
-  .dropdown-item:last-child {
-    padding-bottom: 0.25rem;
-  }
 </style>
 
-<div class="dropdown" style:min-width={styleDropdownMinWidth}>
-  {#each items as item}
-    <div class="dropdown-item">
-      <slot name="item" {item} />
-    </div>
-  {:else}
-    <div class="dropdown-item">
-      <slot name="empty" />
-    </div>
-  {/each}
-</div>
+{#if items.length}
+  <div
+    class="dropdown"
+    style:min-width={styleDropdownMinWidth}
+    style:padding={styleDropdownPadding}>
+    {#each items as item}
+      <div class="dropdown-item">
+        <slot name="item" {item} />
+      </div>
+    {:else}
+      <div class="dropdown-item">
+        <slot name="empty" />
+      </div>
+    {/each}
+  </div>
+{/if}
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
@@ -7,6 +7,8 @@
     | "arrow-box-up-right"
     | "arrow-reply"
     | "badge"
+    | "bookmark-off"
+    | "bookmark-on"
     | "branch"
     | "brush"
     | "chat"
@@ -104,6 +106,14 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M8.70235 1.76514L9.06964 2.13244C9.25591 2.31871 9.50857 2.42335 9.77201 2.42335H11.0548C11.6034 2.42335 12.0481 2.86806 12.0481 3.41663V4.69945C12.0481 4.9629 12.1528 5.21555 12.3391 5.40182L12.8168 5.87958C13.2047 6.26748 13.2047 6.89641 12.8168 7.28428L12.3391 7.76207C12.1528 7.94834 12.0481 8.20099 12.0481 8.46441V9.43104C12.0481 9.78994 11.8577 10.1044 11.5725 10.2789L12.6676 12.9387C12.7421 13.1197 12.7034 13.3277 12.5686 13.4697C12.4338 13.6117 12.2281 13.6612 12.0435 13.5962L10.7832 13.1526L10.082 14.2898C9.98071 14.454 9.79344 14.5447 9.60178 14.5224C9.41011 14.5001 9.24873 14.3687 9.18792 14.1856L8.33941 11.6302C8.12056 11.7095 7.87942 11.7095 7.66057 11.6301L6.81206 14.1856C6.75125 14.3687 6.58987 14.5001 6.3982 14.5224C6.20654 14.5447 6.01927 14.454 5.91799 14.2898L5.21675 13.1526L3.95651 13.5962C3.77184 13.6612 3.5662 13.6117 3.4314 13.4697C3.2966 13.3277 3.25783 13.1197 3.33237 12.9387L4.44826 10.2286C4.20486 10.0475 4.04717 9.75769 4.04717 9.43104V8.55968C4.04717 8.29627 3.9425 8.04361 3.75623 7.85734L3.1832 7.28428C2.7953 6.89641 2.7953 6.26748 3.1832 5.87958L3.75623 5.30655C3.9425 5.12028 4.04717 4.86762 4.04717 4.60418V3.41663C4.04717 2.86806 4.49185 2.42335 5.04045 2.42335H6.228C6.49142 2.42335 6.74407 2.31871 6.93034 2.13244L7.29764 1.76514C7.68554 1.37724 8.31447 1.37724 8.70235 1.76514ZM8.00001 2.46748L8.3673 2.83478C8.73984 3.20732 9.24515 3.41663 9.77201 3.41663H11.0548V4.69945C11.0548 5.22634 11.2641 5.73162 11.6367 6.10416L12.1145 6.58194L11.6367 7.0597C11.2641 7.43227 11.0548 7.93755 11.0548 8.46441V9.43104H10.0882C9.56134 9.43104 9.05606 9.64032 8.68352 10.0129L8.00001 10.6964L7.31649 10.0129C6.94392 9.64032 6.43864 9.43104 5.91178 9.43104H5.04045V8.55968C5.04045 8.03282 4.83114 7.52754 4.4586 7.15497L3.88554 6.58194L4.4586 6.00889C4.83114 5.63635 5.04045 5.13107 5.04045 4.60418V3.41663H6.228C6.75486 3.41663 7.26014 3.20732 7.63271 2.83478L8.00001 2.46748ZM5.44185 10.4243L4.6733 12.2909L5.26446 12.0827C5.48483 12.0052 5.72948 12.0917 5.8521 12.2905L6.20478 12.8625L6.84207 10.9432L6.61412 10.7152C6.42785 10.529 6.17523 10.4243 5.91178 10.4243H5.44185ZM9.15791 10.9432L9.7952 12.8625L10.1479 12.2905C10.2705 12.0917 10.5152 12.0052 10.7355 12.0827L11.3267 12.2909L10.5581 10.4243H10.0882C9.82479 10.4243 9.57213 10.529 9.38586 10.7152L9.15791 10.9432Z" />
+  {:else if name === "bookmark-on"}
+    <path
+      d="M4 2C3.44772 2 3 2.44772 3 3V13C3 13.4247 3.26825 13.8031 3.66899 13.9436C4.06974 14.0842 4.51557 13.9563 4.78087 13.6247L8 9.60078L11.2191 13.6247C11.4844 13.9563 11.9303 14.0842 12.331 13.9436C12.7318 13.8031 13 13.4247 13 13V3C13 2.44772 12.5523 2 12 2H4Z" />
+  {:else if name === "bookmark-off"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3 3C3 2.44772 3.44772 2 4 2H12C12.5523 2 13 2.44772 13 3V13C13 13.4247 12.7318 13.8031 12.331 13.9436C11.9303 14.0842 11.4844 13.9563 11.2191 13.6247L8 9.60078L4.78087 13.6247C4.51557 13.9563 4.06974 14.0842 3.66899 13.9436C3.26825 13.8031 3 13.4247 3 13V3ZM4 3H12V13L8.78087 8.97609C8.38054 8.47568 7.61946 8.47568 7.21913 8.97609L4 13V3Z" />
   {:else if name === "branch"}
     <path
       fill-rule="evenodd"

diff --git a/src/components/IconButton.svelte b/src/components/IconButton.svelte
@@ -1,11 +1,17 @@
-<script lang="ts">
+<script lang="ts" strictEvent>
+  import { createEventDispatcher } from "svelte";
+
   import Loading from "./Loading.svelte";
 
   export let ariaLabel: string | undefined = undefined;
   export let inline: boolean = false;
   export let loading: boolean = false;
   export let title: string | undefined = undefined;
   export let stylePadding: string | undefined = undefined;
+  export let disabled: boolean = false;
+  export let stopPropagation: boolean = false;
+
+  const dispatch = createEventDispatcher<{ click: MouseEvent }>();
 </script>
 
 <style>
@@ -29,21 +35,35 @@
     color: var(--color-foreground-contrast);
     background-color: var(--color-fill-ghost);
   }
+  .disabled,
+  .disabled:hover {
+    color: var(--color-fill-counter);
+    background-color: unset;
+  }
 </style>
 
 {#if loading}
   <Loading small noDelay />
 {:else}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    style:padding={stylePadding}
-    role="button"
-    tabindex="0"
+    class:disabled
     aria-label={ariaLabel}
-    {title}
-    class="button"
     class:inline
-    on:click>
+    class="button"
+    on:click={ev => {
+      if (stopPropagation) {
+        ev.stopPropagation();
+      }
+      if (disabled) {
+        return;
+      }
+      dispatch("click", ev);
+    }}
+    role="button"
+    style:padding={stylePadding}
+    tabindex="0"
+    {title}>
     <slot />
   </div>
 {/if}
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
@@ -12,6 +12,7 @@
   export let value: string | undefined = undefined;
 
   export let autofocus: boolean = false;
+  export let autoselect: boolean = false;
   export let disabled: boolean = false;
   export let loading: boolean = false;
   export let valid: boolean = true;
@@ -29,10 +30,16 @@
   let success = false;
 
   onMount(() => {
-    if (autofocus && inputElement) {
+    if (inputElement === undefined) {
+      return;
+    }
+    if (autofocus) {
       // We set preventScroll to true for Svelte animations to work.
       inputElement.focus({ preventScroll: true });
     }
+    if (autoselect) {
+      inputElement.select();
+    }
   });
 
   const restoreIcon = debounce(() => {
@@ -69,7 +76,7 @@
     position: relative;
     flex: 1;
     align-items: center;
-    height: var(--button-small-height);
+    height: var(--button-regular-height);
     background: var(--color-background-dip);
   }
   input {
@@ -146,6 +153,7 @@
     {disabled}
     bind:value
     autocomplete="off"
+    spellcheck="false"
     on:input
     on:focus={handleFocusEvent}
     on:blur={handleFocusEvent}

diff --git a/src/lib/seeds.ts b/src/lib/seeds.ts