AI pass on redesign

src/app/theme.ts

@@ -1,29 +1,40 @@
 import twColors from "tailwindcss/colors"
+import {hash} from "@welshman/lib"
 import {kv} from "@app/storage"
 import {synced} from "@welshman/store"
 
+// Per-identity color palette, biased toward warm, saturated, brand-adjacent
+// hues so each person/space is recognizable at a glance. Deduped (was two
+// `sky` entries) and trimmed of low-distinctness gray (`zinc`). The 600 weight
+// reads clearly on both the warm-paper light base and the warm-charcoal dark
+// base. Each entry is [name, hex].
 export 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]],
-  ["sky", twColors.sky[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]],
+  ["indigo", twColors.indigo[600]],
+  ["fuchsia", twColors.fuchsia[600]],
+  ["pink", twColors.pink[600]],
+  ["rose", twColors.rose[600]],
+  ["red", twColors.red[600]],
+  ["orange", twColors.orange[600]],
+  ["amber", twColors.amber[600]],
   ["yellow", twColors.yellow[600]],
-  ["zinc", twColors.zinc[600]],
+  ["lime", twColors.lime[600]],
+  ["green", twColors.green[600]],
+  ["emerald", twColors.emerald[600]],
+  ["teal", twColors.teal[600]],
+  ["cyan", twColors.cyan[600]],
+  ["sky", twColors.sky[600]],
+  ["blue", twColors.blue[600]],
 ]
 
+// Single source of truth for per-pubkey identity color — reused by username
+// text, avatar gradient fallbacks, and avatar rings. Deterministic per pubkey.
+export const getColor = (pubkey = "") => colors[hash(pubkey) % colors.length][1]
+
+// Which blob variant (1-3) a pubkey gets, so an avatar's organic shape is stable.
+export const getBlobVariant = (pubkey = "") => (hash(pubkey) % 3) + 1
+
 export const theme = synced({
   key: "theme",
   defaultValue: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",