@striae-org/striae 4.0.3 → 4.2.0

package/app/components/sidebar/sidebar-container.tsx

@@ -1,37 +1,32 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import type React from 'react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router';
 import { Sidebar } from './sidebar';
 import type { User } from 'firebase/auth';
 import { type FileData } from '~/types';
 import styles from './sidebar.module.css';
 import { getAppVersion } from '~/utils/common';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 
 interface SidebarContainerProps {
   user: User;
   onImageSelect: (file: FileData) => void;
   imageId?: string;
-  onCaseChange: (caseNumber: string) => void;
   currentCase: string;
-  setCurrentCase: (caseNumber: string) => void;
   files: FileData[];
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   imageLoaded: boolean;
   setImageLoaded: (loaded: boolean) => void;
-  caseNumber: string;
-  setCaseNumber: (caseNumber: string) => void;
-  error: string;
-  setError: (error: string) => void;
-  successAction: 'loaded' | 'created' | 'deleted' | null;
-  setSuccessAction: (action: 'loaded' | 'created' | 'deleted' | null) => void;
   showNotes: boolean;
   setShowNotes: (show: boolean) => void;
   onAnnotationRefresh?: () => void;
   isReadOnly?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
+  isUploading?: boolean;
+  onUploadStatusChange?: (isUploading: boolean) => void;
 }
 
 export const SidebarContainer: React.FC<SidebarContainerProps> = (props) => {
@@ -39,24 +34,16 @@ export const SidebarContainer: React.FC<SidebarContainerProps> = (props) => {
   const year = new Date().getFullYear();
   const appVersion = getAppVersion();
 
-  useEffect(() => {
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && isFooterModalOpen) {
-          setIsFooterModalOpen(false);
-        }
-      };
-
-      if (isFooterModalOpen) {
-        document.addEventListener('keydown', handleEscape);
-      }
-  
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }, [isFooterModalOpen]);
+  const {
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen: isFooterModalOpen,
+    onClose: () => setIsFooterModalOpen(false),
+  });
   
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       {/* Main Sidebar */}
       <Sidebar {...props} />
       
@@ -72,13 +59,13 @@ export const SidebarContainer: React.FC<SidebarContainerProps> = (props) => {
 
       {/* Footer Modal */}
       {isFooterModalOpen && (
-        <div className={styles.footerModalOverlay} onClick={() => setIsFooterModalOpen(false)}>
+        <div className={styles.footerModalOverlay} {...overlayProps} aria-label="Close About and Support dialog">
           <div className={styles.footerModal} onClick={(e) => e.stopPropagation()}>
             <div className={styles.footerModalHeader}>
               <h2 className={styles.footerModalTitle}>About Striae</h2>
-              <button 
-                onClick={() => setIsFooterModalOpen(false)}
+              <button
                 className={styles.footerModalClose}
+                {...getCloseButtonProps({ ariaLabel: 'Close About and Support dialog' })}
               >
                 ×
               </button>

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

@@ -3,54 +3,17 @@
   position: relative;
   width: 300px;
   min-width: 250px;
-  height: calc(100vh - 60px);
+  height: calc(100% - 60px);
+  display: flex;
+  flex-direction: column;
   background-color: #f8f9fa;
   border-right: 1px solid #dee2e6;
-  padding: 1.5rem;
-  overflow-y: auto;
+  padding: 0.25rem 1rem 0.875rem;
+  overflow: hidden;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 
-/* User Section */
-.userInfo {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid #e9ecef;
-  margin-bottom: 1rem;
-}
-
-.userTitle {
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: #212529;
-  margin: 0;
-}
-
-.userActions {
-  display: flex;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.profileButton {
-  padding: 0.5rem 1rem;
-  background-color: #6c757d;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.profileButton:hover {
-  background-color: #5c636a;
-}
-
 /* Footer Button */
 .footerButton {
   position: fixed;
@@ -120,6 +83,7 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  cursor: default;
 }
 
 .footerModal {
@@ -131,6 +95,7 @@
   max-height: 80vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  cursor: default;
 }
 
 .footerModalHeader {
@@ -237,35 +202,6 @@
   text-underline-offset: 3px;
 }
 
-
-
-/* Import Section */
-.importSection {
-  margin-top: auto;
-  padding: 1rem 0;
-  border-top: 1px solid var(--divider);
-}
-
-.importButton {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  background: var(--success);
-  color: white;
-  border: none;
-  border-radius: var(--spaceXS);
-  font-size: var(--fontSizeBodyS);
-  font-weight: var(--fontWeightMedium);
-  cursor: pointer;
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
-  box-shadow: 0 1px 3px color-mix(in lab, var(--success) 30%, transparent);
-  box-sizing: border-box;
-}
-
-.importButton:hover {
-  background: color-mix(in lab, var(--success) 85%, var(--black));
-  box-shadow: 0 2px 6px color-mix(in lab, var(--success) 40%, transparent);
-}
-
 /* Hash Button */
 .hashButton {
   width: 100%;

package/app/components/sidebar/sidebar.tsx

@@ -1,31 +1,19 @@
 import type { User } from 'firebase/auth';
 import { useState, useCallback } from 'react';
 import styles from './sidebar.module.css';
-import { ManageProfile } from '../user/manage-profile';
-import { SignOut } from '../actions/signout';
 import { CaseSidebar } from './cases/case-sidebar';
-import { NotesSidebar } from './notes/notes-sidebar';
-import { CaseImport } from './case-import/case-import';
 import { Toast } from '../toast/toast';
-import { type FileData, type ImportResult, type ConfirmationImportResult } from '~/types';
+import { type FileData } from '~/types';
 
 interface SidebarProps {
   user: User;
   onImageSelect: (file: FileData) => void;
   imageId?: string;
-  onCaseChange: (caseNumber: string) => void;
   currentCase: string;
-  setCurrentCase: (caseNumber: string) => void;
   files: FileData[];
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   imageLoaded: boolean;
   setImageLoaded: (loaded: boolean) => void;
-  caseNumber: string;
-  setCaseNumber: (caseNumber: string) => void;
-  error: string;
-  setError: (error: string) => void;
-  successAction: 'loaded' | 'created' | 'deleted' | null;
-  setSuccessAction: (action: 'loaded' | 'created' | 'deleted' | null) => void;
   showNotes: boolean;
   setShowNotes: (show: boolean) => void;
   onAnnotationRefresh?: () => void;
@@ -33,66 +21,34 @@ interface SidebarProps {
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   isUploading?: boolean;
+  onUploadStatusChange?: (isUploading: boolean) => void;
 }
 
 export const Sidebar = ({ 
   user, 
   onImageSelect,
   imageId, 
-  onCaseChange,
   currentCase,
-  setCurrentCase,
   imageLoaded,
   setImageLoaded,
   files,
   setFiles,
-  caseNumber,
-  setCaseNumber,
-  error,
-  setError,
-  successAction,
-  setSuccessAction,
-  showNotes,
   setShowNotes,
-  onAnnotationRefresh,
   isReadOnly = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
-  isUploading: initialIsUploading = false,  
+  isUploading: initialIsUploading = false,
+  onUploadStatusChange,
 }: SidebarProps) => {
-  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
-  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
   const [isUploading, setIsUploading] = useState(initialIsUploading);
   const [toastMessage, setToastMessage] = useState('');
   const [toastType, setToastType] = useState<'success' | 'error' | 'warning'>('success');
   const [isToastVisible, setIsToastVisible] = useState(false);
 
-  const handleImportComplete = useCallback((result: ImportResult | ConfirmationImportResult) => {
-    if (result.success) {
-      // For case imports, load the imported case automatically
-      if ('isReadOnly' in result) {
-        // This is an ImportResult (case import)
-        if (result.caseNumber && result.isReadOnly) {
-          // Successful read-only case import - load the case
-          onCaseChange(result.caseNumber);
-          setCurrentCase(result.caseNumber);
-          setCaseNumber(result.caseNumber);
-          setSuccessAction('loaded');
-        } else if (!result.caseNumber && !result.isReadOnly) {
-          // Read-only case cleared - reset all UI state
-          setCurrentCase('');
-          setCaseNumber('');
-          setFiles([]);
-          onImageSelect({ id: 'clear', originalFilename: '/clear.jpg', uploadedAt: '' });
-          setImageLoaded(false);
-          onCaseChange(''); // This will trigger canvas/annotation state reset in main component
-          setShowNotes(false); // Close notes sidebar
-          setSuccessAction(null);
-        }
-      }
-      // For confirmation imports, no action needed - the confirmations are already loaded
-    }
-  }, [onCaseChange, setCurrentCase, setCaseNumber, setSuccessAction, setFiles, onImageSelect, setImageLoaded, setShowNotes]);
+  const handleUploadStatusChange = useCallback((uploading: boolean) => {
+    setIsUploading(uploading);
+    onUploadStatusChange?.(uploading);
+  }, [onUploadStatusChange]);
 
   const handleUploadComplete = useCallback((result: { successCount: number; failedFiles: string[] }) => {
     if (result.successCount === 0 && result.failedFiles.length > 0) {
@@ -115,80 +71,23 @@ export const Sidebar = ({
 
   return (
     <div className={styles.sidebar}>
-      <div className={styles.userInfo}>
-        <h3 className={styles.userTitle}>
-          {`${user.displayName?.split(' ')[0] || 'User'}'s Striae`}
-        </h3>
-        <div className={styles.userActions}>
-          <button 
-            onClick={() => setIsProfileModalOpen(true)}
-            className={styles.profileButton}
-            disabled={isUploading}
-            title={isUploading ? 'Cannot manage profile while uploading files' : undefined}
-          >
-            Manage Profile
-          </button>
-          <SignOut disabled={isUploading} />
-        </div>
-      </div>  
-      <ManageProfile 
-        isOpen={isProfileModalOpen}
-        onClose={() => setIsProfileModalOpen(false)}
-      />
-      <CaseImport 
-        isOpen={isImportModalOpen}
-        onClose={() => setIsImportModalOpen(false)}
-        onImportComplete={handleImportComplete}
+      <CaseSidebar 
+        user={user} 
+        onImageSelect={onImageSelect}
+        currentCase={currentCase}
+        imageLoaded={imageLoaded}
+        setImageLoaded={setImageLoaded}
+        files={files}
+        setFiles={setFiles}
+        onNotesClick={() => setShowNotes(true)}
+        isReadOnly={isReadOnly}
+        isConfirmed={isConfirmed}
+        confirmationSaveVersion={confirmationSaveVersion}
+        selectedFileId={imageId}
+        isUploading={isUploading}
+        onUploadStatusChange={handleUploadStatusChange}
+        onUploadComplete={handleUploadComplete}
       />
-      {showNotes ? (
-        <NotesSidebar 
-          currentCase={currentCase}
-          onReturn={() => setShowNotes(false)}
-          user={user}
-          imageId={imageId || ''}
-          onAnnotationRefresh={onAnnotationRefresh}
-          originalFileName={files.find(file => file.id === imageId)?.originalFilename}
-          isUploading={isUploading}
-        />
-      ) : (
-        <>
-          <CaseSidebar 
-            user={user} 
-            onImageSelect={onImageSelect}
-            onCaseChange={onCaseChange}
-            currentCase={currentCase}
-            setCurrentCase={setCurrentCase}
-            imageLoaded={imageLoaded}
-            setImageLoaded={setImageLoaded}
-            files={files}
-            setFiles={setFiles}
-            caseNumber={caseNumber}
-            setCaseNumber={setCaseNumber}
-            error={error}
-            setError={setError}
-            successAction={successAction}
-            setSuccessAction={setSuccessAction}
-            onNotesClick={() => setShowNotes(true)}
-            isReadOnly={isReadOnly}
-            isConfirmed={isConfirmed}
-            confirmationSaveVersion={confirmationSaveVersion}
-            selectedFileId={imageId}
-            isUploading={isUploading}
-            onUploadStatusChange={setIsUploading}
-            onUploadComplete={handleUploadComplete}
-          />
-          <div className={styles.importSection}>
-            <button 
-              onClick={() => setIsImportModalOpen(true)}
-              className={styles.importButton}
-              disabled={isUploading}
-              title={isUploading ? 'Cannot import while uploading files' : undefined}
-            >
-              Import/Clear RO Case
-            </button>
-          </div>
-        </>
-      )}
       <Toast 
         message={toastMessage}
         type={toastType}

package/app/components/sidebar/upload/image-upload-zone.module.css

@@ -1,24 +1,24 @@
 /* Image Upload Zone */
 .imageUploadZone {
-  margin: 1rem 0;
+  margin: 0.25rem 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
 .imageUploadZone label {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-weight: 500;
   color: #000000;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .fileInput {
   width: 100%;
-  padding: 0.5rem;
+  padding: 0.375rem 0.5rem;
   border: 1px solid #dee2e6;
   border-radius: 4px;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -33,18 +33,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem 1rem;
+  padding: 1rem 0.75rem;
   border: 2px dashed #dee2e6;
   border-radius: 6px;
   background-color: #fafafa;
   transition: all 0.2s ease;
   pointer-events: none;
-  min-height: 100px;
+  min-height: 72px;
 }
 
 .dragDropText {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: 0.82rem;
   color: #6c757d;
   text-align: center;
   font-weight: 500;
@@ -68,11 +68,11 @@
 
 .progressBar {
   width: 100%;
-  height: 6px;
+  height: 5px;
   background-color: #e9ecef;
   border-radius: 3px;
   overflow: hidden;
-  margin-top: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 .progressFill {
@@ -82,7 +82,7 @@
 }
 
 .uploadingText {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--textBody);
   font-weight: 500;
 }
@@ -93,7 +93,7 @@
   justify-content: center;
   gap: 0.5rem;
   width: 100%;
-  margin-top: 0.25rem;
+  margin-top: 0.125rem;
 }
 
 .fileCountText {

package/app/components/toast/toast.module.css

@@ -6,7 +6,7 @@
   bottom: 0;
   background: color-mix(in lab, var(--black) 40%, transparent);
   z-index: 999;
-  cursor: pointer;
+  cursor: default;
 }
 
 .toast {
@@ -28,6 +28,7 @@
   max-width: 400px;
   min-width: 300px;
   backdrop-filter: blur(10px);
+  cursor: default;
 }
 
 .toast.show {

package/app/components/toast/toast.tsx

@@ -1,4 +1,5 @@
 import { useEffect, type ReactNode } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './toast.module.css';
 
 interface ToastProps {
@@ -10,30 +11,34 @@ interface ToastProps {
 }
 
 export const Toast = ({ message, type, isVisible, onClose, duration = 4000 }: ToastProps) => {
+  const {
+    requestClose,
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen: isVisible,
+    onClose,
+    closeOnEscape: false
+  });
+
   useEffect(() => {
     if (isVisible && duration > 0) {
       const timer = setTimeout(() => {
-        onClose();
+        requestClose();
       }, duration);
 
       return () => clearTimeout(timer);
     }
-  }, [isVisible, onClose, duration]);
+  }, [isVisible, requestClose, duration]);
 
   if (!isVisible) return null;
 
-  const handleBackdropKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      onClose();
-    }
-  };
-
   return (
     <>
       <div 
         className={styles.backdrop} 
-        onClick={onClose}
-        onKeyDown={handleBackdropKeyDown}
+        onMouseDown={handleOverlayMouseDown}
+        onKeyDown={handleOverlayKeyDown}
         role="button"
         tabIndex={0}
         aria-label="Close notification"
@@ -45,7 +50,7 @@ export const Toast = ({ message, type, isVisible, onClose, duration = 4000 }: To
         <span className={styles.message}>{message}</span>
         <button 
           className={styles.closeButton}
-          onClick={onClose}
+          onClick={requestClose}
           aria-label="Close notification"
         >
           ×

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

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import { fetchUserApi } from '~/utils/api';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { auditService } from '~/services/audit';
 import styles from './delete-account.module.css';
 
@@ -37,6 +38,13 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
   const [deletionProgress, setDeletionProgress] = useState<DeletionProgress>(initialDeletionProgress);
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   // Extract first and last name from display name
   const [firstName, lastName] = (user.displayName || '').split(' ');
@@ -170,26 +178,14 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
   };
 
   useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
     if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      // Reset form when modal opens
       setUidConfirmation('');
       setEmailConfirmation('');
       setError('');
       setSuccess(false);
       setDeletionProgress(initialDeletionProgress);
     }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, onClose]);
+  }, [isOpen]);
 
   const handleDeleteAccount = async () => {
     if (!isConfirmationValid) return;
@@ -317,27 +313,10 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
           ? `Deleting case ${deletionProgress.currentCaseNumber}...`
           : 'Preparing account deletion...');
 
-  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onClose();
-    }
-  };
-
   return (
     <div 
       className={styles.modalOverlay} 
-      onClick={handleOverlayClick}
+      onMouseDown={handleOverlayMouseDown}
       onKeyDown={handleOverlayKeyDown}
       role="button"
       tabIndex={0}