refactor: consolidate formatFileSize duplicates to shared formatBytes

- Update app/documents/page.tsx to use formatBytes from lib/format
- Update app/my-data/page.tsx to use formatBytes from lib/format
- Update components/shared/demo/DemoFileUpload.tsx to use formatBytes
- Update workspaceUtils.ts to re-export formatBytes as formatFileSize

DRY: 4 duplicate formatFileSize implementations → 1 SSOT (lib/format.ts)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: catomean

app/bots/legal-expert/components/demo/workspace/workspaceUtils.ts

@@ -1,15 +1,8 @@
 import { type UploadedFile } from '../types';
+import { formatBytes } from '@/lib/format';
 
-/**
- * Format file size in human-readable format
- */
-export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 Bytes';
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-}
+// Re-export for backwards compatibility
+export const formatFileSize = formatBytes;
 
 /**
  * Calculate and format total size of files

app/documents/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef, useCallback, type FormEvent, type ChangeEvent } from 'react';
 import Link from 'next/link';
 import { useAuth } from '@/lib/auth';
+import { formatBytes } from '@/lib/format';
 import { documentToasts, conversationToasts } from '@/lib/toast';
 import { PageLoading, InlineLoading, LoadingSpinner } from '@/components/shared/LoadingSpinner';
 import { DocumentStatusBadge } from '@/components/shared/DocumentStatusBadge';
@@ -323,12 +324,6 @@ export default function DocumentsPage() {
     setAddToBotDocument(null);
   };
 
-  const formatFileSize = (bytes: number) => {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
   if (authLoading) {
     return <PageLoading />;
   }
@@ -479,7 +474,7 @@ export default function DocumentsPage() {
                             <DocumentStatusBadge status={doc.status} />
                           </div>
                           <p className="text-sm text-gray-500 mt-1">
-                            {formatFileSize(doc.size_bytes || 0)}
+                            {formatBytes(doc.size_bytes || 0)}
                             {doc.chunk_count ? ` • ${doc.chunk_count} chunks` : ''}
                           </p>
                           {doc.error_message && (

app/my-data/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef, type FormEvent, type ChangeEvent } from 'react';
 import Link from 'next/link';
 import { useRequireAuth } from '@/lib/auth';
+import { formatBytes } from '@/lib/format';
 import { PageLoading, InlineLoading, LoadingSpinner } from '@/components/shared/LoadingSpinner';
 import { DocumentStatusBadge } from '@/components/shared/DocumentStatusBadge';
 import { DOCUMENT_STATUS } from '@/lib/constants';
@@ -207,12 +208,6 @@ export default function MyDataPage() {
     window.location.href = '/';
   };
 
-  const formatFileSize = (bytes: number) => {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
   if (authLoading || !user) {
     return <PageLoading />;
   }
@@ -369,7 +364,7 @@ export default function MyDataPage() {
                           <DocumentStatusBadge status={doc.status} />
                         </div>
                         <p className="text-sm text-gray-500 mt-1">
-                          {formatFileSize(doc.size_bytes || 0)}
+                          {formatBytes(doc.size_bytes || 0)}
                           {doc.chunk_count ? ` • ${doc.chunk_count} chunks` : ''}
                         </p>
                         {doc.error_message && (

components/shared/demo/DemoFileUpload.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, type FC, type DragEvent, type ChangeEvent } from 'react';
 import type { FileCategory, UploadedFile } from '@/lib/demo/types';
 import type { BotAccentColor } from '@/types/bot';
+import { formatBytes } from '@/lib/format';
 
 interface DemoFileUploadProps {
   files: UploadedFile[];
@@ -21,12 +22,6 @@ const accentColorClasses: Record<BotAccentColor, { border: string; bg: string; t
   amber: { border: 'border-amber-300', bg: 'bg-amber-50', text: 'text-amber-600' },
 };
 
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
 function getStatusIcon(status: UploadedFile['status']) {
   switch (status) {
     case 'uploading':
@@ -222,7 +217,7 @@ export const DemoFileUpload: FC<DemoFileUploadProps> = ({
                   <div className="min-w-0">
                     <p className="text-sm font-medium text-gray-900 truncate">{file.name}</p>
                     <p className="text-xs text-gray-500">
-                      {formatFileSize(file.size)} &bull; {getStatusText(file.status)}
+                      {formatBytes(file.size)} &bull; {getStatusText(file.status)}
                       {file.errorMessage && (
                         <span className="text-red-500 ml-1">- {file.errorMessage}</span>
                       )}