Bump to v0.4.1 — media players, YouTube/Spotify cards, feed fix

Add inline video/audio players for direct media URLs, rich link cards for YouTube (with thumbnails), Vimeo, Spotify, and Tidal. Fix video clicks navigating to thread by splitting NoteContent into inline/media modes. Fix published notes not appearing on Following tab.
2026-04-24 06:40:01 -07:00 · 2026-03-15 12:32:00 +01:00
parent e965cf9427
commit 35fac6bab9
9 changed files with 389 additions and 51 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -66,6 +66,14 @@ jobs:

            > **Windows note:** The installer is not yet code-signed. Windows SmartScreen will show an "Unknown publisher" warning — click "More info → Run anyway" to install.

+            ### New in v0.4.1 — Media & Feed Fixes
+            - **Video player** — direct video URLs (.mp4, .webm, .mov, etc.) now render as inline players with native controls
+            - **Audio player** — direct audio URLs (.mp3, .wav, .flac, etc.) render as inline audio players with filename display
+            - **YouTube/Vimeo rich cards** — YouTube links show thumbnail previews, Vimeo/Spotify/Tidal show branded cards; all open in external browser
+            - **Media detection** — parser now recognizes YouTube, Vimeo, Spotify, and Tidal URLs as distinct media types
+            - **Fix: video clicks opening thread** — media elements rendered outside the clickable area so interactions don't navigate away
+            - **Fix: post not visible on Following tab** — publishing a note while on Following now correctly shows it in the feed
+
            ### New in v0.4.0 — Phase 3: Discovery & Polish
            - **Image lightbox** — click any image to view full-screen; Escape to close, arrow keys to navigate multi-image posts
            - **Bookmarks (NIP-51)** — save/unsave notes with one click; dedicated Bookmarks view in sidebar; synced to relays (kind 10003)
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 # Maintainer: hoornet <hoornet@users.noreply.github.com>
 pkgname=wrystr
-pkgver=0.4.0
+pkgver=0.4.1
 pkgrel=1
 pkgdesc="Cross-platform Nostr desktop client with Lightning integration"
 arch=('x86_64')
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "wrystr",
  "private": true,
-  "version": "0.4.0",
+  "version": "0.4.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "wrystr"
-version = "0.4.0"
+version = "0.4.1"
 description = "Cross-platform Nostr desktop client with Lightning integration"
 authors = ["hoornet"]
 edition = "2021"
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Wrystr",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "identifier": "com.hoornet.wrystr",
  "build": {
    "beforeDevCommand": "npm run dev",
--- a/src/components/feed/ComposeBox.tsx
+++ b/src/components/feed/ComposeBox.tsx
@@ -5,7 +5,7 @@ import { useUserStore } from "../../stores/user";
 import { useFeedStore } from "../../stores/feed";
 import { shortenPubkey } from "../../lib/utils";

-export function ComposeBox({ onPublished }: { onPublished?: () => void }) {
+export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () => void; onNoteInjected?: (event: import("@nostr-dev-kit/ndk").NDKEvent) => void }) {
  const [text, setText] = useState("");
  const [publishing, setPublishing] = useState(false);
  const [uploading, setUploading] = useState(false);
@@ -62,10 +62,14 @@ export function ComposeBox({ onPublished }: { onPublished?: () => void }) {
    try {
      const event = await publishNote(text.trim());
      // Inject into feed immediately so the user sees their post
+      if (onNoteInjected) {
+        onNoteInjected(event);
+      } else {
        const { notes } = useFeedStore.getState();
        useFeedStore.setState({
          notes: [event, ...notes],
        });
+      }
      setText("");
      textareaRef.current?.focus();
      onPublished?.();
--- a/src/components/feed/Feed.tsx
+++ b/src/components/feed/Feed.tsx
@@ -133,7 +133,9 @@ export function Feed() {
      </header>

      {/* Compose */}
-      {loggedIn && !!getNDK().signer && <ComposeBox onPublished={loadFeed} />}
+      {loggedIn && !!getNDK().signer && (
+        <ComposeBox onPublished={isFollowing ? undefined : loadFeed} onNoteInjected={isFollowing ? (event) => setFollowNotes((prev) => [event, ...prev]) : undefined} />
+      )}

      {/* Feed */}
      <div className="flex-1 overflow-y-auto">
--- a/src/components/feed/NoteCard.tsx
+++ b/src/components/feed/NoteCard.tsx
@@ -216,8 +216,9 @@ export function NoteCard({ event, focused }: NoteCardProps) {
            className="cursor-pointer"
            onClick={() => openThread(event, currentView as "feed" | "profile")}
          >
-            <NoteContent content={event.content} />
+            <NoteContent content={event.content} inline />
          </div>
+          <NoteContent content={event.content} mediaOnly />

          {/* Actions */}
          {loggedIn && !!getNDK().signer && (
--- a/src/components/feed/NoteContent.tsx
+++ b/src/components/feed/NoteContent.tsx
@@ -9,14 +9,21 @@ import { ImageLightbox } from "../shared/ImageLightbox";
 // Regex patterns
 const URL_REGEX = /https?:\/\/[^\s<>"')\]]+/g;
 const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg)(\?[^\s]*)?$/i;
-const VIDEO_EXTENSIONS = /\.(mp4|webm|mov)(\?[^\s]*)?$/i;
+const VIDEO_EXTENSIONS = /\.(mp4|webm|mov|ogg|m4v|avi)(\?[^\s]*)?$/i;
+const AUDIO_EXTENSIONS = /\.(mp3|wav|flac|aac|m4a|opus|ogg)(\?[^\s]*)?$/i;
+const YOUTUBE_REGEX = /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+const TIDAL_REGEX = /tidal\.com\/(?:browse\/)?(?:track|album|playlist)\/([a-zA-Z0-9-]+)/;
+const SPOTIFY_REGEX = /open\.spotify\.com\/(track|album|playlist|episode|show)\/([a-zA-Z0-9]+)/;
+const VIMEO_REGEX = /vimeo\.com\/(\d+)/;
 const NOSTR_MENTION_REGEX = /nostr:(npub1[a-z0-9]+|note1[a-z0-9]+|nevent1[a-z0-9]+|nprofile1[a-z0-9]+|naddr1[a-z0-9]+)/g;
 const HASHTAG_REGEX = /(?<=\s|^)#(\w{2,})/g;

 interface ContentSegment {
-  type: "text" | "link" | "image" | "video" | "mention" | "hashtag" | "quote";
+  type: "text" | "link" | "image" | "video" | "audio" | "youtube" | "vimeo" | "spotify" | "tidal" | "mention" | "hashtag" | "quote";
  value: string;  // for "quote": the hex event ID
  display?: string;
+  mediaId?: string;       // video/embed ID for youtube/vimeo
+  mediaType?: string;     // e.g. "track", "album" for spotify/tidal
 }

 function parseContent(content: string): ContentSegment[] {
@@ -43,6 +50,45 @@ function parseContent(content: string): ContentSegment[] {
        length: cleaned.length,
        segment: { type: "video", value: cleaned },
      });
+    } else if (AUDIO_EXTENSIONS.test(cleaned)) {
+      allMatches.push({
+        index: match.index,
+        length: cleaned.length,
+        segment: { type: "audio", value: cleaned },
+      });
+    } else {
+      // Check for embeddable media URLs
+      const ytMatch = cleaned.match(YOUTUBE_REGEX);
+      const vimeoMatch = cleaned.match(VIMEO_REGEX);
+      const spotifyMatch = cleaned.match(SPOTIFY_REGEX);
+      const tidalMatch = cleaned.match(TIDAL_REGEX);
+
+      if (ytMatch) {
+        allMatches.push({
+          index: match.index,
+          length: cleaned.length,
+          segment: { type: "youtube", value: cleaned, mediaId: ytMatch[1] },
+        });
+      } else if (vimeoMatch) {
+        allMatches.push({
+          index: match.index,
+          length: cleaned.length,
+          segment: { type: "vimeo", value: cleaned, mediaId: vimeoMatch[1] },
+        });
+      } else if (spotifyMatch) {
+        allMatches.push({
+          index: match.index,
+          length: cleaned.length,
+          segment: { type: "spotify", value: cleaned, mediaType: spotifyMatch[1], mediaId: spotifyMatch[2] },
+        });
+      } else if (tidalMatch) {
+        // Extract the type (track/album/playlist) from the URL
+        const tidalTypeMatch = cleaned.match(/tidal\.com\/(?:browse\/)?(track|album|playlist)\//);
+        allMatches.push({
+          index: match.index,
+          length: cleaned.length,
+          segment: { type: "tidal", value: cleaned, mediaType: tidalTypeMatch?.[1] ?? "track", mediaId: tidalMatch[1] },
+        });
      } else {
        // Shorten display URL
        let display = cleaned;
@@ -59,6 +105,7 @@ function parseContent(content: string): ContentSegment[] {
        });
      }
    }
+  }

  // Find nostr: mentions
  const mentionRegex = new RegExp(NOSTR_MENTION_REGEX.source, "g");
@@ -204,16 +251,30 @@ function QuotePreview({ eventId }: { eventId: string }) {
  );
 }

-export function NoteContent({ content }: { content: string }) {
+interface NoteContentProps {
+  content: string;
+  /** Render only inline text (no media blocks). Used inside the clickable area. */
+  inline?: boolean;
+  /** Render only media blocks (videos, embeds, quotes). Used outside the clickable area. */
+  mediaOnly?: boolean;
+}
+
+export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
  const { openSearch } = useUIStore();
  const segments = parseContent(content);
  const images: string[] = segments.filter((s) => s.type === "image").map((s) => s.value);
  const videos: string[] = segments.filter((s) => s.type === "video").map((s) => s.value);
+  const audios: string[] = segments.filter((s) => s.type === "audio").map((s) => s.value);
+  const youtubes = segments.filter((s) => s.type === "youtube");
+  const vimeos = segments.filter((s) => s.type === "vimeo");
+  const spotifys = segments.filter((s) => s.type === "spotify");
+  const tidals = segments.filter((s) => s.type === "tidal");
  const quoteIds: string[] = segments.filter((s) => s.type === "quote").map((s) => s.value);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

+  // --- Inline text + images (safe inside clickable wrapper) ---
+  if (inline) {
    const inlineElements: ReactNode[] = [];
-
    segments.forEach((seg, i) => {
      switch (seg.type) {
        case "text":
@@ -240,10 +301,7 @@ export function NoteContent({ content }: { content: string }) {
            <span
              key={i}
              className="text-accent cursor-pointer hover:text-accent-hover"
-            onClick={(e) => {
-              e.stopPropagation();
-              tryOpenNostrEntity(seg.value);
-            }}
+              onClick={(e) => { e.stopPropagation(); tryOpenNostrEntity(seg.value); }}
            >
              @{seg.display}
            </span>
@@ -254,19 +312,222 @@ export function NoteContent({ content }: { content: string }) {
            <span
              key={i}
              className="text-accent/80 cursor-pointer hover:text-accent"
-            onClick={(e) => {
-              e.stopPropagation();
-              openSearch(`#${seg.value}`);
-            }}
+              onClick={(e) => { e.stopPropagation(); openSearch(`#${seg.value}`); }}
            >
              {seg.display}
            </span>
          );
          break;
-      case "image":
-      case "video":
-      case "quote":
-        // Rendered separately below the text
+        default:
+          break;
+      }
+    });
+    return (
+      <div>
+        <div className="note-content text-text text-[13px] break-words whitespace-pre-wrap leading-relaxed">
+          {inlineElements}
+        </div>
+        {/* Images stay inside the clickable area (they have their own stopPropagation) */}
+        {images.length > 0 && (
+          <div className={`mt-2 ${images.length > 1 ? "grid grid-cols-2 gap-1" : ""}`}>
+            {images.map((src, idx) => (
+              <img
+                key={idx}
+                src={src}
+                alt=""
+                loading="lazy"
+                className="max-w-full max-h-80 rounded-sm object-cover bg-bg-raised border border-border cursor-zoom-in"
+                onClick={(e) => { e.stopPropagation(); setLightboxIndex(idx); }}
+                onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+              />
+            ))}
+          </div>
+        )}
+        {lightboxIndex !== null && (
+          <ImageLightbox
+            images={images}
+            index={lightboxIndex}
+            onClose={() => setLightboxIndex(null)}
+            onNavigate={setLightboxIndex}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // --- Media blocks only (rendered OUTSIDE the clickable wrapper) ---
+  if (mediaOnly) {
+    const hasMedia = videos.length > 0 || audios.length > 0 || youtubes.length > 0
+      || vimeos.length > 0 || spotifys.length > 0 || tidals.length > 0 || quoteIds.length > 0;
+    if (!hasMedia) return null;
+
+    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} />
+        ))}
+      </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(); openSearch(`#${seg.value}`); }}
+          >
+            {seg.display}
+          </span>
+        );
+        break;
+      default:
        break;
    }
  });
@@ -277,20 +538,17 @@ export function NoteContent({ content }: { content: string }) {
        {inlineElements}
      </div>

-      {/* Images */}
      {images.length > 0 && (
        <div className={`mt-2 ${images.length > 1 ? "grid grid-cols-2 gap-1" : ""}`}>
-          {images.map((src, i) => (
+          {images.map((src, idx) => (
            <img
-              key={i}
+              key={idx}
              src={src}
              alt=""
              loading="lazy"
              className="max-w-full max-h-80 rounded-sm object-cover bg-bg-raised border border-border cursor-zoom-in"
-              onClick={(e) => { e.stopPropagation(); setLightboxIndex(i); }}
-              onError={(e) => {
-                (e.target as HTMLImageElement).style.display = "none";
-              }}
+              onClick={(e) => { e.stopPropagation(); setLightboxIndex(idx); }}
+              onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
            />
          ))}
        </div>
@@ -305,25 +563,90 @@ export function NoteContent({ content }: { content: string }) {
        />
      )}

-      {/* Quoted notes */}
-      {quoteIds.map((id) => (
-        <QuotePreview key={id} eventId={id} />
-      ))}
-
-      {/* Videos */}
      {videos.length > 0 && (
-        <div className="mt-2">
+        <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} />
+      ))}
    </div>
  );
 }