@@ -140,25 +188,6 @@ export function V4VIndicator() {
-
{/* Recipients */}
{episode.value && episode.value.length > 0 && (
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 626df60..aa0f25d 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -18,6 +18,7 @@ const NAV_ITEMS = [
{ id: "notifications" as const, label: "notifications", icon: "🔔" },
{ id: "follows" as const, label: "follows", icon: "♺" },
{ id: "zaps" as const, label: "zaps", icon: "⚡" },
+ { id: "v4v" as const, label: "v4v", icon: "⚡" },
{ id: "relays" as const, label: "relays", icon: "⟐" },
{ id: "settings" as const, label: "settings", icon: "⚙" },
{ id: "about" as const, label: "support", icon: "♥" },
diff --git a/src/components/v4v/V4VDashboard.tsx b/src/components/v4v/V4VDashboard.tsx
new file mode 100644
index 0000000..f46e878
--- /dev/null
+++ b/src/components/v4v/V4VDashboard.tsx
@@ -0,0 +1,128 @@
+import { usePodcastStore } from "../../stores/podcast";
+import { useV4VStore } from "../../stores/v4v";
+
+function BudgetBar({ label, spent, total }: { label: string; spent: number; total: number }) {
+ if (total <= 0) return null;
+ const pct = Math.min(100, Math.round((spent / total) * 100));
+ const isNear = pct >= 80;
+ const isOver = pct >= 100;
+
+ return (
+
+
+ {label}
+
+ {spent} / {total} sats
+
+
+
+
+ {total - spent > 0 ? `${total - spent} sats remaining` : "Budget reached"}
+
+
+ );
+}
+
+export function V4VDashboard() {
+ const episode = usePodcastStore((s) => s.currentEpisode);
+ const v4vStreaming = usePodcastStore((s) => s.v4vStreaming);
+ const v4vTotalStreamed = usePodcastStore((s) => s.v4vTotalStreamed);
+
+ const autoEnabled = useV4VStore((s) => s.autoEnabled);
+ const perEpisodeCap = useV4VStore((s) => s.perEpisodeCap);
+ const weeklyBudget = useV4VStore((s) => s.weeklyBudget);
+ const defaultRate = useV4VStore((s) => s.defaultRate);
+ const currentEpisodeSats = useV4VStore((s) => s.currentEpisodeSats);
+ const capReachedReason = useV4VStore((s) => s.capReachedReason);
+ const history = useV4VStore((s) => s.history);
+ const weeklySpent = useV4VStore((s) => s.weeklySpent)();
+
+ const hasRecipients = episode?.value && episode.value.length > 0;
+
+ // All-time stats
+ const allTimeSats = history.reduce((sum, e) => sum + e.satsStreamed + e.satsBoosted, 0) + v4vTotalStreamed;
+ const episodesSupported = new Set(history.map((e) => e.episodeGuid)).size;
+
+ return (
+
+ {/* Current streaming status */}
+
+ Now
+
+ {!episode ? (
+ No episode playing.
+ ) : !hasRecipients ? (
+
+ Playing {episode.title} — no V4V recipients.
+
+ ) : v4vStreaming ? (
+
+
+ ⚡
+ Streaming
+ {autoEnabled && (
+ AUTO
+ )}
+
+
{episode.title}
+
+ {v4vTotalStreamed} sats this session · {episode.value?.length} recipients
+
+
+
+ ⚡
+ {capReachedReason}
+
+
{episode.title}
+
+ {currentEpisodeSats} sats streamed to {episode.value?.length} recipients
+
+
+ Playing {episode.title} — V4V available but not streaming.
+
+ )}
+
+
+ {/* Budget bars */}
+ {(perEpisodeCap > 0 || weeklyBudget > 0) && (
+
+ )}
+
+ {/* Quick stats */}
+
+ Stats
+
+
+
{allTimeSats}
+
total sats
+
+
+
{episodesSupported}
+
episodes
+
+
+
+ {autoEnabled ? `${defaultRate}/m` : "off"}
+
+
auto-stream
+
+
+
+ );
+}
diff --git a/src/components/v4v/V4VHistory.tsx b/src/components/v4v/V4VHistory.tsx
new file mode 100644
index 0000000..21ed00e
--- /dev/null
+++ b/src/components/v4v/V4VHistory.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { useV4VStore, type V4VHistoryEntry } from "../../stores/v4v";
+
+function formatDate(ts: number): string {
+ const d = new Date(ts);
+ return d.toLocaleDateString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+
+function HistoryRow({ entry }: { entry: V4VHistoryEntry }) {
+ const [expanded, setExpanded] = useState(false);
+ const totalSats = entry.satsStreamed + entry.satsBoosted;
+
+ return (
+
+
+
+ {expanded && (
+
+ {entry.satsStreamed > 0 && (
+
Streamed: {entry.satsStreamed} sats
+ )}
+ {entry.satsBoosted > 0 && (
+
Boosted: {entry.satsBoosted} sats
+ )}
+ {entry.recipients.length > 0 && (
+
+
Recipients:
+ {entry.recipients.map((r, i) => (
+
+ {r.name || r.address.slice(0, 16) + "..."}
+ {r.sats} sats
+
+ ))}
+
+ )}
+
+ )}
+
+ );
+}
+
+export function V4VHistory() {
+ const history = useV4VStore((s) => s.history);
+
+ if (history.length === 0) {
+ return (
+
+
+
No V4V history yet
+
+ Start streaming to see your contributions here.
+
+
+
+ );
+ }
+
+ return (
+
+ {history.map((entry, i) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/v4v/V4VSettings.tsx b/src/components/v4v/V4VSettings.tsx
new file mode 100644
index 0000000..b05c265
--- /dev/null
+++ b/src/components/v4v/V4VSettings.tsx
@@ -0,0 +1,133 @@
+import { useV4VStore } from "../../stores/v4v";
+
+const RATE_OPTIONS = [5, 10, 21, 50, 100];
+
+function InfoIcon({ title }: { title: string }) {
+ return (
+
+ ⓘ
+
+ );
+}
+
+export function V4VSettings() {
+ const autoEnabled = useV4VStore((s) => s.autoEnabled);
+ const perEpisodeCap = useV4VStore((s) => s.perEpisodeCap);
+ const weeklyBudget = useV4VStore((s) => s.weeklyBudget);
+ const defaultRate = useV4VStore((s) => s.defaultRate);
+ const {
+ setAutoEnabled, setPerEpisodeCap, setWeeklyBudget, setDefaultRate,
+ } = useV4VStore.getState();
+
+ return (
+
+ {/* Auto-enable */}
+
+
+
+ Auto-stream
+
+
+
+
+ Automatically stream sats to creators when playing V4V-enabled episodes.
+
+ {autoEnabled && (
+
+ ● Auto-streaming is active
+
+ )}
+
+
+ {/* Per-episode cap */}
+
+
+
+
+
+
+ Stop streaming after this many sats per episode.
+
+
+ setPerEpisodeCap(parseInt(e.target.value) || 0)}
+ placeholder="e.g. 100"
+ className="w-24 bg-bg-raised border border-border rounded-sm px-2 py-1 text-[11px] text-text placeholder:text-text-dim/50"
+ />
+ sats
+
+
+
+ {/* Weekly budget */}
+
+
+
+
+
+
+ Total sats allowed per week across all episodes.
+
+
+ setWeeklyBudget(parseInt(e.target.value) || 0)}
+ placeholder="e.g. 500"
+ className="w-24 bg-bg-raised border border-border rounded-sm px-2 py-1 text-[11px] text-text placeholder:text-text-dim/50"
+ />
+ sats / week
+
+
+
+ {/* Default rate */}
+
+
+
+
+
+
+ Sats per minute when auto-streaming.
+
+
+ {RATE_OPTIONS.map((rate) => (
+
+ ))}
+ /min
+
+
+
+ {/* Requirements notice */}
+ {!autoEnabled && (perEpisodeCap <= 0 || weeklyBudget <= 0) && (
+
+ Set both a per-episode cap and weekly budget to enable auto-streaming.
+
+ )}
+
+ );
+}
diff --git a/src/components/v4v/V4VView.tsx b/src/components/v4v/V4VView.tsx
new file mode 100644
index 0000000..42c2b1e
--- /dev/null
+++ b/src/components/v4v/V4VView.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { V4VDashboard } from "./V4VDashboard";
+import { V4VSettings } from "./V4VSettings";
+import { V4VHistory } from "./V4VHistory";
+
+const TABS = ["dashboard", "settings", "history"] as const;
+type Tab = (typeof TABS)[number];
+
+export function V4VView() {
+ const [tab, setTab] = useState
("dashboard");
+
+ return (
+
+ {/* Header */}
+
+
+
Value 4 Value
+
+ {TABS.map((t) => (
+
+ ))}
+
+
+
+
+ {/* Content */}
+
+ {tab === "dashboard" && }
+ {tab === "settings" && }
+ {tab === "history" && }
+
+