Driven by Performance
@@ -97,7 +105,7 @@ export const AboutModal = ({ onClose }) => {
return (
-
+
@@ -118,7 +126,7 @@ export const AboutModal = ({ onClose }) => {
-
+
Gamification & Fun
@@ -127,7 +135,7 @@ export const AboutModal = ({ onClose }) => {
-
+
Diversity & Representation
@@ -136,7 +144,7 @@ export const AboutModal = ({ onClose }) => {
-
+
Data-Driven Growth
@@ -173,4 +181,4 @@ export const AboutModal = ({ onClose }) => {
);
};
-export default AboutModal;
+export default AboutModal;
\ No newline at end of file
diff --git a/src/components/ui/ErrorBoundary.jsx b/src/components/ui/ErrorBoundary.jsx
index e286456..0f9a2f9 100644
--- a/src/components/ui/ErrorBoundary.jsx
+++ b/src/components/ui/ErrorBoundary.jsx
@@ -1,9 +1,10 @@
import React, { Component } from "react";
+import { motion } from "framer-motion";
export class ErrorBoundary extends Component {
constructor(props) {
super(props);
- this.state = { hasError: false, error: null };
+ this.state = { hasError: false, error: null, errorInfo: null };
}
static getDerivedStateFromError(error) {
@@ -12,13 +13,30 @@ export class ErrorBoundary extends Component {
componentDidCatch(error, errorInfo) {
console.error("ErrorBoundary caught an error:", error, errorInfo);
+ this.setState({ errorInfo });
}
+ // ADDED: Graceful recovery method (No full page reload)
+ handleRetry = () => {
+ this.setState({ hasError: false, error: null, errorInfo: null });
+ };
+
render() {
if (this.state.hasError) {
+ // ADDED: Dynamic context-specific message
+ const customMessage = this.props.fallbackMessage || "The application encountered an unexpected error. Don't worry, your data is safe.";
+
return (
-
-
+ // Changed min-h-screen to min-h-[60vh] so it fits perfectly inside dashboard layouts too
+
+
+ {/* ADDED: Framer motion wrapper for entry animation */}
+
{/* Premium CSS-Animated SVG warning graphic */}
{/* Glowing backdrop rings */}
@@ -33,19 +51,31 @@ export class ErrorBoundary extends Component {
+
Something went wrong.
+
- The application encountered an unexpected error. Don't worry, your data is safe.
+ {customMessage}
+
+ {/* ADDED: Hidden technical details for developers (only shows in localhost/dev mode) */}
+ {process.env.NODE_ENV === 'development' && this.state.error && (
+
+
+ {this.state.error.toString()}
+
+
+ )}
+
-
+
);
}
@@ -54,4 +84,4 @@ export class ErrorBoundary extends Component {
}
}
-export default ErrorBoundary;
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/components/ui/HowItWorksModal.jsx b/src/components/ui/HowItWorksModal.jsx
index 0130947..04cdeb0 100644
--- a/src/components/ui/HowItWorksModal.jsx
+++ b/src/components/ui/HowItWorksModal.jsx
@@ -2,8 +2,11 @@ import React from "react";
import { motion } from "framer-motion";
import { Link2, GitPullRequest, Terminal, Flame, Trophy, X, CheckCircle2 } from "lucide-react";
import Card from "./Card";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
export const HowItWorksModal = ({ onClose }) => {
+ const modalRef = useFocusTrap(true);
+
const steps = [
{
num: "01",
@@ -84,19 +87,24 @@ export const HowItWorksModal = ({ onClose }) => {
className="absolute inset-0 bg-slate-900/40 dark:bg-slate-950/70 backdrop-blur-md"
/>
- {/* Modal Box */}
+ {/* Modal Box - ADDED ARIA */}
- {/* Close Button */}
+ {/* Close Button - ADDED aria-label */}
{/* Header */}
@@ -104,7 +112,7 @@ export const HowItWorksModal = ({ onClose }) => {
Platform Lifecycle
-
+
How RankerHub Works
@@ -118,9 +126,8 @@ export const HowItWorksModal = ({ onClose }) => {
const Icon = step.icon;
return (
- {/* Timeline Node (Icon Wrapper) */}
-
+
@@ -133,12 +140,10 @@ export const HowItWorksModal = ({ onClose }) => {
- {/* Detailed Description */}
{step.desc}
- {/* Point mapping details */}
{step.details && (
{step.details.map((detail, dIdx) => (
@@ -158,7 +163,7 @@ export const HowItWorksModal = ({ onClose }) => {
{/* Footer info banner */}
-
+
Ready to climb? Link your profile, start coding, and watch your developer standings rise!
@@ -167,4 +172,4 @@ export const HowItWorksModal = ({ onClose }) => {
);
};
-export default HowItWorksModal;
+export default HowItWorksModal;
\ No newline at end of file
diff --git a/src/components/ui/LogoutConfirmModal.jsx b/src/components/ui/LogoutConfirmModal.jsx
index 0d8b629..045f82b 100644
--- a/src/components/ui/LogoutConfirmModal.jsx
+++ b/src/components/ui/LogoutConfirmModal.jsx
@@ -2,8 +2,11 @@ import React from "react";
import { motion } from "framer-motion";
import { LogOut, AlertTriangle } from "lucide-react";
import GradientButton from "./GradientButton";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
export const LogoutConfirmModal = ({ onClose, onConfirm }) => {
+ const modalRef = useFocusTrap(true);
+
return (
{/* Backdrop */}
@@ -15,8 +18,13 @@ export const LogoutConfirmModal = ({ onClose, onConfirm }) => {
className="absolute inset-0 bg-slate-950/60 backdrop-blur-md"
/>
- {/* Modal Box */}
+ {/* Modal Box - ADDED: ARIA Dialog Roles & Ref */}
{
>
{/* Warning Icon Banner */}
{/* Header */}
-
Confirm Logout
-
+
Confirm Logout
+
Are you sure you want to log out of RankerHub? You will need to sign in again to access your developer overview stats.
{/* Mascot bubble */}
- {/* Mascot representation */}
{activeMascotInfo.icon}
@@ -236,7 +291,13 @@ export const CodingOwl = () => {
{/* Timer visualization */}
-
+
{formatTime(timeLeft)}
@@ -391,9 +452,9 @@ export const CodingOwl = () => {
{mascotsData.map((mascot) => {
- const isOwned = inventory.includes(mascot.id);
- const isEquipped = activeMascotId === mascot.id;
- const canAfford = hubCoins >= mascot.price;
+ const isOwned = optimisticInventory.includes(mascot.id);
+ const isEquipped = optimisticEquipped === mascot.id;
+ const canAfford = optimisticCoins >= mascot.price;
return (
@@ -423,7 +484,6 @@ export const CodingOwl = () => {
) : isOwned ? (