@striae-org/striae 3.0.4

package/app/components/sidebar/upload/image-upload-zone.tsx

@@ -0,0 +1,330 @@
+import { User } from 'firebase/auth';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import styles from './image-upload-zone.module.css';
+import { uploadFile } from '~/components/actions/image-manage';
+import { FileData } from '~/types';
+
+interface ImageUploadZoneProps {
+  user: User;
+  currentCase: string | null;
+  isReadOnly: boolean;
+  canUploadNewFile: boolean;
+  uploadFileError: string;
+  onFilesChanged: (files: FileData[]) => void;
+  onUploadPermissionCheck?: (fileCount: number) => Promise<void>;
+  currentFiles: FileData[];
+  onUploadStatusChange?: (isUploading: boolean) => void;
+  onUploadComplete?: (result: { successCount: number; failedFiles: string[] }) => void;
+}
+
+const ALLOWED_TYPES = [
+  'image/png',
+  'image/gif',
+  'image/jpeg',
+  'image/webp',
+  'image/svg+xml'
+];
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10 MB
+
+export const ImageUploadZone = ({
+  user,
+  currentCase,
+  isReadOnly,
+  canUploadNewFile,
+  uploadFileError,
+  onFilesChanged,
+  onUploadPermissionCheck,
+  currentFiles,
+  onUploadStatusChange,
+  onUploadComplete,
+}: ImageUploadZoneProps) => {
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [fileError, setFileError] = useState('');
+  const [isDraggingFiles, setIsDraggingFiles] = useState(false);
+  const [uploadQueue, setUploadQueue] = useState<File[]>([]);
+  const [currentFileIndex, setCurrentFileIndex] = useState(0);
+  const [currentFileName, setCurrentFileName] = useState('');
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+  const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
+  const isMountedRef = useRef(true);
+  const currentFilesRef = useRef(currentFiles);
+
+  // Keep currentFilesRef in sync with prop to avoid stale closure
+  useEffect(() => {
+    currentFilesRef.current = currentFiles;
+  }, [currentFiles]);
+
+  // Notify parent when upload status changes
+  useEffect(() => {
+    onUploadStatusChange?.(isUploadingFile);
+  }, [isUploadingFile, onUploadStatusChange]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+      // Clear any pending timeout
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+    };
+  }, []);
+
+  // Helper to set error with auto-dismiss, managing timeout properly
+  const setErrorWithAutoDismiss = (errorMessage: string) => {
+    // Clear any pending timeout from previous error
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+    }
+    setFileError(errorMessage);
+    // Set new timeout for auto-dismiss
+    timeoutIdRef.current = setTimeout(() => {
+      if (!isMountedRef.current) {
+        return;
+      }
+      setFileError('');
+      timeoutIdRef.current = null;
+    }, 3000);
+  };
+
+  const validateAndUploadFile = async (file: File, currentFilesList: FileData[]) => {
+    if (!file || !currentCase || !user || !user.uid) return { success: false, files: currentFilesList };
+
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      if (isMountedRef.current) {
+        setErrorWithAutoDismiss(`${file.name}: Only PNG, GIF, JPEG, WEBP, or SVG files are allowed`);
+      }
+      return { success: false, files: currentFilesList };
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      if (isMountedRef.current) {
+        setErrorWithAutoDismiss(`${file.name}: File size must be less than 10 MB`);
+      }
+      return { success: false, files: currentFilesList };
+    }
+
+    try {
+      if (isMountedRef.current) {
+        setCurrentFileName(file.name);
+      }
+      const uploadedFile = await uploadFile(user, currentCase, file, (progress) => {
+        if (isMountedRef.current) {
+          setUploadProgress(progress);
+        }
+      });
+      const updatedFiles = [...currentFilesList, uploadedFile];
+      
+      if (isMountedRef.current) {
+        onFilesChanged(updatedFiles);
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      }
+
+      // Refresh file upload permissions after successful upload
+      if (onUploadPermissionCheck && isMountedRef.current) {
+        try {
+          await onUploadPermissionCheck(updatedFiles.length);
+        } catch (permissionErr) {
+          console.error('Failed to refresh upload permissions:', permissionErr);
+          // Note: Files have already been successfully uploaded.
+          // This error is non-critical but should be tracked in monitoring.
+          // In production, consider showing a non-blocking warning notification.
+        }
+      }
+      return { success: true, files: updatedFiles };
+    } catch (err) {
+      if (isMountedRef.current) {
+        setErrorWithAutoDismiss(`${file.name}: ${err instanceof Error ? err.message : 'Upload failed'}`);
+      }
+      return { success: false, files: currentFilesList };
+    }
+  };
+
+  // Process files sequentially
+  const processFileQueue = async (filesToProcess: File[]) => {
+    // Clear any pending timeout from previous errors
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = null;
+    }
+
+    if (!isMountedRef.current) return;
+    
+    setUploadQueue(filesToProcess);
+    setCurrentFileIndex(0);
+    setIsUploadingFile(true);
+    setFileError('');
+    setUploadProgress(0);
+
+    // Use ref to get current files, avoiding stale closure issues
+    let accumulatedFiles = currentFilesRef.current;
+    const successfulUploads: string[] = [];
+    const failedUploads: string[] = [];
+
+    for (let i = 0; i < filesToProcess.length; i++) {
+      if (!isMountedRef.current) break;
+      
+      setCurrentFileIndex(i);
+      setUploadProgress(0);
+      const file = filesToProcess[i];
+      const result = await validateAndUploadFile(file, accumulatedFiles);
+      
+      if (result.success) {
+        accumulatedFiles = result.files;
+        successfulUploads.push(file.name);
+      } else {
+        failedUploads.push(file.name);
+      }
+    }
+
+    if (isMountedRef.current) {
+      setIsUploadingFile(false);
+      setUploadProgress(0);
+      setCurrentFileName('');
+      setUploadQueue([]);
+      setCurrentFileIndex(0);
+      
+      // Call completion callback with results
+      if (onUploadComplete && (successfulUploads.length > 0 || failedUploads.length > 0)) {
+        onUploadComplete({
+          successCount: successfulUploads.length,
+          failedFiles: failedUploads
+        });
+      }
+    }
+  };
+
+  const handleFileInputChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (isReadOnly) {
+      return;
+    }
+
+    const files = event.target.files;
+    if (!files || files.length === 0 || !currentCase) return;
+
+    // Convert FileList to Array
+    const filesToUpload = Array.from(files);
+    await processFileQueue(filesToUpload);
+  }, [isReadOnly, currentCase]);
+
+  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDraggingFiles(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Only disable drag mode if leaving the entire drop zone
+    // Check if relatedTarget (element being entered) is outside the drop zone
+    const relatedTarget = e.relatedTarget as HTMLElement | null;
+    if (!relatedTarget || !dropZoneRef.current?.contains(relatedTarget)) {
+      setIsDraggingFiles(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDraggingFiles(false);
+
+    if (isReadOnly) {
+      return;
+    }
+
+    const files = e.dataTransfer.files;
+    if (files.length === 0 || !currentCase) return;
+
+    // Convert FileList to Array and process all files
+    const filesToUpload = Array.from(files);
+    await processFileQueue(filesToUpload);
+  }, [isReadOnly, currentCase]);
+
+  // If read-only or uploads restricted, show only error message
+  if (isReadOnly || !canUploadNewFile) {
+    return (
+      <div className={styles.imageUploadZone}>
+        {(isReadOnly || uploadFileError) && (
+          <p className={styles.error}>
+            {isReadOnly 
+              ? 'This case is read-only. You cannot upload files.' 
+              : uploadFileError}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={dropZoneRef}
+      className={`${styles.imageUploadZone} ${isDraggingFiles ? styles.dragActive : ''}`}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <label htmlFor="file-upload">Upload Images:</label>
+      <div className={styles.dragDropHint}>
+        <p className={styles.dragDropText}>
+          Drag & drop image files here or click below to select
+        </p>
+      </div>
+      <input
+        id="file-upload"
+        ref={fileInputRef}
+        type="file"
+        accept="image/png, image/gif, image/jpeg, image/webp, image/svg+xml"
+        multiple
+        onChange={handleFileInputChange}
+        disabled={isUploadingFile || !canUploadNewFile || isReadOnly}
+        className={styles.fileInput}
+        aria-label="Upload image files"
+        title={!canUploadNewFile ? uploadFileError : undefined}
+      />
+      {isUploadingFile && (
+        <>
+          <div
+            className={styles.progressBar}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={uploadProgress}
+            aria-valuetext={uploadProgress === 100 ? 'Processing...' : undefined}
+            aria-label="Image upload progress"
+          >
+            <div
+              className={styles.progressFill}
+              style={{ width: `${uploadProgress}%` }}
+            />
+          </div>
+          <div className={styles.uploadStatusContainer}>
+            <span className={styles.uploadingText}>
+              {uploadProgress === 100 ? 'Processing...' : `${uploadProgress}%`}
+            </span>
+            {uploadQueue.length > 1 && (
+              <span className={styles.fileCountText}>
+                {currentFileIndex + 1} of {uploadQueue.length}
+              </span>
+            )}
+          </div>
+          {currentFileName && (
+            <p className={styles.currentFileName}>{currentFileName}</p>
+          )}
+        </>
+      )}
+      {fileError && <p className={styles.error}>{fileError}</p>}
+    </div>
+  );
+};

package/app/components/theme-provider/theme-provider.tsx

@@ -0,0 +1,131 @@
+import { JSX, createContext, useContext } from 'react';
+import { classes, media } from '~/utils/style';
+import { themes, tokens } from './theme';
+
+interface ThemeContextType {
+  theme: 'dark' | 'light';
+}
+
+export const ThemeContext = createContext<ThemeContextType>({ theme: 'dark' });
+
+interface ThemeProviderProps {
+  theme?: 'dark' | 'light';
+  children: React.ReactNode;
+  className?: string;
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
+  [key: string]: unknown;
+}
+
+export const ThemeProvider = ({
+  theme = 'dark',
+  children,
+  className,
+  as: Component = 'div',
+  ...rest
+}: ThemeProviderProps) => {
+  const parentTheme = useTheme();
+  const isRootProvider = !parentTheme.theme;
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,        
+      }}
+    >
+      {isRootProvider && children}      
+      {!isRootProvider && (
+       <Component className={classes(className)} data-theme={theme} {...rest}>
+          {children}
+        </Component>
+      )}
+    </ThemeContext.Provider>
+  );
+};
+
+export function useTheme() {
+  const currentTheme = useContext(ThemeContext);
+  return currentTheme;
+}
+
+export function squish(styles: string) {
+  return styles.replace(/\s\s+/g, ' ');
+}
+
+export function createThemeProperties(theme: { [x: string]: unknown; black?: string; white?: string; bezierFastoutSlowin?: string; durationXS?: string; durationS?: string; durationM?: string; durationL?: string; durationXL?: string; systemFontStack?: string; fontStack?: string; monoFontStack?: string; fontWeightThin?: number; fontWeightLight?: number; fontWeightRegular?: number; fontWeightMedium?: number; fontWeightBold?: number; fontWeightBlack?: number; fontSizeH0?: string; fontSizeH1?: string; fontSizeH2?: string; fontSizeH3?: string; fontSizeH4?: string; fontSizeH5?: string; fontSizeBodyXL?: string; fontSizeBodyL?: string; fontSizeBodyM?: string; fontSizeBodyS?: string; fontSizeBodyXS?: string; lineHeightTitle?: string; lineHeightBody?: string; maxWidthS?: string; maxWidthM?: string; maxWidthL?: string; maxWidthXL?: string; spaceOuter?: string; spaceXS?: string; spaceS?: string; spaceM?: string; spaceL?: string; spaceXL?: string; space2XL?: string; space3XL?: string; space4XL?: string; space5XL?: string; zIndex0?: number; zIndex1?: number; zIndex2?: number; zIndex3?: number; zIndex4?: number; zIndex5?: number; background?: string; backgroundLight?: string; primary?: string; accent?: string; error?: string; text?: string; textTitle?: string; linkColor?: string; textBody?: string; textLight?: string; }) {
+  return squish(
+    Object.keys(theme)
+      .map(key => `--${key}: ${theme[key]};`)
+      .join('\n\n')
+  );
+}
+
+export function createThemeStyleObject(theme: { [x: string]: unknown; }) {
+  const style: Record<string, unknown> = {};
+
+  for (const key of Object.keys(theme)) {
+    style[`--${key}`] = theme[key];
+  }
+
+  return style;
+}
+
+export function createMediaTokenProperties() {
+  return squish(
+    Object.keys(media)
+      .map(key => {
+        return `
+        @media (max-width: ${media[key]}px) {
+          :root {
+            ${createThemeProperties(tokens[key as keyof typeof tokens])}
+          }
+        }
+      `;
+      })
+      .join('\n')
+  );
+}
+
+const layerStyles = squish(`
+  @layer theme, base, components, layout;
+`);
+
+const tokenStyles = squish(`
+  :root {
+    ${createThemeProperties(tokens.base)}
+  }
+
+  ${createMediaTokenProperties()}
+
+  [data-theme='dark'] {
+    ${createThemeProperties(themes.dark)}
+  }
+
+  [data-theme='light'] {
+    ${createThemeProperties(themes.light)}
+  }
+`);
+
+const fontStyles = squish(`
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+  }
+
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+`);
+
+export const themeStyles = squish(`
+  ${layerStyles}
+
+  @layer theme {
+    ${tokenStyles}
+    ${fontStyles}
+  }
+`);

package/app/components/theme-provider/theme.ts

@@ -0,0 +1,155 @@
+import { pxToRem } from '~/utils/style';
+
+// Full list of tokens
+const baseTokens = {
+  black: 'oklch(0% 0 0)',
+  white: 'oklch(100% 0 0)',
+  bezierFastoutSlowin: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+  durationXS: '200ms',
+  durationS: '300ms',
+  durationM: '400ms',
+  durationL: '600ms',
+  durationXL: '800ms',
+  systemFontStack:
+    'system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Ubuntu, Helvetica Neue, sans-serif',
+  fontStack: `var(--systemFontStack)`,
+  monoFontStack:
+    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+  fontWeightThin: 100,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700,
+  fontWeightBlack: 900,
+  fontSizeH0: pxToRem(140),
+  fontSizeH1: pxToRem(100),
+  fontSizeH2: pxToRem(58),
+  fontSizeH3: pxToRem(38),
+  fontSizeH4: pxToRem(28),
+  fontSizeH5: pxToRem(24),
+  fontSizeBodyXL: pxToRem(22),
+  fontSizeBodyL: pxToRem(20),
+  fontSizeBodyM: pxToRem(18),
+  fontSizeBodyS: pxToRem(16),
+  fontSizeBodyXS: pxToRem(14),
+  lineHeightTitle: '1.1',
+  lineHeightBody: '1.6',
+  maxWidthS: '540px',
+  maxWidthM: '720px',
+  maxWidthL: '1096px',
+  maxWidthXL: '1680px',
+  spaceOuter: '64px',
+  spaceXS: '4px',
+  spaceS: '8px',
+  spaceM: '16px',
+  spaceL: '24px',
+  spaceXL: '32px',
+  space2XL: '48px',
+  space3XL: '64px',
+  space4XL: '96px',
+  space5XL: '128px',
+  radiusS: '4px',
+  radiusM: '8px',
+  radiusL: '12px',
+  zIndex0: 0,
+  zIndex1: 4,
+  zIndex2: 8,
+  zIndex3: 16,
+  zIndex4: 32,
+  zIndex5: 64,
+};
+
+// Tokens that change based on viewport size
+const tokensDesktop = {
+  fontSizeH0: pxToRem(120),
+  fontSizeH1: pxToRem(80),
+};
+
+const tokensLaptop = {
+  maxWidthS: '480px',
+  maxWidthM: '640px',
+  maxWidthL: '1000px',
+  maxWidthXL: '1100px',
+  spaceOuter: '48px',
+  fontSizeH0: pxToRem(100),
+  fontSizeH1: pxToRem(70),
+  fontSizeH2: pxToRem(50),
+  fontSizeH3: pxToRem(36),
+  fontSizeH4: pxToRem(26),
+  fontSizeH5: pxToRem(22),
+};
+
+const tokensTablet = {
+  fontSizeH0: pxToRem(80),
+  fontSizeH1: pxToRem(60),
+  fontSizeH2: pxToRem(48),
+  fontSizeH3: pxToRem(32),
+  fontSizeH4: pxToRem(24),
+  fontSizeH5: pxToRem(20),
+};
+
+const tokensMobile = {
+  spaceOuter: '24px',
+  fontSizeH0: pxToRem(56),
+  fontSizeH1: pxToRem(40),
+  fontSizeH2: pxToRem(34),
+  fontSizeH3: pxToRem(28),
+  fontSizeH4: pxToRem(22),
+  fontSizeH5: pxToRem(18),
+  fontSizeBodyL: pxToRem(17),
+  fontSizeBodyM: pxToRem(16),
+  fontSizeBodyS: pxToRem(14),
+};
+
+const tokensMobileSmall = {
+  spaceOuter: '16px',
+  fontSizeH0: pxToRem(42),
+  fontSizeH1: pxToRem(38),
+  fontSizeH2: pxToRem(28),
+  fontSizeH3: pxToRem(24),
+  fontSizeH4: pxToRem(20),
+};
+
+// Tokens that change based on theme
+const dark = {
+  background: 'oklch(96.12% 0 0)',
+  backgroundLight: 'var(--white)',
+  primary: 'oklch(57.06% 0.162 252.34)',
+  accent: 'oklch(48.88% 0.131 146.01)',
+  success: 'oklch(70% 0.131 146.01)',
+  error: 'oklch(63.17% 0.259 25.41)',
+  errorLight: 'oklch(90% 0.259 25.41)',
+  warning: 'oklch(55% 0.15 55)',
+  text: 'var(--black)',  
+  textTitle: 'rgba(0, 0, 0, 0.9)', // Fallback for Firefox
+  linkColor: 'var(--accent)',
+  textBody: 'rgba(0, 0, 0, 0.75)', // Fallback for Firefox
+  textLight: 'rgba(0, 0, 0, 0.55)', // Fallback for Firefox
+};
+
+const light = {
+  background: 'oklch(96.12% 0 0)',
+  backgroundLight: 'var(--white)',
+  primary: 'oklch(57.06% 0.162 252.34)',
+  accent: 'oklch(48.88% 0.131 146.01)',
+  success: 'oklch(70% 0.131 146.01)',
+  error: 'oklch(63.17% 0.259 25.41)',
+  errorLight: 'oklch(90% 0.259 25.41)',
+  warning: 'oklch(55% 0.15 55)',
+  text: 'var(--black)',  
+  textTitle: 'rgba(0, 0, 0, 0.9)', // Fallback for Firefox
+  linkColor: 'var(--accent)',
+  textBody: 'rgba(0, 0, 0, 0.75)', // Fallback for Firefox
+  textLight: 'rgba(0, 0, 0, 0.55)', // Fallback for Firefox
+};
+
+export const tokens = {
+  base: baseTokens,
+  desktop: tokensDesktop,
+  laptop: tokensLaptop,
+  tablet: tokensTablet,
+  mobile: tokensMobile,
+  mobileS: tokensMobileSmall,
+};
+
+export const themes = { dark, light };