fix: Comprehensive codebase improvements

Security fixes:
- Add function name sanitization in test-runner.ts to prevent injection
- Add comment injection protection in test-runner.ts
- Add try-catch around localStorage operations in ThemeProvider
- Add data validation for progress data in ProgressProvider
- Use DOMPurify sanitization for HTML content in components

Performance fixes:
- Fix N+1 category filtering with single-pass computation in home page
- Add useCallback to filter handlers in problems page
- Add memoized context value in ProgressProvider
- Add setTimeout cleanup for memory leak prevention in CodeEditor

Accessibility fixes:
- Add aria-hidden="true" to decorative SVGs across all pages
- Add aria-expanded/aria-controls to FilterSidebar collapsible sections
- Add role="dialog", aria-modal to Navbar reset confirmation modal
- Add aria-live="polite" to TestResults for screen reader announcements
- Add type="button" to all button elements

New Next.js files:
- Add app/error.tsx root error boundary
- Add app/not-found.tsx global 404 page
- Add app/loading.tsx root loading skeleton
- Add app/problems/loading.tsx problems list skeleton
- Add app/problems/error.tsx problems error boundary
- Add app/problems/[id]/loading.tsx problem detail skeleton
- Add app/problems/[id]/error.tsx problem detail error boundary
- Add app/problems/[id]/not-found.tsx problem not found page

Problem file fixes:
- Replace placeholder tests with actual functional tests in all problem files
- Fix test structure and add proper test cases

Test coverage:
- Add comprehensive test files for components
- Fix test-runner Promise pattern and async handling

Dependencies:
- Remove unused vitest and @vitest/* packages from package.json

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: davidagustin

__tests__/app/problems/[id]/page.test.tsx

@@ -55,7 +55,7 @@ const mockProblem = {
   ],
 };
 
-const mockProblems = [
+const _mockProblems = [
   {
     id: 'prev-problem',
     title: 'Previous Problem',
@@ -199,7 +199,7 @@ jest.mock('@/lib/test-runner', () => ({
 }));
 
 // Track editor instances
-const editorInstanceCount = 0;
+const _editorInstanceCount = 0;
 
 // Mock CodeEditor component
 jest.mock('@/components/CodeEditor', () => {
@@ -279,7 +279,7 @@ jest.mock('@/components/TestResults', () => {
         <div data-testid="results-count">{results.length}</div>
         {error && <div data-testid="error-message">{error}</div>}
         {results.map((r, i) => (
-          <div key={i} data-testid={`result-${i}`}>
+          <div key={`test-result-${i}-${r.passed ? 'pass' : 'fail'}`} data-testid={`result-${i}`}>
             {r.passed ? 'passed' : 'failed'}
           </div>
         ))}
@@ -613,7 +613,7 @@ describe('Problem Detail Page', () => {
       expect(screen.getByRole('button', { name: /Running.../i })).toBeDisabled();
 
       await act(async () => {
-        resolveTests!({ allPassed: false, results: [] });
+        resolveTests?.({ allPassed: false, results: [] });
       });
     });
 
@@ -917,7 +917,7 @@ describe('Problem Detail Page', () => {
       expect(screen.getByTestId('is-running')).toHaveTextContent('true');
 
       await act(async () => {
-        resolveTests!({ allPassed: false, results: [] });
+        resolveTests?.({ allPassed: false, results: [] });
       });
 
       expect(screen.getByTestId('is-running')).toHaveTextContent('false');
@@ -1002,7 +1002,7 @@ describe('Problem Page Edge Cases', () => {
     // Click the solution button multiple times to exercise both branches of handleToggleSolution
     // First click - shows solution (else branch)
     await act(async () => {
-      fireEvent.click(solutionButton!);
+      if (solutionButton) fireEvent.click(solutionButton);
     });
 
     // Wait a tick for React to process
@@ -1012,15 +1012,161 @@ describe('Problem Page Edge Cases', () => {
 
     // Second click - should attempt to hide solution (if branch - line 122)
     await act(async () => {
-      fireEvent.click(solutionButton!);
+      if (solutionButton) fireEvent.click(solutionButton);
     });
 
     // Third click - just to make sure component is stable
     await act(async () => {
-      fireEvent.click(solutionButton!);
+      if (solutionButton) fireEvent.click(solutionButton);
     });
 
     // Verify the component is still functional
     expect(screen.getByTestId('code-editor')).toBeInTheDocument();
   });
+
+  it('should handle non-Error error types in catch block (string rejection)', async () => {
+    const user = userEvent.setup();
+    // Simulate a promise rejection with a string (non-Error type)
+    // This tests the .catch() handler's handling of err?.toString()
+    mockRunTests.mockRejectedValue('String error message');
+
+    renderWithProgress(<ProblemPage />);
+
+    const runButton = screen.getByRole('button', { name: /Run Tests/i });
+    await user.click(runButton);
+
+    await waitFor(() => {
+      // The inner .catch() handler formats this as "Error running tests: ..."
+      expect(screen.getByTestId('error-message')).toHaveTextContent(
+        'Error running tests: String error message'
+      );
+    });
+  });
+
+  it('should handle unknown error types in catch block (null rejection)', async () => {
+    const user = userEvent.setup();
+    // Simulate a promise rejection with null (no message or toString)
+    mockRunTests.mockRejectedValue(null);
+
+    renderWithProgress(<ProblemPage />);
+
+    const runButton = screen.getByRole('button', { name: /Run Tests/i });
+    await user.click(runButton);
+
+    await waitFor(() => {
+      // The inner .catch() handler falls back to 'Unknown error'
+      expect(screen.getByTestId('error-message')).toHaveTextContent(
+        'Error running tests: Unknown error'
+      );
+    });
+  });
+
+  it('should validate and reject whitespace-only code in handleRunTests', async () => {
+    const user = userEvent.setup();
+    // Test with test-problem but simulate whitespace-only code being submitted
+    // by verifying the validation error is shown when runTests returns the error
+    mockParams.id = 'test-problem';
+    mockRunTests.mockClear();
+
+    // Mock returns validation error (simulating what happens with whitespace code)
+    mockRunTests.mockResolvedValue({
+      allPassed: false,
+      results: [],
+      error: 'No code to test. Please write your solution first.',
+    });
+
+    renderWithProgress(<ProblemPage />);
+
+    const runButton = screen.getByRole('button', { name: /Run Tests/i });
+    await user.click(runButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-message')).toHaveTextContent(
+        'No code to test. Please write your solution first.'
+      );
+    });
+  });
+
+  it('should use codeRef to prevent stale closure when toggling solution', async () => {
+    mockParams.id = 'test-problem';
+    mockRunTests.mockClear();
+
+    renderWithProgress(<ProblemPage />);
+
+    // Type some code in the editor
+    const editor = screen.getByTestId('user-editor') as HTMLTextAreaElement;
+    await act(async () => {
+      fireEvent.change(editor, { target: { value: 'const myNewCode = 42;' } });
+    });
+
+    // Find the solution button and click to show solution
+    const buttons = screen.getAllByRole('button');
+    const solutionButton = buttons.find((btn) => btn.textContent?.includes('Solution'));
+    expect(solutionButton).toBeDefined();
+
+    // Click to show solution - this should save the current code via codeRef
+    await act(async () => {
+      if (solutionButton) fireEvent.click(solutionButton);
+    });
+
+    // Now set up the mock to return success when we run tests
+    mockRunTests.mockResolvedValue({
+      allPassed: true,
+      results: [{ passed: true }],
+    });
+
+    // Run tests - this should use the saved userCode (from codeRef), not the solution
+    const runButton = screen.getByRole('button', { name: /Run Tests/i });
+    await act(async () => {
+      fireEvent.click(runButton);
+    });
+
+    await waitFor(() => {
+      expect(mockRunTests).toHaveBeenCalled();
+    });
+
+    // Verify the test was run with user code, not empty or solution code
+    // The mock was called, meaning validation passed (code was not empty)
+    expect(mockRunTests).toHaveBeenCalledTimes(1);
+  });
+
+  it('should preserve user code via codeRef when rapidly changing code and toggling solution', async () => {
+    mockParams.id = 'test-problem';
+    mockRunTests.mockClear();
+
+    renderWithProgress(<ProblemPage />);
+
+    // Simulate rapid code changes
+    const editor = screen.getByTestId('user-editor') as HTMLTextAreaElement;
+    await act(async () => {
+      fireEvent.change(editor, { target: { value: 'step1' } });
+      fireEvent.change(editor, { target: { value: 'step2' } });
+      fireEvent.change(editor, { target: { value: 'const finalCode = "preserved";' } });
+    });
+
+    // Find and click solution button
+    const buttons = screen.getAllByRole('button');
+    const solutionButton = buttons.find((btn) => btn.textContent?.includes('Solution'));
+
+    await act(async () => {
+      if (solutionButton) fireEvent.click(solutionButton);
+    });
+
+    // The userCode should have been saved with the latest value from codeRef
+    // Verify by running tests (which uses userCode when solution is shown)
+    mockRunTests.mockResolvedValue({
+      allPassed: true,
+      results: [{ passed: true }],
+    });
+
+    const runButton = screen.getByRole('button', { name: /Run Tests/i });
+    await act(async () => {
+      fireEvent.click(runButton);
+    });
+
+    await waitFor(() => {
+      // Tests should run successfully with the preserved user code
+      expect(mockRunTests).toHaveBeenCalled();
+    });
+  });
 });