Fix missing reading colors in qiraat ReadersPanel when reader overlaps readings

src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeQiraatTab/ReadersPanel/ReaderItem.tsx

@@ -10,6 +10,7 @@ interface ReaderItemProps {
   reader: QiraatReader;
   transmitters: QiraatTransmitter[];
   readings: QiraatReading[];
+  readerColor?: string;
   onInfoClick?: () => void;
   onTransmitterClick?: (transmitterId: number) => void;
   isClickable?: boolean;
@@ -26,6 +27,7 @@ const ReaderItem: React.FC<ReaderItemProps> = ({
   reader,
   transmitters,
   readings,
+  readerColor,
   onInfoClick,
   onTransmitterClick,
   isClickable = false,
@@ -57,12 +59,14 @@ const ReaderItem: React.FC<ReaderItemProps> = ({
 
     if (transmitterReading) return transmitterReading.color || DEFAULT_COLOR;
 
-    // 2. If not found directly, the transmitter inherits color from its parent reader
-    // Find a reading where this reader appears in the matrix
+    // 2. If the parent component has pre-computed a color for this reader, use it
+    if (readerColor) return readerColor;
+
+    // 3. If not found directly, the transmitter inherits color from its parent reader
     const readerReading = readings.find(({ matrix }) => matrix?.readers?.includes(reader.id));
     if (readerReading) return readerReading.color || DEFAULT_COLOR;
 
-    // 3. Default fallback - no association found
+    // 4. Default fallback - no association found
     return DEFAULT_COLOR;
   };
 

src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeQiraatTab/ReadersPanel/index.tsx

@@ -22,6 +22,8 @@ interface ReadersPanelProps {
   onReaderInfoClick?: (readerId: number) => void;
 }
 
+const DEFAULT_COLOR = '#FFFFFF';
+
 /**
  * Responsive panel displaying all canonical readers with their transmitters.
  * Desktop: Always visible as a side panel.
@@ -59,6 +61,47 @@ const ReadersPanel: React.FC<ReadersPanelProps> = ({
     [readings],
   );
 
+  const readerColorMap = useMemo(() => {
+    const map = new Map<number, string>();
+    const usedColors = new Set<string>();
+
+    const readerCandidates = readers.map((reader) => ({
+      reader,
+      candidates: readings.filter(
+        ({ matrix }) => matrix?.readers?.includes(reader.id),
+      ),
+    }));
+
+    // First pass: assign unambiguous readers (single candidate)
+    for (const { reader, candidates } of readerCandidates) {
+      if (candidates.length === 1) {
+        const color = candidates[0].color || DEFAULT_COLOR;
+        map.set(reader.id, color);
+        usedColors.add(color);
+      }
+    }
+
+    // Second pass: for ambiguous readers, prefer a candidate color not yet used
+    for (const { reader, candidates } of readerCandidates) {
+      if (candidates.length <= 1) continue;
+
+      const unusedCandidate = candidates.find(
+        ({ color }) => color && !usedColors.has(color),
+      );
+
+      if (unusedCandidate) {
+        const color = unusedCandidate.color || DEFAULT_COLOR;
+        map.set(reader.id, color);
+        usedColors.add(color);
+      } else {
+        const color = candidates[0].color || DEFAULT_COLOR;
+        map.set(reader.id, color);
+      }
+    }
+
+    return map;
+  }, [readers, readings]);
+
   return (
     <div className={classNames(styles.panel, { [styles.expanded]: isExpanded })}>
       {/* Mobile header with toggle */}
@@ -101,6 +144,7 @@ const ReadersPanel: React.FC<ReadersPanelProps> = ({
             reader={reader}
             transmitters={transmitters}
             readings={readings}
+            readerColor={readerColorMap.get(reader.id)}
             onInfoClick={() => onReaderInfoClick?.(reader.id)}
             onTransmitterClick={onTransmitterClick}
             isClickable={!!onTransmitterClick}