default to false for webpush notifications and translations for the button

server/database/db.js

@@ -381,7 +381,7 @@ const credentialsDb = {
 const DEFAULT_NOTIFICATION_PREFERENCES = {
   channels: {
     inApp: false,
-    webPush: true
+    webPush: false
   },
   events: {
     actionRequired: true,
@@ -396,7 +396,7 @@ const normalizeNotificationPreferences = (value) => {
   return {
     channels: {
       inApp: source.channels?.inApp === true,
-      webPush: source.channels?.webPush !== false
+      webPush: source.channels?.webPush === true
     },
     events: {
       actionRequired: source.events?.actionRequired !== false,

src/components/settings/view/tabs/NotificationsSettingsTab.tsx

@@ -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">
+          <div className="flex items-center gap-3">
-            <input
+            <button
-              type="checkbox"
+              type="button"
-              checked={isPushSubscribed}
               disabled={isPushLoading}
-              onChange={() => {
+              onClick={() => {
                 if (isPushSubscribed) {
                   onDisablePush();
                 } else {
                   onEnablePush();
                 }
               }}
-              className="w-4 h-4"
+              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
-            {isPushLoading
+                  ? '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'
-              ? t('notifications.webPush.loading')
+                  : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
-              : isPushSubscribed
+              }`}
-                ? t('notifications.webPush.enabled')
+            >
-                : t('notifications.webPush.disabled')}
+              {isPushLoading ? (
-          </label>
+                <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>
 

src/i18n/locales/en/settings.json

@@ -97,8 +97,9 @@
     "description": "Control which notification events you receive.",
     "webPush": {
       "title": "Web Push Notifications",
+      "enable": "Enable Push Notifications",
+      "disable": "Disable Push Notifications",
       "enabled": "Push notifications are enabled",
-      "disabled": "Enable push notifications",
       "loading": "Updating...",
       "unsupported": "Push notifications are not supported in this browser.",
       "denied": "Push notifications are blocked. Please allow them in your browser settings."

src/i18n/locales/ja/settings.json

@@ -97,8 +97,9 @@
     "description": "受信する通知イベントを設定します。",
     "webPush": {
       "title": "Webプッシュ通知",
+      "enable": "プッシュ通知を有効にする",
+      "disable": "プッシュ通知を無効にする",
       "enabled": "プッシュ通知は有効です",
-      "disabled": "プッシュ通知を有効にする",
       "loading": "更新中...",
       "unsupported": "このブラウザではプッシュ通知がサポートされていません。",
       "denied": "プッシュ通知がブロックされています。ブラウザの設定で許可してください。"

src/i18n/locales/ko/settings.json

@@ -97,8 +97,9 @@
     "description": "수신할 알림 이벤트를 설정합니다.",
     "webPush": {
       "title": "웹 푸시 알림",
+      "enable": "푸시 알림 활성화",
+      "disable": "푸시 알림 비활성화",
       "enabled": "푸시 알림이 활성화되었습니다",
-      "disabled": "푸시 알림 활성화",
       "loading": "업데이트 중...",
       "unsupported": "이 브라우저에서는 푸시 알림이 지원되지 않습니다.",
       "denied": "푸시 알림이 차단되었습니다. 브라우저 설정에서 허용해 주세요."

src/i18n/locales/zh-CN/settings.json

@@ -97,8 +97,9 @@
     "description": "控制你希望接收的通知事件。",
     "webPush": {
       "title": "Web 推送通知",
+      "enable": "启用推送通知",
+      "disable": "关闭推送通知",
       "enabled": "推送通知已启用",
-      "disabled": "启用推送通知",
       "loading": "更新中...",
       "unsupported": "此浏览器不支持推送通知。",
       "denied": "推送通知已被阻止，请在浏览器设置中允许。"