{Array.from({ length: 81 }).map((_, i) => {
const v = SUDOKU_GIVEN[i];
const r = Math.floor(i / 9), c = i % 9;
From 9fc792f543e82fee8b39123fba616a4a1fe3ae9c Mon Sep 17 00:00:00 2001
From: Mohannad Ehab <157999295+MohanEhab@users.noreply.github.com>
Date: Fri, 29 May 2026 10:00:19 +0300
Subject: [PATCH 3/8] Add mobile responsive regression tests
---
src/__tests__/mobileResponsive.test.ts | 35 ++++++++++++++++++++++++++
1 file changed, 35 insertions(+)
create mode 100644 src/__tests__/mobileResponsive.test.ts
diff --git a/src/__tests__/mobileResponsive.test.ts b/src/__tests__/mobileResponsive.test.ts
new file mode 100644
index 0000000..5f95bdf
--- /dev/null
+++ b/src/__tests__/mobileResponsive.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const css = readFileSync(join(process.cwd(), 'src/styles/globals.css'), 'utf8');
+
+describe('mobile responsive safety rules', () => {
+ it('keeps app shell and page containers constrained on small screens', () => {
+ expect(css).toContain('max-width: 100vw');
+ expect(css).toContain('.app__main');
+ expect(css).toContain('min-width: 0');
+ expect(css).toContain('@media (max-width: 720px)');
+ expect(css).toContain('.app__sidebar { display: none; }');
+ expect(css).toContain('.bottomnav { display: flex; }');
+ });
+
+ it('stacks major desktop grids and converts wide rows for mobile', () => {
+ expect(css).toContain('.responsive-split');
+ expect(css).toContain('.responsive-sidebar');
+ expect(css).toContain('.responsive-room');
+ expect(css).toContain('grid-template-columns: minmax(0, 1fr) !important');
+ expect(css).toContain('.leaderboard-row');
+ expect(css).toContain('.match-history-row');
+ expect(css).toContain('.friends-row');
+ });
+
+ it('keeps dropdowns, modals, tabs, and toasts inside the viewport', () => {
+ expect(css).toContain('.dropdown-panel');
+ expect(css).toContain('max-width: calc(100vw - 24px)');
+ expect(css).toContain('.modal, .modal-lg');
+ expect(css).toContain('.tabs');
+ expect(css).toContain('overflow-x: auto');
+ expect(css).toContain('.toast-stack');
+ });
+});
From 7a4d9834dd2642f5b27be65b5438bc478033108b Mon Sep 17 00:00:00 2001
From: Mohannad Ehab <157999295+MohanEhab@users.noreply.github.com>
Date: Fri, 29 May 2026 12:06:48 +0300
Subject: [PATCH 4/8] Restore theme mode and clean UI text encoding
---
src/__tests__/GoogleOAuthButton.test.tsx | 8 +-
src/__tests__/ResetPasswordPage.test.tsx | 6 +-
src/__tests__/VerifyEmailConfirmPage.test.tsx | 6 +-
src/__tests__/profileApi.test.ts | 2 +-
src/app/layout.tsx | 2 +
src/components/layout/ThemeHydrator.tsx | 29 +++++++
src/features/lobby/LobbyPage.tsx | 22 +++---
src/features/profile/ProfilePage.tsx | 18 ++---
src/features/settings/SettingsPage.tsx | 56 +++++++++----
src/lib/mock-api.ts | 18 ++---
src/styles/globals.css | 78 ++++++++++++-------
11 files changed, 164 insertions(+), 81 deletions(-)
create mode 100644 src/components/layout/ThemeHydrator.tsx
diff --git a/src/__tests__/GoogleOAuthButton.test.tsx b/src/__tests__/GoogleOAuthButton.test.tsx
index 4606ce5..5e84a46 100644
--- a/src/__tests__/GoogleOAuthButton.test.tsx
+++ b/src/__tests__/GoogleOAuthButton.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
const MockApiError = vi.hoisted(() =>
class extends Error {
@@ -24,11 +24,11 @@ vi.mock('@/lib/api-client', () => ({
ApiError: MockApiError,
}));
-// ── Import after mocks ────────────────────────────────────────────────────────
+// -- Import after mocks --------------------------------------------------------
import { GoogleOAuthButton } from '@/features/auth/GoogleOAuthButton';
-// ── Google GIS mock helpers ───────────────────────────────────────────────────
+// -- Google GIS mock helpers ---------------------------------------------------
function setupGoogleMock() {
const mockPrompt = vi.fn();
@@ -56,7 +56,7 @@ afterEach(() => {
clearGoogleMock();
});
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
describe('GoogleOAuthButton', () => {
it('renders the Google sign-in button', () => {
diff --git a/src/__tests__/ResetPasswordPage.test.tsx b/src/__tests__/ResetPasswordPage.test.tsx
index 67528b8..93a2ce3 100644
--- a/src/__tests__/ResetPasswordPage.test.tsx
+++ b/src/__tests__/ResetPasswordPage.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import { ResetPasswordPage } from '@/features/auth/ResetPasswordPage';
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
const MockApiError = vi.hoisted(() =>
class extends Error {
@@ -36,7 +36,7 @@ vi.mock('@/lib/routes', () => ({
ROUTES: { login: '/login', dashboard: '/dashboard' },
}));
-// ── Helpers ───────────────────────────────────────────────────────────────────
+// -- Helpers -------------------------------------------------------------------
function renderPage(token = 'valid-token') {
return render(
);
@@ -47,7 +47,7 @@ beforeEach(() => {
mockResetPassword.mockResolvedValue(undefined);
});
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
describe('ResetPasswordPage', () => {
it('renders the form with disabled submit when token is missing', () => {
diff --git a/src/__tests__/VerifyEmailConfirmPage.test.tsx b/src/__tests__/VerifyEmailConfirmPage.test.tsx
index fe87de7..f2c8a2a 100644
--- a/src/__tests__/VerifyEmailConfirmPage.test.tsx
+++ b/src/__tests__/VerifyEmailConfirmPage.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
const MockApiError = vi.hoisted(() =>
class extends Error {
@@ -35,7 +35,7 @@ vi.mock('@/lib/routes', () => ({
ROUTES: { dashboard: '/dashboard', login: '/login', verifyEmail: '/verify-email' },
}));
-// ── Import after mocks ────────────────────────────────────────────────────────
+// -- Import after mocks --------------------------------------------------------
import { VerifyEmailConfirmPage } from '@/features/auth/VerifyEmailConfirmPage';
@@ -48,7 +48,7 @@ afterEach(() => {
vi.useRealTimers();
});
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
describe('VerifyEmailConfirmPage', () => {
it('shows verifying spinner immediately', () => {
diff --git a/src/__tests__/profileApi.test.ts b/src/__tests__/profileApi.test.ts
index 9302665..a76888b 100644
--- a/src/__tests__/profileApi.test.ts
+++ b/src/__tests__/profileApi.test.ts
@@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
-// ── profileApi unit tests ─────────────────────────────────────────────────────
+// -- profileApi unit tests -----------------------------------------------------
// Tests use fetch mocking to verify the API client builds correct requests.
const mockFetch = vi.fn();
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 735a713..b6baa0b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import Script from 'next/script';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import { ToastProvider } from '@/components/ui/Toast';
+import { ThemeHydrator } from '@/components/layout/ThemeHydrator';
import { AuthProvider } from '@/features/auth/AuthProvider';
const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] });
@@ -23,6 +24,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
src="https://accounts.google.com/gsi/client"
strategy="lazyOnload"
/>
+
{children}
diff --git a/src/components/layout/ThemeHydrator.tsx b/src/components/layout/ThemeHydrator.tsx
new file mode 100644
index 0000000..9573d54
--- /dev/null
+++ b/src/components/layout/ThemeHydrator.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+
+export function ThemeHydrator() {
+ React.useEffect(() => {
+ const media = window.matchMedia('(prefers-color-scheme: light)');
+
+ const applyStoredMode = () => {
+ const stored = window.localStorage.getItem('simple-color-mode');
+ const mode = stored === 'Light' || stored === 'System' ? stored : 'Dark';
+ const resolved = mode === 'System' && media.matches ? 'light' : mode.toLowerCase();
+ document.documentElement.dataset.colorMode = resolved;
+ };
+
+ applyStoredMode();
+ media.addEventListener('change', applyStoredMode);
+ window.addEventListener('storage', applyStoredMode);
+ window.addEventListener('simple-theme-change', applyStoredMode);
+
+ return () => {
+ media.removeEventListener('change', applyStoredMode);
+ window.removeEventListener('storage', applyStoredMode);
+ window.removeEventListener('simple-theme-change', applyStoredMode);
+ };
+ }, []);
+
+ return null;
+}
diff --git a/src/features/lobby/LobbyPage.tsx b/src/features/lobby/LobbyPage.tsx
index 4d72030..a8961e5 100644
--- a/src/features/lobby/LobbyPage.tsx
+++ b/src/features/lobby/LobbyPage.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/Button';
@@ -28,12 +28,12 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
]);
const [aiFill, setAiFill] = useState(false);
const [privacy, setPrivacy] = useState('private');
- const [timeMode, setTimeMode] = useState('Blitz · 3+2');
+ const [timeMode, setTimeMode] = useState('Blitz - 3+2');
const [chat, setChat] = useState
(DEFAULT_LOBBY_CHAT);
const slotsWithAi = slots.map(s =>
s.kind === 'empty' && aiFill
- ? { kind: 'ai' as const, user: { initials: 'AI', color: '#A78BFA', display: `AI · ${game.aiLevels[1]}` }, ready: true }
+ ? { kind: 'ai' as const, user: { initials: 'AI', color: '#A78BFA', display: `AI - ${game.aiLevels[1]}` }, ready: true }
: s
);
const allReady = slotsWithAi.every(s => s.kind === 'empty' || s.ready);
@@ -56,8 +56,8 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
{privacy === 'private' ? 'Private' : 'Public'}
{timeMode}
Hosted by you · region Auto · est. start in 30s
Hosted by you - region Auto - est. start in 30s