default to false for webpush notifications and translations for the button

This commit is contained in:
simosmik
2026-03-03 13:30:19 +00:00
parent 909ff05118
commit 5d55e65727
6 changed files with 40 additions and 20 deletions

View File

@@ -1,4 +1,4 @@
import { Bell } from 'lucide-react';
import { Bell, BellOff, BellRing, Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import type { NotificationPreferencesState } from '../../types/types';
@@ -43,26 +43,42 @@ export default function NotificationsSettingsTab({
) : pushDenied ? (
<p className="text-sm text-muted-foreground">{t('notifications.webPush.denied')}</p>
) : (
<label className="flex items-center gap-2 text-sm text-foreground">
<input
type="checkbox"
checked={isPushSubscribed}
<div className="flex items-center gap-3">
<button
type="button"
disabled={isPushLoading}
onChange={() => {
onClick={() => {
if (isPushSubscribed) {
onDisablePush();
} else {
onEnablePush();
}
}}
className="w-4 h-4"
/>
{isPushLoading
? t('notifications.webPush.loading')
: isPushSubscribed
? t('notifications.webPush.enabled')
: t('notifications.webPush.disabled')}
</label>
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
isPushSubscribed
? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
: 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
}`}
>
{isPushLoading ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : isPushSubscribed ? (
<BellOff className="w-4 h-4" />
) : (
<BellRing className="w-4 h-4" />
)}
{isPushLoading
? t('notifications.webPush.loading')
: isPushSubscribed
? t('notifications.webPush.disable')
: t('notifications.webPush.enable')}
</button>
{isPushSubscribed && (
<span className="text-sm text-green-600 dark:text-green-400">
{t('notifications.webPush.enabled')}
</span>
)}
</div>
)}
</div>