@striae-org/striae 3.2.2 → 4.0.0

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

@@ -10,12 +10,12 @@ hr {
 }
 
 .section {
-  margin-bottom: 2rem;  
+  margin-bottom: 2rem;
 }
 
 .sectionTitle {
   font-size: 1.3rem;
-  font-weight: 600;  
+  font-weight: 600;
   color: #495057;
   margin-bottom: 1rem;
 }
@@ -50,7 +50,7 @@ input[type="color"]:focus,
 textarea:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 .caseNumbers {
@@ -74,10 +74,14 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.caseInput input:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .caseInput input:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 .checkboxLabel {
@@ -108,6 +112,11 @@ textarea:focus {
   transition: border-color 0.2s;
 }
 
+.classCharacteristics input:not(:disabled),
+.classCharacteristics textarea:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .classCharacteristics select,
 .support select {
   width: 100%;
@@ -124,7 +133,7 @@ textarea:focus {
 .support select:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 .classCharacteristics textarea {
@@ -138,11 +147,14 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.classCharacteristics input + textarea {
+  margin-top: 1rem;
+}
+
 .classCharacteristics textarea:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
-  margin-top: 1rem;
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
   resize: vertical;
 }
 
@@ -188,13 +200,17 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.indexing input[type="text"]:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .indexing input[type="text"]:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
-.confirmation {  
+.confirmation {
   padding: 0.75rem;
   background-color: #f8f9fa;
   border-radius: 6px;
@@ -232,7 +248,7 @@ textarea:focus {
 }
 
 .notesButton:hover {
-  background-color: color-mix(in lab, var(--primary) 95%, transparent);  
+  background-color: color-mix(in lab, var(--primary) 95%, transparent);
 }
 
 .modalOverlay {
@@ -355,6 +371,10 @@ textarea:focus {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -109,7 +109,6 @@
 .footerSectionButton:hover {
   background-color: #5c636a;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
 }
 
 /* Footer Modal */
@@ -163,7 +162,6 @@
 
 .footerModalClose:hover {
   background-color: #f8f9fa;
-  transform: translateY(-1px);
 }
 
 .footerModalContent {

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

@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
-import paths from '~/config/config.json';
-import { getUserApiKey } from '~/utils/auth';
+import { fetchUserApi } from '~/utils/user-api-client';
 import { auditService } from '~/services/audit';
 import styles from './delete-account.module.css';
 
@@ -220,14 +219,15 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
         false // emailNotificationSent - deletion emails disabled
       );
 
-      // Get API key for user-worker authentication
-      const apiKey = await getUserApiKey();
+      const currentUser = auth.currentUser;
+      if (!currentUser || currentUser.uid !== user.uid) {
+        throw new Error('User session mismatch. Please sign in again.');
+      }
       
-      // Delete the user account via user-worker
-      const deleteResponse = await fetch(`${paths.user_worker_url}/${user.uid}?stream=true`, {
+      // Delete the user account via user proxy
+      const deleteResponse = await fetchUserApi(currentUser, `/${encodeURIComponent(user.uid)}?stream=true`, {
         method: 'DELETE',
         headers: {
-          'X-Custom-Auth-Key': apiKey,
           'Accept': 'text/event-stream'
         }
       });

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

@@ -234,7 +234,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile
             </FormButton>
-            <FormButton variant="secondary" type="button" onClick={() => setShowAuditViewer(true)}>
+            <FormButton variant="audit" type="button" onClick={() => setShowAuditViewer(true)}>
               View My Audit Trail
             </FormButton>
             <FormButton variant="secondary" type="button" onClick={() => setShowResetForm(true)}>

package/app/components/user/mfa-phone-update.tsx

@@ -58,6 +58,7 @@ export const MfaPhoneUpdateSection = ({
   const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
 
   const isMfaBusy = isMfaLoading || isMfaReauthLoading;
+  const hasMfaPhoneInput = mfaPhoneInput.trim().length > 0;
 
   const resetMfaReauthFlow = useCallback(() => {
     setShowMfaReauthPrompt(false);
@@ -665,18 +666,20 @@ export const MfaPhoneUpdateSection = ({
           )}
         </div>
       ) : !isMfaCodeSent ? (
-        <div className={styles.mfaButtonGroup}>
-          <FormButton
-            variant="secondary"
-            type="button"
-            onClick={handleSendMfaVerificationCode}
-            isLoading={isMfaLoading}
-            loadingText="Sending Code..."
-            disabled={!mfaPhoneInput.trim()}
-          >
-            Send Verification Code
-          </FormButton>
-        </div>
+        hasMfaPhoneInput ? (
+          <div className={styles.mfaButtonGroup}>
+            <FormButton
+              variant="secondary"
+              type="button"
+              onClick={handleSendMfaVerificationCode}
+              isLoading={isMfaLoading}
+              loadingText="Sending Code..."
+              disabled={!hasMfaPhoneInput}
+            >
+              Send Verification Code
+            </FormButton>
+          </div>
+        ) : null
       ) : (
         <div className={styles.mfaVerificationSection}>
           <input

package/app/config-example/config.json

@@ -1,12 +1,6 @@
 {    
-  "url": "PAGES_CUSTOM_DOMAIN",    
-  "data_worker_url": "DATA_WORKER_CUSTOM_DOMAIN",
-  "keys_url": "KEYS_WORKER_CUSTOM_DOMAIN",
-  "image_worker_url": "IMAGE_WORKER_CUSTOM_DOMAIN",
-  "user_worker_url": "USER_WORKER_CUSTOM_DOMAIN",
-  "pdf_worker_url": "PDF_WORKER_CUSTOM_DOMAIN",
-  "audit_worker_url": "AUDIT_WORKER_CUSTOM_DOMAIN",
-  "keys_auth": "YOUR_KEYS_AUTH_TOKEN",
+  "url": "PAGES_CUSTOM_DOMAIN",
+  "account_hash": "ACCOUNT_HASH",
   "manifest_signing_key_id": "MANIFEST_SIGNING_KEY_ID",
   "manifest_signing_public_key": "MANIFEST_SIGNING_PUBLIC_KEY",
   "manifest_signing_public_keys": {

package/app/hooks/useInactivityTimeout.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useCallback } from 'react';
-import { useLocation } from 'react-router';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import { INACTIVITY_CONFIG } from '~/config/inactivity';
@@ -19,13 +18,11 @@ export const useInactivityTimeout = ({
   onTimeout,
   enabled = true
 }: UseInactivityTimeoutOptions = {}) => {
-  const location = useLocation();
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const warningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastActivityRef = useRef<number>(0);
 
-  const isAuthRoute = location.pathname.startsWith('/auth');
-  const shouldEnable = enabled && isAuthRoute;
+  const shouldEnable = enabled;
 
   useEffect(() => {
     lastActivityRef.current = Date.now();
@@ -104,7 +101,7 @@ export const useInactivityTimeout = ({
       });
       clearTimeouts();
     };
-  }, [shouldEnable, resetTimer, clearTimeouts, location.pathname]);
+  }, [shouldEnable, resetTimer, clearTimeouts]);
 
   return {
     extendSession,

package/app/root.tsx

@@ -7,8 +7,6 @@ import {
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError,
-  Link,
-  useLocation,
   useMatches,
 } from 'react-router';
 import { 
@@ -16,6 +14,7 @@ import {
   themeStyles 
 } from '~/components/theme-provider/theme-provider';
 import { AuthProvider } from '~/components/auth/auth-provider';
+import { auth } from '~/services/firebase';
 import styles from '~/styles/root.module.css';
 import './tailwind.css';
 
@@ -30,8 +29,8 @@ export const links: LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
+  { rel: 'manifest', href: '/manifest.json' },
   { rel: 'icon', href: '/favicon.ico' },
-  { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
 ];
 
 type AppTheme = 'dark' | 'light';
@@ -61,7 +60,7 @@ const resolveRouteTheme = (matches: ReturnType<typeof useMatches>): AppTheme =>
 export function Layout({ children }: { children: React.ReactNode }) {
   const matches = useMatches();
   const theme = resolveRouteTheme(matches);
-  const themeColor = theme === 'dark' ? '#000000' : '#f5f5f5';
+  const themeColor = theme === 'dark' ? '#000000' : '#377087';
 
   return (
     <html lang="en" data-theme={theme}>
@@ -88,80 +87,112 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  const matches = useMatches();
-  const location = useLocation();
-  const isAuthRoute = matches.some(match => 
-    match.id.includes('auth') || 
-    match.pathname?.includes('/auth')    
-  ) || location.pathname === '/';
+  return (
+    <AuthProvider>
+      <Outlet />
+    </AuthProvider>
+  );
+}
 
-  if (isAuthRoute) {
-    return (
-      <AuthProvider>
-        <Outlet />
-      </AuthProvider>
-    );
+interface ErrorBoundaryShellProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const LOGIN_REDIRECT_PATH = '/';
+
+const errorActionStyle = {
+  alignItems: 'center',
+  appearance: 'none',
+  backgroundColor: '#0d6efd',
+  border: '1px solid #0b5ed7',
+  borderRadius: '8px',
+  color: '#ffffff',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  fontSize: '1rem',
+  fontWeight: 600,
+  justifyContent: 'center',
+  lineHeight: 1,
+  marginTop: '1rem',
+  minWidth: '220px',
+  padding: '0.9rem 1.6rem',
+  textDecoration: 'none',
+} as const;
+
+async function returnToLogin() {
+  try {
+    await auth.signOut();
+  } catch (error) {
+    console.error('Error boundary sign out failed:', error);
+  } finally {
+    if (typeof window !== 'undefined') {
+      localStorage.clear();
+      window.location.href = LOGIN_REDIRECT_PATH;
+    }
   }
+}
 
-  return <Outlet />;
+function ErrorBoundaryShell({ title, children }: ErrorBoundaryShellProps) {
+  return (
+    <html lang="en" data-theme="light">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#377087" />
+        <meta name="color-scheme" content="light" />
+        <style dangerouslySetInnerHTML={{ __html: themeStyles }} />
+        <title>{title}</title>
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex flex-col h-screen w-full overflow-x-hidden">
+        <ThemeProvider theme="light" className="">
+          <main>{children}</main>
+        </ThemeProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
 }
 
 export function ErrorBoundary() {
   const error = useRouteError();
 
   if (isRouteErrorResponse(error)) {
+    const statusText = error.statusText || 'Unexpected error';
+
     return (
-      <html lang="en">
-        <head>
-          <title>{`${error.status} ${error.statusText}`}</title>          
-        </head>
-        <body className="flex flex-col h-screen">
-          <ThemeProvider theme="light" className="">          
-          <main>
-            <div className={styles.errorContainer}>
-              <div className={styles.errorTitle}>{error.status}</div>
-              <p className={styles.errorMessage}>{error.statusText}</p>
-              <Link 
-                viewTransition
-                prefetch="intent"
-                to="https://striae.org" 
-                className={styles.errorLink}>
-                Return Home
-              </Link>
-            </div>
-          </main>
-          </ThemeProvider>
-          <ScrollRestoration />
-          <Scripts />          
-        </body>
-      </html>
+      <ErrorBoundaryShell title={`${error.status} ${statusText}`}>
+        <div className={styles.errorContainer}>
+          <div className={styles.errorTitle}>{error.status}</div>
+          <p className={styles.errorMessage}>{statusText}</p>
+          <button
+            type="button"
+            onClick={() => void returnToLogin()}
+            style={errorActionStyle}
+            className={styles.errorLink}>
+            Return to Login
+          </button>
+        </div>
+      </ErrorBoundaryShell>
     );
   }
 
   return (
-    <html lang="en">
-      <head>
-        <title>Oops! Something went wrong</title>       
-      </head>
-      <body className="flex flex-col h-screen">
-        <ThemeProvider theme="light" className="">        
-        <main>
-          <div className={styles.errorContainer}>
-            <div className={styles.errorTitle}>500</div>
-            <p className={styles.errorMessage}>Something went wrong. Please try again later.</p>
-            <Link 
-              viewTransition
-              prefetch="intent"
-              to="https://striae.org" 
-              className={styles.errorLink}>
-              Return Home
-            </Link>
-          </div>
-        </main>
-        </ThemeProvider>
-        <ScrollRestoration />
-        <Scripts />        
-      </body>
-    </html>
+    <ErrorBoundaryShell title="Oops! Something went wrong">
+      <div className={styles.errorContainer}>
+        <div className={styles.errorTitle}>500</div>
+        <p className={styles.errorMessage}>Something went wrong. Please try again later.</p>
+        <button
+          type="button"
+          onClick={() => void returnToLogin()}
+          style={errorActionStyle}
+          className={styles.errorLink}>
+          Return to Login
+        </button>
+      </div>
+    </ErrorBoundaryShell>
   );
 }