website refactor
This commit is contained in:
@@ -1,7 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { IconButton } from '@/ui/IconButton';
|
||||
import type { Notification, NotificationAction } from './notificationTypes';
|
||||
import {
|
||||
Bell,
|
||||
@@ -13,20 +17,17 @@ import {
|
||||
Flag,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Star,
|
||||
Medal,
|
||||
Target,
|
||||
Zap,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import Button from '@/ui/Button';
|
||||
import { Button } from '@/ui/Button';
|
||||
|
||||
interface ModalNotificationProps {
|
||||
notification: Notification;
|
||||
onAction: (notification: Notification, actionId?: string) => void;
|
||||
onDismiss?: (notification: Notification) => void;
|
||||
onNavigate?: (href: string) => void;
|
||||
}
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
@@ -80,13 +81,13 @@ const notificationColors: Record<string, { bg: string; border: string; text: str
|
||||
},
|
||||
};
|
||||
|
||||
export default function ModalNotification({
|
||||
export function ModalNotification({
|
||||
notification,
|
||||
onAction,
|
||||
onDismiss,
|
||||
onNavigate,
|
||||
}: ModalNotificationProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Animate in
|
||||
@@ -108,19 +109,19 @@ export default function ModalNotification({
|
||||
|
||||
const handleAction = (action: NotificationAction) => {
|
||||
onAction(notification, action.id);
|
||||
if (action.href) {
|
||||
router.push(action.href);
|
||||
if (action.href && onNavigate) {
|
||||
onNavigate(action.href);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrimaryAction = () => {
|
||||
onAction(notification, 'primary');
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
if (notification.actionUrl && onNavigate) {
|
||||
onNavigate(notification.actionUrl);
|
||||
}
|
||||
};
|
||||
|
||||
const Icon = notificationIcons[notification.type] || AlertCircle;
|
||||
const NotificationIcon = notificationIcons[notification.type] || AlertCircle;
|
||||
const colors = notificationColors[notification.type] || {
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/50',
|
||||
@@ -160,7 +161,6 @@ export default function ModalNotification({
|
||||
// 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;
|
||||
@@ -168,144 +168,192 @@ export default function ModalNotification({
|
||||
const protestId = getString(data.protestId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
fixed inset-0 z-[100] flex items-center justify-center p-4
|
||||
transition-all duration-300
|
||||
${isVisible ? 'bg-black/70 backdrop-blur-sm' : 'bg-transparent'}
|
||||
${isRaceNotification ? 'bg-gradient-to-br from-black/80 via-indigo-900/10 to-black/80' : ''}
|
||||
`}
|
||||
<Box
|
||||
position="fixed"
|
||||
inset="0"
|
||||
zIndex={100}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
p={4}
|
||||
transition
|
||||
bg={isVisible ? 'bg-black/70' : 'bg-transparent'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={isVisible ? 'backdrop-blur-sm' : ''}
|
||||
hoverBg={isRaceNotification ? 'bg-gradient-to-br from-black/80 via-indigo-900/10 to-black/80' : undefined}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
w-full max-w-lg transform transition-all duration-300
|
||||
${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
|
||||
${isRaceNotification ? '' : ''}
|
||||
`}
|
||||
<Box
|
||||
w="full"
|
||||
maxWidth="lg"
|
||||
transform
|
||||
transition
|
||||
opacity={isVisible ? 1 : 0}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={isVisible ? 'scale-100' : 'scale-95'}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
rounded-2xl border-2 ${colors.border} ${colors.bg}
|
||||
backdrop-blur-md ${colors.glow}
|
||||
overflow-hidden
|
||||
${isRaceNotification ? 'relative' : ''}
|
||||
`}
|
||||
<Box
|
||||
rounded="2xl"
|
||||
border
|
||||
borderWidth="2px"
|
||||
borderColor={colors.border}
|
||||
bg={colors.bg}
|
||||
shadow={colors.glow}
|
||||
overflow="hidden"
|
||||
position={isRaceNotification ? 'relative' : undefined}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="backdrop-blur-md"
|
||||
>
|
||||
{/* Header with pulse animation */}
|
||||
<div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border} ${isRaceNotification ? 'bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent' : ''}`}>
|
||||
{/* Subtle pulse ring */}
|
||||
<div className="absolute top-4 left-6 w-12 h-12">
|
||||
<div className={`absolute inset-0 rounded-full ${colors.bg} opacity-10`} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border} ${isRaceNotification ? 'shadow-lg' : ''}`}>
|
||||
<Icon className={`w-6 h-6 ${colors.text}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-xs font-semibold uppercase tracking-wide ${isRaceNotification ? 'text-yellow-400' : 'text-gray-400'}`}>
|
||||
<Box
|
||||
px={6}
|
||||
py={4}
|
||||
bg={colors.bg}
|
||||
borderBottom
|
||||
borderColor={colors.border}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={isRaceNotification ? 'bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent' : ''}
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box
|
||||
p={3}
|
||||
rounded="xl"
|
||||
bg={colors.bg}
|
||||
border
|
||||
borderColor={colors.border}
|
||||
shadow={isRaceNotification ? 'lg' : undefined}
|
||||
>
|
||||
<Icon icon={NotificationIcon} size={6} color={colors.text} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text
|
||||
size="xs"
|
||||
weight="semibold"
|
||||
transform="uppercase"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="tracking-wide"
|
||||
color={isRaceNotification ? 'text-yellow-400' : 'text-gray-400'}
|
||||
>
|
||||
{isRaceNotification ? (isPerformanceSummary ? '🏁 Race Complete!' : '🏆 Championship Update') : 'Action Required'}
|
||||
</p>
|
||||
<h2 className={`text-xl font-bold ${isRaceNotification ? 'text-white' : 'text-white'}`}>
|
||||
</Text>
|
||||
<Heading level={2} fontSize="xl" weight="bold" color="text-white">
|
||||
{notification.title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</Heading>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* X button for dismissible notifications */}
|
||||
{onDismiss && !notification.requiresResponse && (
|
||||
<button
|
||||
<IconButton
|
||||
icon={X}
|
||||
onClick={() => onDismiss(notification)}
|
||||
className="p-2 rounded-full hover:bg-white/10 transition-colors"
|
||||
aria-label="Dismiss notification"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-400 hover:text-white" />
|
||||
</button>
|
||||
variant="ghost"
|
||||
size="md"
|
||||
color="text-gray-400"
|
||||
title="Dismiss notification"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 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'}`}>
|
||||
<Box
|
||||
px={6}
|
||||
py={5}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={isRaceNotification ? 'bg-gradient-to-b from-transparent to-yellow-500/5' : ''}
|
||||
>
|
||||
<Text
|
||||
leading="relaxed"
|
||||
size={isRaceNotification ? 'lg' : 'base'}
|
||||
weight={isRaceNotification ? 'medium' : 'normal'}
|
||||
color={isRaceNotification ? 'text-white' : 'text-gray-300'}
|
||||
block
|
||||
>
|
||||
{notification.message}
|
||||
</p>
|
||||
</Text>
|
||||
|
||||
{/* Race performance stats */}
|
||||
{isRaceNotification && (
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<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">POSITION</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<Box display="grid" gridCols={2} gap={3} mt={4}>
|
||||
<Box bg="bg-black/20" rounded="lg" p={3} border borderColor="border-yellow-400/20">
|
||||
<Text size="xs" color="text-yellow-300" weight="medium" block mb={1}>POSITION</Text>
|
||||
<Text size="2xl" weight="bold" color="text-white" block>
|
||||
{notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
|
||||
</div>
|
||||
</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 ${ratingChange >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box bg="bg-black/20" rounded="lg" p={3} border borderColor="border-yellow-400/20">
|
||||
<Text size="xs" color="text-yellow-300" weight="medium" block mb={1}>RATING CHANGE</Text>
|
||||
<Text size="2xl" weight="bold" color={ratingChange >= 0 ? 'text-green-400' : 'text-red-400'} block>
|
||||
{ratingChange >= 0 ? '+' : ''}
|
||||
{ratingChange}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Deadline warning */}
|
||||
{hasDeadline && !isRaceNotification && (
|
||||
<div className="mt-4 flex items-center gap-2 px-4 py-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<Clock className="w-5 h-5 text-warning-amber" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-warning-amber">Response Required</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
<Box mt={4} display="flex" alignItems="center" gap={2} px={4} py={3} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30">
|
||||
<Icon icon={Clock} size={5} color="text-warning-amber" />
|
||||
<Box>
|
||||
<Text size="sm" weight="medium" color="text-warning-amber" block>Response Required</Text>
|
||||
<Text size="xs" color="text-gray-400" block>
|
||||
Please respond by {deadline ? deadline.toLocaleDateString() : ''} at {deadline ? deadline.toLocaleTimeString() : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Additional context from data */}
|
||||
{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">
|
||||
<Box mt={4} p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
|
||||
<Text size="xs" color="text-gray-500" block mb={1}>Related Protest</Text>
|
||||
<Text size="sm" color="text-gray-300" font="mono" block>
|
||||
{protestId}
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Actions */}
|
||||
<div className={`px-6 py-4 border-t ${isRaceNotification ? (isPerformanceSummary ? 'border-yellow-400/60 bg-gradient-to-r from-yellow-500/10 to-orange-500/10' : 'border-purple-400/60 bg-gradient-to-r from-purple-500/10 to-pink-500/10') : 'border-charcoal-outline bg-iron-gray/30'}`}>
|
||||
{notification.actions && notification.actions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-3 justify-end">
|
||||
{notification.actions.map((action, index) => (
|
||||
<Box
|
||||
px={6}
|
||||
py={4}
|
||||
borderTop
|
||||
borderColor={isRaceNotification ? (isPerformanceSummary ? 'border-yellow-400/60' : 'border-purple-400/60') : 'border-charcoal-outline'}
|
||||
bg={isRaceNotification ? undefined : 'bg-iron-gray/30'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={isRaceNotification ? (isPerformanceSummary ? 'bg-gradient-to-r from-yellow-500/10 to-orange-500/10' : 'bg-gradient-to-r from-purple-500/10 to-pink-500/10') : ''}
|
||||
>
|
||||
<Box display="flex" flexWrap="wrap" gap={3} justifyContent="end">
|
||||
{notification.actions && notification.actions.length > 0 ? (
|
||||
notification.actions.map((action, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={action.type === 'primary' ? 'primary' : 'secondary'}
|
||||
onClick={() => handleAction(action)}
|
||||
className={`${action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''} ${isRaceNotification ? 'shadow-lg hover:shadow-yellow-400/30' : ''}`}
|
||||
bg={action.type === 'danger' ? 'bg-red-500' : undefined}
|
||||
color={action.type === 'danger' ? 'text-white' : undefined}
|
||||
shadow={isRaceNotification ? 'lg' : undefined}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-3 justify-end">
|
||||
{isRaceNotification ? (
|
||||
))
|
||||
) : (
|
||||
isRaceNotification ? (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
|
||||
className="shadow-lg hover:shadow-yellow-400/30"
|
||||
shadow="lg"
|
||||
>
|
||||
Dismiss
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleAction({ id: 'share', label: 'Share Achievement', type: 'secondary' })}
|
||||
className="shadow-lg hover:shadow-yellow-400/30"
|
||||
shadow="lg"
|
||||
>
|
||||
🎉 Share
|
||||
</Button>
|
||||
@@ -320,21 +368,21 @@ export default function ModalNotification({
|
||||
<Button variant="primary" onClick={handlePrimaryAction}>
|
||||
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Cannot dismiss warning */}
|
||||
{notification.requiresResponse && !isRaceNotification && (
|
||||
<div className="px-6 py-2 bg-red-500/10 border-t border-red-500/20">
|
||||
<p className="text-xs text-red-400 text-center">
|
||||
<Box px={6} py={2} bg="bg-red-500/10" borderTop borderColor="border-red-500/20">
|
||||
<Text size="xs" color="text-red-400" textAlign="center" block>
|
||||
⚠️ This notification requires your action and cannot be dismissed
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,8 +11,11 @@ import {
|
||||
Users,
|
||||
Vote
|
||||
} from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
protest_filed: AlertTriangle,
|
||||
@@ -37,10 +40,13 @@ const notificationColors: Record<string, string> = {
|
||||
import { useNotifications } from './NotificationProvider';
|
||||
import type { Notification } from './notificationTypes';
|
||||
|
||||
export default function NotificationCenter() {
|
||||
interface NotificationCenterProps {
|
||||
onNavigate?: (href: string) => void;
|
||||
}
|
||||
|
||||
export function NotificationCenter({ onNavigate }: NotificationCenterProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
|
||||
|
||||
// Close panel when clicking outside
|
||||
@@ -63,8 +69,8 @@ export default function NotificationCenter() {
|
||||
const handleNotificationClick = (notification: Notification) => {
|
||||
markAsRead(notification.id);
|
||||
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
if (notification.actionUrl && onNavigate) {
|
||||
onNavigate(notification.actionUrl);
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
@@ -86,126 +92,183 @@ export default function NotificationCenter() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={panelRef}>
|
||||
<Box position="relative" ref={panelRef}>
|
||||
{/* Bell button */}
|
||||
<button
|
||||
<Box
|
||||
as="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`
|
||||
relative p-2 rounded-lg transition-colors
|
||||
${isOpen
|
||||
? 'bg-primary-blue/10 text-primary-blue'
|
||||
: 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
|
||||
}
|
||||
`}
|
||||
p={2}
|
||||
rounded="lg"
|
||||
transition
|
||||
bg={isOpen ? 'bg-primary-blue/10' : undefined}
|
||||
color={isOpen ? 'text-primary-blue' : 'text-gray-400'}
|
||||
hoverBg={!isOpen ? 'bg-iron-gray/50' : undefined}
|
||||
hoverTextColor={!isOpen ? 'text-white' : undefined}
|
||||
position="relative"
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
<Icon icon={Bell} size={5} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-red-500 text-white rounded-full">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="-0.5"
|
||||
right="-0.5"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
minWidth="18px"
|
||||
height="18px"
|
||||
px={1}
|
||||
bg="bg-red-500"
|
||||
color="text-white"
|
||||
rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px', fontWeight: 'bold' }}
|
||||
>
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
</button>
|
||||
</Box>
|
||||
|
||||
{/* Notification panel */}
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-96 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden z-50">
|
||||
<Box
|
||||
position="absolute"
|
||||
right="0"
|
||||
top="full"
|
||||
mt={2}
|
||||
w="96"
|
||||
bg="bg-deep-graphite"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="xl"
|
||||
shadow="2xl"
|
||||
overflow="hidden"
|
||||
zIndex={50}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="w-4 h-4 text-primary-blue" />
|
||||
<span className="font-semibold text-white">Notifications</span>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" px={4} py={3} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Icon icon={Bell} size={4} color="text-primary-blue" />
|
||||
<Text weight="semibold" color="text-white">Notifications</Text>
|
||||
{unreadCount > 0 && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
<Box px={2} py={0.5} bg="bg-red-500/20" rounded="full">
|
||||
<Text size="xs" weight="medium" color="text-red-400">
|
||||
{unreadCount} new
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
<Box
|
||||
as="button"
|
||||
onClick={markAllAsRead}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
cursor="pointer"
|
||||
transition
|
||||
hoverTextColor="text-white"
|
||||
>
|
||||
<CheckCheck className="w-3.5 h-3.5" />
|
||||
Mark all read
|
||||
</button>
|
||||
<Icon icon={CheckCheck} size={3.5} color="text-gray-400" />
|
||||
<Text size="xs" color="text-gray-400">Mark all read</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Notifications list */}
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
<Box maxHeight="400px" overflow="auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 rounded-full bg-iron-gray/50 flex items-center justify-center">
|
||||
<Bell className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">No notifications yet</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
You'll be notified about protests, races, and more
|
||||
</p>
|
||||
</div>
|
||||
<Box py={12} textAlign="center">
|
||||
<Box w="12" h="12" mx="auto" mb={3} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
|
||||
<Icon icon={Bell} size={6} color="text-gray-500" />
|
||||
</Box>
|
||||
<Text size="sm" color="text-gray-400" block>No notifications yet</Text>
|
||||
<Text size="xs" color="text-gray-500" block mt={1}>
|
||||
You'll be notified about protests, races, and more
|
||||
</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
<Stack gap={0}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="divide-y divide-charcoal-outline/50"
|
||||
>
|
||||
{notifications.map((notification) => {
|
||||
const Icon = notificationIcons[notification.type] || Bell;
|
||||
const NotificationIcon = notificationIcons[notification.type] || Bell;
|
||||
const colorClass = notificationColors[notification.type] || 'text-gray-400 bg-gray-400/10';
|
||||
|
||||
return (
|
||||
<button
|
||||
<Box
|
||||
key={notification.id}
|
||||
as="button"
|
||||
onClick={() => handleNotificationClick(notification)}
|
||||
className={`
|
||||
w-full text-left px-4 py-3 transition-colors hover:bg-iron-gray/30
|
||||
${!notification.read ? 'bg-primary-blue/5' : ''}
|
||||
`}
|
||||
w="full"
|
||||
textAlign="left"
|
||||
px={4}
|
||||
py={3}
|
||||
transition
|
||||
hoverBg="bg-iron-gray/30"
|
||||
bg={!notification.read ? 'bg-primary-blue/5' : undefined}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<div className={`p-2 rounded-lg flex-shrink-0 ${colorClass}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className={`text-sm font-medium truncate ${
|
||||
!notification.read ? 'text-white' : 'text-gray-300'
|
||||
}`}>
|
||||
<Box display="flex" gap={3}>
|
||||
<Box p={2} rounded="lg" flexShrink={0}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={colorClass}
|
||||
>
|
||||
<Icon icon={NotificationIcon} size={4} />
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
|
||||
<Text size="sm" weight="medium" truncate color={!notification.read ? 'text-white' : 'text-gray-300'} block>
|
||||
{notification.title}
|
||||
</p>
|
||||
</Text>
|
||||
{!notification.read && (
|
||||
<span className="w-2 h-2 bg-primary-blue rounded-full flex-shrink-0 mt-1.5" />
|
||||
<Box w="2" h="2" bg="bg-primary-blue" rounded="full" flexShrink={0} mt={1.5} />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-0.5">
|
||||
</Box>
|
||||
<Text size="xs" color="text-gray-500" lineClamp={2} mt={0.5} block>
|
||||
{notification.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<span className="text-[10px] text-gray-600">
|
||||
</Text>
|
||||
<Box display="flex" alignItems="center" gap={2} mt={1.5}>
|
||||
<Text color="text-gray-600"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
{formatTime(notification.createdAt)}
|
||||
</span>
|
||||
</Text>
|
||||
{notification.actionUrl && (
|
||||
<span className="flex items-center gap-0.5 text-[10px] text-primary-blue">
|
||||
<ExternalLink className="w-2.5 h-2.5" />
|
||||
View
|
||||
</span>
|
||||
<Box display="flex" alignItems="center" gap={0.5}>
|
||||
<Icon icon={ExternalLink} size={2.5} color="text-primary-blue" />
|
||||
<Text color="text-primary-blue"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
View
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="px-4 py-2 border-t border-charcoal-outline bg-iron-gray/20">
|
||||
<p className="text-[10px] text-gray-500 text-center">
|
||||
<Box px={4} py={2} borderTop borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
|
||||
<Text color="text-gray-500" textAlign="center" block
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
Showing {notifications.length} notification{notifications.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,8 +3,11 @@
|
||||
import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
|
||||
import ModalNotification from './ModalNotification';
|
||||
import ToastNotification from './ToastNotification';
|
||||
import { ModalNotification } from './ModalNotification';
|
||||
import { ToastNotification } from './ToastNotification';
|
||||
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
|
||||
import type { Notification, NotificationAction, NotificationVariant } from './notificationTypes';
|
||||
|
||||
@@ -45,7 +48,7 @@ interface NotificationProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function NotificationProvider({ children }: NotificationProviderProps) {
|
||||
export function NotificationProvider({ children }: NotificationProviderProps) {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
|
||||
const addNotification = useCallback((input: AddNotificationInput): string => {
|
||||
@@ -133,29 +136,31 @@ export default function NotificationProvider({ children }: NotificationProviderP
|
||||
{children}
|
||||
|
||||
{/* Toast notifications container */}
|
||||
<div className="fixed top-20 right-4 z-50 space-y-3">
|
||||
{toastNotifications.map((notification) => (
|
||||
<ToastNotification
|
||||
key={notification.id}
|
||||
notification={notification}
|
||||
onDismiss={() => dismissNotification(notification.id)}
|
||||
onRead={() => markAsRead(notification.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Box position="fixed" top="20" right="4" zIndex={50}>
|
||||
<Stack gap={3}>
|
||||
{toastNotifications.map((notification) => (
|
||||
<ToastNotification
|
||||
key={notification.id}
|
||||
notification={notification}
|
||||
onDismiss={() => dismissNotification(notification.id)}
|
||||
onRead={() => markAsRead(notification.id)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Modal notification */}
|
||||
{modalNotification && (
|
||||
<ModalNotification
|
||||
notification={modalNotification}
|
||||
onAction={(notification, actionId) => {
|
||||
onAction={(notification: Notification, actionId?: string) => {
|
||||
// For now we just mark as read and optionally navigate via ModalNotification
|
||||
markAsRead(notification.id);
|
||||
if (actionId === 'dismiss') {
|
||||
dismissNotification(notification.id);
|
||||
}
|
||||
}}
|
||||
onDismiss={(notification) => {
|
||||
onDismiss={(notification: Notification) => {
|
||||
markAsRead(notification.id);
|
||||
dismissNotification(notification.id);
|
||||
}}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { IconButton } from '@/ui/IconButton';
|
||||
import type { Notification } from './notificationTypes';
|
||||
import {
|
||||
Bell,
|
||||
@@ -19,6 +22,7 @@ interface ToastNotificationProps {
|
||||
notification: Notification;
|
||||
onDismiss: (notification: Notification) => void;
|
||||
onRead: (notification: Notification) => void;
|
||||
onNavigate?: (href: string) => void;
|
||||
autoHideDuration?: number;
|
||||
}
|
||||
|
||||
@@ -42,15 +46,22 @@ const notificationColors: Record<string, { bg: string; border: string; text: str
|
||||
race_reminder: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
|
||||
};
|
||||
|
||||
export default function ToastNotification({
|
||||
export function ToastNotification({
|
||||
notification,
|
||||
onDismiss,
|
||||
onRead,
|
||||
onNavigate,
|
||||
autoHideDuration = 5000,
|
||||
}: ToastNotificationProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isExiting, setIsExiting] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleDismiss = useCallback(() => {
|
||||
setIsExiting(true);
|
||||
setTimeout(() => {
|
||||
onDismiss(notification);
|
||||
}, 300);
|
||||
}, [notification, onDismiss]);
|
||||
|
||||
useEffect(() => {
|
||||
// Animate in
|
||||
@@ -65,24 +76,17 @@ export default function ToastNotification({
|
||||
clearTimeout(showTimeout);
|
||||
clearTimeout(hideTimeout);
|
||||
};
|
||||
}, [autoHideDuration]);
|
||||
|
||||
const handleDismiss = () => {
|
||||
setIsExiting(true);
|
||||
setTimeout(() => {
|
||||
onDismiss(notification);
|
||||
}, 300);
|
||||
};
|
||||
}, [autoHideDuration, handleDismiss]);
|
||||
|
||||
const handleClick = () => {
|
||||
onRead(notification);
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
if (notification.actionUrl && onNavigate) {
|
||||
onNavigate(notification.actionUrl);
|
||||
}
|
||||
handleDismiss();
|
||||
};
|
||||
|
||||
const Icon = notificationIcons[notification.type] || Bell;
|
||||
const NotificationIcon = notificationIcons[notification.type] || Bell;
|
||||
const colors = notificationColors[notification.type] || {
|
||||
bg: 'bg-gray-500/10',
|
||||
border: 'border-gray-500/30',
|
||||
@@ -90,65 +94,81 @@ export default function ToastNotification({
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
transform transition-all duration-300 ease-out
|
||||
${isVisible && !isExiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
|
||||
`}
|
||||
<Box
|
||||
transform
|
||||
transition
|
||||
translateX={isVisible && !isExiting ? '0' : 'full'}
|
||||
opacity={isVisible && !isExiting ? 1 : 0}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
w-96 rounded-xl border ${colors.border} ${colors.bg}
|
||||
backdrop-blur-md shadow-2xl overflow-hidden
|
||||
`}
|
||||
<Box
|
||||
w="96"
|
||||
rounded="xl"
|
||||
border
|
||||
borderColor={colors.border}
|
||||
bg={colors.bg}
|
||||
shadow="2xl"
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* Progress bar */}
|
||||
<div className="h-1 bg-iron-gray/50 overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${colors.text.replace('text-', 'bg-')} animate-toast-progress`}
|
||||
<Box h="1" bg="bg-iron-gray/50" overflow="hidden">
|
||||
<Box
|
||||
h="full"
|
||||
bg={colors.text.replace('text-', 'bg-')}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="animate-toast-progress"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ animationDuration: `${autoHideDuration}ms` }}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex gap-3">
|
||||
<Box p={4}>
|
||||
<Box display="flex" gap={3}>
|
||||
{/* Icon */}
|
||||
<div className={`p-2 rounded-lg ${colors.bg} flex-shrink-0`}>
|
||||
<Icon className={`w-5 h-5 ${colors.text}`} />
|
||||
</div>
|
||||
<Box p={2} rounded="lg" bg={colors.bg} flexShrink={0}>
|
||||
<Icon icon={NotificationIcon} size={5} color={colors.text} />
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm font-semibold text-white truncate">
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
|
||||
<Text size="sm" weight="semibold" color="text-white" truncate>
|
||||
{notification.title ?? 'Notification'}
|
||||
</p>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
</Text>
|
||||
<IconButton
|
||||
icon={X}
|
||||
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
handleDismiss();
|
||||
}}
|
||||
className="p-1 rounded hover:bg-charcoal-outline transition-colors flex-shrink-0"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 line-clamp-2 mt-1">
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
color="text-gray-400"
|
||||
/>
|
||||
</Box>
|
||||
<Text size="xs" color="text-gray-400" lineClamp={2} mt={1}>
|
||||
{notification.message}
|
||||
</p>
|
||||
</Text>
|
||||
{notification.actionUrl && (
|
||||
<button
|
||||
<Box
|
||||
as="button"
|
||||
onClick={handleClick}
|
||||
className={`mt-2 flex items-center gap-1 text-xs font-medium ${colors.text} hover:underline`}
|
||||
mt={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
cursor="pointer"
|
||||
hoverScale
|
||||
>
|
||||
View details
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</button>
|
||||
<Text size="xs" weight="medium" color={colors.text}>
|
||||
View details
|
||||
</Text>
|
||||
<Icon icon={ExternalLink} size={3} color={colors.text} />
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user