feat: support modal-only resources without panel viewers

abelpz · cursoragent · abelpz · commit b5842fb547a4 · 2026-02-05T07:53:56.000-04:00
Enable resources to be registered without panel tab viewers, making them
accessible only via modal popups (Entry Viewer Registry). This allows for
auxiliary resources like glossaries and reference materials that don't
need full panel views.

Changes:
- Make viewer optional in ResourceTypeDefinition type
- Update ResourceTypeRegistry to conditionally register viewers
- Skip panel assignment for resources without viewers
- Register Translation Words and Translation Academy as modal-only (testing)
- Add logging to differentiate modal-only from full resources

Benefits:
- Reduces UI clutter by hiding auxiliary resources from panel tabs
- Maintains full background download and caching functionality
- Resources remain accessible via links and cross-references in modals
- Provides flexibility for different resource interaction patterns

Technical Details:
- ViewerRegistry.hasViewer() checks determine panel assignment
- Modal-only resources still load metadata and download content
- Entry Viewer Registry handles modal rendering independently

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/apps/tc-study/src/components/ResourceTypeInitializer.tsx b/apps/tc-study/src/components/ResourceTypeInitializer.tsx
@@ -26,11 +26,27 @@ export function ResourceTypeInitializer() {
         } = await import('../resourceTypes')
         
         registry.register(scriptureResourceType)
-        registry.register(translationWordsResourceType)
         registry.register(translationWordsLinksResourceType)
-        registry.register(translationAcademyResourceType)
         registry.register(translationNotesResourceType)
         
+        // TESTING: Register TW and TA without viewers (modal-only resources)
+        // We create modified versions that only have the loader, no viewer
+        console.log('📦 [Initializer] Registering modal-only resources (TW, TA)...')
+        
+        // Translation Words (modal-only)
+        const twModalOnly = {
+          ...translationWordsResourceType,
+          viewer: undefined // Remove viewer so it won't appear as a tab
+        }
+        registry.register(twModalOnly)
+        
+        // Translation Academy (modal-only)
+        const taModalOnly = {
+          ...translationAcademyResourceType,
+          viewer: undefined // Remove viewer so it won't appear as a tab
+        }
+        registry.register(taModalOnly)
+        
         console.log('📦 [Initializer] ✅ Resource types registered')
         setInitialized(true)
         
diff --git a/apps/tc-study/src/components/read/SimplifiedReadView.tsx b/apps/tc-study/src/components/read/SimplifiedReadView.tsx
@@ -8,43 +8,43 @@
  */
 
 import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  TouchSensor,
-  pointerWithin,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type DragOverEvent,
-  type DragStartEvent,
+    DndContext,
+    DragOverlay,
+    PointerSensor,
+    TouchSensor,
+    pointerWithin,
+    useSensor,
+    useSensors,
+    type DragEndEvent,
+    type DragOverEvent,
+    type DragStartEvent,
 } from '@dnd-kit/core'
 import {
-  LinkedPanel,
-  LinkedPanelsContainer,
-  createDefaultPluginRegistry,
-  type LinkedPanelsConfig,
+    LinkedPanel,
+    LinkedPanelsContainer,
+    createDefaultPluginRegistry,
+    type LinkedPanelsConfig,
 } from 'linked-panels'
-import { Loader2, Package, CheckCircle2, XCircle } from 'lucide-react'
+import { CheckCircle2, Loader2, Package, XCircle } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useCatalogManager, useCacheAdapter, useCompletenessChecker, useResourceTypeRegistry, useViewerRegistry } from '../../contexts'
+import { useCacheAdapter, useCatalogManager, useCompletenessChecker, useResourceTypeRegistry, useViewerRegistry } from '../../contexts'
 import { useAppStore } from '../../contexts/AppContext'
 import type { ResourceInfo } from '../../contexts/types'
 import { useBackgroundDownload, useCatalogBackgroundDownload, useResourceManagement, useStudioResources, useSwipeGesture } from '../../hooks'
 import { createResourceMetadata } from '../../lib/services/ResourceMetadataFactory'
-import { useWorkspaceStore } from '../../lib/stores/workspaceStore'
 import { usePackageStore } from '../../lib/stores/packageStore'
-import type { ExportWorkerMessage, ExportWorkerResponse } from '../../workers/collectionExport.worker'
+import { useWorkspaceStore } from '../../lib/stores/workspaceStore'
 import {
-  entryLinkClickPlugin,
-  linkClickPlugin,
-  scriptureContentRequestPlugin,
-  scriptureContentResponsePlugin,
-  scriptureTokensBroadcastPlugin,
-  tokenClickPlugin
+    entryLinkClickPlugin,
+    linkClickPlugin,
+    scriptureContentRequestPlugin,
+    scriptureContentResponsePlugin,
+    scriptureTokensBroadcastPlugin,
+    tokenClickPlugin
 } from '../../plugins/messageTypePlugins'
 import { useStudyStore } from '../../store/studyStore'
+import type { ExportWorkerMessage, ExportWorkerResponse } from '../../workers/collectionExport.worker'
 import { CollectionImportDialog } from '../collections/CollectionImportDialog'
 import { EntryResourceModal } from '../common/EntryResourceModal'
 import { FallbackViewer } from '../resources'
@@ -533,17 +533,21 @@ export function SimplifiedReadView({ initialLanguage }: SimplifiedReadViewProps
         addResource(basicResourceInfo)
         loadedResourceKeys.push(resourceKey)
         
-        // Assign to panels immediately
-        const isScripture = type === 'scripture'
-        const panelId = isScripture ? 'panel-1' : 'panel-2'
-        const currentPanel = getPanel(panelId)
-        const currentIndex = currentPanel?.resourceKeys.length || 0
-        assignResourceToPanel(resourceKey, panelId, currentIndex)
-        if (currentIndex === 0) {
-          setActiveResourceInPanel(panelId, 0)
+        // Only assign to panels if resource has a viewer (modal-only resources won't appear as tabs)
+        const hasViewer = viewerRegistry.hasViewer(type)
+        if (hasViewer) {
+          const isScripture = type === 'scripture'
+          const panelId = isScripture ? 'panel-1' : 'panel-2'
+          const currentPanel = getPanel(panelId)
+          const currentIndex = currentPanel?.resourceKeys.length || 0
+          assignResourceToPanel(resourceKey, panelId, currentIndex)
+          if (currentIndex === 0) {
+            setActiveResourceInPanel(panelId, 0)
+          }
+          console.log(`✅ Immediately added to panel: ${resourceKey} (metadata will load in background)`)
+        } else {
+          console.log(`✅ Loaded resource (modal-only): ${resourceKey} (no panel viewer)`)
         }
-        
-        console.log(`✅ Immediately added: ${resourceKey} (metadata will load in background)`)
       }
       
       console.log(`⚡ Phase 1 complete: ${loadedResourceKeys.length} resources in UI`)
diff --git a/apps/tc-study/src/components/studio/LinkedPanelsStudio.tsx b/apps/tc-study/src/components/studio/LinkedPanelsStudio.tsx
@@ -19,28 +19,28 @@ import { usePackageStore } from '../../lib/stores'
 import { useWorkspaceStore } from '../../lib/stores/workspaceStore'
 import { entryLinkClickPlugin, linkClickPlugin, scriptureContentRequestPlugin, scriptureContentResponsePlugin, scriptureTokensBroadcastPlugin, tokenClickPlugin } from '../../plugins/messageTypePlugins'
 import { useStudyStore } from '../../store/studyStore'
-import { FallbackViewer } from '../resources'
 import { EntryResourceModal } from '../common/EntryResourceModal'
+import { FallbackViewer } from '../resources'
 // import { AddResourceWizard } from '../wizard' // Temporarily inlined
 // import { AnchorSelector } from './AnchorSelector'
+import {
+    DndContext,
+    DragOverlay,
+    PointerSensor,
+    TouchSensor,
+    pointerWithin,
+    useSensor,
+    useSensors,
+    type DragEndEvent,
+    type DragOverEvent,
+    type DragStartEvent,
+} from '@dnd-kit/core'
 import { getBaseResourceKey, useResourceManagement, useStudioResources, useSwipeGesture } from '../../hooks'
+import { DroppablePanel } from './DroppablePanel'
 import { EmptyPanelState } from './EmptyPanelState'
 import { NavigationBar } from './NavigationBar'
 import { PanelHeader } from './PanelHeader'
-import { DroppablePanel } from './DroppablePanel'
 import { ResourceLibrarySidebar, ResourceWizardPanel } from './ResourceLibrarySidebar'
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  pointerWithin,
-  type DragEndEvent,
-  type DragStartEvent,
-  type DragOverEvent,
-} from '@dnd-kit/core'
 
 export function LinkedPanelsStudio() {
   // Wizard state
diff --git a/packages/resource-types/src/ResourceTypeRegistry.ts b/packages/resource-types/src/ResourceTypeRegistry.ts
@@ -54,9 +54,8 @@ export class ResourceTypeRegistry {
       throw new Error(`Resource type '${id}' must have a loader`)
     }
     
-    if (!viewer) {
-      throw new Error(`Resource type '${id}' must have a viewer`)
-    }
+    // Viewer is optional - resources without viewers are modal-only
+    // (accessible via Entry Viewer Registry, not as panel tabs)
     
     // 2. Store definition
     this.types.set(id, definition)
@@ -96,44 +95,50 @@ export class ResourceTypeRegistry {
       throw error
     }
     
-    // 5. Register viewer (UI layer)
-    try {
-      this.viewerRegistry.registerViewer({
-        resourceType: id,
-        displayName: displayName,
-        component: viewer,
-        canHandle: (metadata: any) => {
-          // Check type
-          if (metadata.type === id) return true
-          
-          // Check subjects
-          if (metadata.subject && subjects.includes(metadata.subject)) {
-            return true
-          }
-          
-          // Check aliases
-          if (aliases) {
-            for (const alias of aliases) {
-              if (
-                metadata.type === alias ||
-                metadata.resourceId === alias ||
-                metadata.subject === alias
-              ) {
-                return true
+    // 5. Register viewer (UI layer) - only if viewer is provided
+    if (viewer) {
+      try {
+        this.viewerRegistry.registerViewer({
+          resourceType: id,
+          displayName: displayName,
+          component: viewer,
+          canHandle: (metadata: any) => {
+            // Check type
+            if (metadata.type === id) return true
+            
+            // Check subjects
+            if (metadata.subject && subjects.includes(metadata.subject)) {
+              return true
+            }
+            
+            // Check aliases
+            if (aliases) {
+              for (const alias of aliases) {
+                if (
+                  metadata.type === alias ||
+                  metadata.resourceId === alias ||
+                  metadata.subject === alias
+                ) {
+                  return true
+                }
               }
             }
+            
+            return false
           }
-          
-          return false
-        }
-      })
-    } catch (error) {
-      console.error(`Failed to register viewer for '${id}':`, error)
-      throw error
+        })
+      } catch (error) {
+        console.error(`Failed to register viewer for '${id}':`, error)
+        throw error
+      }
+    } else {
+      if (this.debug) {
+        console.log(`ℹ️ No viewer registered for '${id}' (modal-only resource)`)
+      }
     }
     
     // 6. Log success (simplified)
-    console.log(`✅ Registered: ${id} (${subjects.length} subjects)`)
+    console.log(`✅ Registered: ${id} (${subjects.length} subjects)${viewer ? '' : ' [modal-only]'}`)
   }
   
   /**
diff --git a/packages/resource-types/src/types.ts b/packages/resource-types/src/types.ts
@@ -4,9 +4,9 @@
  * Defines the structure for resource type plugins
  */
 
-import type { ResourceLoader, ResourceViewerProps } from './base-types'
 import type { BaseSignal, ResourceMetadata } from '@bt-synergy/resource-panels'
 import type { ComponentType } from 'react'
+import type { ResourceLoader, ResourceViewerProps } from './base-types'
 
 /**
  * API filters for Door43 catalog requests
@@ -261,6 +261,8 @@ export interface ResourceTypeDefinition {
   /** 
    * Viewer component - either a single component or platform-specific components
    * 
+   * Optional: If omitted, resource will be modal-only (accessible via Entry Viewer Registry)
+   * 
    * Single viewer (works on both platforms):
    * ```typescript
    * viewer: MyViewer
@@ -274,7 +276,7 @@ export interface ResourceTypeDefinition {
    * }
    * ```
    */
-  viewer: ComponentType<ResourceViewerProps> | PlatformViewers
+  viewer?: ComponentType<ResourceViewerProps> | PlatformViewers
   
   // ===== COMMUNICATION =====
   /** 
