@jmruthers/pace-core 0.5.188 → 0.5.190

package/src/components/FileDisplay/FileDisplay.tsx

@@ -8,20 +8,34 @@ import { PublicPageContext, useIsPublicPage } from '../PublicLayout/PublicPagePr
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from '../Dialog/Dialog';
 import { Button } from '../Button/Button';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { logger } from '../../utils/core/logger';
 
 /**
  * Size classes for fallback display
  */
 const fallbackSizeClasses = {
-  xs: 'h-4 w-4 text-xs',
-  sm: 'h-6 w-6 text-sm',
-  md: 'h-8 w-8 text-base',
-  lg: 'h-12 w-12 text-lg',
-  xl: 'h-16 w-16 text-xl',
-  '2xl': 'h-20 w-20 text-2xl'
+  xs: 'size-4 text-xs',
+  sm: 'size-6 text-sm',
+  md: 'size-8 text-base',
+  lg: 'size-12 text-lg',
+  xl: 'size-16 text-xl',
+  '2xl': 'size-20 text-2xl'
 };
 
+/**
+ * Base classes for fallback display
+ */
+const fallbackBaseClasses = 'size-full grid place-items-center text-center text-sec-600 font-semibold';
+
+/**
+ * Helper function to compute fallback classes for a given size
+ */
+function getFallbackClasses(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md'): string {
+  const sizeClass = fallbackSizeClasses[size];
+  return `${fallbackBaseClasses} ${sizeClass}`.trim();
+}
+
 /**
  * Default fallback text generator - extracts initials from file name
  */
@@ -43,7 +57,13 @@ function defaultGenerateFallbackText(fileName?: string): string {
 export interface FileDisplayProps {
   table_name: string;
   record_id: string;
-  organisation_id: string;
+  /** 
+   * Optional organisation ID. When not provided (undefined), the component will automatically
+   * search for files in both user-scoped (organisation_id = null) and organisation-scoped contexts.
+   * If both types of files exist, organisation-scoped files are preferred.
+   * When explicitly set to null, only user-scoped files are searched.
+   */
+  organisation_id?: string;
   category?: FileCategory;
   /** Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering */
   displayOnly?: boolean;
@@ -60,8 +80,18 @@ export interface FileDisplayProps {
   generateFallbackText?: (fileName?: string) => string;
   /** Explicit fallback text to display (overrides generateFallbackText) */
   fallbackText?: string;
+  /** Source text to use for generating fallback text (overrides filename) */
+  fallbackSourceText?: string;
   /** Size variant for fallback display (only applies when showFallback is true) */
   fallbackSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** 
+   * Enable children rendering in displayOnly mode. When true, uses standard display path 
+   * (with children support) even if showDelete is false. The delete button will only appear 
+   * if showDelete is also true.
+   */
+  enableChildren?: boolean;
+  /** Whether to show metadata (filename, filesize, mimetype) in figcaption. Defaults to true. */
+  showMetadata?: boolean;
 }
 
 // Shared rendering logic for file display
@@ -80,13 +110,16 @@ interface FileDisplayContentProps {
   children?: React.ReactNode;
   onDelete?: () => Promise<void>;
   clearError?: () => void;
-  organisation_id: string;
+  organisation_id: string | undefined;
   loadingComponent?: React.ComponentType;
   errorComponent?: React.ComponentType<{ error: Error | string | null; retry?: () => void }>;
   showFallback?: boolean;
   generateFallbackText?: (fileName?: string) => string;
   fallbackText?: string;
+  fallbackSourceText?: string;
   fallbackSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  enableChildren?: boolean;
+  showMetadata?: boolean;
 }
 
 function FileDisplayContent({
@@ -110,7 +143,10 @@ function FileDisplayContent({
   showFallback = false,
   generateFallbackText = defaultGenerateFallbackText,
   fallbackText,
-  fallbackSize = 'md'
+  fallbackSourceText,
+  fallbackSize = 'md',
+  enableChildren = false,
+  showMetadata = true
 }: FileDisplayContentProps) {
   const [imageError, setImageError] = useState(false);
   const [internalFileUrls, setInternalFileUrls] = useState<Map<string, string>>(new Map(fileUrls));
@@ -120,16 +156,15 @@ function FileDisplayContent({
   // Compute fallback text
   const computedFallbackText = useMemo(() => {
     if (fallbackText) return fallbackText;
-    const fileName = fileReference?.file_metadata?.fileName;
-    return generateFallbackText(fileName);
-  }, [fallbackText, fileReference, generateFallbackText]);
+    // Use fallbackSourceText if provided, otherwise fall back to filename
+    const sourceText = fallbackSourceText ?? fileReference?.file_metadata?.fileName;
+    return generateFallbackText(sourceText);
+  }, [fallbackText, fallbackSourceText, fileReference, generateFallbackText]);
 
   // Compute fallback classes
   const fallbackClasses = useMemo(() => {
-    const sizeClass = fallbackSizeClasses[fallbackSize];
-    const baseClasses = 'flex items-center justify-center bg-sec-100 text-sec-600 font-semibold rounded';
-    return `${baseClasses} ${sizeClass} ${className}`.trim();
-  }, [fallbackSize, className]);
+    return getFallbackClasses(fallbackSize);
+  }, [fallbackSize]);
 
   // Sync fileUrls prop with internal state
   // Track file references to detect when they change and sync URLs
@@ -159,28 +194,8 @@ function FileDisplayContent({
     setImageError(false);
   };
 
-  const handleImageError = (e?: React.SyntheticEvent<HTMLImageElement>) => {
+  const handleImageError = () => {
     setImageError(true);
-    
-    // If fallback is enabled, show fallback UI when image fails to load
-    if (showFallback && e) {
-      const target = e.target as HTMLImageElement;
-      target.style.display = 'none';
-      
-      // Check if fallback already exists
-      if (target.nextSibling && (target.nextSibling as HTMLElement).className.includes('bg-sec-100')) {
-        return; // Fallback already shown
-      }
-      
-      // Create fallback element
-      const fallback = document.createElement('div');
-      fallback.className = fallbackClasses;
-      fallback.textContent = computedFallbackText;
-      fallback.title = fileReference?.file_metadata?.fileName || 'File';
-      
-      // Insert fallback after the image
-      target.parentNode?.insertBefore(fallback, target.nextSibling);
-    }
   };
 
   const getFileIcon = (fileType: string) => {
@@ -211,27 +226,29 @@ function FileDisplayContent({
     // Show fallback if enabled
     if (showFallback) {
       return (
-        <div className={fallbackClasses} title="File unavailable">
-          {computedFallbackText}
-        </div>
+        <figure className={className} title="File unavailable">
+          <p className={fallbackClasses}>
+            {computedFallbackText}
+          </p>
+        </figure>
       );
     }
     
     return (
-      <div className={`p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`}>
-        <div className="text-acc-600">
+      <figure className={className} title="Error">
+        <p className={getFallbackClasses(fallbackSize || 'md')}>
           Error loading file: {error instanceof Error ? error.message : String(error)}
-        </div>
+        </p>
         {clearError && (
-          <button
+          <Button
             onClick={clearError}
-            className="mt-2 text-sm text-acc-700 hover:text-acc-800 underline"
+            className="mt-2"
             aria-label="Retry loading file"
           >
             Try again
-          </button>
+          </Button>
         )}
-      </div>
+      </figure>
     );
   }
 
@@ -241,28 +258,32 @@ function FileDisplayContent({
     // Show fallback if enabled
     if (showFallback) {
       return (
-        <div className={fallbackClasses} title="No file">
-          {computedFallbackText}
+        <figure className={className} title="No file">
+          <p className={fallbackClasses}>
+            {computedFallbackText}
+          </p>
           {children}
-        </div>
+        </figure>
       );
     }
     
     return (
-      <div className={`text-sec-500 text-center p-4 ${className}`}>
-        No files found
+      <figure className={`text-sec-500 text-center p-4 ${className}`}>
+        <p>No files found</p>
         {children}
-      </div>
+      </figure>
     );
   }
 
   // During loading, show fallback if enabled (better UX than spinner for empty states)
   if (isLoading && showFallback && fileCount === 0) {
     return (
-      <div className={fallbackClasses} title="Loading...">
-        {computedFallbackText}
+      <figure className={className} title="Loading...">
+        <p className={fallbackClasses}>
+          {computedFallbackText}
+        </p>
         {children}
-      </div>
+      </figure>
     );
   }
 
@@ -271,9 +292,11 @@ function FileDisplayContent({
       return <LoadingComponent />;
     }
     return (
-      <div className={`flex items-center justify-center p-4 ${className}`}>
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-500"></div>
-      </div>
+      <figure className={className} title="Loading">
+        <p className="flex items-center justify-center p-4">
+          <LoadingSpinner />
+        </p>
+      </figure>
     );
   }
 
@@ -282,34 +305,39 @@ function FileDisplayContent({
     const isImage = fileReference.file_metadata.fileType?.startsWith('image/');
     
     // Simplified image-only display when displayOnly is true and it's an image
-    if (displayOnly && isImage && !showDelete) {
+    // Only use simplified path if enableChildren is not explicitly enabled
+    if (displayOnly && isImage && !showDelete && !enableChildren) {
       // Show fallback if image error occurred and fallback is enabled
       if (imageError && showFallback) {
         return (
-          <div className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
-            {computedFallbackText}
-          </div>
+          <figure className={className} title={fileReference.file_metadata.fileName || 'File'}>
+            <p className={fallbackClasses}>
+              {computedFallbackText}
+            </p>
+          </figure>
         );
       }
       
       // Show loading skeleton if URL is not available yet
       if (!fileUrl) {
         return (
-          <div className={`bg-sec-100 rounded animate-pulse ${className || "max-w-full h-48"}`}>
-            <div className="w-full h-full flex items-center justify-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-500"></div>
-            </div>
-          </div>
+          <figure className={className || "max-w-full h-48"} title="Loading">
+            <p className={fallbackClasses}>
+              <LoadingSpinner />
+            </p>
+          </figure>
         );
       }
       
       return (
-        <img
-          src={fileUrl}
-          alt={fileReference.file_metadata.fileName || 'File'}
-          className={className || "max-w-full h-auto"}
-          onError={handleImageError}
-        />
+        <figure className={className || "max-w-full h-auto"}>
+          <img
+            src={fileUrl}
+            alt={fileReference.file_metadata.fileName || 'File'}
+            className="max-w-full h-auto"
+            onError={handleImageError}
+          />
+        </figure>
       );
     }
     
@@ -320,19 +348,29 @@ function FileDisplayContent({
       const ariaLabel = `Open ${fileName} in new tab`;
       
       return (
-        <a
-          href={fileUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={ariaLabel}
-          className={`flex items-center gap-2 p-3 bg-sec-50 border border-sec-200 rounded-lg hover:bg-sec-100 transition-colors text-main-600 hover:text-main-700 focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2 ${className || ''}`.trim()}
-        >
-          <FileText className="h-5 w-5 shrink-0" aria-hidden="true" />
-          <span className="flex-1 font-medium truncate">
-            {fileName}
-          </span>
-          <ExternalLink className="h-5 w-5 shrink-0" aria-hidden="true" />
-        </a>
+        <figure className={className}>
+          <a
+            href={fileUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={ariaLabel}
+            className="flex items-center gap-2 p-3 bg-sec-50 border border-sec-200 rounded-lg hover:bg-sec-100 transition-colors text-main-600 hover:text-main-700 focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
+          >
+            <FileText className="size-5 shrink-0" aria-hidden="true" />
+            <span className="flex-1 font-medium truncate">
+              {fileName}
+            </span>
+            <ExternalLink className="size-5 shrink-0" aria-hidden="true" />
+          </a>
+          {showMetadata && (
+            <figcaption>
+              <p>{fileName}</p>
+              {fileReference.file_metadata.fileSize && (
+                <p>{formatFileSize(fileReference.file_metadata.fileSize)} • {fileReference.file_metadata.fileType}</p>
+              )}
+            </figcaption>
+          )}
+        </figure>
       );
     }
     
@@ -340,16 +378,18 @@ function FileDisplayContent({
     // For displayOnly mode, if fallback is enabled and there's no URL or image error, show fallback instead of folder icon
     if (displayOnly && showFallback && (!fileUrl || imageError || !isImage)) {
       return (
-        <div className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
-          {computedFallbackText}
-        </div>
+        <figure className={className} title={fileReference.file_metadata.fileName || 'File'}>
+          <p className={fallbackClasses}>
+            {computedFallbackText}
+          </p>
+        </figure>
       );
     }
     
     return (
-      <div className={`space-y-2 ${className}`}>
+      <figure className={`relative ${className}`}>
         {isImage && fileUrl && !imageError ? (
-          <div className="relative">
+          <>
             <img
               src={fileUrl}
               alt={fileReference.file_metadata.fileName || 'File'}
@@ -358,14 +398,16 @@ function FileDisplayContent({
             />
             {showDelete && (
               <>
-                <button
+                <Button
+                  variant="destructive"
+                  size="icon"
                   onClick={handleDeleteClick}
-                  className="absolute top-2 right-2 bg-acc-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-acc-600"
+                  className="absolute top-2 right-2"
                   title="Delete file"
                   aria-label="Delete file"
                 >
                   ×
-                </button>
+                </Button>
                 <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                   <DialogContent size="sm">
                     <DialogHeader>
@@ -386,73 +428,108 @@ function FileDisplayContent({
                 </Dialog>
               </>
             )}
-          </div>
+            {children}
+            {showMetadata && (
+              <figcaption>
+                <p>{fileReference.file_metadata.fileName || 'Unknown file'}</p>
+                {(fileReference.file_metadata.fileSize || fileReference.file_metadata.fileType) && (
+                  <p>
+                    {fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize)}
+                    {fileReference.file_metadata.fileSize && fileReference.file_metadata.fileType && ' • '}
+                    {fileReference.file_metadata.fileType}
+                  </p>
+                )}
+              </figcaption>
+            )}
+          </>
         ) : isImage && imageError && showFallback ? (
           // Show fallback when image fails to load and fallback is enabled
-          <div className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
-            {computedFallbackText}
-          </div>
+          <>
+            <p className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
+              {computedFallbackText}
+            </p>
+            {children}
+            {showMetadata && (
+              <figcaption>
+                <p>{fileReference.file_metadata.fileName || 'Unknown file'}</p>
+                {(fileReference.file_metadata.fileSize || fileReference.file_metadata.fileType) && (
+                  <p>
+                    {fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize)}
+                    {fileReference.file_metadata.fileSize && fileReference.file_metadata.fileType && ' • '}
+                    {fileReference.file_metadata.fileType}
+                  </p>
+                )}
+              </figcaption>
+            )}
+          </>
         ) : (
-          <div className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
-            <span className="text-2xl">
-              {getFileIcon(fileReference.file_metadata.fileType || '')}
-            </span>
-            <div className="flex-1 min-w-0">
-              <div className="font-medium text-sec-900 truncate">
-                {fileReference.file_metadata.fileName || 'Unknown file'}
-              </div>
-              <div className="text-sm text-sec-500">
-                {fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize)}
-                {fileReference.file_metadata.fileType && ` • ${fileReference.file_metadata.fileType}`}
-              </div>
-            </div>
-            {showDelete && (
-              <>
-                <button
-                  onClick={handleDeleteClick}
-                  className="text-acc-500 hover:text-acc-700 p-1"
-                  title="Delete file"
-                  aria-label="Delete file"
-                >
-                  ×
-                </button>
-                <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                  <DialogContent size="sm">
-                    <DialogHeader>
-                      <DialogTitle>Confirm Delete</DialogTitle>
-                    </DialogHeader>
-                    <DialogBody>
-                      <p>Are you sure you want to delete this file? This action cannot be undone.</p>
-                    </DialogBody>
-                    <DialogFooter>
-                      <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
-                        Cancel
-                      </Button>
-                      <Button variant="destructive" onClick={handleDeleteConfirm}>
-                        Delete
-                      </Button>
-                    </DialogFooter>
-                  </DialogContent>
-                </Dialog>
-              </>
+          <>
+            <p className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
+              <span className="text-2xl">
+                {getFileIcon(fileReference.file_metadata.fileType || '')}
+              </span>
+              {showDelete && (
+                <>
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    onClick={handleDeleteClick}
+                    className="ml-auto"
+                    title="Delete file"
+                    aria-label="Delete file"
+                  >
+                    ×
+                  </Button>
+                  <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <DialogContent size="sm">
+                      <DialogHeader>
+                        <DialogTitle>Confirm Delete</DialogTitle>
+                      </DialogHeader>
+                      <DialogBody>
+                        <p>Are you sure you want to delete this file? This action cannot be undone.</p>
+                      </DialogBody>
+                      <DialogFooter>
+                        <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+                          Cancel
+                        </Button>
+                        <Button variant="destructive" onClick={handleDeleteConfirm}>
+                          Delete
+                        </Button>
+                      </DialogFooter>
+                    </DialogContent>
+                  </Dialog>
+                </>
+              )}
+            </p>
+            {children}
+            {showMetadata && (
+              <figcaption>
+                <p>{fileReference.file_metadata.fileName || 'Unknown file'}</p>
+                {(fileReference.file_metadata.fileSize || fileReference.file_metadata.fileType) && (
+                  <p>
+                    {fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize)}
+                    {fileReference.file_metadata.fileSize && fileReference.file_metadata.fileType && ' • '}
+                    {fileReference.file_metadata.fileType}
+                  </p>
+                )}
+              </figcaption>
             )}
-          </div>
+          </>
         )}
-        {children}
-      </div>
+      </figure>
     );
   }
 
   // Multiple files display
   return (
-    <div className={`space-y-2 ${className}`}>
+    <figure className={`space-y-2 ${className}`}>
       {fileReferences.map((fileRef) => {
         const isImage = fileRef.file_metadata.fileType?.startsWith('image/');
         const fileUrl = internalFileUrls.get(fileRef.id) || null;
         const canDownload = !isImage && fileUrl;
         
         return (
-          <div key={fileRef.id} className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
+          <figure key={fileRef.id} className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
             {isImage && fileUrl ? (
               <img
                 src={fileUrl}
@@ -465,17 +542,23 @@ function FileDisplayContent({
                 {getFileIcon(fileRef.file_metadata.fileType || '')}
               </span>
             )}
-            <div className="flex-1 min-w-0">
-              <div className="font-medium text-sec-900 truncate">
-                {fileRef.file_metadata.fileName || 'Unknown file'}
-              </div>
-              <div className="text-sm text-sec-500">
-                {fileRef.file_metadata.fileSize && formatFileSize(fileRef.file_metadata.fileSize)}
-                {fileRef.file_metadata.fileType && ` • ${fileRef.file_metadata.fileType}`}
-                {fileRef.file_metadata.category && ` • ${fileRef.file_metadata.category}`}
-              </div>
-            </div>
-            <div className="flex items-center space-x-2">
+            {showMetadata && (
+              <figcaption className="flex-1 min-w-0">
+                <p className="font-medium text-sec-900 truncate">
+                  {fileRef.file_metadata.fileName || 'Unknown file'}
+                </p>
+                {(fileRef.file_metadata.fileSize || fileRef.file_metadata.fileType || fileRef.file_metadata.category) && (
+                  <p className="text-sm text-sec-500">
+                    {fileRef.file_metadata.fileSize && formatFileSize(fileRef.file_metadata.fileSize)}
+                    {fileRef.file_metadata.fileSize && fileRef.file_metadata.fileType && ' • '}
+                    {fileRef.file_metadata.fileType}
+                    {(fileRef.file_metadata.fileSize || fileRef.file_metadata.fileType) && fileRef.file_metadata.category && ' • '}
+                    {fileRef.file_metadata.category}
+                  </p>
+                )}
+              </figcaption>
+            )}
+            <p className="flex items-center space-x-2">
               {canDownload && (
                 <a
                   href={fileRef.file_path}
@@ -486,22 +569,23 @@ function FileDisplayContent({
                   ↓
                 </a>
               )}
-            {showDelete && onDelete && (
-              <button
-                onClick={handleDeleteClick}
-                className="text-acc-500 hover:text-acc-700 p-1"
-                title="Delete file"
-                aria-label="Delete file"
-              >
-                ×
-              </button>
-            )}
-            </div>
-          </div>
+              {showDelete && onDelete && (
+                <Button
+                  variant="destructive"
+                  size="icon"
+                  onClick={handleDeleteClick}
+                  title="Delete file"
+                  aria-label="Delete file"
+                >
+                  ×
+                </Button>
+              )}
+            </p>
+          </figure>
         );
       })}
       {children}
-    </div>
+    </figure>
   );
 }
 
@@ -523,7 +607,10 @@ function FileDisplayPublic({
   showFallback,
   generateFallbackText,
   fallbackText,
-  fallbackSize
+  fallbackSourceText,
+  fallbackSize,
+  enableChildren,
+  showMetadata
 }: FileDisplayProps) {
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
@@ -552,16 +639,21 @@ function FileDisplayPublic({
           showFallback={showFallback}
           generateFallbackText={generateFallbackText}
           fallbackText={fallbackText}
+          fallbackSourceText={fallbackSourceText}
           fallbackSize={fallbackSize}
+          enableChildren={enableChildren}
+          showMetadata={showMetadata}
         />
       );
     }
     
     // Only show error if fallback is not enabled
     return (
-      <div className={`text-sec-500 text-center p-4 ${className}`}>
-        Supabase client not available in public context
-      </div>
+      <figure className={className} title="Error">
+        <p className={getFallbackClasses(fallbackSize || 'md')}>
+          Supabase client not available in public context
+        </p>
+      </figure>
     );
   }
 
@@ -640,7 +732,10 @@ function FileDisplayPublic({
       showFallback={showFallback}
       generateFallbackText={generateFallbackText}
       fallbackText={fallbackText}
+      fallbackSourceText={fallbackSourceText}
       fallbackSize={fallbackSize}
+      enableChildren={enableChildren}
+      showMetadata={showMetadata}
     />
   );
 }
@@ -663,15 +758,20 @@ function FileDisplayAuthenticated({
   showFallback,
   generateFallbackText,
   fallbackText,
-  fallbackSize
+  fallbackSourceText,
+  fallbackSize,
+  enableChildren,
+  showMetadata
 }: FileDisplayProps) {
   const { supabase } = useUnifiedAuth();
 
   if (!supabase) {
     return (
-      <div className={`text-sec-500 text-center p-4 ${className}`}>
-        Supabase client not available in authenticated context
-      </div>
+      <figure className={className} title="Error">
+        <p className={getFallbackClasses(fallbackSize || 'md')}>
+          Supabase client not available in authenticated context
+        </p>
+      </figure>
     );
   }
 
@@ -771,7 +871,10 @@ function FileDisplayAuthenticated({
       showFallback={showFallback}
       generateFallbackText={generateFallbackText}
       fallbackText={fallbackText}
+      fallbackSourceText={fallbackSourceText}
       fallbackSize={fallbackSize}
+      enableChildren={enableChildren}
+      showMetadata={showMetadata}
     />
   );
 }
@@ -808,7 +911,10 @@ export function FileDisplay({
   showFallback,
   generateFallbackText,
   fallbackText,
-  fallbackSize
+  fallbackSourceText,
+  fallbackSize,
+  enableChildren,
+  showMetadata
 }: FileDisplayProps) {
   // Check which context we're in and route to the appropriate component
   const isPublicPage = useIsPublicPage();
@@ -830,7 +936,10 @@ export function FileDisplay({
         showFallback={showFallback}
         generateFallbackText={generateFallbackText}
         fallbackText={fallbackText}
+        fallbackSourceText={fallbackSourceText}
         fallbackSize={fallbackSize}
+        enableChildren={enableChildren}
+        showMetadata={showMetadata}
       />
     );
   }
@@ -852,7 +961,10 @@ export function FileDisplay({
       showFallback={showFallback}
       generateFallbackText={generateFallbackText}
       fallbackText={fallbackText}
+      fallbackSourceText={fallbackSourceText}
       fallbackSize={fallbackSize}
+      enableChildren={enableChildren}
+      showMetadata={showMetadata}
     />
   );
 }