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.

.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)

PKGBUILD

@@ -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')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wrystr",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

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"

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",

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
-      const { notes } = useFeedStore.getState();
+      if (onNoteInjected) {
-      useFeedStore.setState({
+        onNoteInjected(event);
-        notes: [event, ...notes],
+      } else {
-      });
+        const { notes } = useFeedStore.getState();
+        useFeedStore.setState({
+          notes: [event, ...notes],
+        });
+      }
       setText("");
       textareaRef.current?.focus();
       onPublished?.();

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">

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 && (

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,20 +50,60 @@ function parseContent(content: string): ContentSegment[] {
         length: cleaned.length,
         segment: { type: "video", value: cleaned },
       });
-    } else {
+    } else if (AUDIO_EXTENSIONS.test(cleaned)) {
-      // Shorten display URL
-      let display = cleaned;
-      try {
-        const u = new URL(cleaned);
-        display = u.hostname + (u.pathname !== "/" ? u.pathname : "");
-        if (display.length > 50) display = display.slice(0, 47) + "…";
-      } catch { /* keep as-is */ }
-
       allMatches.push({
         index: match.index,
         length: cleaned.length,
-        segment: { type: "link", value: cleaned, display },
+        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;
+        try {
+          const u = new URL(cleaned);
+          display = u.hostname + (u.pathname !== "/" ? u.pathname : "");
+          if (display.length > 50) display = display.slice(0, 47) + "…";
+        } catch { /* keep as-is */ }
+
+        allMatches.push({
+          index: match.index,
+          length: cleaned.length,
+          segment: { type: "link", value: cleaned, display },
+        });
+      }
     }
   }
 
@@ -204,16 +251,239 @@ 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);
 
-  const inlineElements: ReactNode[] = [];
+  // --- 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); }}
+            >
+              @{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;
+      }
+    });
+    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":
@@ -240,10 +510,7 @@ export function NoteContent({ content }: { content: string }) {
           <span
             key={i}
             className="text-accent cursor-pointer hover:text-accent-hover"
-            onClick={(e) => {
+            onClick={(e) => { e.stopPropagation(); tryOpenNostrEntity(seg.value); }}
-              e.stopPropagation();
-              tryOpenNostrEntity(seg.value);
-            }}
           >
             @{seg.display}
           </span>
@@ -254,19 +521,13 @@ export function NoteContent({ content }: { content: string }) {
           <span
             key={i}
             className="text-accent/80 cursor-pointer hover:text-accent"
-            onClick={(e) => {
+            onClick={(e) => { e.stopPropagation(); openSearch(`#${seg.value}`); }}
-              e.stopPropagation();
-              openSearch(`#${seg.value}`);
-            }}
           >
             {seg.display}
           </span>
         );
         break;
-      case "image":
+      default:
-      case "video":
-      case "quote":
-        // Rendered separately below the text
         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); }}
+              onClick={(e) => { e.stopPropagation(); setLightboxIndex(idx); }}
-              onError={(e) => {
+              onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
-                (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>
   );
 }