yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 17:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(notifications): enhance notification preferences with new version and approval event options

Browse Source
This commit is contained in:
Yusuf İpek
2026-02-28 11:10:41 +03:00
parent 975ff603e1
commit dc40847371
1 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/onboarding/onboarding-wizard.tsx
+27 -13
View File
@@ -68,7 +68,7 @@ function ToggleButton({
type="button" type="button"
onClick={onToggle} onClick={onToggle}
className={cn( className={cn(
'flex items-center justify-between w-full p-3 rounded-lg border transition-colors text-left', 'flex items-center justify-between w-full px-3 py-2 rounded-lg border transition-colors text-left',
enabled ? 'border-primary/50 bg-primary/5' : 'border-border hover:bg-accent/50' enabled ? 'border-primary/50 bg-primary/5' : 'border-border hover:bg-accent/50'
)} )}
> >
@@ -431,8 +431,10 @@ function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
const [emailEnabled, setEmailEnabled] = useState(false); const [emailEnabled, setEmailEnabled] = useState(false);
const [events, setEvents] = useState({ const [events, setEvents] = useState({
onNewVideo: true, onNewVideo: true,
onNewVersion: true,
onNewComment: true, onNewComment: true,
onNewReply: true, onNewReply: true,
onApprovalEvents: true,
}); });
const handleSave = async () => { const handleSave = async () => {
@@ -447,10 +449,10 @@ function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
telegramBotToken: null, telegramBotToken: null,
telegramChatId: null, telegramChatId: null,
onNewVideo: events.onNewVideo, onNewVideo: events.onNewVideo,
onNewVersion: true, onNewVersion: events.onNewVersion,
onNewComment: events.onNewComment, onNewComment: events.onNewComment,
onNewReply: events.onNewReply, onNewReply: events.onNewReply,
onApprovalEvents: true, onApprovalEvents: events.onApprovalEvents,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC', timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
}), }),
}); });
@@ -461,19 +463,19 @@ function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
}; };
return ( return (
<div className="space-y-7"> <div className="space-y-5">
<div className="text-center space-y-3"> <div className="text-center space-y-2">
<div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3"> <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<Bell className="h-8 w-8 text-primary" /> <Bell className="h-6 w-6 text-primary" />
</div> </div>
<h2 className="text-2xl font-bold tracking-tight">Notification preferences</h2> <h2 className="text-xl font-bold tracking-tight">Notification preferences</h2>
<p className="text-base text-muted-foreground"> <p className="text-sm text-muted-foreground">
Choose when you want to be notified. Email and Telegram are both supported — you can configure Telegram anytime in Settings. Choose when you want to be notified. Email and Telegram are both supported — you can configure Telegram anytime in Settings.
</p> </p>
</div> </div>
<div className="space-y-4"> <div className="space-y-3">
<div className="space-y-2.5"> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground"> <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<Mail className="h-4 w-4" /> <Mail className="h-4 w-4" />
Channels Channels
@@ -486,7 +488,7 @@ function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
/> />
</div> </div>
<div className="space-y-2.5"> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground"> <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<Bell className="h-4 w-4" /> <Bell className="h-4 w-4" />
Events Events
@@ -497,6 +499,12 @@ function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
label="New Video Added" label="New Video Added"
description="When a new video is added to one of your projects" description="When a new video is added to one of your projects"
/> />
<ToggleButton
enabled={events.onNewVersion}
onToggle={() => setEvents((e) => ({ ...e, onNewVersion: !e.onNewVersion }))}
label="New Version Added"
description="When a new version is added to an existing video"
/>
<ToggleButton <ToggleButton
enabled={events.onNewComment} enabled={events.onNewComment}
onToggle={() => setEvents((e) => ({ ...e, onNewComment: !e.onNewComment }))} onToggle={() => setEvents((e) => ({ ...e, onNewComment: !e.onNewComment }))}
@@ -509,10 +517,16 @@ function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
label="New Reply" label="New Reply"
description="When someone replies to a comment thread" description="When someone replies to a comment thread"
/> />
<ToggleButton
enabled={events.onApprovalEvents}
onToggle={() => setEvents((e) => ({ ...e, onApprovalEvents: !e.onApprovalEvents }))}
label="Approval Workflow"
description="When approval requests are created, responded to, or finalized"
/>
</div> </div>
</div> </div>
<div className="flex flex-col gap-2 pt-1"> <div className="flex flex-col gap-2">
<Button onClick={handleSave} className="w-full h-11" disabled={isSaving}> <Button onClick={handleSave} className="w-full h-11" disabled={isSaving}>
{isSaving ? ( {isSaving ? (
<> <>