From 756c2abb308acc0983a33c165eaf94e33722d62e Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Tue, 14 Feb 2023 17:21:05 -0600
Subject: [PATCH] Color code relays

---
 README.md                     | 12 +++++++++++-
 src/App.svelte                |  2 +-
 src/partials/Note.svelte      |  8 ++++++--
 src/partials/RelayCard.svelte | 10 ++++++++--
 src/util/misc.ts              | 12 ++++++++++++
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 9527b7e6..1dbbc7d9 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ If you like Coracle and want to support its development, you can donate sats via
 - [ ] Attachments (a tag w/content type and url)
 - [ ] Linkify bech32 entities w/ NIP 21 https://github.com/nostr-protocol/nips/blob/master/21.md
 - [ ] Sign in as user with one click to view things from their pubkey's perspective - do this with multiple accounts
+  - nevent1qqsyyxtrhpsqeqaqgucd6uzpyh8eq2hkfgr0yzr7ku7tgyl5cn9jw5qpz3mhxue69uhhyetvv9ujumn0wd68ytnzvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7l564wx
 
 # Missions
 
@@ -47,6 +48,7 @@ If you like Coracle and want to support its development, you can donate sats via
   - https://github.com/cubefs/cubefs
 - [ ] Support relay auth
 - [ ] Support invoices, tips, zaps https://twitter.com/jb55/status/1604131336247476224
+  - nevent1qqsd0x0xzfwtppu0n52ngw0zhynlwv0sjsr77aflcpufms2wrl3v8mspr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uqs7amnwvaz7tmwdaehgu3wd4hk6d7ewgp
 - [ ] Separate settings for read, write, and broadcast relays based on NIP 65
 - [ ] Release to android
   - https://svelte-native.technology/docs
@@ -77,7 +79,6 @@ If you like Coracle and want to support its development, you can donate sats via
 
 - [ ] Make feeds page customizable. This could potentially use the "lists" NIP
   - nevent1qqspjcqw2hu5gfcpkrjhs0aqvxuzjgtp50l375mcqjfpmk48cg5hevgpr3mhxue69uhkummnw3ez6un9d3shjtnhd3m8xtnnwpskxegpzamhxue69uhkummnw3ezuendwsh8w6t69e3xj7spramhxue69uhkummnw3ez6un9d3shjtnwdahxxefwv93kzer9d4usz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpr9mhxue69uhkummnw3ezuer9d3hjuum0ve68wctjv5n8hwfg
-- [ ] Show notification at top of feeds: "Showing notes from 3 relays". Click to customize.
 - [ ] Click through on relays page to view a feed for only that relay.
 - [ ] Custom views: slider between fast/complete with a warning at either extreme
 - [ ] Deterministically calculate color for relays, show it on notes. User popper?
@@ -85,12 +86,21 @@ If you like Coracle and want to support its development, you can donate sats via
 - [ ] Fix anon/new user experience
 - [ ] Show loading on replies/new notes
 - [ ] Initial user load doesn't have any relays, cache user or wait for people db to be loaded
+- [ ] Shorten height of chat headers
+- [ ] Custom views should combine pubkeys, relays, and topics
+- [ ] Show relay status based on stats not current connection status
+  - Add a dot below the relay's color code on feeds?
 
 # Changelog
 
 ## 0.2.12
 
 - [x] Stream likes and replies in lazily
+- [x] Add relay symbol to notes which is clickable to view relays
+- [x] Switch to publishing events optimistically
+- [x] Reduce how many relays replies are published to
+- [x] Re-work thread layout
+- [x] Color code relays
 
 ## 0.2.11
 
diff --git a/src/App.svelte b/src/App.svelte
index ad6608fd..a7348a38 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -365,7 +365,7 @@
       {:else if $modal.type === 'relay/list'}
         <Content>
           {#each $modal.relays as relay}
-          <RelayCard showControls {relay} />
+          <RelayCard theme="black" showControls {relay} />
           {/each}
         </Content>
       {:else if $modal.type === 'signUp'}
diff --git a/src/partials/Note.svelte b/src/partials/Note.svelte
index 97e2ad22..74b7ad0a 100644
--- a/src/partials/Note.svelte
+++ b/src/partials/Note.svelte
@@ -13,7 +13,7 @@
   import Preview from 'src/partials/Preview.svelte'
   import Anchor from 'src/partials/Anchor.svelte'
   import {toast, settings, modal, renderNote} from "src/app"
-  import {formatTimestamp} from 'src/util/misc'
+  import {formatTimestamp, stringToColor} from 'src/util/misc'
   import Compose from "src/partials/Compose.svelte"
   import Card from "src/partials/Card.svelte"
   import {user, getTopEventRelays, getAllEventRelays} from 'src/agent/helpers'
@@ -267,8 +267,12 @@
               {$flagsCount}
             </div>
           </div>
-          <div class="cursor-pointer text-light" on:click={showActiveRelays}>
+          <div
+            class="cursor-pointer flex gap-1 items-center" on:click={showActiveRelays}>
             <i class="fa fa-server" />
+            <div
+              class="h-1 w-1 rounded-full"
+              style={`background: ${stringToColor(note.seen_on)}`} />
           </div>
         </div>
         {/if}
diff --git a/src/partials/RelayCard.svelte b/src/partials/RelayCard.svelte
index c4b1ae16..16ef525e 100644
--- a/src/partials/RelayCard.svelte
+++ b/src/partials/RelayCard.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+  import cx from 'classnames'
   import {last, find, propEq} from 'ramda'
   import {onMount} from 'svelte'
-  import {poll} from "src/util/misc"
+  import {poll, stringToColor} from "src/util/misc"
   import {switcher} from 'hurdak/lib/hurdak'
   import {fly} from 'svelte/transition'
   import Toggle from "src/partials/Toggle.svelte"
@@ -10,6 +11,7 @@
   import {addRelay, removeRelay, setRelayWriteCondition} from "src/app"
 
   export let relay
+  export let theme = 'dark'
   export let showControls = false
 
   let status = null
@@ -33,7 +35,11 @@
 </script>
 
 <div
-  class="rounded border border-solid border-medium bg-dark shadow flex flex-col justify-between gap-3 py-3 px-6"
+  class={cx(
+    `bg-${theme}`,
+    "rounded border border-l-2 border-solid border-medium shadow flex flex-col justify-between gap-3 py-3 px-6"
+  )}
+  style={`border-left-color: ${stringToColor(relay.url)}`}
   in:fly={{y: 20}}>
   <div class="flex gap-2 items-center justify-between">
     <div class="flex gap-2 items-center text-xl">
diff --git a/src/util/misc.ts b/src/util/misc.ts
index e6efc825..0319fe26 100644
--- a/src/util/misc.ts
+++ b/src/util/misc.ts
@@ -244,3 +244,15 @@ export const where = filters =>
         return pipe(prop(field), modifier(test))
       })
   )
+
+// https://stackoverflow.com/a/21682946
+//
+export const stringToColor = (value, saturation = 100, lightness = 50) => {
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash)
+    hash = hash & hash
+  }
+
+  return `hsl(${(hash % 360)}, ${saturation}%, ${lightness}%)`;
+}