@striae-org/striae 3.3.0 → 4.0.1

package/app/components/actions/image-manage.ts

@@ -1,16 +1,13 @@
 import type { User } from 'firebase/auth';
-import paths from '~/config/config.json';
 import { 
-  getImageApiKey,
   getAccountHash 
 } from '~/utils/auth';
+import { fetchImageApi, uploadImageApi } from '~/utils/image-api-client';
 import { canUploadFile } from '~/utils/permissions';
 import { getCaseData, updateCaseData, deleteFileAnnotations } from '~/utils/data-operations';
 import type { CaseData, FileData, ImageUploadResponse } from '~/types';
 import { auditService } from '~/services/audit';
 
-const IMAGE_URL = paths.image_worker_url;
-
 export const fetchFiles = async (
   user: User, 
   caseNumber: string, 
@@ -52,127 +49,70 @@ export const uploadFile = async (
     throw new Error(permission.reason || 'You cannot upload more files to this case.');
   }
 
-  const imagesApiToken = await getImageApiKey();
-  
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    const formData = new FormData();
-    formData.append('file', file);
-
-    xhr.upload.addEventListener('progress', (event) => {
-      if (event.lengthComputable && onProgress) {
-        const progress = Math.round((event.loaded / event.total) * 100);
-        onProgress(progress);
-      }
-    });
-
-    xhr.addEventListener('load', async () => {
-      const endTime = Date.now();
-      
-      if (xhr.status === 200) {
-        try {
-          const imageData = JSON.parse(xhr.responseText) as ImageUploadResponse;
-          if (!imageData.success) throw new Error('Upload failed');
-
-          const newFile: FileData = {
-            id: imageData.result.id,
-            originalFilename: file.name,
-            uploadedAt: new Date().toISOString()
-          };
+  try {
+    const imageData: ImageUploadResponse = await uploadImageApi(user, file, onProgress);
+    const uploadedImageId = imageData.result?.id;
+    if (!uploadedImageId) {
+      throw new Error('Upload failed');
+    }
 
-          // Update case data using centralized function
-          const existingData = await getCaseData(user, caseNumber);
-          if (!existingData) {
-            throw new Error('Case not found');
-          }
+    const newFile: FileData = {
+      id: uploadedImageId,
+      originalFilename: file.name,
+      uploadedAt: new Date().toISOString()
+    };
 
-          const updatedData = {
-            ...existingData,
-            files: [...(existingData.files || []), newFile]
-          };
+    // Update case data using centralized function
+    const existingData = await getCaseData(user, caseNumber);
+    if (!existingData) {
+      throw new Error('Case not found');
+    }
 
-          await updateCaseData(user, caseNumber, updatedData);
+    const updatedData = {
+      ...existingData,
+      files: [...(existingData.files || []), newFile]
+    };
 
-          // Log successful file upload
-          try {
-            await auditService.logFileUpload(
-              user,
-              file.name,
-              file.size,
-              file.type,
-              'file-picker',
-              caseNumber,
-              'success',
-              endTime - startTime,
-              imageData.result.id
-            );
-          } catch (auditError) {
-            console.error('Failed to log successful file upload:', auditError);
-          }
+    await updateCaseData(user, caseNumber, updatedData);
 
-          console.log(`✅ File uploaded: ${file.name} (${file.size} bytes) (${endTime - startTime}ms)`);
-          resolve(newFile);
-        } catch (error) {
-          // Log failed file upload
-          try {
-            await auditService.logFileUpload(
-              user,
-              file.name,
-              file.size,
-              file.type,
-              'file-picker',
-              caseNumber,
-              'failure',
-              endTime - startTime
-            );
-          } catch (auditError) {
-            console.error('Failed to log file upload failure:', auditError);
-          }
-          reject(error);
-        }
-      } else {
-        // Log failed file upload
-        try {
-          await auditService.logFileUpload(
-            user,
-            file.name,
-            file.size,
-            file.type,
-            'file-picker',
-            caseNumber,
-            'failure',
-            endTime - startTime
-          );
-        } catch (auditError) {
-          console.error('Failed to log file upload failure:', auditError);
-        }
-        reject(new Error('Upload failed'));
-      }
-    });
+    // Log successful file upload
+    try {
+      await auditService.logFileUpload(
+        user,
+        file.name,
+        file.size,
+        file.type,
+        'file-picker',
+        caseNumber,
+        'success',
+        Date.now() - startTime,
+        uploadedImageId
+      );
+    } catch (auditError) {
+      console.error('Failed to log successful file upload:', auditError);
+    }
 
-    xhr.addEventListener('error', async () => {
-      // Log upload error
-      try {
-        await auditService.logFileUpload(
-          user,
-          file.name,
-          file.size,
-          file.type,
-          'file-picker',
-          caseNumber,
-          'failure',
-          Date.now() - startTime
-        );
-      } catch (auditError) {
-        console.error('Failed to log file upload error:', auditError);
-      }
-      reject(new Error('Upload failed'));
-    });
+    console.log(`✅ File uploaded: ${file.name} (${file.size} bytes) (${Date.now() - startTime}ms)`);
+    return newFile;
+  } catch (error) {
+    // Log failed file upload
+    try {
+      await auditService.logFileUpload(
+        user,
+        file.name,
+        file.size,
+        file.type,
+        'file-picker',
+        caseNumber,
+        'failure',
+        Date.now() - startTime
+      );
+    } catch (auditError) {
+      console.error('Failed to log file upload failure:', auditError);
+    }
 
-    xhr.open('POST', IMAGE_URL);
-    xhr.setRequestHeader('Authorization', `Bearer ${imagesApiToken}`);
-    xhr.send(formData);
-  });
+    throw error;
+  }
 };
 
 export const deleteFile = async (user: User, caseNumber: string, fileId: string, deleteReason: string = 'User-requested deletion via file list'): Promise<void> => {
@@ -197,12 +137,8 @@ export const deleteFile = async (user: User, caseNumber: string, fileId: string,
     let imageDeleteError = '';
 
     // Attempt to delete image file
-    const imagesApiToken = await getImageApiKey();
-    const imageResponse = await fetch(`${IMAGE_URL}/${fileId}`, {
-      method: 'DELETE',
-      headers: {
-        'Authorization': `Bearer ${imagesApiToken}`
-      }
+    const imageResponse = await fetchImageApi(user, `/${encodeURIComponent(fileId)}`, {
+      method: 'DELETE'
     });
 
     // Handle image deletion response
@@ -306,14 +242,13 @@ export const getImageUrl = async (user: User, fileData: FileData, caseNumber: st
   const defaultAccessReason = accessReason || 'Image viewer access';
   
   try {
-    const { accountHash } = await getImageConfig();  
-    const imagesApiToken = await getImageApiKey();
+    const { accountHash } = await getImageConfig();
     const imageDeliveryUrl = `https://imagedelivery.net/${accountHash}/${fileData.id}/${DEFAULT_VARIANT}`;
-    
-    const workerResponse = await fetch(`${IMAGE_URL}/${imageDeliveryUrl}`, {
+    const encodedImageDeliveryUrl = encodeURIComponent(imageDeliveryUrl);
+
+    const workerResponse = await fetchImageApi(user, `/${encodedImageDeliveryUrl}`, {
       method: 'GET',
       headers: {
-        'Authorization': `Bearer ${imagesApiToken}`,
         'Accept': 'text/plain'
       }
     });

package/app/components/button/button.module.css

@@ -9,13 +9,14 @@
   background: var(--backgroundLight);
   cursor: pointer;
   transition: all var(--durationS) var(--bezierFastoutSlowin);
-  box-shadow: 0 1px 3px color-mix(in lab, var(--backgroundLight) 30%, transparent);
+  box-shadow: 0 1px 3px
+    color-mix(in lab, var(--backgroundLight) 30%, transparent);
 }
 
 .button:hover {
   background: color-mix(in lab, var(--backgroundLight) 85%, var(--black));
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px color-mix(in lab, var(--backgroundLight) 40%, transparent);
+  box-shadow: 0 2px 6px
+    color-mix(in lab, var(--backgroundLight) 40%, transparent);
 }
 
 .button.active {
@@ -25,7 +26,6 @@
 
 .button.active:hover {
   background: color-mix(in lab, var(--success) 85%, var(--black));
-  transform: translateY(-1px);
   box-shadow: 0 2px 6px color-mix(in lab, var(--success) 40%, transparent);
 }
 
@@ -43,7 +43,7 @@
   box-shadow: none;
 }
 
-.icon {  
+.icon {
   color: var(--text);
   transition: color var(--durationS) var(--bezierFastoutSlowin);
 }
@@ -58,6 +58,10 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/app/components/sidebar/case-export/case-export.tsx

@@ -10,8 +10,8 @@ export type ExportFormat = 'json' | 'csv';
 interface CaseExportProps {
   isOpen: boolean;
   onClose: () => void;
-  onExport: (caseNumber: string, format: ExportFormat, includeImages?: boolean) => void;
-  onExportAll: (onProgress: (current: number, total: number, caseName: string) => void, format: ExportFormat) => void;
+  onExport: (caseNumber: string, format: ExportFormat, includeImages?: boolean, onProgress?: (progress: number, label: string) => void) => Promise<void>;
+  onExportAll: (onProgress: (current: number, total: number, caseName: string) => void, format: ExportFormat) => Promise<void>;
   currentCaseNumber?: string;
   isReadOnly?: boolean;
 }
@@ -30,7 +30,7 @@ export const CaseExport = ({
   const [isExportingAll, setIsExportingAll] = useState(false);
   const [isExportingConfirmations, setIsExportingConfirmations] = useState(false);
   const [error, setError] = useState<string>('');
-  const [exportProgress, setExportProgress] = useState<{ current: number; total: number; caseName: string } | null>(null);
+  const [exportProgress, setExportProgress] = useState<{ current: number; total: number; caseName: string; mode?: 'single' | 'all' } | null>(null);
   const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('json');
   const [includeImages, setIncludeImages] = useState(false);
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
@@ -130,13 +130,16 @@ export const CaseExport = ({
     setExportProgress(null);
     
     try {
-      await onExport(caseNumber.trim(), selectedFormat, includeImages);
+      await onExport(caseNumber.trim(), selectedFormat, includeImages, (progress, label) => {
+        setExportProgress({ current: progress, total: 100, caseName: label, mode: 'single' });
+      });
       onClose();
     } catch (error) {
       console.error('Export failed:', error);
       setError(error instanceof Error ? error.message : 'Export failed. Please try again.');
     } finally {
       setIsExporting(false);
+      setExportProgress(null);
     }
   };
 
@@ -315,7 +318,9 @@ export const CaseExport = ({
             {exportProgress && exportProgress.total > 0 && (
               <div className={styles.progressSection}>
                 <div className={styles.progressText}>
-                  Exporting case {exportProgress.current} of {exportProgress.total}: {exportProgress.caseName}
+                  {exportProgress.mode === 'single'
+                    ? `${exportProgress.caseName} (${exportProgress.current}%)`
+                    : `Exporting case ${exportProgress.current} of ${exportProgress.total}: ${exportProgress.caseName}`}
                 </div>
                 <div className={styles.progressBar}>
                   <div 
@@ -326,7 +331,7 @@ export const CaseExport = ({
               </div>
             )}
 
-            {isExportingAll && !exportProgress && (
+            {(isExporting || isExportingAll) && !exportProgress && (
               <div className={styles.progressSection}>
                 <div className={styles.progressText}>
                   Preparing export...

package/app/components/sidebar/cases/case-sidebar.tsx

@@ -539,25 +539,40 @@ const handleImageSelect = (file: FileData) => {
     ? 'Select an image first'
     : undefined;
 
-  const handleExport = async (exportCaseNumber: string, format: ExportFormat, includeImages?: boolean) => {
+  const handleExport = async (exportCaseNumber: string, format: ExportFormat, includeImages?: boolean, onProgress?: (progress: number, label: string) => void) => {
     try {
       const caseExportActions = await loadCaseExportActions();
 
       if (includeImages) {
         // ZIP export with images - only available for single case exports
-        await caseExportActions.downloadCaseAsZip(user, exportCaseNumber, format);
+        await caseExportActions.downloadCaseAsZip(user, exportCaseNumber, format, (progress) => {
+          const label = progress < 30 ? 'Loading case data' :
+                        progress < 50 ? 'Preparing archive' :
+                        progress < 80 ? 'Adding images' :
+                        progress < 96 ? 'Finalizing' : 'Downloading';
+          onProgress?.(Math.round(progress), label);
+        });
       } else {
         // Standard data-only export
-        const exportData = await caseExportActions.exportCaseData(user, exportCaseNumber, {
-          includeMetadata: true
-        });
-        
+        onProgress?.(5, 'Loading case data');
+        const exportData = await caseExportActions.exportCaseData(
+          user,
+          exportCaseNumber,
+          { includeMetadata: true },
+          (current, total, label) => {
+            const p = total > 0 ? Math.round(10 + (current / total) * 60) : 10;
+            onProgress?.(p, label);
+          }
+        );
+        onProgress?.(75, 'Preparing download');
+
         // Download the exported data in the selected format
         if (format === 'json') {
           await caseExportActions.downloadCaseAsJSON(user, exportData);
         } else {
           await caseExportActions.downloadCaseAsCSV(user, exportData);
         }
+        onProgress?.(100, 'Complete');
       }
       
     } catch (error) {

package/app/components/sidebar/sidebar.module.css

@@ -109,7 +109,6 @@
 .footerSectionButton:hover {
   background-color: #5c636a;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
 }
 
 /* Footer Modal */
@@ -163,7 +162,6 @@
 
 .footerModalClose:hover {
   background-color: #f8f9fa;
-  transform: translateY(-1px);
 }
 
 .footerModalContent {

package/app/components/user/delete-account.tsx

@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
-import paths from '~/config/config.json';
-import { getUserApiKey } from '~/utils/auth';
+import { fetchUserApi } from '~/utils/user-api-client';
 import { auditService } from '~/services/audit';
 import styles from './delete-account.module.css';
 
@@ -220,14 +219,15 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
         false // emailNotificationSent - deletion emails disabled
       );
 
-      // Get API key for user-worker authentication
-      const apiKey = await getUserApiKey();
+      const currentUser = auth.currentUser;
+      if (!currentUser || currentUser.uid !== user.uid) {
+        throw new Error('User session mismatch. Please sign in again.');
+      }
       
-      // Delete the user account via user-worker
-      const deleteResponse = await fetch(`${paths.user_worker_url}/${user.uid}?stream=true`, {
+      // Delete the user account via user proxy
+      const deleteResponse = await fetchUserApi(currentUser, `/${encodeURIComponent(user.uid)}?stream=true`, {
         method: 'DELETE',
         headers: {
-          'X-Custom-Auth-Key': apiKey,
           'Accept': 'text/event-stream'
         }
       });

package/app/config-example/config.json

@@ -1,12 +1,6 @@
 {    
-  "url": "PAGES_CUSTOM_DOMAIN",    
-  "data_worker_url": "DATA_WORKER_CUSTOM_DOMAIN",
-  "keys_url": "KEYS_WORKER_CUSTOM_DOMAIN",
-  "image_worker_url": "IMAGE_WORKER_CUSTOM_DOMAIN",
-  "user_worker_url": "USER_WORKER_CUSTOM_DOMAIN",
-  "pdf_worker_url": "PDF_WORKER_CUSTOM_DOMAIN",
-  "audit_worker_url": "AUDIT_WORKER_CUSTOM_DOMAIN",
-  "keys_auth": "YOUR_KEYS_AUTH_TOKEN",
+  "url": "PAGES_CUSTOM_DOMAIN",
+  "account_hash": "ACCOUNT_HASH",
   "manifest_signing_key_id": "MANIFEST_SIGNING_KEY_ID",
   "manifest_signing_public_key": "MANIFEST_SIGNING_PUBLIC_KEY",
   "manifest_signing_public_keys": {

package/app/hooks/useInactivityTimeout.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useCallback } from 'react';
-import { useLocation } from 'react-router';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import { INACTIVITY_CONFIG } from '~/config/inactivity';
@@ -19,13 +18,11 @@ export const useInactivityTimeout = ({
   onTimeout,
   enabled = true
 }: UseInactivityTimeoutOptions = {}) => {
-  const location = useLocation();
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const warningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastActivityRef = useRef<number>(0);
 
-  const isAuthRoute = location.pathname.startsWith('/auth');
-  const shouldEnable = enabled && isAuthRoute;
+  const shouldEnable = enabled;
 
   useEffect(() => {
     lastActivityRef.current = Date.now();
@@ -104,7 +101,7 @@ export const useInactivityTimeout = ({
       });
       clearTimeouts();
     };
-  }, [shouldEnable, resetTimer, clearTimeouts, location.pathname]);
+  }, [shouldEnable, resetTimer, clearTimeouts]);
 
   return {
     extendSession,