From 51b0c6951307ddca638a0b95fd976794596ac9e0 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 23 Aug 2024 16:54:05 -0700
Subject: [PATCH] Tweak some layout stuff

---
 src/app.css                             |  8 +++
 src/app/components/GroupCompose.svelte  |  2 +-
 src/app/components/InfoNip29.svelte     |  2 +-
 src/app/components/PrimaryNav.svelte    |  2 +-
 src/app/state.ts                        | 10 +++-
 src/assets/icons/User Circle.svg        |  5 ++
 src/lib/components/Icon.svelte          |  2 +
 src/routes/+layout.svelte               |  2 +-
 src/routes/settings/+layout.svelte      | 11 ++--
 src/routes/settings/about/+page.svelte  |  6 +--
 src/routes/settings/relays/+page.svelte | 68 +++++++++++++++++++++++++
 src/routes/spaces/[nom]/+layout.svelte  |  1 +
 12 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/icons/User Circle.svg
 create mode 100644 src/routes/settings/relays/+page.svelte

diff --git a/src/app.css b/src/app.css
index fdad1336..31127951 100644
--- a/src/app.css
+++ b/src/app.css
@@ -46,6 +46,14 @@
   @apply p-6 bg-base-100 text-base-content rounded-box;
 }
 
+.card2.card2-sm {
+  @apply p-4 bg-base-100 text-base-content rounded-box;
+}
+
+.card2.card2-alt {
+  @apply bg-base-300;
+}
+
 .column {
   @apply flex flex-col;
 }
diff --git a/src/app/components/GroupCompose.svelte b/src/app/components/GroupCompose.svelte
index 4af5ea54..25019e07 100644
--- a/src/app/components/GroupCompose.svelte
+++ b/src/app/components/GroupCompose.svelte
@@ -160,7 +160,7 @@
   })
 </script>
 
-<div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-neutral">
+<div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-base-100">
   <Button on:click={addFile} class="bg-base-300 rounded-box w-10 h-10 center">
     {#if uploading}
       <span class="loading loading-spinner loading-xs"></span>
diff --git a/src/app/components/InfoNip29.svelte b/src/app/components/InfoNip29.svelte
index cdeced05..297f6f8f 100644
--- a/src/app/components/InfoNip29.svelte
+++ b/src/app/components/InfoNip29.svelte
@@ -24,7 +24,7 @@
     as a user.
   </p>
   {#each DEFAULT_RELAYS as url}
-    <div class="alert !flex items-center justify-between">
+    <div class="card2 card2-alt card2-sm flex items-center justify-between">
       <div class="flex items-center gap-2">
         <Icon icon="remote-controller-minimalistic" />
         {displayRelayUrl(url)}
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index f21b4fe6..31e79b32 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -37,7 +37,7 @@
   }
 </script>
 
-<div class="relative w-14 bg-base-100 flex-shrink-0" bind:this={element}>
+<div class="relative w-14 bg-base-100 flex-shrink-0 pt-4" bind:this={element}>
   <div
     class="absolute z-nav-active ml-2 h-[144px] w-12 bg-base-300"
     style={`top: ${$activeOffset}px`} />
diff --git a/src/app/state.ts b/src/app/state.ts
index d300f05b..e28e741f 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -204,7 +204,6 @@ export const load = (request: SubscribeRequest) =>
     const events: TrustedEvent[] = []
 
     sub.emitter.on("event", (url: string, e: SignedEvent) => events.push(e))
-
     sub.emitter.on("complete", () => resolve(events))
   })
 
@@ -339,6 +338,15 @@ export const {
   }),
 })
 
+export const searchRelays = derived(relays, $relays =>
+  createSearch($relays, {
+    getValue: (relay: Relay) => relay.url,
+    fuseOptions: {
+      keys: ["url", "name", {name: "description", weight: 0.3}],
+    },
+  }),
+)
+
 // Handles
 
 export const handles = writable<Handle[]>([])
diff --git a/src/assets/icons/User Circle.svg b/src/assets/icons/User Circle.svg
new file mode 100644
index 00000000..04682888
--- /dev/null
+++ b/src/assets/icons/User Circle.svg	
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="9" r="3" stroke="#1C274C" stroke-width="1.5"/>
+<circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M17.9692 20C17.81 17.1085 16.9247 15 12 15C7.07526 15 6.18996 17.1085 6.03081 20" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index ff1734de..b08981dc 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -56,6 +56,7 @@
   import SquareShareLine from "@assets/icons/Square Share Line.svg?dataurl"
   import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
   import UserHeart from "@assets/icons/User Heart.svg?dataurl"
+  import UserCircle from "@assets/icons/User Circle.svg?dataurl"
   import UserRounded from "@assets/icons/User Rounded.svg?dataurl"
   import Widget from "@assets/icons/Widget.svg?dataurl"
   import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
@@ -114,6 +115,7 @@
     "ufo-3": UFO3,
     "square-share-line": SquareShareLine,
     "user-heart": UserHeart,
+    "user-circle": UserCircle,
     "user-rounded": UserRounded,
     widget: Widget,
     "wifi-router-round": WiFiRouterRound,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d0a16737..804e5109 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -145,7 +145,7 @@
   <div data-theme={$theme} />
 {:then}
   <div data-theme={$theme}>
-    <div class="flex h-screen">
+    <div class="flex h-screen overflow-hidden">
       <PrimaryNav />
       <slot />
     </div>
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index fb149f05..9c58f44e 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -15,15 +15,20 @@
   <SecondaryNavSection>
     <div in:fly|local>
       <SecondaryNavItem href="/settings">
-        <Icon icon="settings" /> Settings
+        <Icon icon="user-circle" /> Profile
       </SecondaryNavItem>
     </div>
-    <div in:fly|local>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem href="/settings/relays">
+        <Icon icon="remote-controller-minimalistic" /> Relays
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 100}}>
       <SecondaryNavItem href="/settings/about">
         <Icon icon="info-square" /> About
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 50}}>
+    <div in:fly|local={{delay: 150}}>
       <SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
         <Icon icon="exit" /> Log Out
       </SecondaryNavItem>
diff --git a/src/routes/settings/about/+page.svelte b/src/routes/settings/about/+page.svelte
index 6d33f2a3..1bbf72be 100644
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -12,18 +12,18 @@
 <div class="hero min-h-screen bg-base-200">
   <div class="hero-content">
     <div class="column content gap-6">
-      <p class="text-center text-3xl">Thanks for using</p>
+      <p class="text-center text-2xl">Thanks for using</p>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
       <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
         <div class="card2 shadow-2xl flex flex-col gap-2 text-center">
-          <h3 class="text-xl sm:h-12">Support development</h3>
+          <h3 class="text-2xl sm:h-12">Support development</h3>
           <p class="sm:h-16">Funds will be used to support development.</p>
           <Button class="btn btn-primary">
             Zap the Developer
           </Button>
         </div>
         <div class="card2 shadow-2xl flex flex-col gap-2 text-center">
-          <h3 class="text-xl sm:h-12">Get in touch</h3>
+          <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know by filing an issue.</p>
           <Link
             external
diff --git a/src/routes/settings/relays/+page.svelte b/src/routes/settings/relays/+page.svelte
new file mode 100644
index 00000000..ecb6ea58
--- /dev/null
+++ b/src/routes/settings/relays/+page.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {readable} from 'svelte/store'
+  import {displayRelayUrl, isShareableRelayUrl} from '@welshman/util'
+  import type {SignedEvent} from '@welshman/util'
+  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import {clip} from "@app/toast"
+  import {DEFAULT_RELAYS, INDEXER_RELAYS} from "@app/base"
+  import {searchRelays, subscribe, loadRelay} from "@app/state"
+
+  const relays = readable(DEFAULT_RELAYS)
+
+  const removeRelay = (url: string) => null
+
+  const addRelay = (url: string) => null
+
+  let term = ""
+
+  onMount(() => {
+    const sub = subscribe({
+      filters: [{kinds: [30166], '#N': ['29']}],
+      relays: [...INDEXER_RELAYS, ...DEFAULT_RELAYS],
+    })
+
+    sub.emitter.on('event', (url: string, event: SignedEvent) => {
+      const d = event.tags.find(t => t[0] === 'd')?.[1] || ""
+
+      if (isShareableRelayUrl(d)) {
+        loadRelay(d)
+      }
+    })
+
+    return () => sub.close()
+  })
+</script>
+
+<div class="content column gap-4">
+  <h1 class="superheading mt-20">Relays</h1>
+  <p class="text-center">Get connected with the nostr network</p>
+  {#each $relays as url}
+    <div class="card2 card2-sm flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon="remote-controller-minimalistic" />
+        {displayRelayUrl(url)}
+      </div>
+      <Button class="flex items-center" on:click={() => removeRelay(url)}>
+        <Icon icon="close-circle" />
+      </Button>
+    </div>
+  {/each}
+  <label class="input input-bordered flex w-full items-center gap-2">
+    <Icon icon="magnifer" />
+    <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
+  </label>
+  {#each $searchRelays.searchValues(term).filter(url => !$relays.includes(url)) as url (url)}
+    <div class="card2 card2-sm flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Icon icon="remote-controller-minimalistic" />
+        {displayRelayUrl(url)}
+      </div>
+      <Button class="flex items-center" on:click={() => addRelay(url)}>
+        <Icon icon="add-circle" />
+      </Button>
+    </div>
+  {/each}
+</div>
diff --git a/src/routes/spaces/[nom]/+layout.svelte b/src/routes/spaces/[nom]/+layout.svelte
index d0582d83..23414608 100644
--- a/src/routes/spaces/[nom]/+layout.svelte
+++ b/src/routes/spaces/[nom]/+layout.svelte
@@ -64,6 +64,7 @@
           </Popover>
         {/if}
       </div>
+      <div class="my-3 h-px bg-base-200" />
       <div in:fly|local>
         <SecondaryNavItem href="/spaces/{nom}">
           <Icon icon="chat-round" /> Chat