From f8252e68b21a82bbe2338cbc06dddeb3b03c7ca8 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Thu, 15 Jun 2023 15:11:33 -0700
Subject: [PATCH] Prioritize reviews on relay list

---
 src/app/ModalRoutes.svelte        |  6 ++--
 src/app/shared/Feed.svelte        | 11 ++++---
 src/app/shared/NoteReply.svelte   | 16 +++++-----
 src/app/shared/PersonLikes.svelte |  8 ++++-
 src/app/shared/PersonNotes.svelte |  2 +-
 src/app/shared/RelayCard.svelte   |  2 +-
 src/app/shared/RelaySearch.svelte | 30 +++++++++---------
 src/app/views/RelayAdd.svelte     | 51 -------------------------------
 src/app/views/RelayBrowse.svelte  | 41 +++++++++++++++++++++++++
 src/app/views/RelayDetail.svelte  |  3 +-
 src/app/views/RelayList.svelte    |  4 +--
 11 files changed, 88 insertions(+), 86 deletions(-)
 delete mode 100644 src/app/views/RelayAdd.svelte
 create mode 100644 src/app/views/RelayBrowse.svelte

diff --git a/src/app/ModalRoutes.svelte b/src/app/ModalRoutes.svelte
index f1bb2da4..717af7ac 100644
--- a/src/app/ModalRoutes.svelte
+++ b/src/app/ModalRoutes.svelte
@@ -19,7 +19,7 @@
   import ListList from "src/app/views/ListList.svelte"
   import ListSelect from "src/app/views/ListSelect.svelte"
   import ListEdit from "src/app/views/ListEdit.svelte"
-  import RelayAdd from "src/app/views/RelayAdd.svelte"
+  import RelayBrowse from "src/app/views/RelayBrowse.svelte"
   import RelayDetail from "src/app/views/RelayDetail.svelte"
   import RelayReview from "src/app/views/RelayReview.svelte"
 
@@ -38,8 +38,8 @@
   <NoteZap note={m.note} />
 {:else if m.type === "note/share"}
   <NoteShare note={m.note} />
-{:else if m.type === "relay/add"}
-  <RelayAdd url={m.url} />
+{:else if m.type === "relay/browse"}
+  <RelayBrowse />
 {:else if m.type === "relay/detail"}
   <RelayDetail url={m.url} />
 {:else if m.type === "relay/review"}
diff --git a/src/app/shared/Feed.svelte b/src/app/shared/Feed.svelte
index e22c626d..617adf13 100644
--- a/src/app/shared/Feed.svelte
+++ b/src/app/shared/Feed.svelte
@@ -25,6 +25,7 @@
   export let shouldDisplay = always(true)
   export let parentsTimeout = 500
   export let invertColors = false
+  export let hideControls = false
   export let onEvent = null
 
   let sub, scroller, cursor
@@ -191,10 +192,12 @@
     </div>
   {/if}
 
-  <div class="flex justify-between gap-4" in:fly={{y: 20}}>
-    <FilterSummary {filter} />
-    <FeedAdvanced {filter} onChange={start} />
-  </div>
+  {#if !hideControls}
+    <div class="flex justify-between gap-4" in:fly={{y: 20}}>
+      <FilterSummary {filter} />
+      <FeedAdvanced {filter} onChange={start} />
+    </div>
+  {/if}
 
   <div class="flex flex-col gap-4">
     {#each filteredNotes as note (note.id)}
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index 34929815..4a36e6fc 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -98,15 +98,15 @@
     bind:this={container}
     on:click|stopPropagation>
     <div class={`border border-${borderColor} overflow-hidden rounded-2xl border-solid`}>
-      <div class="bg-gray-7 p-3" class:rounded-b={data.mentions.length === 0}>
+      <div class="bg-gray-7 p-3 text-gray-2" class:rounded-b={data.mentions.length === 0}>
         <Compose bind:this={reply} onSubmit={send} style="min-height: 4rem">
-          <button
-            slot="addon"
-            on:click={send}
-            class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid
-                 border-gray-7 p-4 py-8 text-gray-2 transition-all hover:bg-accent">
-            <i class="fa fa-paper-plane fa-xl" />
-          </button>
+          <div class="flex flex-col justify-start" slot="addon">
+            <button
+              on:click={send}
+              class="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-accent">
+              <i class="fa fa-paper-plane" />
+            </button>
+          </div>
         </Compose>
       </div>
       {#if data.image}
diff --git a/src/app/shared/PersonLikes.svelte b/src/app/shared/PersonLikes.svelte
index fd67cda4..af61dddf 100644
--- a/src/app/shared/PersonLikes.svelte
+++ b/src/app/shared/PersonLikes.svelte
@@ -10,4 +10,10 @@
   const shouldDisplay = e => isLike(e.content)
 </script>
 
-<Feed {relays} {filter} {shouldDisplay} parentsTimeout={10_000} delta={timedelta(1, "days")} />
+<Feed
+  hideControls
+  {relays}
+  {filter}
+  {shouldDisplay}
+  parentsTimeout={10_000}
+  delta={timedelta(3, "days")} />
diff --git a/src/app/shared/PersonNotes.svelte b/src/app/shared/PersonNotes.svelte
index 87442dba..36ed973f 100644
--- a/src/app/shared/PersonNotes.svelte
+++ b/src/app/shared/PersonNotes.svelte
@@ -9,4 +9,4 @@
   const filter = {kinds: [1, 1985], authors: [pubkey]}
 </script>
 
-<Feed {relays} {filter} {invertColors} parentsTimeout={3000} delta={timedelta(1, "days")} />
+<Feed {relays} {filter} {invertColors} parentsTimeout={3000} delta={timedelta(3, "days")} />
diff --git a/src/app/shared/RelayCard.svelte b/src/app/shared/RelayCard.svelte
index dc560c4c..80b29949 100644
--- a/src/app/shared/RelayCard.svelte
+++ b/src/app/shared/RelayCard.svelte
@@ -56,7 +56,7 @@
 <div
   class={cx(
     `bg-${theme}`,
-    "flex flex-col justify-between gap-3 rounded border border-l-2 border-solid border-gray-6 py-3 px-6 shadow"
+    "flex flex-col justify-between gap-3 rounded-xl border border-l-2 border-solid border-gray-6 py-3 px-6 shadow"
   )}
   style={`border-left-color: ${hsl(stringToHue(relay.url))}`}
   in:fly={{y: 20}}>
diff --git a/src/app/shared/RelaySearch.svelte b/src/app/shared/RelaySearch.svelte
index 35f25a88..a4e253a8 100644
--- a/src/app/shared/RelaySearch.svelte
+++ b/src/app/shared/RelaySearch.svelte
@@ -48,22 +48,24 @@
   })
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-4">
   <Input bind:value={q} type="text" wrapperClass="flex-grow" {placeholder}>
     <i slot="before" class="fa-solid fa-search" />
   </Input>
-  {#if q.match("^.+\\..+$")}
-    <RelayCard relay={{url: normalizeRelayUrl(q)}} />
-  {/if}
-  {#each !q && hideIfEmpty ? [] : search(q).slice(0, limit) as relay (relay.url)}
-    <slot name="item" {relay}>
-      <RelayCard rating={ratings[relay.url]} {relay} />
+  <div class="flex flex-col gap-2">
+    {#if q.match("^.+\\..+$")}
+      <RelayCard relay={{url: normalizeRelayUrl(q)}} />
+    {/if}
+    {#each !q && hideIfEmpty ? [] : search(q).slice(0, limit) as relay (relay.url)}
+      <slot name="item" {relay}>
+        <RelayCard rating={ratings[relay.url]} {relay} />
+      </slot>
+    {/each}
+    <slot name="footer">
+      <small class="text-center">
+        Showing {Math.min(($knownRelays || []).length - $relays.length, 50)}
+        of {($knownRelays || []).length - $relays.length} known relays
+      </small>
     </slot>
-  {/each}
-  <slot name="footer">
-    <small class="text-center">
-      Showing {Math.min(($knownRelays || []).length - $relays.length, 50)}
-      of {($knownRelays || []).length - $relays.length} known relays
-    </small>
-  </slot>
+  </div>
 </div>
diff --git a/src/app/views/RelayAdd.svelte b/src/app/views/RelayAdd.svelte
deleted file mode 100644
index 25d02e44..00000000
--- a/src/app/views/RelayAdd.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-  import {fly} from "svelte/transition"
-  import {toast, modal, appName} from "src/partials/state"
-  import Content from "src/partials/Content.svelte"
-  import Heading from "src/partials/Heading.svelte"
-  import RelaySearch from "src/app/shared/RelaySearch.svelte"
-  import user from "src/agent/user"
-  import {loadAppData} from "src/app/state"
-
-  export let url
-
-  const submit = async e => {
-    e.preventDefault()
-    url = url.trim()
-
-    if (!url.includes("://")) {
-      url = "wss://" + url
-    }
-
-    try {
-      new URL(url)
-    } catch (e) {
-      return toast.show("error", "That isn't a valid url")
-    }
-
-    if (!url.match("^wss?://")) {
-      return toast.show("error", "That isn't a valid websocket url")
-    }
-
-    modal.pop()
-
-    await user.addRelay(url)
-
-    if (!user.getProfile()?.kind0) {
-      loadAppData(user.getPubkey())
-    }
-  }
-</script>
-
-<form on:submit={submit} in:fly={{y: 20}}>
-  <Content>
-    <div class="mb-4 flex flex-col items-center justify-center">
-      <Heading>Add a relay</Heading>
-      <p>
-        {appName} automatically discovers relays as you browse the network. Adding more relays will generally
-        make things quicker to load, at the expense of higher data usage.
-      </p>
-    </div>
-    <RelaySearch />
-  </Content>
-</form>
diff --git a/src/app/views/RelayBrowse.svelte b/src/app/views/RelayBrowse.svelte
new file mode 100644
index 00000000..e30c78c5
--- /dev/null
+++ b/src/app/views/RelayBrowse.svelte
@@ -0,0 +1,41 @@
+<script>
+  import {timedelta} from "src/util/misc"
+  import {appName} from "src/partials/state"
+  import Tabs from "src/partials/Tabs.svelte"
+  import Content from "src/partials/Content.svelte"
+  import Heading from "src/partials/Heading.svelte"
+  import Feed from "src/app/shared/Feed.svelte"
+  import RelaySearch from "src/app/shared/RelaySearch.svelte"
+
+  let activeTab = "reviews"
+
+  const tabs = ["reviews", "search"]
+
+  const setActiveTab = tab => {
+    activeTab = tab
+  }
+</script>
+
+<Content>
+  <div class="flex flex-col items-center justify-center">
+    <Heading>Browse Relays</Heading>
+    <p>
+      {appName} automatically discovers relays as you browse the network. Adding more relays will generally
+      make things quicker to load, at the expense of higher data usage.
+    </p>
+  </div>
+  <Tabs {tabs} {activeTab} {setActiveTab} />
+  {#if activeTab === "reviews"}
+    <Feed
+      hideControls
+      invertColors
+      delta={timedelta(30, "days")}
+      filter={{
+        kinds: [1985],
+        "#l": ["review/relay"],
+        "#L": ["social.coracle.ontology"],
+      }} />
+  {:else}
+    <RelaySearch />
+  {/if}
+</Content>
diff --git a/src/app/views/RelayDetail.svelte b/src/app/views/RelayDetail.svelte
index 74e6b4de..abb70a47 100644
--- a/src/app/views/RelayDetail.svelte
+++ b/src/app/views/RelayDetail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {batch} from "src/util/misc"
+  import {batch, timedelta} from "src/util/misc"
   import {displayRelay, normalizeRelayUrl, getAvgQuality} from "src/util/nostr"
   import Content from "src/partials/Content.svelte"
   import Feed from "src/app/shared/Feed.svelte"
@@ -49,6 +49,7 @@
     <Feed
       invertColors
       onEvent={onReview}
+      delta={timedelta(365, "days")}
       filter={{
         kinds: [1985],
         "#l": ["review/relay"],
diff --git a/src/app/views/RelayList.svelte b/src/app/views/RelayList.svelte
index 1223af4d..6d0c4ba2 100644
--- a/src/app/views/RelayList.svelte
+++ b/src/app/views/RelayList.svelte
@@ -18,8 +18,8 @@
         <i class="fa fa-server fa-lg" />
         <h2 class="staatliches text-2xl">Your relays</h2>
       </div>
-      <Anchor type="button-accent" on:click={() => modal.push({type: "relay/add"})}>
-        <i class="fa-solid fa-plus" /> Add Relay
+      <Anchor type="button-accent" on:click={() => modal.push({type: "relay/browse"})}>
+        <i class="fa-solid fa-compass" /> Browse Relays
       </Anchor>
     </div>
     <p>