Add subtle translation system guidance for users

- Enhance reading instruction to mention hover/click for translations
- Add informative tooltip explaining credit system and visual feedback
- Add subtle info icon next to credit display for additional help
- Add low credit warning when credits are 2 or fewer
- Change credit display color to orange when low
- All guidance is subtle and non-intrusive to the interface
- Helps users understand translation system without cluttering UI

Author: rgilks

app/components/TextGenerator/ReadingPassage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { BookOpenIcon } from '@heroicons/react/24/outline';
+import { BookOpenIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'motion/react';
 import { getTextDirection } from 'app/domain/language';
@@ -48,12 +48,27 @@ const ReadingPassage = () => {
           </div>
           <div className="flex items-center space-x-4">
             {hover.progressionPhase === 'credits' && (
-              <div
-                className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium text-yellow-400 bg-gray-700/50"
-                data-testid="hover-credits-display"
-                title={t('practice.hoverCreditsTooltip') || 'Hover Credits'}
-              >
-                <span>{hover.creditsAvailable}</span>
+              <div className="flex items-center space-x-2">
+                <div
+                  className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
+                    hover.creditsAvailable <= 2 
+                      ? 'text-orange-400 bg-orange-900/30' 
+                      : 'text-yellow-400 bg-gray-700/50'
+                  }`}
+                  data-testid="hover-credits-display"
+                  title={t('practice.hoverCreditsTooltip') || 'Hover Credits'}
+                >
+                  <span>{hover.creditsAvailable}</span>
+                </div>
+                <InformationCircleIcon 
+                  className="w-4 h-4 text-gray-400 hover:text-gray-300 cursor-help transition-colors"
+                  title={t('practice.hoverCreditsTooltip') || 'Translation Credits Info'}
+                />
+                {hover.creditsAvailable <= 2 && (
+                  <span className="text-xs text-orange-300 hidden sm:inline">
+                    {t('practice.lowCredits')}
+                  </span>
+                )}
               </div>
             )}
             <AudioControls />

public/locales/en/common.json

@@ -78,11 +78,12 @@
     "almostLevelUp": "One more correct answer to level up!",
     "correctAnswer": "Correct Answer",
     "hoverCredits": "{{count}}",
-    "hoverCreditsTooltip": "Hover or click on words for translation. Credits are limited.",
+    "hoverCreditsTooltip": "Translation credits: Hover or click words for translations. Credits reset each question. Underlined words show you've translated them.",
+    "lowCredits": "Low credits",
     "relevantText": "Relevant Text",
     "showExplanation": "Show Explanation",
     "hideExplanation": "Hide Explanation",
-    "readingInstruction": "Read the passage carefully to answer the question below",
+    "readingInstruction": "Read the passage carefully to answer the question below. Hover or click words for translations.",
     "questionPrompt": "Based on the passage above, answer this question:",
     "readComplete": "Passage read",
     "reading": "Reading...",