@striae-org/striae 5.3.1 → 5.4.0

package/app/components/navbar/case-modals/rename-case-modal.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import sharedStyles from './case-modal-shared.module.css';
-import styles from './rename-case-modal.module.css';
+import styles from './case-modal-shared.module.css';
 
 interface RenameCaseModalProps {
   isOpen: boolean;
@@ -60,22 +59,22 @@ export const RenameCaseModal = ({
 
   return (
     <div
-      className={sharedStyles.overlay}
+      className={styles.overlay}
       aria-label="Close rename case dialog"
       {...overlayProps}
     >
-      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Rename Case">
+      <div className={`${styles.modal} ${styles.modalStandard}`} role="dialog" aria-modal="true" aria-label="Rename Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close rename case dialog' })}>
           ×
         </button>
-        <h3 className={sharedStyles.title}>Rename Case</h3>
-        <p className={sharedStyles.subtitle}>Current case: {currentCase}</p>
+        <h3 className={styles.title}>Rename Case</h3>
+        <p className={styles.subtitle}>Current case: {currentCase}</p>
         <input
           ref={inputRef}
           type="text"
           value={newCaseName}
           onChange={(event) => setNewCaseName(event.target.value)}
-          className={sharedStyles.input}
+          className={styles.input}
           placeholder="New case number"
           disabled={isSubmitting}
           onKeyDown={(event) => {
@@ -84,10 +83,10 @@ export const RenameCaseModal = ({
             }
           }}
         />
-        <div className={sharedStyles.actions}>
+        <div className={styles.actions}>
           <button
             type="button"
-            className={sharedStyles.cancelButton}
+            className={styles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -95,7 +94,7 @@ export const RenameCaseModal = ({
           </button>
           <button
             type="button"
-            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            className={`${styles.confirmButton} ${styles.confirmButtonWarning}`}
             onClick={() => void handleSubmit()}
             disabled={isSubmitting || !newCaseName.trim()}
           >

package/app/components/navbar/navbar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useContext } from 'react';
 import styles from './navbar.module.css';
 import { SignOut } from '../actions/signout';
 import { ManageProfile } from '../user/manage-profile';
-import { CaseImport } from '../sidebar/case-import/case-import';
+import { CaseImport } from './case-import/case-import';
 import { AuthContext } from '~/contexts/auth.context';
 import { getUserData } from '~/utils/data';
 import { type ImportResult, type ConfirmationImportResult } from '~/types';

package/app/components/sidebar/files/delete-files-modal.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { type FileData } from '~/types';
 import sharedStyles from '~/components/navbar/case-modals/case-modal-shared.module.css';
-import styles from './delete-files-modal.module.css';
+import styles from './files-modal.module.css';
 
 interface DeleteFilesModalProps {
   isOpen: boolean;
@@ -45,7 +45,7 @@ export const DeleteFilesModal = ({
 
   return (
     <div className={sharedStyles.overlay} aria-label="Close delete files dialog" {...overlayProps}>
-      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Delete Selected Files">
+      <div className={`${sharedStyles.modal} ${styles.deleteFilesModal}`} role="dialog" aria-modal="true" aria-label="Delete Selected Files">
         <button {...getCloseButtonProps({ ariaLabel: 'Close delete files dialog' })}>×</button>
 
         <h3 className={sharedStyles.title}>Delete Selected Files</h3>
@@ -79,7 +79,7 @@ export const DeleteFilesModal = ({
           </button>
           <button
             type="button"
-            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            className={`${sharedStyles.confirmButton} ${styles.deleteFilesConfirmButton}`}
             onClick={() => {
               void onSubmit();
             }}

package/app/components/sidebar/files/files-modal.module.css

@@ -457,6 +457,35 @@
   );
 }
 
+/* ─── Delete Files Modal ────────────────────────────────────────────────── */
+
+.deleteFilesModal {
+  width: min(620px, calc(100vw - 2rem));
+}
+
+.filePreviewList {
+  margin: 0.6rem 0 0;
+  padding-left: 1.1rem;
+  color: #3f2a2e;
+  font-size: 0.86rem;
+}
+
+.filePreviewList li + li {
+  margin-top: 0.3rem;
+}
+
+.remainingNote {
+  margin-top: 0.5rem;
+  font-size: 0.84rem;
+  color: #6b2f35;
+}
+
+.deleteFilesConfirmButton {
+  background: #dc3545;
+  color: #ffffff;
+  border-color: #c82333;
+}
+
 @media (max-width: 980px) {
   .controlsSection {
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/app/components/sidebar/notes/{class-details-fields.tsx → class-details/class-details-fields.tsx}

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import styles from './notes.module.css';
+import styles from '../notes.module.css';
 import { CUSTOM, handleSelectWithCustom } from './class-details-shared';
 
 interface BaseFieldProps {

package/app/components/sidebar/notes/{class-details-modal.tsx → class-details/class-details-modal.tsx}

@@ -9,7 +9,7 @@ import {
 } from './class-details-shared';
 import { BulletSection, CartridgeCaseSection, ShotshellSection } from './class-details-sections';
 import { useClassDetailsState } from './use-class-details-state';
-import styles from './notes.module.css';
+import styles from '../notes.module.css';
 
 interface ClassDetailsModalProps {
   isOpen: boolean;

package/app/components/sidebar/notes/{class-details-sections.tsx → class-details/class-details-sections.tsx}

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import styles from './notes.module.css';
+import styles from '../notes.module.css';
 import {
   BULLET_BARREL_TYPE_OPTIONS,
   BULLET_CORE_METAL_OPTIONS,

package/app/components/sidebar/notes/notes-editor-form.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import type { User } from 'firebase/auth';
 import { ColorSelector } from '~/components/colors/colors';
 import { AddlNotesModal } from './addl-notes-modal';
-import { ClassDetailsModal } from './class-details-modal';
-import { buildClassDetailsSummary } from './class-details-shared';
+import { ClassDetailsModal } from './class-details/class-details-modal';
+import { buildClassDetailsSummary } from './class-details/class-details-shared';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { type AnnotationData, type BulletAnnotationData, type CartridgeCaseAnnotationData, type ShotshellAnnotationData } from '~/types/annotations';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/ui';

package/app/components/sidebar/notes/notes-editor-modal.tsx

@@ -1,7 +1,7 @@
 import type { User } from 'firebase/auth';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { NotesEditorForm } from './notes-editor-form';
-import styles from './notes-editor-modal.module.css';
+import styles from './notes.module.css';
 
 interface NotesEditorModalProps {
   isOpen: boolean;
@@ -40,14 +40,14 @@ export const NotesEditorModal = ({
 
   return (
     <div className={styles.overlay} aria-label="Close image notes dialog" {...overlayProps}>
-      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Image Notes">
-        <div className={styles.header}>
-          <h2 className={styles.title}>Image Notes</h2>
-          <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close image notes dialog' })}>
+      <div className={styles.editorModal} role="dialog" aria-modal="true" aria-label="Image Notes">
+        <div className={styles.editorModalHeader}>
+          <h2 className={styles.editorModalTitle}>Image Notes</h2>
+          <button className={styles.editorModalCloseButton} {...getCloseButtonProps({ ariaLabel: 'Close image notes dialog' })}>
             ×
           </button>
         </div>
-        <div className={styles.content}>
+        <div className={styles.editorModalContent}>
           <NotesEditorForm
             currentCase={currentCase}
             user={user}

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

@@ -773,6 +773,58 @@ textarea:focus {
   animation: fadeIn 0.3s ease-in;
 }
 
+/* ─── Notes Editor Modal ────────────────────────────────────────────────── */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 56%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+}
+
+.editorModal {
+  position: relative;
+  width: min(900px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 16%, transparent);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.editorModalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM) var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 12%, transparent);
+}
+
+.editorModalTitle {
+  margin: 0;
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyM);
+  font-weight: var(--fontWeightMedium);
+}
+
+.editorModalCloseButton {
+  background: none;
+  border: none;
+  color: var(--textLight);
+}
+
+.editorModalContent {
+  padding: var(--spaceM) var(--spaceL);
+  overflow-y: auto;
+  max-height: calc(100vh - 11rem);
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

package/app/components/toolbar/toolbar-color-selector.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import styles from './toolbar-color-selector.module.css';
+import styles from './toolbar.module.css';
 
 interface ToolbarColorSelectorProps {
   selectedColor: string;
@@ -66,15 +66,15 @@ export const ToolbarColorSelector = ({
 
   return (
     <div className={styles.toolbarColorSelector}>
-      <div className={styles.header}>
-        <span className={styles.title}>Select Box Color</span>
+      <div className={styles.colorSelectorHeader}>
+        <span className={styles.colorSelectorTitle}>Select Box Color</span>
       </div>
       
-      <div className={styles.content}>
+      <div className={styles.colorSelectorContent}>
         <div className={styles.toggleSection}>
           <button 
             onClick={() => setShowColorWheel(!showColorWheel)}
-            className={styles.toggleButton}
+            className={styles.colorToggleButton}
           >
             {showColorWheel ? 'Presets' : 'Custom'}
           </button>
@@ -106,11 +106,11 @@ export const ToolbarColorSelector = ({
         )}
       </div>
 
-      <div className={styles.actions}>
+      <div className={styles.colorSelectorActions}>
         <button
           type="button"
           onClick={handleConfirm}
-          className={`${styles.actionButton} ${styles.confirmButton}`}
+          className={`${styles.actionButton} ${styles.colorSelectorConfirmButton}`}
           title="Apply selected color"
         >
           ✓ Apply Color
@@ -118,7 +118,7 @@ export const ToolbarColorSelector = ({
         <button
           type="button"
           onClick={handleCancel}
-          className={`${styles.actionButton} ${styles.cancelButton}`}
+          className={`${styles.actionButton} ${styles.colorSelectorCancelButton}`}
           title="Cancel color selection"
         >
           ✕ Cancel

package/app/components/toolbar/toolbar.module.css

@@ -9,7 +9,8 @@
   padding: var(--spaceS);
   background: var(--background);
   border-radius: 5px;
-  box-shadow: 0 var(--spaceXS) var(--spaceM) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceM)
+    color-mix(in lab, var(--black) 10%, transparent);
   height: auto;
   overflow: hidden;
   transition: opacity var(--durationM) var(--bezierFastoutSlowin);
@@ -39,4 +40,182 @@
   pointer-events: none;
   height: 0;
   overflow: hidden;
-}
+}
+
+/* ─── Color Selector ────────────────────────────────────────────────────── */
+
+.toolbarColorSelector {
+  position: absolute;
+  left: calc(100% + var(--spaceM));
+  bottom: 0;
+  background: var(--background);
+  border-radius: 5px;
+  box-shadow: 0 var(--spaceXS) var(--spaceM)
+    color-mix(in lab, var(--black) 10%, transparent);
+  padding: var(--spaceS);
+  width: 200px;
+  z-index: 50;
+}
+
+.colorSelectorHeader {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: var(--spaceS);
+  padding-bottom: var(--spaceXS);
+  border-bottom: 1px solid var(--border);
+}
+
+.colorSelectorTitle {
+  font-size: var(--fontSizeS);
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.colorSelectorActions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  margin-top: var(--spaceS);
+  padding-top: var(--spaceS);
+  border-top: 1px solid var(--border);
+}
+
+.actionButton {
+  width: 100%;
+  min-height: 38px;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: var(--fontSizeS);
+  font-weight: 600;
+  color: white;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.colorSelectorConfirmButton {
+  background: var(--success);
+}
+
+.colorSelectorConfirmButton:hover {
+  background: color-mix(in lab, var(--success) 80%, var(--black));
+}
+
+.colorSelectorCancelButton {
+  background: var(--error);
+}
+
+.colorSelectorCancelButton:hover {
+  background: color-mix(in lab, var(--error) 80%, var(--black));
+}
+
+.colorSelectorContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.toggleSection {
+  display: flex;
+  justify-content: center;
+}
+
+.colorToggleButton {
+  background: var(--backgroundSecondary);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: var(--spaceXS) var(--spaceS);
+  cursor: pointer;
+  font-size: var(--fontSizeBodyXS);
+}
+
+.colorToggleButton:hover {
+  background: var(--backgroundTertiary);
+}
+
+.colorWheelSection {
+  display: flex;
+  justify-content: center;
+}
+
+.colorWheel {
+  width: 60px;
+  height: 40px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.colorGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--spaceXS);
+  padding: var(--spaceXS);
+}
+
+.colorSwatch {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.colorSwatch:hover {
+  transform: scale(1.1);
+  border-color: var(--foreground);
+}
+
+.colorSwatch.selected {
+  border-color: var(--foreground);
+  border-width: 3px;
+  box-shadow:
+    0 0 0 2px var(--background),
+    0 0 0 4px var(--foreground);
+  transform: scale(1.15);
+  position: relative;
+}
+
+.colorSwatch.selected::after {
+  content: "✓";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--foreground);
+  font-weight: bold;
+  font-size: 14px;
+  text-shadow:
+    0 0 3px var(--background),
+    0 0 6px var(--background);
+  pointer-events: none;
+}
+
+.preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spaceS);
+  padding: var(--spaceXS);
+  background: var(--backgroundSecondary);
+  border-radius: 3px;
+}
+
+.previewLabel {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+.previewSwatch {
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  flex-shrink: 0;
+}

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

@@ -4,7 +4,7 @@ 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';
+import styles from './user.module.css';
 
 interface DeletionProgress {
   totalCases: number;
@@ -323,17 +323,17 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
       aria-label="Close delete account dialog"
     >
       <div 
-        className={styles.modal}
+        className={styles.deleteAccountModal}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
       >
         {/* Header */}
-        <header className={styles.modalHeader}>
+        <header className={styles.dangerModalHeader}>
           <h1 id="modal-title" className={styles.dangerTitle}>Delete Striae Account</h1>
           <button 
             onClick={onClose} 
-            className={styles.closeButton}
+            className={styles.dangerCloseButton}
             aria-label="Close modal"
           >
             &times;
@@ -421,7 +421,7 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
           {/* Confirmation Form */}
           {!success && (
             <form className={styles.confirmationForm}>
-            <div className={styles.formGroup}>
+            <div className={styles.deleteFormGroup}>
               <label htmlFor="uid-confirmation" className={styles.formLabel}>
                 Enter UID to confirm account deletion:
               </label>
@@ -436,7 +436,7 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
               />
             </div>
 
-            <div className={styles.formGroup}>
+            <div className={styles.deleteFormGroup}>
               <label htmlFor="email-confirmation" className={styles.formLabel}>
                 Enter your email address to confirm account deletion:
               </label>
@@ -455,7 +455,7 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
             <button
               type="button"
               onClick={handleDeleteAccount}
-              className={styles.deleteButton}
+              className={styles.deleteAccountButton}
               disabled={!isConfirmationValid || isDeleting}
             >
               {isDeleting ? 'Deleting Account...' : 'Delete Striae Account'}

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

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import styles from './inactivity-warning.module.css';
+import styles from './user.module.css';
 
 interface InactivityWarningProps {
   isOpen: boolean;
@@ -56,16 +56,16 @@ export const InactivityWarning = ({
   const seconds = countdown % 60;
 
   return (
-    <div className={styles.overlay} aria-label="Close inactivity warning" {...overlayProps}>
-      <div className={styles.modal}>
+    <div className={styles.inactivityOverlay} aria-label="Close inactivity warning" {...overlayProps}>
+      <div className={styles.inactivityModal}>
         <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close inactivity warning' })}>
           ×
         </button>
-        <div className={styles.header}>
+        <div className={styles.inactivityHeader}>
           <h3>Session Timeout Warning</h3>
         </div>
         
-        <div className={styles.content}>
+        <div className={styles.inactivityContent}>
           <p>
             Your session will expire due to inactivity in:
           </p>
@@ -77,7 +77,7 @@ export const InactivityWarning = ({
           </p>
         </div>
         
-        <div className={styles.actions}>
+        <div className={styles.inactivityActions}>
           <button
             onClick={requestClose}
             className={styles.extendButton}

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

@@ -11,7 +11,9 @@ import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
 import { FormField, FormButton } from '../form';
 import { Toast } from '~/components/toast/toast';
 import { MfaPhoneUpdateSection } from './mfa-phone-update';
-import styles from './manage-profile.module.css';
+import { MfaTotpSection } from './mfa-totp-section';
+import { MfaEnrolledFactors } from './mfa-enrolled-factors';
+import styles from './user.module.css';
 
 interface ManageProfileProps {
   isOpen: boolean;
@@ -27,6 +29,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isMfaBusy, setIsMfaBusy] = useState(false);
+  const [enrolledFactorsRefreshKey, setEnrolledFactorsRefreshKey] = useState(0);
   const [showToast, setShowToast] = useState(false);
   const [toastMessage, setToastMessage] = useState('');
   const [toastType, setToastType] = useState<'success' | 'error'>('success');
@@ -298,6 +301,20 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
 
           <MfaPhoneUpdateSection user={user} isOpen={isOpen} onBusyChange={handleMfaBusyChange} />
 
+          <MfaTotpSection
+            user={user}
+            isOpen={isOpen}
+            onBusyChange={handleMfaBusyChange}
+            onTotpEnrolled={() => setEnrolledFactorsRefreshKey((k) => k + 1)}
+          />
+
+          <MfaEnrolledFactors
+            user={user}
+            refreshKey={enrolledFactorsRefreshKey}
+            onFactorRemoved={() => setEnrolledFactorsRefreshKey((k) => k + 1)}
+            onBusyChange={handleMfaBusyChange}
+          />
+
           <div className={styles.buttonGroup}>
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile