@striae-org/striae 3.0.4

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

@@ -0,0 +1,360 @@
+.notesSidebar {
+  padding: 0.3rem;
+}
+
+hr {
+  padding-bottom: 0.5rem;
+  margin: 0.5rem 0;
+  border: none;
+  border-top: 1px solid #ced4da;
+}
+
+.section {
+  margin-bottom: 2rem;  
+}
+
+.sectionTitle {
+  font-size: 1.3rem;
+  font-weight: 600;  
+  color: #495057;
+  margin-bottom: 1rem;
+}
+
+.inputGroup {
+  margin-bottom: 1.5rem;
+}
+
+label {
+  color: #000000 !important;
+  font-weight: 500;
+}
+
+input:disabled {
+  background-color: #e9ecef;
+  cursor: not-allowed;
+}
+
+.select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  background-color: white;
+  margin-bottom: 1rem;
+}
+
+.select:focus,
+input[type="text"]:focus,
+input[type="color"]:focus,
+textarea:focus {
+  outline: none;
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+}
+
+.caseNumbers {
+  margin-bottom: 2rem;
+}
+
+.caseInput {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.caseInput input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.caseInput input:focus {
+  outline: none;
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+}
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  color: #495057;
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 1.5rem;
+}
+
+.checkboxLabel:hover {
+  color: #0d6efd;
+}
+
+.classCharacteristics {
+  margin-bottom: 2rem;
+}
+
+.classCharacteristics input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: border-color 0.2s;
+}
+
+.classCharacteristics select,
+.support select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  background-color: white;
+  box-sizing: border-box;
+}
+
+.classCharacteristics select:focus,
+.support select:focus {
+  outline: none;
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+}
+
+.classCharacteristics textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  min-height: 100px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.classCharacteristics textarea:focus {
+  outline: none;
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  margin-top: 1rem;
+  resize: vertical;
+}
+
+.indexing {
+  margin-bottom: 2rem;
+}
+
+.radioGroup {
+  display: flex;
+  gap: 1.5rem;
+  margin: 0.75rem 0;
+  padding: 0.5rem 0;
+}
+
+.radioGroup label,
+.confirmation label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #495057;
+  font-size: 0.9rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.radioGroup input[type="radio"],
+.confirmation input[type="checkbox"],
+.checkbox input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  cursor: pointer;
+}
+
+.indexing input[type="text"] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.indexing input[type="text"]:focus {
+  outline: none;
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+}
+
+.confirmation {  
+  padding: 0.75rem;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+}
+
+.returnButton {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 1rem;
+}
+
+.returnButton:hover {
+  background-color: #5c636a;
+}
+
+.notesButton {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.notesButton:hover {
+  background-color: color-mix(in lab, var(--primary) 95%, transparent);  
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modalTitle {
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #000000;
+}
+
+.modalTextarea {
+  width: 100%;
+  min-height: 200px;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.modalButtons {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+.cancelButton {
+  width: 30%;
+  padding: 0.75rem;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: 1rem;
+}
+
+.cancelButton:hover {
+  background-color: #bd2130;
+}
+
+.saveButton {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  box-sizing: border-box;
+}
+
+.saveButton:hover {
+  background-color: color-mix(in lab, var(--accent) 95%, transparent);
+}
+
+.saveButton:hover,
+.cancelButton:hover {
+  /* Transform handled by global styles */
+}
+
+.immutableNotice {
+  color: #0f5132;
+  background-color: #d1e7dd;
+  border: 1px solid #badbcc;
+  border-radius: 4px;
+  padding: 0.75rem;
+  margin: 0 0 1rem;
+  text-align: center;
+}
+
+.errorMessage {
+  color: var(--error);
+  background-color: var(--errorLight);
+  border: 1px solid color-mix(in lab, var(--error) 25%, var(--errorLight));
+  border-radius: 4px;
+  padding: 0.75rem;
+  margin: 0 0 1rem;
+  text-align: center;
+}
+
+.successMessage {
+  color: var(--success);
+  background-color: #d1e7dd;
+  border: 1px solid #badbcc;
+  border-radius: 4px;
+  padding: 0.75rem;
+  margin: 1rem 0;
+  text-align: center;
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

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

@@ -0,0 +1,149 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState, useEffect } from 'react';
+import { Link } from '@remix-run/react';
+import { Sidebar } from './sidebar';
+import { User } from 'firebase/auth';
+import { FileData } from '~/types';
+import styles from './sidebar.module.css';
+import { getAppVersion } from '../../utils/version';
+
+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;
+}
+
+export const SidebarContainer: React.FC<SidebarContainerProps> = (props) => {
+  const [isFooterModalOpen, setIsFooterModalOpen] = useState(false);
+  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]);
+  
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      {/* Main Sidebar */}
+      <Sidebar {...props} />
+      
+      {/* Footer Section */}
+      <div className={styles.footerSection}>
+        <button 
+          onClick={() => setIsFooterModalOpen(true)}
+          className={styles.footerSectionButton}
+        >
+          About & Support
+        </button>
+      </div>
+
+      {/* Footer Modal */}
+      {isFooterModalOpen && (
+        <div className={styles.footerModalOverlay} onClick={() => setIsFooterModalOpen(false)}>
+          <div className={styles.footerModal} onClick={(e) => e.stopPropagation()}>
+            <div className={styles.footerModalHeader}>
+              <h2 className={styles.footerModalTitle}>About Striae</h2>
+              <button 
+                onClick={() => setIsFooterModalOpen(false)}
+                className={styles.footerModalClose}
+              >
+                ×
+              </button>
+            </div>
+            <div className={styles.footerModalContent}>
+              <div className={styles.footerModalLinks}>                                
+                <Link                   
+                  to="https://striae.org/support" 
+                  target="_blank"
+                  rel="noopener noreferrer" 
+                  className={styles.footerModalLink}>
+                  Need Help?
+                </Link>
+                <Link                   
+                  to="https://striae.org/bugs" 
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.footerModalLink}>
+                  Report a Bug
+                </Link>
+                <Link
+                  to="https://striae.org/privacy"
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className={styles.footerModalLink}>
+                  Privacy Policy
+                </Link>
+                <Link
+                  to="https://striae.org/terms"
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className={styles.footerModalLink}>
+                  Terms of Service
+                </Link>
+                <Link
+                  to="https://striae.org/security"
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className={styles.footerModalLink}>
+                  Security Policy
+                </Link>                
+              </div>
+              <div className={styles.badgeContainer}>                
+                <div className={styles.oinBadge}>
+                  <a
+                    href="https://openinventionnetwork.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.oinBadgeLink}
+                  >
+                    <img 
+                      src="/oin-badge.png" 
+                      alt="Open Invention Network Community Member" 
+                      className={styles.oinBadgeImage}
+                    />
+                  </a>
+                </div>
+              </div>
+              <div className={styles.footerModalCopyright}>
+                <a href={`https://github.com/striae-org/striae/releases/tag/v${appVersion}`} className={styles.link} target="_blank" rel="noopener noreferrer">Striae v{appVersion}</a> © {year}.{' '}
+                Licensed under Apache 2.0.
+              </div>              
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};