@striae-org/striae 4.1.0 → 4.2.0

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;
@@ -239,33 +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/user/inactivity-warning.module.css

@@ -14,6 +14,7 @@
 }
 
 .modal {
+  position: relative;
   background: #ffffff;
   border-radius: 12px;
   padding: 2rem;

package/app/components/user/inactivity-warning.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './inactivity-warning.module.css';
 
 interface InactivityWarningProps {
@@ -15,6 +16,15 @@ export const InactivityWarning = ({
   onSignOut
 }: InactivityWarningProps) => {
   const [countdown, setCountdown] = useState(remainingSeconds);
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: onExtendSession,
+    closeOnBackdrop: false,
+  });
 
   useEffect(() => {
     setCountdown(remainingSeconds);
@@ -46,8 +56,11 @@ export const InactivityWarning = ({
   const seconds = countdown % 60;
 
   return (
-    <div className={styles.overlay}>
+    <div className={styles.overlay} aria-label="Close inactivity warning" {...overlayProps}>
       <div className={styles.modal}>
+        <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close inactivity warning' })}>
+          ×
+        </button>
         <div className={styles.header}>
           <h3>Session Timeout Warning</h3>
         </div>
@@ -66,7 +79,7 @@ export const InactivityWarning = ({
         
         <div className={styles.actions}>
           <button
-            onClick={onExtendSession}
+            onClick={requestClose}
             className={styles.extendButton}
           >
             Extend Session

package/app/components/user/manage-profile.tsx

@@ -8,7 +8,8 @@ import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { getUserData, updateUserData } from '~/utils/data';
 import { auditService } from '~/services/audit';
 import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
-import { FormField, FormButton, FormMessage } from '../form';
+import { FormField, FormButton } from '../form';
+import { Toast } from '~/components/toast/toast';
 import { MfaPhoneUpdateSection } from './mfa-phone-update';
 import styles from './manage-profile.module.css';
 
@@ -26,8 +27,9 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isMfaBusy, setIsMfaBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastType, setToastType] = useState<'success' | 'error'>('success');
   const [showResetForm, setShowResetForm] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showAuditViewer, setShowAuditViewer] = useState(false);
@@ -80,8 +82,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const handleUpdateProfile = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
-    setError('');
-    setSuccess('');
+    setShowToast(false);
 
     const oldDisplayName = user?.displayName || '';
     const oldBadgeId = initialBadgeId;
@@ -129,7 +130,12 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
 
       setInitialBadgeId(normalizedBadgeId);
 
-      setSuccess(ERROR_MESSAGES.PROFILE_UPDATED);
+      setToastType('success');
+      setToastMessage(ERROR_MESSAGES.PROFILE_UPDATED);
+      setShowToast(true);
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
     } catch (err) {
       const { message } = handleAuthError(err);
 
@@ -157,7 +163,9 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         );
       }
 
-      setError(message);
+      setToastType('error');
+      setToastMessage(message);
+      setShowToast(true);
     } finally {
       setIsLoading(false);
     }
@@ -193,6 +201,13 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   }
 
   return (
+    <>
+    <Toast
+      message={toastMessage}
+      type={toastType}
+      isVisible={showToast}
+      onClose={() => setShowToast(false)}
+    />
     <div
       className={styles.modalOverlay}
       onMouseDown={handleOverlayMouseDown}
@@ -282,9 +297,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
 
           <MfaPhoneUpdateSection user={user} isOpen={isOpen} onBusyChange={handleMfaBusyChange} />
 
-          {error && <FormMessage type="error" message={error} />}
-          {success && <FormMessage type="success" message={success} />}
-
           <div className={styles.buttonGroup}>
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile
@@ -302,5 +314,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         </form>
       </div>
     </div>
+    </>
   );
 };

package/app/hooks/useOverlayDismiss.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, type KeyboardEventHandler, type MouseEventHandler } from 'react';
+import { useCallback, useEffect, type CSSProperties, type KeyboardEventHandler, type MouseEventHandler } from 'react';
 
 interface UseOverlayDismissOptions {
   isOpen: boolean;
@@ -8,6 +8,30 @@ interface UseOverlayDismissOptions {
   closeOnBackdrop?: boolean;
 }
 
+interface CloseButtonOptions {
+  ariaLabel?: string;
+  title?: string;
+}
+
+const sharedCloseButtonStyle: CSSProperties = {
+  position: 'absolute',
+  top: '0.6rem',
+  right: '0.6rem',
+  width: '1.9rem',
+  height: '1.9rem',
+  borderRadius: '999px',
+  border: '1px solid #d6dce2',
+  background: '#f8f9fa',
+  color: '#495057',
+  fontSize: '1.2rem',
+  lineHeight: 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  zIndex: 1,
+};
+
 export const useOverlayDismiss = ({
   isOpen,
   onClose,
@@ -30,7 +54,8 @@ export const useOverlayDismiss = ({
 
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        onClose();
+        event.preventDefault();
+        requestClose();
       }
     };
 
@@ -39,7 +64,7 @@ export const useOverlayDismiss = ({
     return () => {
       document.removeEventListener('keydown', handleEscape);
     };
-  }, [isOpen, closeOnEscape, canDismiss, onClose]);
+  }, [isOpen, closeOnEscape, canDismiss, requestClose]);
 
   const handleOverlayMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {
     if (!closeOnBackdrop || event.target !== event.currentTarget) {
@@ -60,9 +85,32 @@ export const useOverlayDismiss = ({
     }
   }, [closeOnBackdrop, requestClose]);
 
+  const overlayProps = {
+    role: 'button' as const,
+    tabIndex: 0,
+    onMouseDown: handleOverlayMouseDown,
+    onKeyDown: handleOverlayKeyDown,
+    style: { cursor: 'default' as const },
+  };
+
+  const getCloseButtonProps = useCallback((options?: CloseButtonOptions) => {
+    const ariaLabel = options?.ariaLabel || 'Close modal';
+
+    return {
+      type: 'button' as const,
+      onClick: requestClose,
+      disabled: !canDismiss,
+      'aria-label': ariaLabel,
+      title: options?.title || ariaLabel,
+      style: sharedCloseButtonStyle,
+    };
+  }, [requestClose, canDismiss]);
+
   return {
     requestClose,
     handleOverlayMouseDown,
-    handleOverlayKeyDown
+    handleOverlayKeyDown,
+    overlayProps,
+    getCloseButtonProps,
   };
 };