feat(client): add Games button, BrainBreaker links; update navbar/header and client packages

Author: vidun-upek

crackcode/client/package-lock.json

@@ -7,29 +7,42 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/vite": "^4.1.18",
     "axios": "^1.13.2",
     "framer-motion": "^12.34.3",
     "lucide-react": "^0.562.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-router-dom": "^7.11.0",
     "react-toastify": "^11.0.5",
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vitest": "^1.0.0",
+    "@testing-library/react": "^14.3.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/user-event": "^14.5.0",
+    "jsdom": "^22.0.0"
+  },
+  "vitest": {
+    "testTimeout": 5000,
+    "environment": "jsdom",
+    "setupFiles": ["src/setupTests.js"]
   }
 }

crackcode/client/package.json

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 import { useTheme } from "../../context/theme/ThemeContext";
-import { Settings, Bell, Search } from "lucide-react";
+import { Settings, Bell, Gamepad2 } from "lucide-react";
 import CrackcodeLogo from "../../assets/logo/crackcode_logo.svg";
 
 const NAV_TABS = [
@@ -77,23 +77,19 @@ export default function AppNavbar() {
           ))}
         </nav>
 
-        {/* Right side: search + bell + settings */}
+        {/* Right side: games button + bell + settings */}
         <div className="flex items-center gap-2 shrink-0">
 
-          {/* Search input */}
-          <div className="relative hidden sm:block">
-            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" style={{ color: "var(--muted)" }} />
-            <input
-              placeholder="Search Cases..."
-              className="w-48 pl-8 pr-3 py-2 rounded-xl text-sm border transition-shadow duration-200 focus:outline-none focus:ring-2"
-              style={{
-                background: "var(--surface2)",
-                border:     "1.5px solid var(--border)",
-                color:      "var(--text)",
-                "--tw-ring-color": "rgba(255,150,68,0.3)",
-              }}
-            />
-          </div>
+          {/* Games button */}
+          <NavLink
+            to="/home"
+            className="flex items-center gap-2 px-4 py-2 rounded-xl font-semibold text-sm transition-opacity hover:opacity-70"
+            style={{ color: "var(--text)" }}
+            title="Brain Breaker Games"
+          >
+            <Gamepad2 size={16} />
+            Games
+          </NavLink>
 
           {/* Bell */}
           <button

crackcode/client/src/components/common/AppNavbar.jsx

@@ -6,7 +6,7 @@ import logo_dark from  "../../assets/logo/logo_dark.png";
 import { useTheme } from '../../context/theme/ThemeContext'
 import logo from "../../assets/logo/crackcode_logo.svg"
 import Navbar from './Navbar'
-import { Bell } from 'lucide-react';
+import { Bell, Gamepad2 } from 'lucide-react';
 import Avatar from './Avatar';
 import HQBtn from './HQBtn';
 import BackBtn from './BackBtn';
@@ -115,28 +115,23 @@ const Header = ({ variant = "default", showBackBtn = true, showHQ = true }) => {
                 {showHeaderActions && (
                     <div className='flex items-center gap-4'>
 
-                        {/* Search Bar */}
-                        <input 
-                            name='search-bar'
-                            type="text" 
-                            placeholder='Search Cases...' 
-                            className='w-24 sm:w-32 text-xs sm:text-sm rounded-md px-2 py-1 
-                            focus:outline-none focus:ring-1 focus:w-32 sm:focus:w-40 
-                            transition-all duration-300 ease-in-out'
-                            style={{
-                                background: 'rgba(255, 165, 0, 0.1)',
-                                color: 'var(--text)',
-                                border: '1px solid var(--border)'
-                            }}
-                            onFocus={(e) => {
-                                e.target.style.boxShadow = '0 0 0 1px var(--brand)';
-                                e.target.style.background = 'rgba(255, 165, 0, 0.15)';
-                            }}
-                            onBlur={(e) => {
-                                e.target.style.boxShadow = 'none';
-                                e.target.style.background = 'rgba(255, 165, 0, 0.1)';
+                        {/* Games Button */}
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                                navigate('/home#brain-breaker');
+                                setTimeout(() => {
+                                    const element = document.getElementById('brain-breaker');
+                                    element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                                }, 100);
                             }}
-                        />
+                            className='flex items-center gap-2 text-xs sm:text-sm font-semibold hover:bg-opacity-80'
+                            title="Brain Breaker Games"
+                        >
+                            <Gamepad2 className='w-4 h-4 sm:w-5 sm:h-5' />
+                            Games
+                        </Button>
 
                             {/* Settings Dropdown */}
                             <SettingsDropdown />