From 30147afc87444b041e20d990ab8022d377fdd0a6 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Thu, 9 Apr 2026 15:39:53 +0200
Subject: [PATCH] =?UTF-8?q?Polish=20pass=203=20=E2=80=94=20theme=20tokens,?=
 =?UTF-8?q?=20debug=20logging,=20remaining=20ellipses?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move DMView console.log/error behind debug.log/error (silent in prod)
- Replace hard-coded text-[#ffffff] with text-white in NoteContent overlay
- Theme-ify Vimeo and Tidal media cards (bg-accent/15 instead of
  bg-black/40 and bg-white/10) so they adapt to light themes
- Convert Vimeo play icon SVG to currentColor for theme-aware tinting
- Add aria-label to update banner dismiss button
- Replace remaining '...' with unicode ellipsis in loading states
---
 src/App.tsx                             |  2 +-
 src/components/article/ArticleFeed.tsx  |  2 +-
 src/components/dm/DMView.tsx            | 13 +++++++------
 src/components/feed/MediaCards.tsx      |  8 ++++----
 src/components/feed/NoteContent.tsx     |  2 +-
 src/components/podcast/PodcastsView.tsx |  2 +-
 6 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8bb897e..b12b711 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -50,7 +50,7 @@ function UpdateBanner() {
         >
           {installing ? "Installing…" : "Update & restart"}
         </button>
-        <button onClick={dismiss} className="text-text-dim hover:text-text transition-colors">×</button>
+        <button onClick={dismiss} aria-label="Dismiss update" className="text-text-dim hover:text-text transition-colors">×</button>
       </div>
     </div>
   );
diff --git a/src/components/article/ArticleFeed.tsx b/src/components/article/ArticleFeed.tsx
index 88340b4..c5f35ac 100644
--- a/src/components/article/ArticleFeed.tsx
+++ b/src/components/article/ArticleFeed.tsx
@@ -95,7 +95,7 @@ export function ArticleFeed() {
       {/* Articles list */}
       <div className="flex-1 overflow-y-auto">
         {loading && (
-          <div className="px-4 py-8 text-text-dim text-[12px] text-center">Loading articles...</div>
+          <div className="px-4 py-8 text-text-dim text-[12px] text-center">Loading articles…</div>
         )}
 
         {!loading && articles.length === 0 && (
diff --git a/src/components/dm/DMView.tsx b/src/components/dm/DMView.tsx
index 07a6707..94c9289 100644
--- a/src/components/dm/DMView.tsx
+++ b/src/components/dm/DMView.tsx
@@ -6,6 +6,7 @@ import { useNotificationsStore } from "../../stores/notifications";
 import { fetchDMConversations, fetchDMThread, sendDM, decryptDM, getNDK } from "../../lib/nostr";
 import { useProfile } from "../../hooks/useProfile";
 import { timeAgo, shortenPubkey, profileName } from "../../lib/utils";
+import { debug } from "../../lib/debug";
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -141,7 +142,7 @@ function ThreadPanel({
     setMessages([]);
     fetchDMThread(myPubkey, partnerPubkey)
       .then(setMessages)
-      .catch((err) => console.error("Failed to fetch DM thread:", err))
+      .catch((err) => debug.error("Failed to fetch DM thread:", err))
       .finally(() => setLoading(false));
   }, [partnerPubkey, myPubkey]);
 
@@ -155,17 +156,17 @@ function ThreadPanel({
     setSending(true);
     setSendError(null);
     try {
-      console.log("[DM-UI] sending to", partnerPubkey.slice(0, 8));
+      debug.log("[DM-UI] sending to", partnerPubkey.slice(0, 8));
       await sendDM(partnerPubkey, content);
-      console.log("[DM-UI] send completed, re-fetching thread...");
+      debug.log("[DM-UI] send completed, re-fetching thread");
       setText("");
       // Re-fetch thread to include the sent message
       const updated = await fetchDMThread(myPubkey, partnerPubkey);
-      console.log("[DM-UI] re-fetch got", updated.length, "messages");
+      debug.log("[DM-UI] re-fetch got", updated.length, "messages");
       setMessages(updated);
       textareaRef.current?.focus();
     } catch (err) {
-      console.error("[DM-UI] send failed:", err);
+      debug.error("[DM-UI] send failed:", err);
       setSendError(String(err));
     } finally {
       setSending(false);
@@ -321,7 +322,7 @@ export function DMView() {
         }));
         useNotificationsStore.getState().computeDMUnread(convList);
       })
-      .catch((err) => console.error("Failed to fetch DM conversations:", err))
+      .catch((err) => debug.error("Failed to fetch DM conversations:", err))
       .finally(() => setLoading(false));
   }, [pubkey, hasSigner]);
 
diff --git a/src/components/feed/MediaCards.tsx b/src/components/feed/MediaCards.tsx
index abdaf1a..d89a746 100644
--- a/src/components/feed/MediaCards.tsx
+++ b/src/components/feed/MediaCards.tsx
@@ -103,8 +103,8 @@ export function VimeoCard({ seg }: { seg: ContentSegment }) {
       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 className="w-10 h-10 rounded-full bg-accent/15 text-accent flex items-center justify-center shrink-0">
+        <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><polygon points="6,3 17,10 6,17" /></svg>
       </div>
       <div className="min-w-0">
         <div className="text-[11px] text-text-muted">Vimeo</div>
@@ -141,8 +141,8 @@ export function TidalCard({ seg }: { seg: ContentSegment }) {
       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 className="w-10 h-10 rounded-full bg-accent/15 text-accent flex items-center justify-center shrink-0">
+        <span className="text-lg font-bold">T</span>
       </div>
       <div className="min-w-0">
         <div className="text-[11px] text-text-muted">Tidal · {seg.mediaType}</div>
diff --git a/src/components/feed/NoteContent.tsx b/src/components/feed/NoteContent.tsx
index f9fb1eb..137f217 100644
--- a/src/components/feed/NoteContent.tsx
+++ b/src/components/feed/NoteContent.tsx
@@ -101,7 +101,7 @@ function ImageGrid({ images, onImageClick }: { images: string[]; onImageClick: (
               className="absolute inset-0 bg-black/50 flex items-center justify-center rounded-sm cursor-zoom-in"
               onClick={(e) => { e.stopPropagation(); onImageClick(idx); }}
             >
-              <span className="text-[#ffffff] text-lg font-semibold">+{extraCount}</span>
+              <span className="text-white text-lg font-semibold">+{extraCount}</span>
             </div>
           )}
         </div>
diff --git a/src/components/podcast/PodcastsView.tsx b/src/components/podcast/PodcastsView.tsx
index c9bb516..57e8565 100644
--- a/src/components/podcast/PodcastsView.tsx
+++ b/src/components/podcast/PodcastsView.tsx
@@ -116,7 +116,7 @@ export function PodcastsView() {
             </div>
           )
         ) : loading ? (
-          <div className="text-text-dim text-[12px]">Loading...</div>
+          <div className="text-text-dim text-[12px]">Loading…</div>
         ) : displayShows.length === 0 ? (
           <div className="text-text-dim text-[12px]">
             {tab === "search" ? "No results. Try a different search." : "No trending podcasts found."}