Working feed: NDK + relay connection + live notes from Nostr

- Tailwind CSS + Zustand + NDK installed and configured
- Sidebar with feed/relays/settings navigation
- Global feed view with live notes from relays
- Profile fetching with caching and deduplication
- Relay connection with timeout handling
- Note cards with avatar, name, timestamp, content
- Dark theme, monospace, no-slop UI
- Devtools enabled for debugging

src/components/feed/Feed.tsx

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useFeedStore } from "../../stores/feed";
+import { NoteCard } from "./NoteCard";
+
+export function Feed() {
+  const { notes, loading, connected, error, connect, loadFeed } = useFeedStore();
+
+  useEffect(() => {
+    connect().then(() => loadFeed());
+  }, []);
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <header className="border-b border-border px-4 py-2.5 flex items-center justify-between shrink-0">
+        <h1 className="text-text text-sm font-medium tracking-wide">Global Feed</h1>
+        <div className="flex items-center gap-3">
+          {connected && (
+            <span className="text-success text-[11px] flex items-center gap-1">
+              <span className="w-1.5 h-1.5 rounded-full bg-success inline-block" />
+              connected
+            </span>
+          )}
+          <button
+            onClick={loadFeed}
+            disabled={loading}
+            className="text-text-muted hover:text-text text-[11px] px-2 py-1 border border-border hover:border-text-dim transition-colors disabled:opacity-40"
+          >
+            {loading ? "loading…" : "refresh"}
+          </button>
+        </div>
+      </header>
+
+      {/* Feed */}
+      <div className="flex-1 overflow-y-auto">
+        {error && (
+          <div className="px-4 py-3 text-danger text-[12px] border-b border-border bg-danger/5">
+            {error}
+          </div>
+        )}
+
+        {loading && notes.length === 0 && (
+          <div className="px-4 py-8 text-text-dim text-[12px] text-center">
+            Connecting to relays…
+          </div>
+        )}
+
+        {!loading && notes.length === 0 && !error && (
+          <div className="px-4 py-8 text-text-dim text-[12px] text-center">
+            No notes yet.
+          </div>
+        )}
+
+        {notes.map((event) => (
+          <NoteCard key={event.id} event={event} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/feed/NoteCard.tsx

@@ -0,0 +1,52 @@
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useProfile } from "../../hooks/useProfile";
+import { timeAgo, shortenPubkey } from "../../lib/utils";
+
+interface NoteCardProps {
+  event: NDKEvent;
+}
+
+export function NoteCard({ event }: NoteCardProps) {
+  const profile = useProfile(event.pubkey);
+  const name = profile?.displayName || profile?.name || shortenPubkey(event.pubkey);
+  const avatar = profile?.picture;
+  const time = event.created_at ? timeAgo(event.created_at) : "";
+
+  return (
+    <article className="border-b border-border px-4 py-3 hover:bg-bg-hover transition-colors duration-100">
+      <div className="flex gap-3">
+        {/* Avatar */}
+        <div className="shrink-0">
+          {avatar ? (
+            <img
+              src={avatar}
+              alt=""
+              className="w-9 h-9 rounded-sm object-cover bg-bg-raised"
+              loading="lazy"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          ) : (
+            <div className="w-9 h-9 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-xs">
+              {name.charAt(0).toUpperCase()}
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline gap-2 mb-0.5">
+            <span className="text-text font-medium truncate text-[13px]">
+              {name}
+            </span>
+            <span className="text-text-dim text-[11px] shrink-0">{time}</span>
+          </div>
+          <div className="note-content text-text text-[13px] break-words whitespace-pre-wrap">
+            {event.content}
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}