Skip to content

Commit b78135b

Browse files
jobbykingsjobbykings
authored
Merge branch 'main' into fix/light-dark-theme-toggle
2 parents e03ac92 + 2f41035 commit b78135b

10 files changed

Lines changed: 1377 additions & 309 deletions

File tree

‎frontend/src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ThemeProvider } from 'next-themes';
44
import './globals.css';
55
import { performanceMonitor } from '@/lib/performance-monitor';
66
import { GlobalShell } from '@/components/PWA/GlobalShell';
7+
import { ToastProvider } from '@/components/ui/toast';
78

89
const inter = Inter({ subsets: ['latin'] });
910

‎frontend/src/app/settings/notifications/page.tsx‎

Lines changed: 93 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,86 +3,109 @@
33
import React from 'react';
44
import PreferencesPanel from '@/components/Notifications/PreferencesPanel';
55
import { useNotifications } from '@/hooks/useNotifications';
6+
import { useToast } from '@/hooks/useToast';
67
import { Bell, Shield, Info } from 'lucide-react';
78

89
export default function NotificationSettingsPage() {
9-
// Using a hardcoded userId for demo purposes.
10-
// In a real app, this would come from an auth context.
11-
const { preferences, updatePreferences, isLoading, subscribeToPushNotifications } = useNotifications('user-123');
10+
// Using a hardcoded userId for demo purposes.
11+
// In a real app, this would come from an auth context.
12+
const {
13+
preferences,
14+
updatePreferences,
15+
isLoading,
16+
subscribeToPushNotifications,
17+
} = useNotifications('user-123');
18+
const toast = useToast();
1219

13-
const handlePushSubscription = async () => {
14-
try {
15-
await subscribeToPushNotifications();
16-
alert('Successfully subscribed to push notifications!');
17-
} catch (error) {
18-
alert('Failed to subscribe to push notifications. Please check your browser settings.');
19-
}
20-
};
20+
const handleUpdatePreferences = async (
21+
prefs: Parameters<typeof updatePreferences>[0]
22+
) => {
23+
await updatePreferences(prefs);
24+
toast.success('Notification preferences saved');
25+
};
2126

22-
return (
23-
<div className="max-w-4xl mx-auto py-8 px-4">
24-
<div className="mb-8">
25-
<h1 className="text-3xl font-bold text-gray-900">Notification Settings</h1>
26-
<p className="text-gray-600 mt-2">
27-
Manage how and when you receive notifications from StarkEd.
28-
</p>
29-
</div>
27+
const handlePushSubscription = async () => {
28+
try {
29+
await subscribeToPushNotifications();
30+
toast.success('Successfully subscribed to push notifications!');
31+
} catch (error) {
32+
toast.error(
33+
'Failed to subscribe to push notifications. Please check your browser settings.'
34+
);
35+
}
36+
};
3037

31-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
32-
{/* Main Content */}
33-
<div className="md:col-span-2 space-y-8">
34-
<section className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
35-
<PreferencesPanel
36-
preferences={preferences}
37-
onUpdatePreferences={updatePreferences}
38-
/>
39-
</section>
38+
return (
39+
<div className="max-w-4xl mx-auto py-8 px-4">
40+
<div className="mb-8">
41+
<h1 className="text-3xl font-bold text-gray-900">
42+
Notification Settings
43+
</h1>
44+
<p className="text-gray-600 mt-2">
45+
Manage how and when you receive notifications from StarkEd.
46+
</p>
47+
</div>
4048

41-
{/* Device Settings */}
42-
<section className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
43-
<div className="flex items-center gap-3 mb-4">
44-
<Shield size={22} className="text-blue-600" />
45-
<h2 className="text-xl font-semibold text-gray-900">Push Notifications</h2>
46-
</div>
47-
<p className="text-gray-600 mb-6">
48-
Enable push notifications to stay updated even when you're not on the site.
49-
</p>
50-
<button
51-
onClick={handlePushSubscription}
52-
className="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
53-
>
54-
<Bell size={18} />
55-
Enable Browser Push
56-
</button>
57-
</section>
58-
</div>
49+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
50+
{/* Main Content */}
51+
<div className="md:col-span-2 space-y-8">
52+
<section className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
53+
<PreferencesPanel
54+
preferences={preferences}
55+
onUpdatePreferences={handleUpdatePreferences}
56+
/>
57+
</section>
5958

60-
{/* Sidebar */}
61-
<div className="space-y-6">
62-
<div className="bg-blue-50 rounded-xl p-6 border border-blue-100">
63-
<div className="flex items-center gap-2 mb-3 text-blue-800">
64-
<Info size={18} />
65-
<h3 className="font-semibold">Need help?</h3>
66-
</div>
67-
<p className="text-sm text-blue-700 leading-relaxed">
68-
Notifications help you stay on track with your learning goals. We recommend keeping "Course Updates" and "System Alerts" enabled.
69-
</p>
70-
</div>
59+
{/* Device Settings */}
60+
<section className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
61+
<div className="flex items-center gap-3 mb-4">
62+
<Shield size={22} className="text-blue-600" />
63+
<h2 className="text-xl font-semibold text-gray-900">
64+
Push Notifications
65+
</h2>
66+
</div>
67+
<p className="text-gray-600 mb-6">
68+
Enable push notifications to stay updated even when you're not on
69+
the site.
70+
</p>
71+
<button
72+
onClick={handlePushSubscription}
73+
className="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
74+
>
75+
<Bell size={18} />
76+
Enable Browser Push
77+
</button>
78+
</section>
79+
</div>
7180

72-
<div className="bg-gray-50 rounded-xl p-6 border border-gray-200">
73-
<h3 className="font-semibold text-gray-900 mb-2">Privacy Note</h3>
74-
<p className="text-sm text-gray-600 leading-relaxed">
75-
We never share your contact information with third parties. Your notification data is used solely for platform updates.
76-
</p>
77-
</div>
78-
</div>
81+
{/* Sidebar */}
82+
<div className="space-y-6">
83+
<div className="bg-blue-50 rounded-xl p-6 border border-blue-100">
84+
<div className="flex items-center gap-2 mb-3 text-blue-800">
85+
<Info size={18} />
86+
<h3 className="font-semibold">Need help?</h3>
7987
</div>
88+
<p className="text-sm text-blue-700 leading-relaxed">
89+
Notifications help you stay on track with your learning goals. We
90+
recommend keeping "Course Updates" and "System Alerts" enabled.
91+
</p>
92+
</div>
93+
94+
<div className="bg-gray-50 rounded-xl p-6 border border-gray-200">
95+
<h3 className="font-semibold text-gray-900 mb-2">Privacy Note</h3>
96+
<p className="text-sm text-gray-600 leading-relaxed">
97+
We never share your contact information with third parties. Your
98+
notification data is used solely for platform updates.
99+
</p>
100+
</div>
101+
</div>
102+
</div>
80103

81-
{isLoading && (
82-
<div className="fixed inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center z-50">
83-
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
84-
</div>
85-
)}
104+
{isLoading && (
105+
<div className="fixed inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center z-50">
106+
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
86107
</div>
87-
);
108+
)}
109+
</div>
110+
);
88111
}

0 commit comments

Comments
 (0)