mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website cleanup

Browse Source
This commit is contained in:
Marc Mintel
2025-12-24 21:44:58 +01:00
parent 9b683a59d3
commit d78854a4c6
277 changed files with 6141 additions and 2693 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/website/components/notifications/ModalNotification.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import type { Notification, NotificationAction } from '@core/notifications/application';
import type { Notification, NotificationAction } from './notificationTypes';
import {
Bell,
AlertTriangle,
@@ -107,7 +107,7 @@ export default function ModalNotification({
}, [notification, onDismiss]);
const handleAction = (action: NotificationAction) => {
onAction(notification, action.actionId);
onAction(notification, action.id);
if (action.href) {
router.push(action.href);
}
@@ -128,15 +128,45 @@ export default function ModalNotification({
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
};
const data: Record<string, unknown> = notification.data ?? {};
const getNumber = (value: unknown): number | null => {
if (typeof value === 'number' && Number.isFinite(value)) return value;
if (typeof value === 'string') {
const parsed = Number(value);
if (Number.isFinite(parsed)) return parsed;
}
return null;
};
const getString = (value: unknown): string | null => {
if (typeof value === 'string') return value;
if (typeof value === 'number' && Number.isFinite(value)) return String(value);
return null;
};
const isValidDate = (value: unknown): value is Date => value instanceof Date && !Number.isNaN(value.getTime());
// Check if there's a deadline
const deadline = notification.data?.deadline;
const hasDeadline = deadline instanceof Date;
const deadlineValue = data.deadline;
const deadline: Date | null =
isValidDate(deadlineValue)
? deadlineValue
: typeof deadlineValue === 'string' || typeof deadlineValue === 'number'
? new Date(deadlineValue)
: null;
const hasDeadline = !!deadline && !Number.isNaN(deadline.getTime());
// Special celebratory styling for race notifications
const isRaceNotification = notification.type.startsWith('race_');
const isPerformanceSummary = notification.type === 'race_performance_summary';
const isFinalResults = notification.type === 'race_final_results';
const provisionalRatingChange = getNumber(data.provisionalRatingChange) ?? 0;
const finalRatingChange = getNumber(data.finalRatingChange) ?? 0;
const ratingChange = provisionalRatingChange || finalRatingChange;
const protestId = getString(data.protestId);
return (
<div
className={`
@@ -199,7 +229,7 @@ export default function ModalNotification({
{/* Body */}
<div className={`px-6 py-5 ${isRaceNotification ? 'bg-gradient-to-b from-transparent to-yellow-500/5' : ''}`}>
<p className={`leading-relaxed ${isRaceNotification ? 'text-white text-lg font-medium' : 'text-gray-300'}`}>
{notification.body}
{notification.message}
</p>
{/* Race performance stats */}
@@ -213,9 +243,9 @@ export default function ModalNotification({
</div>
<div className="bg-black/20 rounded-lg p-3 border border-yellow-400/20">
<div className="text-xs text-yellow-300 font-medium mb-1">RATING CHANGE</div>
<div className={`text-2xl font-bold ${(notification.data?.provisionalRatingChange || notification.data?.finalRatingChange || 0) >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{(notification.data?.provisionalRatingChange || notification.data?.finalRatingChange || 0) >= 0 ? '+' : ''}
{notification.data?.provisionalRatingChange || notification.data?.finalRatingChange || 0}
<div className={`text-2xl font-bold ${ratingChange >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{ratingChange >= 0 ? '+' : ''}
{ratingChange}
</div>
</div>
</div>
@@ -228,18 +258,18 @@ export default function ModalNotification({
<div>
<p className="text-sm font-medium text-warning-amber">Response Required</p>
<p className="text-xs text-gray-400">
Please respond by {deadline.toLocaleDateString()} at {deadline.toLocaleTimeString()}
Please respond by {deadline ? deadline.toLocaleDateString() : ''} at {deadline ? deadline.toLocaleTimeString() : ''}
</p>
</div>
</div>
)}
{/* Additional context from data */}
{notification.data?.protestId && (
{protestId && (
<div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
<p className="text-xs text-gray-500 mb-1">Related Protest</p>
<p className="text-sm text-gray-300 font-mono">
{notification.data.protestId}
{protestId}
</p>
</div>
)}
@@ -267,14 +297,14 @@ export default function ModalNotification({
<>
<Button
variant="secondary"
onClick={() => onDismiss ? onDismiss(notification) : handleAction(notification, 'dismiss')}
onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
className="shadow-lg hover:shadow-yellow-400/30"
>
Dismiss
</Button>
<Button
variant="secondary"
onClick={() => handleAction({ label: 'Share Achievement', type: 'secondary', actionId: 'share' })}
onClick={() => handleAction({ id: 'share', label: 'Share Achievement', type: 'secondary' })}
className="shadow-lg hover:shadow-yellow-400/30"
>
🎉 Share
@@ -307,4 +337,4 @@ export default function ModalNotification({
</div>
</div>
);
}
}