Generate username color based on hash

src/app/components/GroupNote.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import twColors from "tailwindcss/colors"
   import {readable} from "svelte/store"
+  import {hash} from "@welshman/lib"
   import type {CustomEvent} from "@welshman/util"
   import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from "@welshman/util"
   import {fly} from "@lib/transition"
@@ -10,10 +12,34 @@
   export let event: CustomEvent
   export let showPubkey: boolean
 
+  const colors = [
+    ['amber', twColors.amber[600]],
+    ['blue', twColors.blue[600]],
+    ['cyan', twColors.cyan[600]],
+    ['emerald', twColors.emerald[600]],
+    ['fuchsia', twColors.fuchsia[600]],
+    ['green', twColors.green[600]],
+    ['indigo', twColors.indigo[600]],
+    ['lightBlue', twColors.lightBlue[600]],
+    ['lime', twColors.lime[600]],
+    ['orange', twColors.orange[600]],
+    ['pink', twColors.pink[600]],
+    ['purple', twColors.purple[600]],
+    ['red', twColors.red[600]],
+    ['rose', twColors.rose[600]],
+    ['sky', twColors.sky[600]],
+    ['teal', twColors.teal[600]],
+    ['violet', twColors.violet[600]],
+    ['yellow', twColors.yellow[600]],
+    ['zinc', twColors.zinc[600]],
+  ]
+
   const profile = deriveProfile(event.pubkey)
   const {replies} = getAncestorTags(event.tags)
-  const parentEvent =
-    replies.length > 0 ? deriveEvent(replies[0][1], [replies[0][2]]) : readable(null)
+  const parentId = replies[0]?.[1]
+  const parentHints = [replies[0]?.[2]].filter(Boolean)
+  const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
+  const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey)
@@ -41,7 +67,7 @@
     {/if}
     <div class="-mt-1">
       {#if showPubkey}
-        <strong class="text-sm text-primary"
+        <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
           >{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
       {/if}
       <p class="text-sm">{event.content}</p>