mirror of
https://github.com/hoornet/vega.git
synced 2026-05-07 12:49:13 -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;
|
||||
}
|
||||
Reference in New Issue
Block a user