fix(tc-study): Markdown skeleton + cache, viewer caches, remove scripture book title

- MarkdownRenderer: show skeleton while loading; cache by content (no re-render on tab switch)
- TN/TWL/TQ/TW/TA: content caches so switching tabs doesn't re-fetch (notes, words links, questions, word entry, TA article)
- ScriptureViewer: remove book title above content (nav bar is sufficient)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: abelpz

apps/tc-study/src/components/resources/ScriptureViewer/hooks/useContent.ts

@@ -4,8 +4,8 @@
 
 import type { ProcessedScripture, ProcessedVerse } from '@bt-synergy/usfm-processor'
 import { useEffect, useMemo, useState } from 'react'
-import type { BookInfo } from '../../../../contexts/types-only'
 import { useCatalogManager, useCurrentReference, useNavigation } from '../../../../contexts'
+import type { BookInfo } from '../../../../contexts/types-only'
 import { defaultSectionsService } from '../../../../lib/services/default-sections'
 import { extractVerseCountsFromContent } from '../../../../lib/versification'
 import { attachAlignmentSemanticIds } from '../utils/attachAlignmentSemanticIds'

apps/tc-study/src/components/resources/ScriptureViewer/index.tsx

@@ -13,10 +13,8 @@
 import { Book, Bug } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useEvents } from 'linked-panels'
-import { useAnchorResource } from '../../../contexts/AppContext'
 import { useCatalogManager, useCurrentReference } from '../../../contexts'
 import type { VerseNavigationSignal } from '../../../signals/studioSignals'
-import { getBookTitle } from '../../../utils/bookNames'
 import { ResourceViewerHeader } from '../common/ResourceViewerHeader'
 import {
     DebugPanel,
@@ -37,7 +35,6 @@ export function ScriptureViewer({
 }: ScriptureViewerProps) {
   const currentRef = useCurrentReference()
   const catalogManager = useCatalogManager()
-  const anchorResource = useAnchorResource()
   const { setBook, setChapter, setVerse, setEndChapter, setEndVerse } = currentRef
 
   // Debug panel visibility state
@@ -181,12 +178,6 @@ export function ScriptureViewer({
           }
         }}
       >
-        {/* Book title - centered, bold, serif, italic, larger than chapter number */}
-        {currentRef.book && (
-          <h2 className="text-center font-bold font-serif italic text-3xl text-gray-900 py-4">
-            {getBookTitle(anchorResource, currentRef.book)}
-          </h2>
-        )}
         {/* Content - scrolling handled by parent container */}
         <div className="flex-1">
           <ScriptureContent

apps/tc-study/src/components/resources/TranslationAcademyViewer.tsx

@@ -4,7 +4,7 @@
  * Displays Translation Academy content (training articles for translators)
  */
 
-import { AlertCircle, ArrowLeft, BookOpen, ChevronDown, ChevronUp, FileText, GraduationCap, Loader, Search } from 'lucide-react'
+import { AlertCircle, ArrowLeft, ChevronDown, ChevronUp, FileText, GraduationCap, Loader, Search } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { useCatalogManager, useLoaderRegistry } from '../../contexts/CatalogContext'
 
@@ -16,6 +16,9 @@ interface TranslationAcademyArticle {
   relatedArticles?: string[]
 }
 
+const TA_ARTICLE_CACHE_MAX = 80
+const taArticleCache = new Map<string, TranslationAcademyArticle>()
+
 interface TranslationAcademyViewerExtendedProps {
   resourceKey: string
   metadata?: any
@@ -143,9 +146,17 @@ export function TranslationAcademyViewer({
     }
   }, [metadata, selectedArticleId, initialEntryId])
 
-  // Load article content when selection changes
+  // Load article content when selection changes (cached by resourceKey+articleId so switching tabs doesn't re-fetch)
   useEffect(() => {
-    if (!selectedArticleId || !resourceKey) {
+    if (!selectedArticleId || !resourceKey) return
+
+    const key = `ta:${resourceKey}:${selectedArticleId}`
+    const hit = taArticleCache.get(key)
+    if (hit !== undefined) {
+      setArticle(hit)
+      setError(null)
+      setLoading(false)
+      setViewMode('article')
       return
     }
 
@@ -160,6 +171,8 @@ export function TranslationAcademyViewer({
         }
 
         const loadedArticle = await loader.loadContent(resourceKey, selectedArticleId)
+        if (taArticleCache.size >= TA_ARTICLE_CACHE_MAX) taArticleCache.delete(taArticleCache.keys().next().value!)
+        taArticleCache.set(key, loadedArticle)
         setArticle(loadedArticle)
         setViewMode('article')
       } catch (err: any) {

apps/tc-study/src/components/resources/TranslationNotesViewer/hooks/useTranslationNotesContent.ts

@@ -1,20 +1,40 @@
 /**
- * Hook for loading Translation Notes content
+ * Hook for loading Translation Notes content.
+ * Results are cached by resourceKey+book so switching tabs doesn't re-fetch.
  */
 
 import type { TranslationNote } from '@bt-synergy/resource-parsers'
 import { useEffect, useState } from 'react'
 import { useLoaderRegistry } from '../../../../contexts/CatalogContext'
 
+const CACHE_MAX = 50
+const notesCache = new Map<string, { notes: TranslationNote[]; error: string | null }>()
+
+function cacheKey(resourceKey: string, bookCode: string) {
+  return `notes:${resourceKey}:${bookCode}`
+}
+
 export function useTranslationNotesContent(resourceKey: string, bookCode: string) {
   const loaderRegistry = useLoaderRegistry()
-  const [notes, setNotes] = useState<TranslationNote[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const cached = resourceKey && bookCode ? notesCache.get(cacheKey(resourceKey, bookCode)) : undefined
+  const [notes, setNotes] = useState<TranslationNote[]>(cached?.notes ?? [])
+  const [loading, setLoading] = useState(!cached)
+  const [error, setError] = useState<string | null>(cached?.error ?? null)
 
   useEffect(() => {
     if (!resourceKey || !bookCode) {
       setNotes([])
+      setError(null)
+      setLoading(false)
+      return
+    }
+
+    const key = cacheKey(resourceKey, bookCode)
+    const hit = notesCache.get(key)
+    if (hit !== undefined) {
+      setNotes(hit.notes)
+      setError(hit.error)
+      setLoading(false)
       return
     }
 
@@ -30,15 +50,16 @@ export function useTranslationNotesContent(resourceKey: string, bookCode: string
           throw new Error('Translation Notes loader not found')
         }
 
-        console.log(`📖 Loading translation notes for: ${resourceKey}/${bookCode}`)
         const processedNotes = await loader.loadContent(resourceKey, bookCode)
 
         if (cancelled) return
 
         if (processedNotes && processedNotes.notes) {
-          setNotes(processedNotes.notes)
+          const data = { notes: processedNotes.notes, error: null }
+          if (notesCache.size >= CACHE_MAX) notesCache.delete(notesCache.keys().next().value!)
+          notesCache.set(key, data)
+          setNotes(data.notes)
         } else {
-          console.warn('⚠️ No notes returned from loader')
           setNotes([])
         }
       } catch (err) {
@@ -50,25 +71,21 @@ export function useTranslationNotesContent(resourceKey: string, bookCode: string
           error: err instanceof Error ? err.message : String(err),
         })
 
-        // Check if it's a 404 (book not available)
-        if (err instanceof Error && err.message.includes('404')) {
-          setError(`Notes not available for ${bookCode.toUpperCase()}`)
-        } else {
-          setError(err instanceof Error ? err.message : 'Failed to load notes')
-        }
+        const errMsg = err instanceof Error && err.message.includes('404')
+          ? `Notes not available for ${bookCode.toUpperCase()}`
+          : (err instanceof Error ? err.message : 'Failed to load notes')
+        const data = { notes: [] as TranslationNote[], error: errMsg }
+        if (notesCache.size >= CACHE_MAX) notesCache.delete(notesCache.keys().next().value!)
+        notesCache.set(key, data)
+        setError(errMsg)
         setNotes([])
       } finally {
-        if (!cancelled) {
-          setLoading(false)
-        }
+        if (!cancelled) setLoading(false)
       }
     }
 
     loadNotes()
-
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
   }, [resourceKey, bookCode, loaderRegistry])
 
   return { notes, loading, error }

apps/tc-study/src/components/resources/TranslationQuestionsViewer/index.tsx

@@ -1,8 +1,9 @@
 /**
  * Translation Questions Viewer
- * 
+ *
  * Displays comprehension questions and answers for Bible passages.
  * Questions are filtered by the current verse range.
+ * Results are cached by resourceKey+book so switching tabs doesn't re-fetch.
  */
 
 import type { ProcessedQuestions } from '@bt-synergy/resource-parsers'
@@ -16,57 +17,66 @@ import { getBookTitle } from '../../../utils/bookNames'
 import { ResourceViewerHeader } from '../common/ResourceViewerHeader'
 import type { ResourceInfo } from '../../../contexts/types'
 
+const TQ_CACHE_MAX = 50
+const questionsCache = new Map<string, ProcessedQuestions>()
+
+function tqCacheKey(resourceKey: string, bookCode: string) {
+  return `tq:${resourceKey}:${bookCode}`
+}
+
 export function TranslationQuestionsViewer({ resourceKey, resource }: ResourceViewerProps & { resource: ResourceInfo }) {
-  const [questions, setQuestions] = useState<ProcessedQuestions | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [expandedQuestions, setExpandedQuestions] = useState<Set<string>>(new Set())
-  
   const loaderRegistry = useLoaderRegistry()
   const currentRef = useCurrentReference()
   const anchorResource = useAnchorResource()
-  
   const bookCode = currentRef.book || 'gen'
 
+  const cached = resourceKey && bookCode ? questionsCache.get(tqCacheKey(resourceKey, bookCode)) : undefined
+  const [questions, setQuestions] = useState<ProcessedQuestions | null>(cached ?? null)
+  const [loading, setLoading] = useState(!cached)
+  const [error, setError] = useState<string | null>(null)
+  const [expandedQuestions, setExpandedQuestions] = useState<Set<string>>(new Set())
+
   // Load questions for current book
   useEffect(() => {
     if (!loaderRegistry || !resourceKey) return
 
+    const key = tqCacheKey(resourceKey, bookCode)
+    const hit = questionsCache.get(key)
+    if (hit !== undefined) {
+      setQuestions(hit)
+      setLoading(false)
+      return
+    }
+
     let cancelled = false
 
     const loadQuestions = async () => {
       setLoading(true)
       setError(null)
-      
+
       try {
         const loader = loaderRegistry.getLoader('questions')
         if (!loader) {
           throw new Error('Translation Questions loader not found')
         }
 
-        console.log(`📖 Loading translation questions for: ${resourceKey}/${bookCode}`)
         const content = await loader.loadContent(resourceKey, bookCode)
-        
-        if (cancelled) return
 
+        if (cancelled) return
+        if (questionsCache.size >= TQ_CACHE_MAX) questionsCache.delete(questionsCache.keys().next().value!)
+        questionsCache.set(key, content)
         setQuestions(content)
       } catch (err) {
         if (cancelled) return
-
         console.error(`Failed to load questions for ${bookCode}:`, err)
         setError(err instanceof Error ? err.message : 'Failed to load questions')
       } finally {
-        if (!cancelled) {
-          setLoading(false)
-        }
+        if (!cancelled) setLoading(false)
       }
     }
 
     loadQuestions()
-
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
   }, [resourceKey, bookCode, loaderRegistry])
 
   // Filter questions for current chapter/verse range

apps/tc-study/src/components/resources/TranslationWordsViewer.tsx

@@ -17,6 +17,9 @@ interface TranslationWord {
   seeAlso?: string[]
 }
 
+const TW_WORD_CACHE_MAX = 80
+const twWordCache = new Map<string, TranslationWord>()
+
 interface TranslationWordsViewerExtendedProps {
   resourceKey: string
   metadata?: any
@@ -159,52 +162,47 @@ export function TranslationWordsViewer({
     }
   }, [metadata, selectedWordId, initialEntryId])
 
-  // Load word content when selection changes
+  // Load word content when selection changes (cached by resourceKey+entryId so switching tabs doesn't re-fetch)
   useEffect(() => {
-    if (!selectedWordId || !resourceKey) {
-      console.log('[TranslationWordsViewer] Skipping load - selectedWordId:', selectedWordId, 'resourceKey:', resourceKey)
-      return
-    }
+    if (!selectedWordId || !resourceKey) return
 
-    // Skip loading if selectedWordId is a directory (e.g., "bible")
     if (selectedWordId === 'bible' || !selectedWordId.includes('/')) {
-      console.warn('⚠️ Skipping load for directory entry:', selectedWordId)
       setError('Please select a word entry, not a category')
       setLoading(false)
       return
     }
 
-    // Don't load if loaderRegistry is not available
     if (!loaderRegistry) {
-      console.error('⚠️ LoaderRegistry not available, cannot load word')
       setError('Resource loader not available. Please refresh the page.')
       setLoading(false)
       return
     }
 
+    const key = `tw:${resourceKey}:${selectedWordId}`
+    const hit = twWordCache.get(key)
+    if (hit !== undefined) {
+      setWord(hit)
+      setError(null)
+      setLoading(false)
+      return
+    }
+
     const loadWord = async () => {
       setLoading(true)
       setError(null)
-      
+
       try {
         const loader = loaderRegistry.getLoader('words')
         if (!loader) {
           throw new Error('Translation Words loader not found')
         }
-        
-        console.log('📖 Loading word:', { resourceKey, entryId: selectedWordId })
-        if (!selectedWordId || !selectedWordId.includes('/')) {
-          throw new Error(`Invalid entry ID format: "${selectedWordId}". Expected format: "bible/category/term"`)
-        }
         const wordData = await loader.loadContent(resourceKey, selectedWordId)
-        setWord(wordData as TranslationWord)
+        const w = wordData as TranslationWord
+        if (twWordCache.size >= TW_WORD_CACHE_MAX) twWordCache.delete(twWordCache.keys().next().value!)
+        twWordCache.set(key, w)
+        setWord(w)
       } catch (err) {
-        console.error('❌ Failed to load word:', {
-          resourceKey,
-          entryId: selectedWordId,
-          error: err instanceof Error ? err.message : String(err),
-          stack: err instanceof Error ? err.stack : undefined
-        })
+        console.error('❌ Failed to load word:', { resourceKey, entryId: selectedWordId, error: err })
         setError(err instanceof Error ? err.message : 'Failed to load word')
       } finally {
         setLoading(false)