feat: theme color

src/element/video-tile.tsx

@@ -41,7 +41,7 @@ export function VideoTile({
         <span className="pill-box">
           {showStatus && <StatePill state={status as StreamState} />}
           {viewers && (
-            <span className="pill viewers">
+            <span className="pill viewers bg-gray-1">
               <FormattedMessage defaultMessage="{n} viewers" id="3adEeb" values={{ n: formatSats(Number(viewers)) }} />
             </span>
           )}

src/lang.json

@@ -206,6 +206,9 @@
   "Oxqtyf": {
     "defaultMessage": "We hooked you up with a lightning wallet so you can get paid by viewers right away!"
   },
+  "Pe0ogR": {
+    "defaultMessage": "Theme"
+  },
   "Q3au2v": {
     "defaultMessage": "About {estimate}"
   },

src/login.ts

@@ -23,6 +23,7 @@ export interface LoginSession {
   muted: ReplaceableTags;
   cards: ReplaceableTags;
   emojis: Array<EmojiPack>;
+  color?: string;
 }
 
 const initialState = {
@@ -114,6 +115,12 @@ export class LoginStore extends ExternalStore<LoginSession | undefined> {
     this.#save();
   }
 
+  setColor(color: string) {
+    if (!this.#session) return;
+    this.#session.color = color;
+    this.#save();
+  }
+
   #save() {
     if (this.#session) {
       window.localStorage.setItem(SESSION_KEY, JSON.stringify(this.#session));

src/pages/layout.tsx

@@ -1,6 +1,6 @@
 import "./layout.css";
 
-import { useState, useSyncExternalStore } from "react";
+import { CSSProperties, useState, useSyncExternalStore } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Outlet, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
@@ -120,8 +120,12 @@ export function LayoutPage() {
     );
   }
 
+  const styles = {} as CSSProperties;
+  if (login?.color) {
+    (styles as Record<string, string>)["--primary"] = login.color;
+  }
   return (
-    <div className={`page${location.pathname.startsWith("/naddr1") ? " stream" : ""}`}>
+    <div className={`page${location.pathname.startsWith("/naddr1") ? " stream" : ""}`} style={styles}>
       <Helmet>
         <title>Home - zap.stream</title>
       </Helmet>

src/pages/settings-page.tsx

@@ -8,6 +8,8 @@ import { useLogin } from "@/hooks/login";
 import Copy from "@/element/copy";
 import { NostrProviderDialog } from "@/element/nostr-provider-dialog";
 import { useStreamProvider } from "@/hooks/stream-provider";
+import { Login, StreamState } from "..";
+import { StatePill } from "@/element/state-pill";
 
 const enum Tab {
   Account,
@@ -50,6 +52,21 @@ export function SettingsPage() {
                 <Copy text={hexToBech32("nsec", login.privateKey)} />
               </div>
             )}
+            <h1>
+              <FormattedMessage defaultMessage="Theme" id="Pe0ogR" />
+            </h1>
+            <div>
+              <StatePill state={StreamState.Live} />
+            </div>
+            <div className="flex gap-2">
+              {["#7F006A", "#E206BF", "#7406E2", "#3F06E2", "#393939", "#ff563f", "#ff8d2b", "#34d2fe"].map(a => (
+                <div
+                  className={`w-4 h-4 pointer${login?.color === a ? " border" : ""}`}
+                  title={a}
+                  style={{ backgroundColor: a }}
+                  onClick={() => Login.setColor(a)}></div>
+              ))}
+            </div>
             <h1>
               <FormattedMessage defaultMessage="Zaps" id="OEW7yJ" />
             </h1>

src/pages/stream-page.tsx

@@ -58,11 +58,9 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedNostrEvent })
           <p>{findTag(ev, "summary")}</p>
           <div className="tags">
             <StatePill state={status as StreamState} />
-            {viewers > 0 && (
-              <span className="pill bg-gray-1">
-                <FormattedMessage defaultMessage="{n} viewers" id="3adEeb" values={{ n: formatSats(viewers) }} />
-              </span>
-            )}
+            <span className="pill bg-gray-1">
+              <FormattedMessage defaultMessage="{n} viewers" id="3adEeb" values={{ n: formatSats(viewers) }} />
+            </span>
             {status === StreamState.Live && (
               <span className="pill bg-gray-1">
                 <StreamTimer ev={ev} />

src/translations/en.json

@@ -68,6 +68,7 @@
   "OKhRC6": "Share",
   "OWgHbg": "Edit card",
   "Oxqtyf": "We hooked you up with a lightning wallet so you can get paid by viewers right away!",
+  "Pe0ogR": "Theme",
   "Q3au2v": "About {estimate}",
   "QRHNuF": "What are we steaming today?",
   "QRRCp0": "Stream URL",