Build out Settings view: relay management + identity

- addRelay / removeRelay in nostr lib; relay list persisted to localStorage
- getNDK() seeds from localStorage instead of hardcoded list
- Settings > Relays: list with status dots, remove on hover, add with validation
- Settings > Identity: npub display with one-click copy
- Removed local umbrel relay from defaults (was a dev artifact)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/shared/SettingsView.tsx

@@ -1,3 +1,126 @@
+import { useState } from "react";
+import { useUserStore } from "../../stores/user";
+import { getNDK, getStoredRelayUrls, addRelay, removeRelay } from "../../lib/nostr";
+
+function RelayRow({ url, onRemove }: { url: string; onRemove: () => void }) {
+  const ndk = getNDK();
+  const relay = ndk.pool?.relays.get(url);
+  const connected = relay?.connected ?? false;
+
+  return (
+    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px] group">
+      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`} />
+      <span className="text-text truncate flex-1 font-mono">{url}</span>
+      <button
+        onClick={onRemove}
+        className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+      >
+        remove
+      </button>
+    </div>
+  );
+}
+
+function RelaySection() {
+  const [relays, setRelays] = useState<string[]>(() => getStoredRelayUrls());
+  const [input, setInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAdd = () => {
+    const url = input.trim();
+    if (!url) return;
+    if (!url.startsWith("ws://") && !url.startsWith("wss://")) {
+      setError("URL must start with ws:// or wss://");
+      return;
+    }
+    if (relays.includes(url)) {
+      setError("Already in list");
+      return;
+    }
+    addRelay(url);
+    setRelays(getStoredRelayUrls());
+    setInput("");
+    setError(null);
+  };
+
+  const handleRemove = (url: string) => {
+    removeRelay(url);
+    setRelays(getStoredRelayUrls());
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") handleAdd();
+    if (e.key === "Escape") setInput("");
+  };
+
+  return (
+    <section>
+      <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">Relays</h2>
+      <div className="space-y-1 mb-3">
+        {relays.length === 0 && (
+          <p className="text-text-dim text-[12px] px-1">No relays configured.</p>
+        )}
+        {relays.map((url) => (
+          <RelayRow key={url} url={url} onRemove={() => handleRemove(url)} />
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <input
+          value={input}
+          onChange={(e) => { setInput(e.target.value); setError(null); }}
+          onKeyDown={handleKeyDown}
+          placeholder="wss://relay.example.com"
+          className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] font-mono focus:outline-none focus:border-accent/50 placeholder:text-text-dim"
+        />
+        <button
+          onClick={handleAdd}
+          className="px-3 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors shrink-0"
+        >
+          add
+        </button>
+      </div>
+      {error && <p className="text-danger text-[11px] mt-1">{error}</p>}
+    </section>
+  );
+}
+
+function IdentitySection() {
+  const { npub, loggedIn } = useUserStore();
+  const [copied, setCopied] = useState(false);
+
+  if (!loggedIn || !npub) {
+    return (
+      <section>
+        <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">Identity</h2>
+        <p className="text-text-dim text-[12px]">Not logged in.</p>
+      </section>
+    );
+  }
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(npub).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <section>
+      <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">Identity</h2>
+      <div className="flex items-center gap-2 px-3 py-2 border border-border">
+        <span className="text-text font-mono text-[11px] truncate flex-1">{npub}</span>
+        <button
+          onClick={handleCopy}
+          className="text-[10px] text-text-dim hover:text-accent transition-colors shrink-0"
+        >
+          {copied ? "copied ✓" : "copy npub"}
+        </button>
+      </div>
+      <p className="text-text-dim text-[10px] mt-1 px-1">Your public key. Safe to share.</p>
+    </section>
+  );
+}
+
 export function SettingsView() {
   return (
     <div className="h-full flex flex-col">
@@ -5,10 +128,9 @@ export function SettingsView() {
         <h1 className="text-text text-sm font-medium tracking-wide">Settings</h1>
       </header>
 
-      <div className="flex-1 overflow-y-auto p-4">
-        <p className="text-text-dim text-[12px]">
-          Settings will appear here — key management, relay config, Lightning wallet connection, appearance.
-        </p>
+      <div className="flex-1 overflow-y-auto p-4 space-y-8">
+        <RelaySection />
+        <IdentitySection />
       </div>
     </div>
   );

src/lib/nostr/client.ts

@@ -1,23 +1,58 @@
-import NDK, { NDKEvent, NDKFilter, NDKKind, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk";
+import NDK, { NDKEvent, NDKFilter, NDKKind, NDKRelay, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk";
 
-const DEFAULT_RELAYS = [
-  "ws://umbrel.local:4848",
+const RELAY_STORAGE_KEY = "wrystr_relays";
+
+const FALLBACK_RELAYS = [
   "wss://relay.damus.io",
   "wss://nos.lol",
   "wss://relay.snort.social",
 ];
 
+export function getStoredRelayUrls(): string[] {
+  try {
+    const stored = localStorage.getItem(RELAY_STORAGE_KEY);
+    if (stored) return JSON.parse(stored);
+  } catch { /* ignore */ }
+  return FALLBACK_RELAYS;
+}
+
+function saveRelayUrls(urls: string[]) {
+  localStorage.setItem(RELAY_STORAGE_KEY, JSON.stringify(urls));
+}
+
 let ndk: NDK | null = null;
 
 export function getNDK(): NDK {
   if (!ndk) {
     ndk = new NDK({
-      explicitRelayUrls: DEFAULT_RELAYS,
+      explicitRelayUrls: getStoredRelayUrls(),
     });
   }
   return ndk;
 }
 
+export function addRelay(url: string): void {
+  const instance = getNDK();
+  const urls = getStoredRelayUrls();
+  if (!urls.includes(url)) {
+    saveRelayUrls([...urls, url]);
+  }
+  if (!instance.pool?.relays.has(url)) {
+    const relay = new NDKRelay(url, undefined, instance);
+    instance.pool?.addRelay(relay, true);
+  }
+}
+
+export function removeRelay(url: string): void {
+  const instance = getNDK();
+  const relay = instance.pool?.relays.get(url);
+  if (relay) {
+    relay.disconnect();
+    instance.pool?.relays.delete(url);
+  }
+  saveRelayUrls(getStoredRelayUrls().filter((u) => u !== url));
+}
+
 function waitForConnectedRelay(instance: NDK, timeoutMs = 10000): Promise<void> {
   return new Promise((resolve, _reject) => {
     const timer = setTimeout(() => {

src/lib/nostr/index.ts

@@ -1 +1 @@
-export { getNDK, connectToRelays, fetchGlobalFeed, fetchFollowFeed, fetchReplies, publishNote, publishArticle, publishProfile, publishReaction, publishReply, publishContactList, fetchReactionCount, fetchUserNotes, fetchProfile } from "./client";
+export { getNDK, connectToRelays, fetchGlobalFeed, fetchFollowFeed, fetchReplies, publishNote, publishArticle, publishProfile, publishReaction, publishReply, publishContactList, fetchReactionCount, fetchUserNotes, fetchProfile, getStoredRelayUrls, addRelay, removeRelay } from "./client";