@striae-org/striae 3.0.4

package/app/components/sidebar/files/files-modal.module.css

@@ -0,0 +1,209 @@
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: var(--maxWidthL);
+  max-height: 80vh;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+  display: flex;
+  flex-direction: column;
+}
+
+.modalHeader {
+  display: flex;
+  font-size: var(--fontSizeBodyL);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--textTitle);
+  flex-shrink: 0;
+}
+
+.modalContent {
+  padding: var(--spaceL);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeH5);
+  cursor: pointer;
+  padding: var(--spaceS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover {
+  color: var(--text);
+}
+
+.filesList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.fileItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceM) var(--spaceL);
+  border: 1px solid #e9ecef;
+  border-radius: var(--spaceXS);
+  background: var(--backgroundLight);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.fileItem:hover {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+}
+
+.fileItem.active {
+  background-color: color-mix(in lab, var(--background) 90%, transparent);
+  font-weight: var(--fontWeightMedium);
+}
+
+.fileInfo {
+  flex: 1;
+  min-width: 0; /* Allow text truncation */
+}
+
+.fileName {
+  font-weight: var(--fontWeightMedium);
+  color: var(--textBody);
+  margin-bottom: var(--spaceXS);
+  word-break: break-word;
+}
+
+.fileDate {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textLight);
+}
+
+.deleteButton {
+  background: none;
+  border: none;
+  color: #dc3545;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: var(--spaceXS);
+  margin-left: var(--spaceM);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+}
+
+.deleteButton:hover:not(:disabled) {
+  color: #bd2130;
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+.deleteButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.errorState,
+.emptyState {
+  text-align: center;
+  padding: var(--space2XL);
+  color: var(--textLight);
+}
+
+.errorState {
+  color: var(--error);
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-top: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  background: var(--backgroundLight);
+  flex-shrink: 0;
+}
+
+.pagination button {
+  background: var(--primary);
+  color: var(--white);
+  border: none;
+  padding: var(--spaceS) var(--spaceM);
+  border-radius: var(--spaceXS);
+  cursor: pointer;
+  font-size: var(--fontSizeBodyS);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.pagination button:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.pagination button:disabled {
+  background: color-mix(in lab, var(--text) 20%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.pagination span {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textBody);
+  font-weight: var(--fontWeightMedium);
+}
+/* Confirmation Status Indicators */
+.fileItemNotConfirmed {
+  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+}
+
+.fileItemNotConfirmed:hover {
+  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+}
+
+.fileItem.active.fileItemNotConfirmed {
+  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+}
+
+.fileItem.active.fileItemNotConfirmed:hover {
+  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+}
+
+.fileItemConfirmed {
+  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+}
+
+.fileItemConfirmed:hover {
+  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+}
+
+.fileItem.active.fileItemConfirmed {
+  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+}
+
+.fileItem.active.fileItemConfirmed:hover {
+  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+}

package/app/components/sidebar/files/files-modal.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { AuthContext } from '~/contexts/auth.context';
+import { deleteFile } from '~/components/actions/image-manage';
+import { getFileAnnotations } from '~/utils/data-operations';
+import { FileData } from '~/types';
+import styles from './files-modal.module.css';
+
+interface FilesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onFileSelect?: (file: FileData) => void;
+  currentCase: string | null;
+  files: FileData[];
+  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
+  isReadOnly?: boolean;
+  selectedFileId?: string;
+}
+
+const FILES_PER_PAGE = 10;
+
+// Type to track confirmation status for each file
+interface FileConfirmationStatus {
+  [fileId: string]: {
+    includeConfirmation: boolean;
+    isConfirmed: boolean;
+  };
+}
+
+export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files, setFiles, isReadOnly = false, selectedFileId }: FilesModalProps) => {
+  const { user } = useContext(AuthContext);
+  const [error, setError] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
+  const [fileConfirmationStatus, setFileConfirmationStatus] = useState<FileConfirmationStatus>({});
+
+  const totalPages = Math.ceil(files.length / FILES_PER_PAGE);
+  const startIndex = currentPage * FILES_PER_PAGE;
+  const endIndex = startIndex + FILES_PER_PAGE;
+  const currentFiles = files.slice(startIndex, endIndex);
+
+  // Fetch confirmation status only for currently visible paginated files
+  useEffect(() => {
+    const fetchConfirmationStatuses = async () => {
+      const visibleFiles = currentFiles;
+
+      if (!isOpen || !currentCase || !user || visibleFiles.length === 0) {
+        return;
+      }
+
+      // Fetch annotations in parallel for only visible files
+      const annotationPromises = visibleFiles.map(async (file) => {
+        try {
+          const annotations = await getFileAnnotations(user, currentCase, file.id);
+          return {
+            fileId: file.id,
+            includeConfirmation: annotations?.includeConfirmation ?? false,
+            isConfirmed: !!(annotations?.includeConfirmation && annotations?.confirmationData),
+          };
+        } catch (err) {
+          console.error(`Error fetching annotations for file ${file.id}:`, err);
+          return {
+            fileId: file.id,
+            includeConfirmation: false,
+            isConfirmed: false,
+          };
+        }
+      });
+
+      // Wait for all fetches to complete
+      const results = await Promise.all(annotationPromises);
+
+      // Build the statuses map from results
+      const statuses: FileConfirmationStatus = {};
+      results.forEach((result) => {
+        statuses[result.fileId] = {
+          includeConfirmation: result.includeConfirmation,
+          isConfirmed: result.isConfirmed,
+        };
+      });
+
+      setFileConfirmationStatus(statuses);
+    };
+
+    fetchConfirmationStatuses();
+  }, [isOpen, currentCase, currentPage, files, user]);
+
+  const handleFileSelect = (file: FileData) => {
+    onFileSelect?.(file);
+    onClose();
+  };
+
+  const handleDeleteFile = async (fileId: string, event: React.MouseEvent) => {
+    event.stopPropagation(); // Prevent file selection when clicking delete
+    
+    // Don't allow file deletion for read-only cases
+    if (isReadOnly) {
+      return;
+    }
+    
+    if (!user || !currentCase || !window.confirm('Are you sure you want to delete this file?')) {
+      return;
+    }
+
+    setDeletingFileId(fileId);
+    
+    try {
+      await deleteFile(user, currentCase, fileId);
+      // Remove the deleted file from the list
+      const updatedFiles = files.filter(f => f.id !== fileId);
+      setFiles(updatedFiles);
+      
+      // Adjust page if needed
+      const newTotalPages = Math.ceil(updatedFiles.length / FILES_PER_PAGE);
+      if (currentPage >= newTotalPages && newTotalPages > 0) {
+        setCurrentPage(newTotalPages - 1);
+      }
+    } catch (err) {
+      console.error('Error deleting file:', err);
+      setError('Failed to delete file');
+      setTimeout(() => setError(null), 3000);
+    } finally {
+      setDeletingFileId(null);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    try {
+      return new Date(dateString).toLocaleDateString();
+    } catch {
+      return 'Unknown';
+    }
+  };
+
+  const formatFileName = (filename: string) => {
+    if (filename.length <= 30) return filename;
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1) {
+      return filename.substring(0, 27) + '…';
+    }
+    const name = filename.substring(0, lastDotIndex);
+    const ext = filename.substring(lastDotIndex);
+    const maxNameLength = 27 - ext.length;
+    if (name.length <= maxNameLength) return filename;
+    return name.substring(0, maxNameLength) + '…' + ext;
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay} onKeyDown={handleKeyDown} tabIndex={-1}>
+      <div className={styles.modal}>
+        <div className={styles.modalHeader}>
+          <h2>Files in Case {currentCase}</h2>
+          <button
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            ×
+          </button>
+        </div>
+        
+        <div className={styles.modalContent}>
+          {error ? (
+            <div className={styles.errorState}>{error}</div>
+          ) : files.length === 0 ? (
+            <div className={styles.emptyState}>No files in this case</div>
+          ) : (
+            <div className={styles.filesList}>
+              {currentFiles.map((file) => {
+                const confirmationStatus = fileConfirmationStatus[file.id];
+                let confirmationClass = '';
+                
+                if (confirmationStatus?.includeConfirmation) {
+                  confirmationClass = confirmationStatus.isConfirmed 
+                    ? styles.fileItemConfirmed 
+                    : styles.fileItemNotConfirmed;
+                }
+
+                return (
+                  <div
+                    key={file.id}
+                    className={`${styles.fileItem} ${selectedFileId === file.id ? styles.active : ''} ${confirmationClass}`}
+                    onClick={() => handleFileSelect(file)}
+                  >
+                    <div className={styles.fileInfo}>
+                      <div className={styles.fileName} title={file.originalFilename}>
+                        {formatFileName(file.originalFilename)}
+                      </div>
+                      <div className={styles.fileDate}>
+                        Uploaded: {formatDate(file.uploadedAt)}
+                      </div>
+                    </div>
+                    <button
+                      className={styles.deleteButton}
+                      onClick={(e) => handleDeleteFile(file.id, e)}
+                      disabled={isReadOnly || deletingFileId === file.id}
+                      aria-label={`Delete ${file.originalFilename}`}
+                      title={isReadOnly ? "Cannot delete files for read-only cases" : "Delete file"}
+                      style={{ opacity: isReadOnly ? 0.5 : 1, cursor: isReadOnly ? 'not-allowed' : 'pointer' }}
+                    >
+                      {deletingFileId === file.id ? '⏳' : '×'}
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        
+        {totalPages > 1 && (
+          <div className={styles.pagination}>
+            <button
+              onClick={() => setCurrentPage(prev => Math.max(0, prev - 1))}
+              disabled={currentPage === 0}
+            >
+              Previous
+            </button>
+            <span>
+              Page {currentPage + 1} of {totalPages} ({files.length} total files)
+            </span>
+            <button
+              onClick={() => setCurrentPage(prev => Math.min(totalPages - 1, prev + 1))}
+              disabled={currentPage === totalPages - 1}
+            >
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};