@striae-org/striae 3.0.4

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

@@ -0,0 +1,321 @@
+/* Layout */
+.sidebar {
+  position: relative;
+  width: 300px;
+  min-width: 250px;
+  height: calc(100vh - 60px);
+  background-color: #f8f9fa;
+  border-right: 1px solid #dee2e6;
+  padding: 1.5rem;
+  overflow-y: auto;
+  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;
+  bottom: 1.5rem;
+  left: 1.5rem;
+  width: calc(300px - 3rem);
+  padding: 0.75rem 1rem;
+  background-color: #0d6efd;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+/* Footer Section */
+.footerSection {
+  width: 300px;
+  min-width: 250px;
+  height: 60px;
+  background-color: #f8f9fa;
+  border-right: 1px solid #dee2e6;
+  border-top: 1px solid #dee2e6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5rem;
+  box-sizing: border-box;
+}
+
+.footerSectionButton {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.footerButton:hover {
+  background-color: #0b5ed7;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.footerSectionButton:hover {
+  background-color: #5c636a;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+/* Footer Modal */
+.footerModalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.footerModal {
+  background: white;
+  border-radius: 8px;
+  padding: 2rem;
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.footerModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 1rem;
+}
+
+.footerModalTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #212529;
+  margin: 0;
+}
+
+.footerModalClose {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #6c757d;
+  padding: 0.5rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.footerModalClose:hover {
+  background-color: #f8f9fa;
+  transform: translateY(-1px);
+}
+
+.footerModalContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.footerModalLinks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.footerModalLink {
+  display: block;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  text-decoration: none;
+  color: #212529;
+  transition: all 0.2s;
+  text-align: center;
+  font-weight: 500;
+}
+
+.footerModalLink:hover {
+  background-color: #e9ecef;
+  color: #495057;
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+.footerModalCopyright {
+  text-align: center;
+  color: #6c757d;
+  font-size: 0.875rem;
+  padding-top: 1rem;
+  border-top: 1px solid #dee2e6;
+  margin-top: 1rem;
+}
+
+.link {
+  color: #6c757d;
+  text-decoration: none;
+}
+
+.link:hover {
+  color: #495057;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+}
+
+.licenseLinkButton {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  color: #6c757d;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.licenseLinkButton:hover {
+  color: #495057;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+}
+
+.badgeContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spaceM, 1rem);
+  margin-top: var(--spaceXS, 0.5rem);
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.oinBadge {
+  text-align: center;
+}
+
+.oinBadgeLink {
+  display: inline-block;
+  transition: opacity var(--durationS, 0.2s) var(--bezierFastoutSlowin, ease-out);
+}
+
+.oinBadgeLink:hover {
+  opacity: 0.8;
+  transform: translateY(-1px);
+}
+
+.oinBadgeImage {
+  height: 40px;
+  width: auto;
+  border-radius: 4px;
+}
+
+/* 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%;
+  padding: 0.75rem 1rem;
+  background: #6c757d;
+  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, #6c757d 30%, transparent);
+  box-sizing: border-box;
+  margin-top: 0.5rem;
+}
+
+.hashButton:hover {
+  background: #5c636a;
+  box-shadow: 0 2px 6px color-mix(in lab, #6c757d 40%, transparent);
+}
+
+

package/app/components/sidebar/sidebar.tsx

@@ -0,0 +1,215 @@
+import { 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 { HashUtility } from './hash/hash-utility';
+import { Toast } from '../toast/toast';
+import { FileData } from '~/types';
+import { ImportResult, ConfirmationImportResult } 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;
+  isReadOnly?: boolean;
+  isConfirmed?: boolean;
+  confirmationSaveVersion?: number;
+  isUploading?: boolean;
+}
+
+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,  
+}: SidebarProps) => {
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isHashModalOpen, setIsHashModalOpen] = 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 handleUploadComplete = useCallback((result: { successCount: number; failedFiles: string[] }) => {
+    if (result.successCount === 0 && result.failedFiles.length > 0) {
+      // All files failed
+      setToastType('error');
+      const errorList = result.failedFiles.map(fn => `${fn} was not uploaded`).join(', ');
+      setToastMessage(`Errors: ${errorList}`);
+    } else if (result.failedFiles.length > 0) {
+      // Some files succeeded, some failed
+      const errorList = result.failedFiles.map(fn => `${fn} was not uploaded`).join(', ');
+      setToastType('warning');
+      setToastMessage(`${result.successCount} file${result.successCount !== 1 ? 's' : ''} successfully uploaded! Errors: ${errorList}`);
+    } else if (result.successCount > 0) {
+      // All files succeeded
+      setToastType('success');
+      setToastMessage(`${result.successCount} file${result.successCount !== 1 ? 's' : ''} uploaded!`);
+    }
+    setIsToastVisible(true);
+  }, []);  
+
+  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}
+      />
+      <HashUtility 
+        isOpen={isHashModalOpen}
+        onClose={() => setIsHashModalOpen(false)}
+      />
+      {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>
+            <button 
+              onClick={() => setIsHashModalOpen(true)}
+              className={styles.hashButton}
+              disabled={isUploading}
+              title={isUploading ? 'Cannot open hash utility while uploading files' : undefined}
+            >
+              Hash Utility
+            </button>
+          </div>
+        </>
+      )}
+      <Toast 
+        message={toastMessage}
+        type={toastType}
+        isVisible={isToastVisible}
+        onClose={() => setIsToastVisible(false)}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,123 @@
+/* Image Upload Zone */
+.imageUploadZone {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.imageUploadZone label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #000000;
+  margin-bottom: 0.5rem;
+}
+
+.fileInput {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.fileInput:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dragDropHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  border: 2px dashed #dee2e6;
+  border-radius: 6px;
+  background-color: #fafafa;
+  transition: all 0.2s ease;
+  pointer-events: none;
+  min-height: 100px;
+}
+
+.dragDropText {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #6c757d;
+  text-align: center;
+  font-weight: 500;
+}
+
+.imageUploadZone.dragActive {
+  background-color: rgba(13, 110, 253, 0.05);
+  border-radius: 6px;
+}
+
+.imageUploadZone.dragActive .dragDropHint {
+  border-color: #0d6efd;
+  background-color: rgba(13, 110, 253, 0.1);
+  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
+}
+
+.imageUploadZone.dragActive .dragDropText {
+  color: #0d6efd;
+  font-weight: 600;
+}
+
+.progressBar {
+  width: 100%;
+  height: 6px;
+  background-color: #e9ecef;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.progressFill {
+  height: 100%;
+  background-color: #198754;
+  transition: width 0.3s ease;
+}
+
+.uploadingText {
+  font-size: 0.875rem;
+  color: var(--textBody);
+  font-weight: 500;
+}
+
+.uploadStatusContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  margin-top: 0.25rem;
+}
+
+.fileCountText {
+  font-size: 0.75rem;
+  color: var(--textLight);
+  font-weight: 400;
+}
+
+.currentFileName {
+  font-size: 0.875rem;
+  color: var(--textBody);
+  margin: 0.25rem 0 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* Status Messages */
+.error {
+  font-size: 0.875rem;
+  color: #dc3545;
+  background-color: rgba(220, 53, 69, 0.1);
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 4px;
+}