From 18353047bd1ca69bc7c3e4ca4470712a08666763 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Jan 2026 10:04:45 +0000
Subject: [PATCH] Fix tooltip contrast in editor suggestion lists

Use text-popover-foreground instead of text-muted-foreground for
suggestion list components to ensure proper contrast with bg-popover
background across all themes.

https://claude.ai/code/session_0145zLfku7idq3WEqGzvTdvu
---
 src/components/editor/EmojiSuggestionList.tsx        | 6 +++---
 src/components/editor/ProfileSuggestionList.tsx      | 6 +++---
 src/components/editor/SlashCommandSuggestionList.tsx | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/editor/EmojiSuggestionList.tsx b/src/components/editor/EmojiSuggestionList.tsx
index 4bcd16e..cefdc1c 100644
--- a/src/components/editor/EmojiSuggestionList.tsx
+++ b/src/components/editor/EmojiSuggestionList.tsx
@@ -93,7 +93,7 @@ export const EmojiSuggestionList = forwardRef<
 
   if (items.length === 0) {
     return (
-      <div className="border border-border/50 bg-popover p-4 text-sm text-muted-foreground shadow-md">
+      <div className="border border-border/50 bg-popover p-4 text-sm text-popover-foreground/60 shadow-md">
         No emoji found
       </div>
     );
@@ -103,7 +103,7 @@ export const EmojiSuggestionList = forwardRef<
     <div
       ref={listRef}
       role="listbox"
-      className="max-h-[240px] w-[296px] overflow-y-auto border border-border/50 bg-popover p-2 shadow-md"
+      className="max-h-[240px] w-[296px] overflow-y-auto border border-border/50 bg-popover p-2 text-popover-foreground shadow-md"
     >
       <div className="grid grid-cols-8 gap-0.5">
         {items.map((item, index) => (
@@ -141,7 +141,7 @@ export const EmojiSuggestionList = forwardRef<
       </div>
       {/* Show selected emoji shortcode */}
       {items[selectedIndex] && (
-        <div className="mt-2 border-t border-border/50 pt-2 text-center text-xs text-muted-foreground">
+        <div className="mt-2 border-t border-border/50 pt-2 text-center text-xs text-popover-foreground/60">
           :{items[selectedIndex].shortcode}:
         </div>
       )}
diff --git a/src/components/editor/ProfileSuggestionList.tsx b/src/components/editor/ProfileSuggestionList.tsx
index 60c00c4..231ce00 100644
--- a/src/components/editor/ProfileSuggestionList.tsx
+++ b/src/components/editor/ProfileSuggestionList.tsx
@@ -71,7 +71,7 @@ export const ProfileSuggestionList = forwardRef<
 
   if (items.length === 0) {
     return (
-      <div className="border border-border/50 bg-popover p-4 text-sm text-muted-foreground shadow-md">
+      <div className="border border-border/50 bg-popover p-4 text-sm text-popover-foreground/60 shadow-md">
         No profiles found
       </div>
     );
@@ -81,7 +81,7 @@ export const ProfileSuggestionList = forwardRef<
     <div
       ref={listRef}
       role="listbox"
-      className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover shadow-md"
+      className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover text-popover-foreground shadow-md"
     >
       {items.map((item, index) => (
         <button
@@ -99,7 +99,7 @@ export const ProfileSuggestionList = forwardRef<
               <UserName pubkey={item.pubkey} />
             </div>
             {item.nip05 && (
-              <div className="truncate text-xs text-muted-foreground">
+              <div className="truncate text-xs text-popover-foreground/60">
                 {item.nip05}
               </div>
             )}
diff --git a/src/components/editor/SlashCommandSuggestionList.tsx b/src/components/editor/SlashCommandSuggestionList.tsx
index 3f383c5..ebea7c9 100644
--- a/src/components/editor/SlashCommandSuggestionList.tsx
+++ b/src/components/editor/SlashCommandSuggestionList.tsx
@@ -71,7 +71,7 @@ export const SlashCommandSuggestionList = forwardRef<
 
   if (items.length === 0) {
     return (
-      <div className="border border-border/50 bg-popover p-4 text-sm text-muted-foreground shadow-md">
+      <div className="border border-border/50 bg-popover p-4 text-sm text-popover-foreground/60 shadow-md">
         No commands available
       </div>
     );
@@ -81,7 +81,7 @@ export const SlashCommandSuggestionList = forwardRef<
     <div
       ref={listRef}
       role="listbox"
-      className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover shadow-md"
+      className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover text-popover-foreground shadow-md"
     >
       {items.map((item, index) => (
         <button
@@ -94,12 +94,12 @@ export const SlashCommandSuggestionList = forwardRef<
             index === selectedIndex ? "bg-muted/60" : "hover:bg-muted/60"
           }`}
         >
-          <Terminal className="size-4 flex-shrink-0 text-muted-foreground" />
+          <Terminal className="size-4 flex-shrink-0 text-popover-foreground/60" />
           <div className="min-w-0 flex-1">
             <div className="truncate text-sm font-medium font-mono">
               /{item.name}
             </div>
-            <div className="truncate text-xs text-muted-foreground">
+            <div className="truncate text-xs text-popover-foreground/60">
               {item.description}
             </div>
           </div>