@striae-org/striae 4.1.0 → 4.2.1

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

@@ -1,7 +1,85 @@
-.notesSidebar {
+.notesEditorForm {
   padding: 0.3rem;
 }
 
+.editorLayout .caseNumbers {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.editorLayout .caseNumbers > .inputGroup + .inputGroup {
+  border-left: 1px solid #dee2e6;
+  padding-left: 1.25rem;
+}
+
+.editorLayout .inputGroup {
+  margin-bottom: 0;
+}
+
+.compactSectionGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+  border-top: 1px solid #dee2e6;
+  padding-top: 1.25rem;
+}
+
+.compactFullSection {
+  grid-column: 1 / -1;
+}
+
+.compactHalfSection {
+  margin-bottom: 1.5rem;
+}
+
+.editorLayout .notesActionBarSticky {
+  margin-top: 0.25rem;
+}
+
+.editorLayout .compactSectionGrid > .compactHalfSection + .compactHalfSection {
+  border-left: 1px solid #dee2e6;
+  padding-left: 1.25rem;
+}
+
+.classCharacteristicsColumns > .characteristicsPlaceholder {
+  border-left: 1px solid #dee2e6;
+  padding-left: 1.25rem;
+}
+
+.editorLayout .additionalNotesRow {
+  border-top: 1px solid #dee2e6;
+  padding-top: 1.25rem;
+}
+
+@media (max-width: 980px) {
+  .editorLayout .caseNumbers,
+  .compactSectionGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .editorLayout .caseNumbers > .inputGroup + .inputGroup,
+  .editorLayout
+    .compactSectionGrid
+    > .compactHalfSection
+    + .compactHalfSection,
+  .classCharacteristicsColumns > .characteristicsPlaceholder {
+    border-left: none;
+    padding-left: 0;
+  }
+
+  .classCharacteristicsColumns {
+    grid-template-columns: 1fr;
+  }
+
+  .compactFullSection,
+  .compactHalfSection {
+    grid-column: auto;
+  }
+}
+
 hr {
   padding-bottom: 0.5rem;
   margin: 0.5rem 0;
@@ -13,6 +91,26 @@ hr {
   margin-bottom: 2rem;
 }
 
+.sectionToggle {
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  text-align: left;
+}
+
+.sectionToggleIcon {
+  color: #6c757d;
+  font-size: 1.2rem;
+  line-height: 1;
+  font-weight: 500;
+}
+
 .sectionTitle {
   font-size: 1.3rem;
   font-weight: 600;
@@ -54,9 +152,25 @@ textarea:focus {
 }
 
 .caseNumbers {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.fontColorRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
   margin-bottom: 2rem;
 }
 
+.fontColorRow label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #212529;
+}
+
 .caseInput {
   display: flex;
   flex-direction: column;
@@ -103,6 +217,39 @@ textarea:focus {
   margin-bottom: 2rem;
 }
 
+.classCharacteristicsColumns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.classCharacteristicsMain {
+  min-width: 0;
+}
+
+.characteristicsPlaceholder {
+  border: 1px dashed #ced4da;
+  border-radius: 8px;
+  padding: 0.85rem;
+  background: #f8f9fa;
+  min-height: 150px;
+}
+
+.placeholderTitle {
+  margin: 0 0 0.5rem;
+  color: #495057;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.placeholderText {
+  margin: 0;
+  color: #6c757d;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
 .classCharacteristics input {
   width: 100%;
   padding: 0.75rem;
@@ -247,6 +394,14 @@ textarea:focus {
   margin-top: 1rem;
 }
 
+.additionalNotesRow {
+  width: 100%;
+}
+
+.editorLayout .additionalNotesRow {
+  grid-column: 1 / -1;
+}
+
 .notesButton:hover {
   background-color: color-mix(in lab, var(--primary) 95%, transparent);
 }
@@ -266,6 +421,7 @@ textarea:focus {
 }
 
 .modal {
+  position: relative;
   background: white;
   padding: 2rem;
   border-radius: 8px;
@@ -332,6 +488,19 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.notesActionBar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.notesActionBarSticky {
+  position: sticky;
+  bottom: 0;
+  padding: 0.75rem 0 0.25rem;
+  background: linear-gradient(to top, white 72%, rgba(255, 255, 255, 0));
+}
+
 .saveButton:hover {
   background-color: color-mix(in lab, var(--accent) 95%, transparent);
 }

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

@@ -1,37 +1,33 @@
 /* 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;
+  onOpenCase: () => 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 +35,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 +60,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;
@@ -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,20 @@
 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;
+  onOpenCase: () => 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 +22,35 @@ interface SidebarProps {
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   isUploading?: boolean;
+  onUploadStatusChange?: (isUploading: boolean) => void;
 }
 
 export const Sidebar = ({ 
   user, 
   onImageSelect,
+  onOpenCase,
   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 +73,24 @@ 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}
+        onOpenCase={onOpenCase}
+        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;