Security dialog disaster recovery

src/components/collaboration/__tests__/CollaborativeEditor.test.tsx

@@ -7,28 +7,58 @@ vi.mock('yjs', () => {
   class YText {
     content = '';
     observers = new Set<() => void>();
-    toString() { return this.content; }
-    observe(cb: () => void) { this.observers.add(cb); }
-    insert(pos: number, text: string) { this.content = this.content.slice(0, pos) + text + this.content.slice(pos); this.observers.forEach((cb) => cb()); }
-    delete(pos: number, len: number) { this.content = this.content.slice(0, pos) + this.content.slice(pos + len); this.observers.forEach((cb) => cb()); }
+    toString() {
+      return this.content;
+    }
+    observe(cb: () => void) {
+      this.observers.add(cb);
+    }
+    insert(pos: number, text: string) {
+      this.content = this.content.slice(0, pos) + text + this.content.slice(pos);
+      this.observers.forEach((cb) => cb());
+    }
+    delete(pos: number, len: number) {
+      this.content = this.content.slice(0, pos) + this.content.slice(pos + len);
+      this.observers.forEach((cb) => cb());
+    }
   }
 
   class YArray<T = any> {
     items: T[] = [];
     observers = new Set<() => void>();
-    toArray() { return this.items.slice(); }
-    observe(cb: () => void) { this.observers.add(cb); }
-    push(arr: T[]) { this.items.push(...arr); this.observers.forEach((cb) => cb()); }
-    delete(start: number, len: number) { this.items.splice(start, len); this.observers.forEach((cb) => cb()); }
-    get length() { return this.items.length; }
+    toArray() {
+      return this.items.slice();
+    }
+    observe(cb: () => void) {
+      this.observers.add(cb);
+    }
+    push(arr: T[]) {
+      this.items.push(...arr);
+      this.observers.forEach((cb) => cb());
+    }
+    delete(start: number, len: number) {
+      this.items.splice(start, len);
+      this.observers.forEach((cb) => cb());
+    }
+    get length() {
+      return this.items.length;
+    }
   }
 
   class Doc {
     _text?: YText;
     _arrays: Record<string, any> = {};
-    getText(_name: string) { if (!this._text) this._text = new YText(); return this._text; }
-    getArray(name: string) { if (!this._arrays[name]) this._arrays[name] = new YArray(); return this._arrays[name]; }
-    destroy() { /* noop */ }
+    getText(_name: string) {
+      if (!this._text) this._text = new YText();
+      return this._text;
+    }
+    getArray(name: string) {
+      if (!this._arrays[name]) this._arrays[name] = new YArray();
+      return this._arrays[name];
+    }
+    destroy() {
+      /* noop */
+    }
   }
 
   return { Doc, Text: YText, Array: YArray };
@@ -47,9 +77,13 @@ vi.mock('y-websocket', () => ({
         off: () => {},
       };
     }
-    on() { /* noop */ }
-    disconnect() { /* noop */ }
-  }
+    on() {
+      /* noop */
+    }
+    disconnect() {
+      /* noop */
+    }
+  },
 }));
 
 import { CollaborativeEditor } from '../CollaborativeEditor';

src/components/leaderboard/LeaderboardConference.tsx

@@ -91,7 +91,9 @@ export function LeaderboardConference({
               className="flex items-center gap-3 rounded-2xl px-4 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800"
             >
               <span className="w-6 flex justify-center" aria-label={`Rank ${entry.rank}`}>
-                {entry.rank <= 3 ? RANK_ICONS[entry.rank - 1] : (
+                {entry.rank <= 3 ? (
+                  RANK_ICONS[entry.rank - 1]
+                ) : (
                   <span className="text-sm font-semibold text-slate-500">{entry.rank}</span>
                 )}
               </span>
@@ -104,7 +106,10 @@ export function LeaderboardConference({
                 {entry.name}
               </span>
 
-              <span className="text-sm font-semibold text-blue-600 dark:text-blue-400" aria-label={`${entry.score} points`}>
+              <span
+                className="text-sm font-semibold text-blue-600 dark:text-blue-400"
+                aria-label={`${entry.score} points`}
+              >
                 {entry.score.toLocaleString()} pts
               </span>
             </li>
@@ -120,7 +125,9 @@ export function LeaderboardConference({
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Users size={20} className="text-blue-500" aria-hidden="true" />
-            <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">Conferences</h2>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
+              Conferences
+            </h2>
           </div>
           <button
             type="button"
@@ -172,7 +179,9 @@ export function LeaderboardConference({
                 </span>
                 <button
                   type="button"
-                  onClick={() => setActiveConference(activeConference?.id === conf.id ? null : conf)}
+                  onClick={() =>
+                    setActiveConference(activeConference?.id === conf.id ? null : conf)
+                  }
                   className={`rounded-2xl px-3 py-1.5 text-xs font-semibold transition ${
                     activeConference?.id === conf.id
                       ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/40 dark:text-red-400'

src/components/leaderboard/__tests__/LeaderboardConference.test.tsx

@@ -164,7 +164,10 @@ describe('LeaderboardConference', () => {
       expect(joinBtn).toHaveAttribute('aria-pressed', 'false');
 
       await userEvent.click(joinBtn);
-      expect(screen.getByRole('button', { name: /^leave$/i })).toHaveAttribute('aria-pressed', 'true');
+      expect(screen.getByRole('button', { name: /^leave$/i })).toHaveAttribute(
+        'aria-pressed',
+        'true',
+      );
     });
   });
 

src/components/search/IntelligentAutoComplete.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Search, X, Clock, ChevronRight, Sparkles, User, Tag, Type } from 'lucide-react';
 import { getSearchSuggestions, highlightMatch } from '../../utils/searchUtils';
 
@@ -17,7 +17,7 @@ export const IntelligentAutoComplete = React.memo<IntelligentAutoCompleteProps>(
     const [activeIndex, setActiveIndex] = useState(-1);
     const dropdownRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const suggestions = getSearchSuggestions(value);
+    const suggestions = useMemo(() => getSearchSuggestions(value), [value]);
 
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {

src/components/shared/ImageUploader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, ChangeEvent } from 'react';
+import { useState, useRef, ChangeEvent, useEffect } from 'react';
 import Image from 'next/image';
 
 interface ImageUploaderProps {
@@ -17,19 +17,68 @@ export default function ImageUploader({
   const [previewUrl, setPreviewUrl] = useState<string | null>(initialImageUrl || null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+  useEffect(() => {
+    return () => {
+      if (previewUrl && previewUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file) {
-      // Create local preview
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreviewUrl(reader.result as string);
-      };
-      reader.readAsDataURL(file);
+    if (!file) return;
+
+    if (file.type.startsWith('video/')) {
+      try {
+        const video = document.createElement('video');
+        video.src = URL.createObjectURL(file);
+        video.crossOrigin = 'anonymous';
+        video.muted = true;
+
+        await new Promise<void>((resolve, reject) => {
+          video.onloadeddata = () => {
+            // Seek to 1s or midway if shorter
+            video.currentTime = Math.min(1, video.duration / 2);
+          };
+          video.onseeked = () => resolve();
+          video.onerror = () => reject(new Error('Failed to load video'));
+        });
 
-      // Pass file to parent
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                const objectUrl = URL.createObjectURL(blob);
+                setPreviewUrl(objectUrl);
+                const optimizedFile = new File([blob], file.name.replace(/\.[^/.]+$/, '.jpg'), {
+                  type: 'image/jpeg',
+                });
+                onImageSelect(optimizedFile);
+              }
+            },
+            'image/jpeg',
+            0.85,
+          );
+        }
+        URL.revokeObjectURL(video.src);
+      } catch (error) {
+        console.error('Video optimization failed:', error);
+      }
+    } else if (file.type.startsWith('image/')) {
+      const objectUrl = URL.createObjectURL(file);
+      setPreviewUrl(objectUrl);
       onImageSelect(file);
     }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
   };
 
   const handleClick = () => {
@@ -48,7 +97,7 @@ export default function ImageUploader({
             alt="Profile Preview"
             fill
             sizes="(max-width: 768px) 100vw, 33vw"
-            unoptimized={previewUrl.startsWith('data:')}
+            unoptimized={previewUrl.startsWith('data:') || previewUrl.startsWith('blob:')}
             className="object-cover"
           />
         ) : (
@@ -80,7 +129,7 @@ export default function ImageUploader({
       <input
         ref={fileInputRef}
         type="file"
-        accept="image/*"
+        accept="image/*,video/*"
         onChange={handleFileChange}
         className="hidden"
       />

src/components/shared/__tests__/ImageUploader.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach, beforeAll, afterAll } from 'vitest';
+import ImageUploader from '../ImageUploader';
+
+describe('ImageUploader', () => {
+  let originalCreateElement: typeof document.createElement;
+
+  beforeAll(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url');
+    global.URL.revokeObjectURL = vi.fn();
+
+    originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName: string, options?: ElementCreationOptions) => {
+        if (tagName === 'video') {
+          const video = originalCreateElement('video');
+          Object.defineProperty(video, 'duration', { value: 10 });
+          Object.defineProperty(video, 'videoWidth', { value: 640 });
+          Object.defineProperty(video, 'videoHeight', { value: 480 });
+
+          // Simulate video load and seek events automatically
+          setTimeout(() => {
+            if (video.onloadeddata) (video.onloadeddata as Function)();
+            setTimeout(() => {
+              if (video.onseeked) (video.onseeked as Function)();
+            }, 0);
+          }, 0);
+          return video;
+        }
+
+        if (tagName === 'canvas') {
+          const canvas = originalCreateElement('canvas');
+          canvas.getContext = vi.fn(
+            () =>
+              ({
+                drawImage: vi.fn(),
+              } as any),
+          );
+          canvas.toBlob = vi.fn((callback) => {
+            callback(new Blob(['mock-image-data'], { type: 'image/jpeg' }));
+          });
+          return canvas;
+        }
+        return originalCreateElement(tagName, options);
+      },
+    );
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders correctly with default state', () => {
+    render(<ImageUploader onImageSelect={vi.fn()} />);
+    expect(screen.getByText('Upload New Picture')).toBeInTheDocument();
+  });
+
+  it('handles image upload correctly without video extraction', async () => {
+    const onImageSelect = vi.fn();
+    const user = userEvent.setup();
+    render(<ImageUploader onImageSelect={onImageSelect} />);
+
+    const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await user.upload(input, file);
+
+    expect(global.URL.createObjectURL).toHaveBeenCalledWith(file);
+    expect(onImageSelect).toHaveBeenCalledWith(file);
+  });
+
+  it('extracts frame when video is uploaded', async () => {
+    const onImageSelect = vi.fn();
+    const user = userEvent.setup();
+    render(<ImageUploader onImageSelect={onImageSelect} />);
+
+    const file = new File(['video-data'], 'video.mp4', { type: 'video/mp4' });
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await user.upload(input, file);
+
+    await waitFor(() => {
+      expect(onImageSelect).toHaveBeenCalled();
+    });
+
+    const selectedFile = onImageSelect.mock.calls[0][0];
+    expect(selectedFile.name).toBe('video.jpg');
+    expect(selectedFile.type).toBe('image/jpeg');
+  });
+});