mirror of
https://github.com/hoornet/vega.git
synced 2026-05-07 04:39:12 -07:00
Refactor: split overgrown files into focused modules
Split client.ts (1036 lines) into 11 domain modules under lib/nostr/ — core, notes, social, articles, engagement, dms, bookmarks, muting, search, relays, trending. Barrel index.ts re-exports all; zero consumer import changes. Extract ProfileView sub-components (ImageField, Nip05Field, EditProfileForm, ProfileMediaGallery), NoteContent renderers (TextSegments, MediaCards), and NoteCard actions (NoteActions, InlineReplyBox). All component files now ≤270 lines, all lib files ≤300.
This commit is contained in:
Jure
96
src/components/feed/InlineReplyBox.tsx
Normal file
96
src/components/feed/InlineReplyBox.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { publishReply } from "../../lib/nostr";
|
||||
import { useReplyCount } from "../../hooks/useReplyCount";
|
||||
import { EmojiPicker } from "../shared/EmojiPicker";
|
||||
|
||||
interface InlineReplyBoxProps {
|
||||
event: NDKEvent;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export function InlineReplyBox({ event, name }: InlineReplyBoxProps) {
|
||||
const [replyText, setReplyText] = useState("");
|
||||
const [replying, setReplying] = useState(false);
|
||||
const [replyError, setReplyError] = useState<string | null>(null);
|
||||
const [replySent, setReplySent] = useState(false);
|
||||
const [showReplyEmoji, setShowReplyEmoji] = useState(false);
|
||||
const replyRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [, adjustReplyCount] = useReplyCount(event.id);
|
||||
|
||||
const handleReplySubmit = async () => {
|
||||
if (!replyText.trim() || replying) return;
|
||||
setReplying(true);
|
||||
setReplyError(null);
|
||||
try {
|
||||
await publishReply(replyText.trim(), { id: event.id, pubkey: event.pubkey });
|
||||
setReplyText("");
|
||||
setReplySent(true);
|
||||
adjustReplyCount(1);
|
||||
setTimeout(() => { setReplySent(false); }, 1500);
|
||||
} catch (err) {
|
||||
setReplyError(`Failed: ${err}`);
|
||||
} finally {
|
||||
setReplying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReplyKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleReplySubmit();
|
||||
if (e.key === "Escape") {
|
||||
// Parent controls visibility — just blur
|
||||
replyRef.current?.blur();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-2 border-l-2 border-border pl-3">
|
||||
<textarea
|
||||
ref={replyRef}
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
onKeyDown={handleReplyKeyDown}
|
||||
placeholder={`Reply to ${name}…`}
|
||||
rows={2}
|
||||
className="w-full bg-transparent text-text text-[12px] placeholder:text-text-dim resize-none focus:outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
{replyError && <p className="text-danger text-[10px] mb-1">{replyError}</p>}
|
||||
<div className="flex items-center justify-end gap-2 mt-1">
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowReplyEmoji((v) => !v)}
|
||||
title="Insert emoji"
|
||||
className="text-text-dim hover:text-text text-[12px] transition-colors"
|
||||
>
|
||||
☺
|
||||
</button>
|
||||
{showReplyEmoji && (
|
||||
<EmojiPicker
|
||||
onSelect={(emoji) => {
|
||||
const ta = replyRef.current;
|
||||
if (ta) {
|
||||
const start = ta.selectionStart ?? replyText.length;
|
||||
const end = ta.selectionEnd ?? replyText.length;
|
||||
setReplyText(replyText.slice(0, start) + emoji + replyText.slice(end));
|
||||
setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + emoji.length; ta.focus(); }, 0);
|
||||
} else {
|
||||
setReplyText((t) => t + emoji);
|
||||
}
|
||||
}}
|
||||
onClose={() => setShowReplyEmoji(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-text-dim text-[10px]">Ctrl+Enter</span>
|
||||
<button
|
||||
onClick={handleReplySubmit}
|
||||
disabled={!replyText.trim() || replying}
|
||||
className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
{replySent ? "replied ✓" : replying ? "posting…" : "reply"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
116
src/components/feed/MediaCards.tsx
Normal file
116
src/components/feed/MediaCards.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { ContentSegment } from "../../lib/parsing";
|
||||
|
||||
export function VideoBlock({ sources }: { sources: string[] }) {
|
||||
if (sources.length === 0) return null;
|
||||
return (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{sources.map((src, i) => (
|
||||
<video
|
||||
key={i}
|
||||
src={src}
|
||||
controls
|
||||
playsInline
|
||||
preload="metadata"
|
||||
className="max-w-full max-h-80 rounded-sm bg-bg-raised border border-border"
|
||||
onError={(e) => { (e.target as HTMLVideoElement).style.display = "none"; }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AudioBlock({ sources }: { sources: string[] }) {
|
||||
if (sources.length === 0) return null;
|
||||
return (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{sources.map((src, i) => {
|
||||
const filename = src.split("/").pop()?.split("?")[0] ?? src;
|
||||
return (
|
||||
<div key={i} className="rounded-sm bg-bg-raised border border-border p-2">
|
||||
<div className="text-[11px] text-text-muted mb-1 truncate">{filename}</div>
|
||||
<audio controls preload="metadata" className="w-full h-8" src={src} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function YouTubeCard({ seg }: { seg: ContentSegment }) {
|
||||
return (
|
||||
<a
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={`https://img.youtube.com/vi/${seg.mediaId}/hqdefault.jpg`}
|
||||
alt=""
|
||||
className="w-28 h-16 rounded-sm object-cover shrink-0"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">YouTube</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export function VimeoCard({ seg }: { seg: ContentSegment }) {
|
||||
return (
|
||||
<a
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-black/40 flex items-center justify-center shrink-0">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20" fill="white"><polygon points="6,3 17,10 6,17" /></svg>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Vimeo</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export function SpotifyCard({ seg }: { seg: ContentSegment }) {
|
||||
return (
|
||||
<a
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-[#1DB954]/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-[#1DB954] text-lg font-bold">S</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Spotify · {seg.mediaType}</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export function TidalCard({ seg }: { seg: ContentSegment }) {
|
||||
return (
|
||||
<a
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center shrink-0">
|
||||
<span className="text-white text-lg font-bold">T</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Tidal · {seg.mediaType}</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
224
src/components/feed/NoteActions.tsx
Normal file
224
src/components/feed/NoteActions.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { useState } from "react";
|
||||
import { NDKEvent, nip19 } from "@nostr-dev-kit/ndk";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { useReactionCount } from "../../hooks/useReactionCount";
|
||||
import { useReplyCount } from "../../hooks/useReplyCount";
|
||||
import { useZapCount } from "../../hooks/useZapCount";
|
||||
import { useUserStore } from "../../stores/user";
|
||||
import { useBookmarkStore } from "../../stores/bookmark";
|
||||
import { publishReaction, publishRepost } from "../../lib/nostr";
|
||||
import { ZapModal } from "../zap/ZapModal";
|
||||
import { QuoteModal } from "./QuoteModal";
|
||||
|
||||
const REACTION_EMOJIS = ["❤️", "🤙", "🔥", "😂", "🫡", "👀", "⚡"];
|
||||
|
||||
interface NoteActionsProps {
|
||||
event: NDKEvent;
|
||||
onReplyToggle: () => void;
|
||||
showReply: boolean;
|
||||
}
|
||||
|
||||
export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProps) {
|
||||
const profile = useProfile(event.pubkey);
|
||||
const name = profile?.displayName || profile?.name || event.pubkey.slice(0, 8) + "…";
|
||||
const avatar = profile?.picture;
|
||||
const { loggedIn } = useUserStore();
|
||||
const { bookmarkedIds, addBookmark, removeBookmark } = useBookmarkStore();
|
||||
const isBookmarked = bookmarkedIds.includes(event.id!);
|
||||
|
||||
const likedKey = "wrystr_liked";
|
||||
const getLiked = () => {
|
||||
try { return new Set<string>(JSON.parse(localStorage.getItem(likedKey) || "[]")); }
|
||||
catch { return new Set<string>(); }
|
||||
};
|
||||
const [liked, setLiked] = useState(() => getLiked().has(event.id));
|
||||
const [liking, setLiking] = useState(false);
|
||||
const [reactionCount, adjustReactionCount] = useReactionCount(event.id);
|
||||
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
|
||||
const [replyCount] = useReplyCount(event.id);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const zapData = useZapCount(event.id);
|
||||
const [showZap, setShowZap] = useState(false);
|
||||
const [showQuote, setShowQuote] = useState(false);
|
||||
const [reposting, setReposting] = useState(false);
|
||||
const [reposted, setReposted] = useState(false);
|
||||
|
||||
const handleReact = async (emoji?: string) => {
|
||||
if (!loggedIn || liked || liking) return;
|
||||
setLiking(true);
|
||||
setShowEmojiPicker(false);
|
||||
try {
|
||||
await publishReaction(event.id, event.pubkey, emoji || "+");
|
||||
const likedSet = getLiked();
|
||||
likedSet.add(event.id);
|
||||
localStorage.setItem(likedKey, JSON.stringify(Array.from(likedSet)));
|
||||
setLiked(true);
|
||||
adjustReactionCount(1);
|
||||
} finally {
|
||||
setLiking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
const nevent = nip19.neventEncode({ id: event.id!, author: event.pubkey });
|
||||
await navigator.clipboard.writeText("nostr:" + nevent);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleRepost = async () => {
|
||||
if (reposting || reposted) return;
|
||||
setReposting(true);
|
||||
try {
|
||||
await publishRepost(event);
|
||||
setReposted(true);
|
||||
} finally {
|
||||
setReposting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
<button
|
||||
onClick={onReplyToggle}
|
||||
className={`text-[11px] transition-colors ${
|
||||
showReply ? "text-accent" : "text-text-dim hover:text-text"
|
||||
}`}
|
||||
>
|
||||
reply{replyCount !== null && replyCount > 0 ? ` ${replyCount}` : ""}
|
||||
</button>
|
||||
<div className="relative flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleReact("❤️")}
|
||||
disabled={liked || liking}
|
||||
className={`text-[11px] transition-colors ${
|
||||
liked ? "text-accent" : "text-text-dim hover:text-accent"
|
||||
} disabled:cursor-default`}
|
||||
>
|
||||
{liked ? "♥" : "♡"}{reactionCount !== null && reactionCount > 0 ? ` ${reactionCount}` : liked ? " liked" : " like"}
|
||||
</button>
|
||||
{!liked && !liking && (
|
||||
<button
|
||||
onClick={() => setShowEmojiPicker((v) => !v)}
|
||||
className="text-[10px] text-text-dim hover:text-accent transition-colors opacity-0 group-hover/card:opacity-100"
|
||||
title="React with emoji"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
)}
|
||||
{showEmojiPicker && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-[9]" onClick={() => setShowEmojiPicker(false)} />
|
||||
<div className="absolute bottom-6 left-0 bg-bg-raised border border-border shadow-lg z-10 flex gap-0.5 px-1.5 py-1">
|
||||
{REACTION_EMOJIS.map((emoji) => (
|
||||
<button
|
||||
key={emoji}
|
||||
onClick={() => handleReact(emoji)}
|
||||
className="text-[16px] hover:scale-125 transition-transform px-0.5"
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRepost}
|
||||
disabled={reposting || reposted}
|
||||
className={`text-[11px] transition-colors disabled:cursor-default ${
|
||||
reposted ? "text-accent" : "text-text-dim hover:text-accent"
|
||||
}`}
|
||||
>
|
||||
{reposted ? "reposted ✓" : reposting ? "…" : "repost"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowQuote(true)}
|
||||
className="text-[11px] text-text-dim hover:text-text transition-colors"
|
||||
>
|
||||
quote
|
||||
</button>
|
||||
{(profile?.lud16 || profile?.lud06) && (
|
||||
<button
|
||||
onClick={() => setShowZap(true)}
|
||||
className="text-[11px] text-text-dim hover:text-zap transition-colors"
|
||||
>
|
||||
{zapData && zapData.totalSats > 0
|
||||
? `⚡ ${zapData.totalSats.toLocaleString()} sats`
|
||||
: "⚡ zap"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => isBookmarked ? removeBookmark(event.id!) : addBookmark(event.id!)}
|
||||
className={`text-[11px] transition-colors ${
|
||||
isBookmarked ? "text-accent" : "text-text-dim hover:text-accent"
|
||||
}`}
|
||||
>
|
||||
{isBookmarked ? "▪ saved" : "▫ save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className={`text-[11px] transition-colors ${
|
||||
copied ? "text-accent" : "text-text-dim hover:text-text"
|
||||
}`}
|
||||
>
|
||||
{copied ? "copied ✓" : "share"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showZap && (
|
||||
<ZapModal
|
||||
target={{ type: "note", event, recipientPubkey: event.pubkey }}
|
||||
recipientName={name}
|
||||
onClose={() => setShowZap(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showQuote && (
|
||||
<QuoteModal
|
||||
event={event}
|
||||
authorName={name}
|
||||
authorAvatar={avatar}
|
||||
onClose={() => setShowQuote(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoggedOutStats({ event }: { event: NDKEvent }) {
|
||||
const [reactionCount] = useReactionCount(event.id);
|
||||
const [replyCount] = useReplyCount(event.id);
|
||||
const zapData = useZapCount(event.id);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleShare = async () => {
|
||||
const nevent = nip19.neventEncode({ id: event.id!, author: event.pubkey });
|
||||
await navigator.clipboard.writeText("nostr:" + nevent);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 mt-1.5">
|
||||
{replyCount !== null && replyCount > 0 && (
|
||||
<span className="text-text-dim text-[11px]">↩ {replyCount}</span>
|
||||
)}
|
||||
{reactionCount !== null && reactionCount > 0 && (
|
||||
<span className="text-text-dim text-[11px]">♥ {reactionCount}</span>
|
||||
)}
|
||||
{zapData !== null && zapData.totalSats > 0 && (
|
||||
<span className="text-zap text-[11px]">⚡ {zapData.totalSats.toLocaleString()} sats</span>
|
||||
)}
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className={`text-[11px] transition-colors ${
|
||||
copied ? "text-accent" : "text-text-dim hover:text-text"
|
||||
}`}
|
||||
>
|
||||
{copied ? "copied ✓" : "share"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,20 +2,14 @@ import { useState, useRef, useEffect } from "react";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { useNip05Verified } from "../../hooks/useNip05Verified";
|
||||
import { useReactionCount } from "../../hooks/useReactionCount";
|
||||
import { useReplyCount } from "../../hooks/useReplyCount";
|
||||
import { useZapCount } from "../../hooks/useZapCount";
|
||||
import { useUserStore } from "../../stores/user";
|
||||
import { useMuteStore } from "../../stores/mute";
|
||||
import { useBookmarkStore } from "../../stores/bookmark";
|
||||
import { useUIStore } from "../../stores/ui";
|
||||
import { timeAgo, shortenPubkey } from "../../lib/utils";
|
||||
import { nip19 } from "@nostr-dev-kit/ndk";
|
||||
import { publishReaction, publishReply, publishRepost, getNDK, fetchNoteById } from "../../lib/nostr";
|
||||
import { getNDK, fetchNoteById } from "../../lib/nostr";
|
||||
import { NoteContent } from "./NoteContent";
|
||||
import { ZapModal } from "../zap/ZapModal";
|
||||
import { QuoteModal } from "./QuoteModal";
|
||||
import { EmojiPicker } from "../shared/EmojiPicker";
|
||||
import { NoteActions, LoggedOutStats } from "./NoteActions";
|
||||
import { InlineReplyBox } from "./InlineReplyBox";
|
||||
|
||||
interface NoteCardProps {
|
||||
event: NDKEvent;
|
||||
@@ -47,8 +41,6 @@ export function NoteCard({ event, focused }: NoteCardProps) {
|
||||
const { loggedIn, pubkey: ownPubkey, follows, follow, unfollow } = useUserStore();
|
||||
const { mutedPubkeys, mute, unmute } = useMuteStore();
|
||||
const isMuted = mutedPubkeys.includes(event.pubkey);
|
||||
const { bookmarkedIds, addBookmark, removeBookmark } = useBookmarkStore();
|
||||
const isBookmarked = bookmarkedIds.includes(event.id!);
|
||||
const { openProfile, openThread, currentView } = useUIStore();
|
||||
|
||||
const parentEventId = getParentEventId(event);
|
||||
@@ -58,93 +50,9 @@ export function NoteCard({ event, focused }: NoteCardProps) {
|
||||
useEffect(() => {
|
||||
if (focused) cardRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
}, [focused]);
|
||||
const likedKey = "wrystr_liked";
|
||||
const getLiked = () => {
|
||||
try { return new Set<string>(JSON.parse(localStorage.getItem(likedKey) || "[]")); }
|
||||
catch { return new Set<string>(); }
|
||||
};
|
||||
const [liked, setLiked] = useState(() => getLiked().has(event.id));
|
||||
const [liking, setLiking] = useState(false);
|
||||
const [reactionCount, adjustReactionCount] = useReactionCount(event.id);
|
||||
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
|
||||
const [replyCount, adjustReplyCount] = useReplyCount(event.id);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const zapData = useZapCount(event.id);
|
||||
const [showReply, setShowReply] = useState(false);
|
||||
const [replyText, setReplyText] = useState("");
|
||||
const [replying, setReplying] = useState(false);
|
||||
const [replyError, setReplyError] = useState<string | null>(null);
|
||||
const [replySent, setReplySent] = useState(false);
|
||||
const replyRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [showZap, setShowZap] = useState(false);
|
||||
const [showQuote, setShowQuote] = useState(false);
|
||||
const [showReplyEmoji, setShowReplyEmoji] = useState(false);
|
||||
const [reposting, setReposting] = useState(false);
|
||||
const [reposted, setReposted] = useState(false);
|
||||
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
const REACTION_EMOJIS = ["❤️", "🤙", "🔥", "😂", "🫡", "👀", "⚡"];
|
||||
|
||||
const handleReact = async (emoji?: string) => {
|
||||
if (!loggedIn || liked || liking) return;
|
||||
setLiking(true);
|
||||
setShowEmojiPicker(false);
|
||||
try {
|
||||
await publishReaction(event.id, event.pubkey, emoji || "+");
|
||||
const likedSet = getLiked();
|
||||
likedSet.add(event.id);
|
||||
localStorage.setItem(likedKey, JSON.stringify(Array.from(likedSet)));
|
||||
setLiked(true);
|
||||
adjustReactionCount(1);
|
||||
} finally {
|
||||
setLiking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReply = () => {
|
||||
setShowReply((v) => !v);
|
||||
if (!showReply) setTimeout(() => replyRef.current?.focus(), 50);
|
||||
};
|
||||
|
||||
const handleReplySubmit = async () => {
|
||||
if (!replyText.trim() || replying) return;
|
||||
setReplying(true);
|
||||
setReplyError(null);
|
||||
try {
|
||||
await publishReply(replyText.trim(), { id: event.id, pubkey: event.pubkey });
|
||||
setReplyText("");
|
||||
setReplySent(true);
|
||||
adjustReplyCount(1);
|
||||
setTimeout(() => { setShowReply(false); setReplySent(false); }, 1500);
|
||||
} catch (err) {
|
||||
setReplyError(`Failed: ${err}`);
|
||||
} finally {
|
||||
setReplying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReplyKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleReplySubmit();
|
||||
if (e.key === "Escape") setShowReply(false);
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
const nevent = nip19.neventEncode({ id: event.id!, author: event.pubkey });
|
||||
await navigator.clipboard.writeText("nostr:" + nevent);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleRepost = async () => {
|
||||
if (reposting || reposted) return;
|
||||
setReposting(true);
|
||||
try {
|
||||
await publishRepost(event);
|
||||
setReposted(true);
|
||||
} finally {
|
||||
setReposting(false);
|
||||
}
|
||||
};
|
||||
const [showReply, setShowReply] = useState(false);
|
||||
|
||||
return (
|
||||
<article
|
||||
@@ -250,185 +158,18 @@ export function NoteCard({ event, focused }: NoteCardProps) {
|
||||
|
||||
{/* Actions */}
|
||||
{loggedIn && !!getNDK().signer && (
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
<button
|
||||
onClick={handleReply}
|
||||
className={`text-[11px] transition-colors ${
|
||||
showReply ? "text-accent" : "text-text-dim hover:text-text"
|
||||
}`}
|
||||
>
|
||||
reply{replyCount !== null && replyCount > 0 ? ` ${replyCount}` : ""}
|
||||
</button>
|
||||
<div className="relative flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleReact("❤️")}
|
||||
disabled={liked || liking}
|
||||
className={`text-[11px] transition-colors ${
|
||||
liked ? "text-accent" : "text-text-dim hover:text-accent"
|
||||
} disabled:cursor-default`}
|
||||
>
|
||||
{liked ? "♥" : "♡"}{reactionCount !== null && reactionCount > 0 ? ` ${reactionCount}` : liked ? " liked" : " like"}
|
||||
</button>
|
||||
{!liked && !liking && (
|
||||
<button
|
||||
onClick={() => setShowEmojiPicker((v) => !v)}
|
||||
className="text-[10px] text-text-dim hover:text-accent transition-colors opacity-0 group-hover/card:opacity-100"
|
||||
title="React with emoji"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
)}
|
||||
{showEmojiPicker && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-[9]" onClick={() => setShowEmojiPicker(false)} />
|
||||
<div className="absolute bottom-6 left-0 bg-bg-raised border border-border shadow-lg z-10 flex gap-0.5 px-1.5 py-1">
|
||||
{REACTION_EMOJIS.map((emoji) => (
|
||||
<button
|
||||
key={emoji}
|
||||
onClick={() => handleReact(emoji)}
|
||||
className="text-[16px] hover:scale-125 transition-transform px-0.5"
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRepost}
|
||||
disabled={reposting || reposted}
|
||||
className={`text-[11px] transition-colors disabled:cursor-default ${
|
||||
reposted ? "text-accent" : "text-text-dim hover:text-accent"
|
||||
}`}
|
||||
>
|
||||
{reposted ? "reposted ✓" : reposting ? "…" : "repost"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowQuote(true)}
|
||||
className="text-[11px] text-text-dim hover:text-text transition-colors"
|
||||
>
|
||||
quote
|
||||
</button>
|
||||
{(profile?.lud16 || profile?.lud06) && (
|
||||
<button
|
||||
onClick={() => setShowZap(true)}
|
||||
className="text-[11px] text-text-dim hover:text-zap transition-colors"
|
||||
>
|
||||
{zapData && zapData.totalSats > 0
|
||||
? `⚡ ${zapData.totalSats.toLocaleString()} sats`
|
||||
: "⚡ zap"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => isBookmarked ? removeBookmark(event.id!) : addBookmark(event.id!)}
|
||||
className={`text-[11px] transition-colors ${
|
||||
isBookmarked ? "text-accent" : "text-text-dim hover:text-accent"
|
||||
}`}
|
||||
>
|
||||
{isBookmarked ? "▪ saved" : "▫ save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className={`text-[11px] transition-colors ${
|
||||
copied ? "text-accent" : "text-text-dim hover:text-text"
|
||||
}`}
|
||||
>
|
||||
{copied ? "copied ✓" : "share"}
|
||||
</button>
|
||||
</div>
|
||||
<NoteActions
|
||||
event={event}
|
||||
onReplyToggle={() => setShowReply((v) => !v)}
|
||||
showReply={showReply}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Stats visible when logged out */}
|
||||
{!loggedIn && (
|
||||
<div className="flex items-center gap-3 mt-1.5">
|
||||
{replyCount !== null && replyCount > 0 && (
|
||||
<span className="text-text-dim text-[11px]">↩ {replyCount}</span>
|
||||
)}
|
||||
{reactionCount !== null && reactionCount > 0 && (
|
||||
<span className="text-text-dim text-[11px]">♥ {reactionCount}</span>
|
||||
)}
|
||||
{zapData !== null && zapData.totalSats > 0 && (
|
||||
<span className="text-zap text-[11px]">⚡ {zapData.totalSats.toLocaleString()} sats</span>
|
||||
)}
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className={`text-[11px] transition-colors ${
|
||||
copied ? "text-accent" : "text-text-dim hover:text-text"
|
||||
}`}
|
||||
>
|
||||
{copied ? "copied ✓" : "share"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showZap && (
|
||||
<ZapModal
|
||||
target={{ type: "note", event, recipientPubkey: event.pubkey }}
|
||||
recipientName={name}
|
||||
onClose={() => setShowZap(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showQuote && (
|
||||
<QuoteModal
|
||||
event={event}
|
||||
authorName={name}
|
||||
authorAvatar={avatar}
|
||||
onClose={() => setShowQuote(false)}
|
||||
/>
|
||||
)}
|
||||
{!loggedIn && <LoggedOutStats event={event} />}
|
||||
|
||||
{/* Inline reply box */}
|
||||
{showReply && (
|
||||
<div className="mt-2 border-l-2 border-border pl-3">
|
||||
<textarea
|
||||
ref={replyRef}
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
onKeyDown={handleReplyKeyDown}
|
||||
placeholder={`Reply to ${name}…`}
|
||||
rows={2}
|
||||
className="w-full bg-transparent text-text text-[12px] placeholder:text-text-dim resize-none focus:outline-none"
|
||||
/>
|
||||
{replyError && <p className="text-danger text-[10px] mb-1">{replyError}</p>}
|
||||
<div className="flex items-center justify-end gap-2 mt-1">
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowReplyEmoji((v) => !v)}
|
||||
title="Insert emoji"
|
||||
className="text-text-dim hover:text-text text-[12px] transition-colors"
|
||||
>
|
||||
☺
|
||||
</button>
|
||||
{showReplyEmoji && (
|
||||
<EmojiPicker
|
||||
onSelect={(emoji) => {
|
||||
const ta = replyRef.current;
|
||||
if (ta) {
|
||||
const start = ta.selectionStart ?? replyText.length;
|
||||
const end = ta.selectionEnd ?? replyText.length;
|
||||
setReplyText(replyText.slice(0, start) + emoji + replyText.slice(end));
|
||||
setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + emoji.length; ta.focus(); }, 0);
|
||||
} else {
|
||||
setReplyText((t) => t + emoji);
|
||||
}
|
||||
}}
|
||||
onClose={() => setShowReplyEmoji(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-text-dim text-[10px]">Ctrl+Enter</span>
|
||||
<button
|
||||
onClick={handleReplySubmit}
|
||||
disabled={!replyText.trim() || replying}
|
||||
className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
{replySent ? "replied ✓" : replying ? "posting…" : "reply"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{showReply && <InlineReplyBox event={event} name={name} />}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { NDKEvent, nip19 } from "@nostr-dev-kit/ndk";
|
||||
import { useEffect, useState } from "react";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { useUIStore } from "../../stores/ui";
|
||||
import { fetchNoteById } from "../../lib/nostr";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { shortenPubkey } from "../../lib/utils";
|
||||
import { ImageLightbox } from "../shared/ImageLightbox";
|
||||
import { parseContent } from "../../lib/parsing";
|
||||
import { renderTextSegments } from "./TextSegments";
|
||||
import { VideoBlock, AudioBlock, YouTubeCard, VimeoCard, SpotifyCard, TidalCard } from "./MediaCards";
|
||||
|
||||
function ImageGrid({ images, onImageClick }: { images: string[]; onImageClick: (index: number) => void }) {
|
||||
const count = images.length;
|
||||
@@ -107,45 +109,6 @@ function ImageGrid({ images, onImageClick }: { images: string[]; onImageClick: (
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Returns true if we handled the URL internally (njump.me interception).
|
||||
function tryHandleUrlInternally(url: string): boolean {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
if (u.hostname === "njump.me") {
|
||||
const entity = u.pathname.replace(/^\//, "");
|
||||
if (entity) return tryOpenNostrEntity(entity);
|
||||
}
|
||||
} catch { /* not a valid URL */ }
|
||||
return false;
|
||||
}
|
||||
|
||||
// Decodes a NIP-19 bech32 string and navigates internally where possible.
|
||||
// Returns true if handled, false if the caller should fall back to a browser open.
|
||||
function tryOpenNostrEntity(raw: string): boolean {
|
||||
try {
|
||||
const decoded = nip19.decode(raw);
|
||||
const { openProfile, openArticle } = useUIStore.getState();
|
||||
if (decoded.type === "npub") {
|
||||
openProfile(decoded.data as string);
|
||||
return true;
|
||||
}
|
||||
if (decoded.type === "nprofile") {
|
||||
openProfile((decoded.data as { pubkey: string }).pubkey);
|
||||
return true;
|
||||
}
|
||||
if (decoded.type === "naddr") {
|
||||
const { kind } = decoded.data as { kind: number; pubkey: string; identifier: string };
|
||||
if (kind === 30023) {
|
||||
openArticle(raw);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// note / nevent / other naddr kinds — fall through to njump.me
|
||||
} catch { /* invalid entity */ }
|
||||
return false;
|
||||
}
|
||||
|
||||
function QuotePreview({ eventId }: { eventId: string }) {
|
||||
const [event, setEvent] = useState<NDKEvent | null>(null);
|
||||
const { openThread, currentView } = useUIStore();
|
||||
@@ -178,13 +141,6 @@ function QuotePreview({ eventId }: { eventId: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function MentionName({ pubkey, fallback }: { pubkey?: string; fallback: string }) {
|
||||
const profile = useProfile(pubkey ?? "");
|
||||
if (!pubkey) return <>{fallback}</>;
|
||||
const name = profile?.displayName || profile?.name;
|
||||
return <>{name || fallback}</>;
|
||||
}
|
||||
|
||||
interface NoteContentProps {
|
||||
content: string;
|
||||
/** Render only inline text (no media blocks). Used inside the clickable area. */
|
||||
@@ -208,60 +164,11 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
|
||||
// --- Inline text + images (safe inside clickable wrapper) ---
|
||||
if (inline) {
|
||||
const inlineElements: ReactNode[] = [];
|
||||
segments.forEach((seg, i) => {
|
||||
switch (seg.type) {
|
||||
case "text":
|
||||
inlineElements.push(<span key={i}>{seg.value}</span>);
|
||||
break;
|
||||
case "link":
|
||||
inlineElements.push(
|
||||
<a
|
||||
key={i}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:text-accent-hover underline underline-offset-2 decoration-accent/40"
|
||||
onClick={(e) => {
|
||||
if (tryHandleUrlInternally(seg.value)) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{seg.display}
|
||||
</a>
|
||||
);
|
||||
break;
|
||||
case "mention":
|
||||
inlineElements.push(
|
||||
<span
|
||||
key={i}
|
||||
className="text-accent cursor-pointer hover:text-accent-hover"
|
||||
onClick={(e) => { e.stopPropagation(); tryOpenNostrEntity(seg.value); }}
|
||||
>
|
||||
@<MentionName pubkey={seg.mentionPubkey} fallback={seg.display ?? seg.value.slice(0, 12) + "…"} />
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
case "hashtag":
|
||||
inlineElements.push(
|
||||
<span
|
||||
key={i}
|
||||
className="text-accent/80 cursor-pointer hover:text-accent"
|
||||
onClick={(e) => { e.stopPropagation(); openHashtag(seg.value); }}
|
||||
>
|
||||
{seg.display}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<div className="note-content text-text text-[13px] break-words whitespace-pre-wrap leading-relaxed">
|
||||
{inlineElements}
|
||||
{renderTextSegments(segments, openHashtag, { resolveMentions: true })}
|
||||
</div>
|
||||
{/* Images stay inside the clickable area (they have their own stopPropagation) */}
|
||||
<ImageGrid images={images} onImageClick={setLightboxIndex} />
|
||||
{lightboxIndex !== null && (
|
||||
<ImageLightbox
|
||||
@@ -283,179 +190,22 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
|
||||
return (
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
{/* Videos */}
|
||||
{videos.length > 0 && (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{videos.map((src, i) => (
|
||||
<video
|
||||
key={i}
|
||||
src={src}
|
||||
controls
|
||||
playsInline
|
||||
preload="metadata"
|
||||
className="max-w-full max-h-80 rounded-sm bg-bg-raised border border-border"
|
||||
onError={(e) => { (e.target as HTMLVideoElement).style.display = "none"; }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Audio */}
|
||||
{audios.length > 0 && (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{audios.map((src, i) => {
|
||||
const filename = src.split("/").pop()?.split("?")[0] ?? src;
|
||||
return (
|
||||
<div key={i} className="rounded-sm bg-bg-raised border border-border p-2">
|
||||
<div className="text-[11px] text-text-muted mb-1 truncate">{filename}</div>
|
||||
<audio controls preload="metadata" className="w-full h-8" src={src} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* YouTube — open in browser (WebKitGTK can't play YouTube iframes) */}
|
||||
{youtubes.map((seg, i) => (
|
||||
<a
|
||||
key={`yt-${i}`}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={`https://img.youtube.com/vi/${seg.mediaId}/hqdefault.jpg`}
|
||||
alt=""
|
||||
className="w-28 h-16 rounded-sm object-cover shrink-0"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">YouTube</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Vimeo — open in browser */}
|
||||
{vimeos.map((seg, i) => (
|
||||
<a
|
||||
key={`vim-${i}`}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-black/40 flex items-center justify-center shrink-0">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20" fill="white"><polygon points="6,3 17,10 6,17" /></svg>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Vimeo</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Spotify — open in browser/app */}
|
||||
{spotifys.map((seg, i) => (
|
||||
<a
|
||||
key={`sp-${i}`}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-[#1DB954]/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-[#1DB954] text-lg font-bold">S</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Spotify · {seg.mediaType}</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Tidal — open in browser/app */}
|
||||
{tidals.map((seg, i) => (
|
||||
<a
|
||||
key={`td-${i}`}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center shrink-0">
|
||||
<span className="text-white text-lg font-bold">T</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Tidal · {seg.mediaType}</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Quoted notes */}
|
||||
{quoteIds.map((id) => (
|
||||
<QuotePreview key={id} eventId={id} />
|
||||
))}
|
||||
<VideoBlock sources={videos} />
|
||||
<AudioBlock sources={audios} />
|
||||
{youtubes.map((seg, i) => <YouTubeCard key={`yt-${i}`} seg={seg} />)}
|
||||
{vimeos.map((seg, i) => <VimeoCard key={`vim-${i}`} seg={seg} />)}
|
||||
{spotifys.map((seg, i) => <SpotifyCard key={`sp-${i}`} seg={seg} />)}
|
||||
{tidals.map((seg, i) => <TidalCard key={`td-${i}`} seg={seg} />)}
|
||||
{quoteIds.map((id) => <QuotePreview key={id} eventId={id} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Default: full render (used in ThreadView, SearchView, etc.) ---
|
||||
const inlineElements: ReactNode[] = [];
|
||||
segments.forEach((seg, i) => {
|
||||
switch (seg.type) {
|
||||
case "text":
|
||||
inlineElements.push(<span key={i}>{seg.value}</span>);
|
||||
break;
|
||||
case "link":
|
||||
inlineElements.push(
|
||||
<a
|
||||
key={i}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:text-accent-hover underline underline-offset-2 decoration-accent/40"
|
||||
onClick={(e) => {
|
||||
if (tryHandleUrlInternally(seg.value)) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{seg.display}
|
||||
</a>
|
||||
);
|
||||
break;
|
||||
case "mention":
|
||||
inlineElements.push(
|
||||
<span
|
||||
key={i}
|
||||
className="text-accent cursor-pointer hover:text-accent-hover"
|
||||
onClick={(e) => { e.stopPropagation(); tryOpenNostrEntity(seg.value); }}
|
||||
>
|
||||
@{seg.display}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
case "hashtag":
|
||||
inlineElements.push(
|
||||
<span
|
||||
key={i}
|
||||
className="text-accent/80 cursor-pointer hover:text-accent"
|
||||
onClick={(e) => { e.stopPropagation(); openHashtag(seg.value); }}
|
||||
>
|
||||
{seg.display}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="note-content text-text text-[13px] break-words whitespace-pre-wrap leading-relaxed">
|
||||
{inlineElements}
|
||||
{renderTextSegments(segments, openHashtag)}
|
||||
</div>
|
||||
|
||||
<ImageGrid images={images} onImageClick={setLightboxIndex} />
|
||||
@@ -469,90 +219,13 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
/>
|
||||
)}
|
||||
|
||||
{videos.length > 0 && (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{videos.map((src, i) => (
|
||||
<video
|
||||
key={i}
|
||||
src={src}
|
||||
controls
|
||||
playsInline
|
||||
preload="metadata"
|
||||
className="max-w-full max-h-80 rounded-sm bg-bg-raised border border-border"
|
||||
onError={(e) => { (e.target as HTMLVideoElement).style.display = "none"; }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{audios.length > 0 && (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{audios.map((src, i) => {
|
||||
const filename = src.split("/").pop()?.split("?")[0] ?? src;
|
||||
return (
|
||||
<div key={i} className="rounded-sm bg-bg-raised border border-border p-2">
|
||||
<div className="text-[11px] text-text-muted mb-1 truncate">{filename}</div>
|
||||
<audio controls preload="metadata" className="w-full h-8" src={src} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{youtubes.map((seg, i) => (
|
||||
<a key={`yt-${i}`} href={seg.value} target="_blank" rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer">
|
||||
<img src={`https://img.youtube.com/vi/${seg.mediaId}/hqdefault.jpg`} alt=""
|
||||
className="w-28 h-16 rounded-sm object-cover shrink-0" loading="lazy" />
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">YouTube</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{vimeos.map((seg, i) => (
|
||||
<a key={`vim-${i}`} href={seg.value} target="_blank" rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer">
|
||||
<div className="w-10 h-10 rounded-full bg-black/40 flex items-center justify-center shrink-0">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20" fill="white"><polygon points="6,3 17,10 6,17" /></svg>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Vimeo</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{spotifys.map((seg, i) => (
|
||||
<a key={`sp-${i}`} href={seg.value} target="_blank" rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer">
|
||||
<div className="w-10 h-10 rounded-full bg-[#1DB954]/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-[#1DB954] text-lg font-bold">S</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Spotify · {seg.mediaType}</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{tidals.map((seg, i) => (
|
||||
<a key={`td-${i}`} href={seg.value} target="_blank" rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer">
|
||||
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center shrink-0">
|
||||
<span className="text-white text-lg font-bold">T</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Tidal · {seg.mediaType}</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{quoteIds.map((id) => (
|
||||
<QuotePreview key={id} eventId={id} />
|
||||
))}
|
||||
<VideoBlock sources={videos} />
|
||||
<AudioBlock sources={audios} />
|
||||
{youtubes.map((seg, i) => <YouTubeCard key={`yt-${i}`} seg={seg} />)}
|
||||
{vimeos.map((seg, i) => <VimeoCard key={`vim-${i}`} seg={seg} />)}
|
||||
{spotifys.map((seg, i) => <SpotifyCard key={`sp-${i}`} seg={seg} />)}
|
||||
{tidals.map((seg, i) => <TidalCard key={`td-${i}`} seg={seg} />)}
|
||||
{quoteIds.map((id) => <QuotePreview key={id} eventId={id} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
116
src/components/feed/TextSegments.tsx
Normal file
116
src/components/feed/TextSegments.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { ReactNode } from "react";
|
||||
import { nip19 } from "@nostr-dev-kit/ndk";
|
||||
import { useUIStore } from "../../stores/ui";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { ContentSegment } from "../../lib/parsing";
|
||||
|
||||
// Returns true if we handled the URL internally (njump.me interception).
|
||||
export function tryHandleUrlInternally(url: string): boolean {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
if (u.hostname === "njump.me") {
|
||||
const entity = u.pathname.replace(/^\//, "");
|
||||
if (entity) return tryOpenNostrEntity(entity);
|
||||
}
|
||||
} catch { /* not a valid URL */ }
|
||||
return false;
|
||||
}
|
||||
|
||||
// Decodes a NIP-19 bech32 string and navigates internally where possible.
|
||||
// Returns true if handled, false if the caller should fall back to a browser open.
|
||||
export function tryOpenNostrEntity(raw: string): boolean {
|
||||
try {
|
||||
const decoded = nip19.decode(raw);
|
||||
const { openProfile, openArticle } = useUIStore.getState();
|
||||
if (decoded.type === "npub") {
|
||||
openProfile(decoded.data as string);
|
||||
return true;
|
||||
}
|
||||
if (decoded.type === "nprofile") {
|
||||
openProfile((decoded.data as { pubkey: string }).pubkey);
|
||||
return true;
|
||||
}
|
||||
if (decoded.type === "naddr") {
|
||||
const { kind } = decoded.data as { kind: number; pubkey: string; identifier: string };
|
||||
if (kind === 30023) {
|
||||
openArticle(raw);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// note / nevent / other naddr kinds — fall through to njump.me
|
||||
} catch { /* invalid entity */ }
|
||||
return false;
|
||||
}
|
||||
|
||||
export function MentionName({ pubkey, fallback }: { pubkey?: string; fallback: string }) {
|
||||
const profile = useProfile(pubkey ?? "");
|
||||
if (!pubkey) return <>{fallback}</>;
|
||||
const name = profile?.displayName || profile?.name;
|
||||
return <>{name || fallback}</>;
|
||||
}
|
||||
|
||||
interface RenderTextSegmentsOptions {
|
||||
/** If true, use MentionName component for mentions (inline mode). If false, use seg.display directly. */
|
||||
resolveMentions?: boolean;
|
||||
}
|
||||
|
||||
export function renderTextSegments(
|
||||
segments: ContentSegment[],
|
||||
openHashtag: (tag: string) => void,
|
||||
options: RenderTextSegmentsOptions = {}
|
||||
): ReactNode[] {
|
||||
const { resolveMentions = false } = options;
|
||||
const elements: ReactNode[] = [];
|
||||
|
||||
segments.forEach((seg, i) => {
|
||||
switch (seg.type) {
|
||||
case "text":
|
||||
elements.push(<span key={i}>{seg.value}</span>);
|
||||
break;
|
||||
case "link":
|
||||
elements.push(
|
||||
<a
|
||||
key={i}
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:text-accent-hover underline underline-offset-2 decoration-accent/40"
|
||||
onClick={(e) => {
|
||||
if (tryHandleUrlInternally(seg.value)) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{seg.display}
|
||||
</a>
|
||||
);
|
||||
break;
|
||||
case "mention":
|
||||
elements.push(
|
||||
<span
|
||||
key={i}
|
||||
className="text-accent cursor-pointer hover:text-accent-hover"
|
||||
onClick={(e) => { e.stopPropagation(); tryOpenNostrEntity(seg.value); }}
|
||||
>
|
||||
@{resolveMentions
|
||||
? <MentionName pubkey={seg.mentionPubkey} fallback={seg.display ?? seg.value.slice(0, 12) + "…"} />
|
||||
: seg.display}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
case "hashtag":
|
||||
elements.push(
|
||||
<span
|
||||
key={i}
|
||||
className="text-accent/80 cursor-pointer hover:text-accent"
|
||||
onClick={(e) => { e.stopPropagation(); openHashtag(seg.value); }}
|
||||
>
|
||||
{seg.display}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
return elements;
|
||||
}
|
||||
96
src/components/profile/EditProfileForm.tsx
Normal file
96
src/components/profile/EditProfileForm.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useState } from "react";
|
||||
import { useUserStore } from "../../stores/user";
|
||||
import { invalidateProfileCache } from "../../hooks/useProfile";
|
||||
import { publishProfile } from "../../lib/nostr";
|
||||
import { ImageField } from "./ImageField";
|
||||
import { Nip05Field } from "./Nip05Field";
|
||||
|
||||
export function EditProfileForm({ pubkey, onSaved }: { pubkey: string; onSaved: () => void }) {
|
||||
const { profile, fetchOwnProfile } = useUserStore();
|
||||
const [name, setName] = useState(profile?.name || "");
|
||||
const [displayName, setDisplayName] = useState(profile?.displayName || "");
|
||||
const [about, setAbout] = useState(profile?.about || "");
|
||||
const [picture, setPicture] = useState(profile?.picture || "");
|
||||
const [banner, setBanner] = useState(profile?.banner || "");
|
||||
const [website, setWebsite] = useState(profile?.website || "");
|
||||
const [nip05, setNip05] = useState(profile?.nip05 || "");
|
||||
const [lud16, setLud16] = useState(profile?.lud16 || "");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
invalidateProfileCache(pubkey);
|
||||
await publishProfile({
|
||||
name: name.trim() || undefined,
|
||||
display_name: displayName.trim() || undefined,
|
||||
about: about.trim() || undefined,
|
||||
picture: picture.trim() || undefined,
|
||||
banner: banner.trim() || undefined,
|
||||
website: website.trim() || undefined,
|
||||
nip05: nip05.trim() || undefined,
|
||||
lud16: lud16.trim() || undefined,
|
||||
});
|
||||
await fetchOwnProfile();
|
||||
setSaved(true);
|
||||
setTimeout(onSaved, 1000);
|
||||
} catch (err) {
|
||||
setError(`Failed to save: ${err}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const field = (label: string, value: string, onChange: (v: string) => void, placeholder = "") => (
|
||||
<div>
|
||||
<label className="text-text-dim text-[10px] block mb-1">{label}</label>
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="px-4 py-4 border-b border-border">
|
||||
<div className="grid grid-cols-2 gap-3 mb-3">
|
||||
{field("Display name", displayName, setDisplayName, "Square that Circle")}
|
||||
{field("Username", name, setName, "squarethecircle")}
|
||||
<Nip05Field value={nip05} onChange={setNip05} pubkey={pubkey} />
|
||||
{field("Lightning address (lud16)", lud16, setLud16, "you@walletofsatoshi.com")}
|
||||
{field("Website", website, setWebsite, "https://…")}
|
||||
<ImageField label="Profile picture" value={picture} onChange={setPicture} />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="text-text-dim text-[10px] block mb-1">Bio</label>
|
||||
<textarea
|
||||
value={about}
|
||||
onChange={(e) => setAbout(e.target.value)}
|
||||
placeholder="Tell people about yourself…"
|
||||
rows={3}
|
||||
className="w-full bg-bg border border-border px-3 py-1.5 text-text text-[12px] resize-none focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<ImageField label="Banner image" value={banner} onChange={setBanner} />
|
||||
</div>
|
||||
{error && <p className="text-danger text-[11px] mb-2">{error}</p>}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || saved}
|
||||
className="px-4 py-1.5 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
{saved ? "saved ✓" : saving ? "saving…" : "save profile"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
src/components/profile/ImageField.tsx
Normal file
50
src/components/profile/ImageField.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { uploadImage } from "../../lib/upload";
|
||||
|
||||
export function ImageField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadError, setUploadError] = useState<string | null>(null);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
setUploadError(null);
|
||||
try {
|
||||
const url = await uploadImage(file);
|
||||
onChange(url);
|
||||
} catch (err) {
|
||||
setUploadError(String(err));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="text-text-dim text-[10px] block mb-1">{label}</label>
|
||||
<div className="flex gap-1.5">
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="https://… or click upload →"
|
||||
className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="px-2 py-1.5 text-[10px] border border-border text-text-dim hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
|
||||
title="Upload from your computer"
|
||||
>
|
||||
{uploading ? "uploading…" : "upload"}
|
||||
</button>
|
||||
</div>
|
||||
{uploadError && <p className="text-danger text-[10px] mt-1">{uploadError}</p>}
|
||||
<input ref={fileRef} type="file" accept="image/*" onChange={handleFile} className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
62
src/components/profile/Nip05Field.tsx
Normal file
62
src/components/profile/Nip05Field.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Nip05Status = "idle" | "checking" | "valid" | "mismatch" | "notfound";
|
||||
|
||||
export function Nip05Field({ value, onChange, pubkey }: { value: string; onChange: (v: string) => void; pubkey: string }) {
|
||||
const [status, setStatus] = useState<Nip05Status>("idle");
|
||||
|
||||
useEffect(() => {
|
||||
if (!value.includes("@")) { setStatus("idle"); return; }
|
||||
setStatus("checking");
|
||||
const t = setTimeout(async () => {
|
||||
const [name, domain] = value.trim().split("@");
|
||||
if (!name || !domain) { setStatus("notfound"); return; }
|
||||
try {
|
||||
const resp = await fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`);
|
||||
const data = await resp.json();
|
||||
const resolved = data.names?.[name];
|
||||
if (!resolved) setStatus("notfound");
|
||||
else if (resolved === pubkey) setStatus("valid");
|
||||
else setStatus("mismatch");
|
||||
} catch {
|
||||
setStatus("notfound");
|
||||
}
|
||||
}, 900);
|
||||
return () => clearTimeout(t);
|
||||
}, [value, pubkey]);
|
||||
|
||||
const badge = {
|
||||
idle: null,
|
||||
checking: <span className="text-text-dim text-[10px]">checking…</span>,
|
||||
valid: <span className="text-success text-[10px]">✓ verified</span>,
|
||||
mismatch: <span className="text-danger text-[10px]">✗ pubkey mismatch</span>,
|
||||
notfound: <span className="text-danger text-[10px]">✗ not found</span>,
|
||||
}[status];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-baseline gap-2 mb-1">
|
||||
<label className="text-text-dim text-[10px]">NIP-05 verified name</label>
|
||||
{badge}
|
||||
</div>
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="you@domain.com"
|
||||
className="w-full bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
<p className="text-text-dim text-[10px] mt-1">
|
||||
Proves your identity via a domain you control.{" "}
|
||||
<a
|
||||
href="https://nostr.how/en/guides/get-verified"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:text-accent-hover transition-colors"
|
||||
>
|
||||
How to get verified ↗
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
src/components/profile/ProfileMediaGallery.tsx
Normal file
130
src/components/profile/ProfileMediaGallery.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { useState } from "react";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { useUIStore } from "../../stores/ui";
|
||||
import { parseContent } from "../../lib/parsing";
|
||||
import { ImageLightbox } from "../shared/ImageLightbox";
|
||||
|
||||
const MEDIA_SEGMENT_TYPES = new Set(["image", "video", "audio", "youtube", "vimeo"]);
|
||||
|
||||
interface MediaItem {
|
||||
type: "image" | "video" | "audio";
|
||||
url: string;
|
||||
thumbnailId?: string;
|
||||
noteId: string;
|
||||
}
|
||||
|
||||
function extractMediaItems(notes: NDKEvent[]): MediaItem[] {
|
||||
const items: MediaItem[] = [];
|
||||
const seen = new Set<string>();
|
||||
for (const note of notes) {
|
||||
const segments = parseContent(note.content);
|
||||
for (const seg of segments) {
|
||||
if (!MEDIA_SEGMENT_TYPES.has(seg.type)) continue;
|
||||
if (seen.has(seg.value)) continue;
|
||||
seen.add(seg.value);
|
||||
if (seg.type === "image") {
|
||||
items.push({ type: "image", url: seg.value, noteId: note.id! });
|
||||
} else if (seg.type === "video" || seg.type === "youtube" || seg.type === "vimeo") {
|
||||
items.push({ type: "video", url: seg.value, thumbnailId: seg.mediaId, noteId: note.id! });
|
||||
} else if (seg.type === "audio") {
|
||||
items.push({ type: "audio", url: seg.value, noteId: note.id! });
|
||||
}
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
export function ProfileMediaGallery({ notes, loading }: { notes: NDKEvent[]; loading: boolean }) {
|
||||
const { openThread } = useUIStore();
|
||||
const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
|
||||
|
||||
if (loading) {
|
||||
return <div className="px-4 py-8 text-text-dim text-[12px] text-center">Loading media…</div>;
|
||||
}
|
||||
|
||||
const items = extractMediaItems(notes);
|
||||
const imageUrls = items.filter((i) => i.type === "image").map((i) => i.url);
|
||||
|
||||
if (items.length === 0) {
|
||||
return <div className="px-4 py-8 text-text-dim text-[12px] text-center">No media found.</div>;
|
||||
}
|
||||
|
||||
const openNote = (noteId: string) => {
|
||||
const note = notes.find((n) => n.id === noteId);
|
||||
if (note) openThread(note, "profile");
|
||||
};
|
||||
|
||||
let imageIndex = 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 xl:grid-cols-3 gap-1 p-2">
|
||||
{items.map((item, idx) => {
|
||||
if (item.type === "image") {
|
||||
const currentImageIdx = imageIndex++;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="aspect-square overflow-hidden bg-bg-raised cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => setLightboxIdx(currentImageIdx)}
|
||||
>
|
||||
<img
|
||||
src={item.url}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (item.type === "video") {
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="aspect-square overflow-hidden bg-bg-raised cursor-pointer hover:opacity-80 transition-opacity relative flex items-center justify-center"
|
||||
onClick={() => openNote(item.noteId)}
|
||||
>
|
||||
{item.thumbnailId ? (
|
||||
<img
|
||||
src={`https://img.youtube.com/vi/${item.thumbnailId}/mqdefault.jpg`}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-bg-raised" />
|
||||
)}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="w-10 h-10 rounded-full bg-black/60 flex items-center justify-center text-white text-lg">▶</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// audio
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="aspect-square overflow-hidden bg-bg-raised cursor-pointer hover:opacity-80 transition-opacity flex items-center justify-center"
|
||||
onClick={() => openNote(item.noteId)}
|
||||
>
|
||||
<div className="text-center">
|
||||
<span className="text-3xl text-text-dim">♪</span>
|
||||
<p className="text-text-dim text-[10px] mt-1 px-2 truncate">{item.url.split("/").pop()}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{lightboxIdx !== null && (
|
||||
<ImageLightbox
|
||||
images={imageUrls}
|
||||
index={lightboxIdx}
|
||||
onClose={() => setLightboxIdx(null)}
|
||||
onNavigate={(i) => setLightboxIdx(i)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,218 +1,17 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import { useUIStore } from "../../stores/ui";
|
||||
import { useUserStore } from "../../stores/user";
|
||||
import { useMuteStore } from "../../stores/mute";
|
||||
import { useProfile, invalidateProfileCache } from "../../hooks/useProfile";
|
||||
import { fetchUserNotesNIP65, fetchAuthorArticles, publishProfile, getNDK } from "../../lib/nostr";
|
||||
import { parseContent } from "../../lib/parsing";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { fetchUserNotesNIP65, fetchAuthorArticles, getNDK } from "../../lib/nostr";
|
||||
import { shortenPubkey } from "../../lib/utils";
|
||||
import { uploadImage } from "../../lib/upload";
|
||||
import { NoteCard } from "../feed/NoteCard";
|
||||
import { ArticleCard } from "../article/ArticleCard";
|
||||
import { ZapModal } from "../zap/ZapModal";
|
||||
import { ImageLightbox } from "../shared/ImageLightbox";
|
||||
|
||||
// ── Profile helper sub-components ────────────────────────────────────────────
|
||||
|
||||
function ImageField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadError, setUploadError] = useState<string | null>(null);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
setUploadError(null);
|
||||
try {
|
||||
const url = await uploadImage(file);
|
||||
onChange(url);
|
||||
} catch (err) {
|
||||
setUploadError(String(err));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="text-text-dim text-[10px] block mb-1">{label}</label>
|
||||
<div className="flex gap-1.5">
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="https://… or click upload →"
|
||||
className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="px-2 py-1.5 text-[10px] border border-border text-text-dim hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
|
||||
title="Upload from your computer"
|
||||
>
|
||||
{uploading ? "uploading…" : "upload"}
|
||||
</button>
|
||||
</div>
|
||||
{uploadError && <p className="text-danger text-[10px] mt-1">{uploadError}</p>}
|
||||
<input ref={fileRef} type="file" accept="image/*" onChange={handleFile} className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type Nip05Status = "idle" | "checking" | "valid" | "mismatch" | "notfound";
|
||||
|
||||
function Nip05Field({ value, onChange, pubkey }: { value: string; onChange: (v: string) => void; pubkey: string }) {
|
||||
const [status, setStatus] = useState<Nip05Status>("idle");
|
||||
|
||||
useEffect(() => {
|
||||
if (!value.includes("@")) { setStatus("idle"); return; }
|
||||
setStatus("checking");
|
||||
const t = setTimeout(async () => {
|
||||
const [name, domain] = value.trim().split("@");
|
||||
if (!name || !domain) { setStatus("notfound"); return; }
|
||||
try {
|
||||
const resp = await fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`);
|
||||
const data = await resp.json();
|
||||
const resolved = data.names?.[name];
|
||||
if (!resolved) setStatus("notfound");
|
||||
else if (resolved === pubkey) setStatus("valid");
|
||||
else setStatus("mismatch");
|
||||
} catch {
|
||||
setStatus("notfound");
|
||||
}
|
||||
}, 900);
|
||||
return () => clearTimeout(t);
|
||||
}, [value, pubkey]);
|
||||
|
||||
const badge = {
|
||||
idle: null,
|
||||
checking: <span className="text-text-dim text-[10px]">checking…</span>,
|
||||
valid: <span className="text-success text-[10px]">✓ verified</span>,
|
||||
mismatch: <span className="text-danger text-[10px]">✗ pubkey mismatch</span>,
|
||||
notfound: <span className="text-danger text-[10px]">✗ not found</span>,
|
||||
}[status];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-baseline gap-2 mb-1">
|
||||
<label className="text-text-dim text-[10px]">NIP-05 verified name</label>
|
||||
{badge}
|
||||
</div>
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="you@domain.com"
|
||||
className="w-full bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
<p className="text-text-dim text-[10px] mt-1">
|
||||
Proves your identity via a domain you control.{" "}
|
||||
<a
|
||||
href="https://nostr.how/en/guides/get-verified"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:text-accent-hover transition-colors"
|
||||
>
|
||||
How to get verified ↗
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EditProfileForm({ pubkey, onSaved }: { pubkey: string; onSaved: () => void }) {
|
||||
const { profile, fetchOwnProfile } = useUserStore();
|
||||
const [name, setName] = useState(profile?.name || "");
|
||||
const [displayName, setDisplayName] = useState(profile?.displayName || "");
|
||||
const [about, setAbout] = useState(profile?.about || "");
|
||||
const [picture, setPicture] = useState(profile?.picture || "");
|
||||
const [banner, setBanner] = useState(profile?.banner || "");
|
||||
const [website, setWebsite] = useState(profile?.website || "");
|
||||
const [nip05, setNip05] = useState(profile?.nip05 || "");
|
||||
const [lud16, setLud16] = useState(profile?.lud16 || "");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
invalidateProfileCache(pubkey);
|
||||
await publishProfile({
|
||||
name: name.trim() || undefined,
|
||||
display_name: displayName.trim() || undefined,
|
||||
about: about.trim() || undefined,
|
||||
picture: picture.trim() || undefined,
|
||||
banner: banner.trim() || undefined,
|
||||
website: website.trim() || undefined,
|
||||
nip05: nip05.trim() || undefined,
|
||||
lud16: lud16.trim() || undefined,
|
||||
});
|
||||
await fetchOwnProfile();
|
||||
setSaved(true);
|
||||
setTimeout(onSaved, 1000);
|
||||
} catch (err) {
|
||||
setError(`Failed to save: ${err}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const field = (label: string, value: string, onChange: (v: string) => void, placeholder = "") => (
|
||||
<div>
|
||||
<label className="text-text-dim text-[10px] block mb-1">{label}</label>
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="px-4 py-4 border-b border-border">
|
||||
<div className="grid grid-cols-2 gap-3 mb-3">
|
||||
{field("Display name", displayName, setDisplayName, "Square that Circle")}
|
||||
{field("Username", name, setName, "squarethecircle")}
|
||||
<Nip05Field value={nip05} onChange={setNip05} pubkey={pubkey} />
|
||||
{field("Lightning address (lud16)", lud16, setLud16, "you@walletofsatoshi.com")}
|
||||
{field("Website", website, setWebsite, "https://…")}
|
||||
<ImageField label="Profile picture" value={picture} onChange={setPicture} />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="text-text-dim text-[10px] block mb-1">Bio</label>
|
||||
<textarea
|
||||
value={about}
|
||||
onChange={(e) => setAbout(e.target.value)}
|
||||
placeholder="Tell people about yourself…"
|
||||
rows={3}
|
||||
className="w-full bg-bg border border-border px-3 py-1.5 text-text text-[12px] resize-none focus:outline-none focus:border-accent/50"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<ImageField label="Banner image" value={banner} onChange={setBanner} />
|
||||
</div>
|
||||
{error && <p className="text-danger text-[11px] mb-2">{error}</p>}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || saved}
|
||||
className="px-4 py-1.5 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
{saved ? "saved ✓" : saving ? "saving…" : "save profile"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import { EditProfileForm } from "./EditProfileForm";
|
||||
import { ProfileMediaGallery } from "./ProfileMediaGallery";
|
||||
|
||||
export function ProfileView() {
|
||||
const { selectedPubkey, goBack, openDM } = useUIStore();
|
||||
@@ -467,130 +266,3 @@ export function ProfileView() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Media gallery sub-component ──────────────────────────────────────────────
|
||||
|
||||
const MEDIA_SEGMENT_TYPES = new Set(["image", "video", "audio", "youtube", "vimeo"]);
|
||||
|
||||
interface MediaItem {
|
||||
type: "image" | "video" | "audio";
|
||||
url: string;
|
||||
thumbnailId?: string;
|
||||
noteId: string;
|
||||
}
|
||||
|
||||
function extractMediaItems(notes: NDKEvent[]): MediaItem[] {
|
||||
const items: MediaItem[] = [];
|
||||
const seen = new Set<string>();
|
||||
for (const note of notes) {
|
||||
const segments = parseContent(note.content);
|
||||
for (const seg of segments) {
|
||||
if (!MEDIA_SEGMENT_TYPES.has(seg.type)) continue;
|
||||
if (seen.has(seg.value)) continue;
|
||||
seen.add(seg.value);
|
||||
if (seg.type === "image") {
|
||||
items.push({ type: "image", url: seg.value, noteId: note.id! });
|
||||
} else if (seg.type === "video" || seg.type === "youtube" || seg.type === "vimeo") {
|
||||
items.push({ type: "video", url: seg.value, thumbnailId: seg.mediaId, noteId: note.id! });
|
||||
} else if (seg.type === "audio") {
|
||||
items.push({ type: "audio", url: seg.value, noteId: note.id! });
|
||||
}
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
function ProfileMediaGallery({ notes, loading }: { notes: NDKEvent[]; loading: boolean }) {
|
||||
const { openThread } = useUIStore();
|
||||
const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
|
||||
|
||||
if (loading) {
|
||||
return <div className="px-4 py-8 text-text-dim text-[12px] text-center">Loading media…</div>;
|
||||
}
|
||||
|
||||
const items = extractMediaItems(notes);
|
||||
const imageUrls = items.filter((i) => i.type === "image").map((i) => i.url);
|
||||
|
||||
if (items.length === 0) {
|
||||
return <div className="px-4 py-8 text-text-dim text-[12px] text-center">No media found.</div>;
|
||||
}
|
||||
|
||||
const openNote = (noteId: string) => {
|
||||
const note = notes.find((n) => n.id === noteId);
|
||||
if (note) openThread(note, "profile");
|
||||
};
|
||||
|
||||
let imageIndex = 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 xl:grid-cols-3 gap-1 p-2">
|
||||
{items.map((item, idx) => {
|
||||
if (item.type === "image") {
|
||||
const currentImageIdx = imageIndex++;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="aspect-square overflow-hidden bg-bg-raised cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => setLightboxIdx(currentImageIdx)}
|
||||
>
|
||||
<img
|
||||
src={item.url}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (item.type === "video") {
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="aspect-square overflow-hidden bg-bg-raised cursor-pointer hover:opacity-80 transition-opacity relative flex items-center justify-center"
|
||||
onClick={() => openNote(item.noteId)}
|
||||
>
|
||||
{item.thumbnailId ? (
|
||||
<img
|
||||
src={`https://img.youtube.com/vi/${item.thumbnailId}/mqdefault.jpg`}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-bg-raised" />
|
||||
)}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="w-10 h-10 rounded-full bg-black/60 flex items-center justify-center text-white text-lg">▶</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// audio
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="aspect-square overflow-hidden bg-bg-raised cursor-pointer hover:opacity-80 transition-opacity flex items-center justify-center"
|
||||
onClick={() => openNote(item.noteId)}
|
||||
>
|
||||
<div className="text-center">
|
||||
<span className="text-3xl text-text-dim">♪</span>
|
||||
<p className="text-text-dim text-[10px] mt-1 px-2 truncate">{item.url.split("/").pop()}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{lightboxIdx !== null && (
|
||||
<ImageLightbox
|
||||
images={imageUrls}
|
||||
index={lightboxIdx}
|
||||
onClose={() => setLightboxIdx(null)}
|
||||
onNavigate={(i) => setLightboxIdx(i)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user