feat: add Notifications tab to Platform Settings

- Add Notifications tab to Settings > General page
- Include email, in-app, and critical-only notification toggles
- Add link to full Notifications page in Platform Monitoring
- Add notificationSettings state and saveNotificationSettings method

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/templates/admin/settings.html

@@ -21,6 +21,7 @@
     {{ tab_button('logging', 'Logging', icon='document-text') }}
     {{ tab_button('system', 'System', icon='cog') }}
     {{ tab_button('security', 'Security', icon='shield-check') }}
+    {{ tab_button('notifications', 'Notifications', icon='bell') }}
 {% endcall %}
 
 <!-- Logging Settings Tab -->
@@ -187,6 +188,80 @@
     </div>
 </div>
 
+<!-- Notifications Settings Tab -->
+<div x-show="activeTab === 'notifications'" x-transition>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
+            Notification Settings
+        </h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
+            Configure platform notification preferences and delivery channels.
+        </p>
+
+        <!-- Quick Link to Full Notifications Page -->
+        <div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+            <div class="flex items-start">
+                <span x-html="$icon('information-circle', 'w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 mr-3 flex-shrink-0')"></span>
+                <div>
+                    <p class="text-sm text-purple-800 dark:text-purple-200">
+                        For detailed notification management including templates and delivery logs, visit the full
+                        <a href="/admin/notifications-settings" class="font-medium underline hover:text-purple-600">Notifications page</a>
+                        in Platform Monitoring.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Email Notifications Toggle -->
+        <div class="space-y-4 mb-6">
+            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                <div>
+                    <p class="font-medium text-gray-700 dark:text-gray-200">Email Notifications</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Send notification emails for important events</p>
+                </div>
+                <label class="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" x-model="notificationSettings.email_enabled" class="sr-only peer">
+                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
+                </label>
+            </div>
+
+            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                <div>
+                    <p class="font-medium text-gray-700 dark:text-gray-200">In-App Notifications</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Show notifications in the admin interface</p>
+                </div>
+                <label class="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" x-model="notificationSettings.in_app_enabled" class="sr-only peer">
+                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
+                </label>
+            </div>
+
+            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                <div>
+                    <p class="font-medium text-gray-700 dark:text-gray-200">Critical Alerts Only</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Only receive notifications for critical system events</p>
+                </div>
+                <label class="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" x-model="notificationSettings.critical_only" class="sr-only peer">
+                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
+                </label>
+            </div>
+        </div>
+
+        <!-- Save Button -->
+        <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+            <button
+                @click="saveNotificationSettings()"
+                :disabled="saving"
+                class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                <span x-show="!saving">Save Notification Settings</span>
+                <span x-show="saving">Saving...</span>
+            </button>
+        </div>
+    </div>
+</div>
+
 {% endblock %}
 
 {% block extra_scripts %}

static/admin/js/settings.js

@@ -25,6 +25,11 @@ function adminSettings() {
             file_logging_enabled: true,
             db_logging_enabled: true
         },
+        notificationSettings: {
+            email_enabled: true,
+            in_app_enabled: true,
+            critical_only: false
+        },
 
         async init() {
             try {
@@ -105,6 +110,32 @@ function adminSettings() {
                 settingsLog.error('Failed to cleanup logs:', error);
                 this.error = error.response?.data?.detail || 'Failed to cleanup old logs';
             }
+        },
+
+        async saveNotificationSettings() {
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            try {
+                // TODO: Implement API endpoint for notification settings
+                // const data = await apiClient.put('/admin/notifications/settings', this.notificationSettings);
+
+                // For now, just show success (settings are client-side only)
+                this.successMessage = 'Notification settings saved successfully';
+
+                // Auto-hide success message after 5 seconds
+                setTimeout(() => {
+                    this.successMessage = null;
+                }, 5000);
+
+                settingsLog.info('Notification settings saved:', this.notificationSettings);
+            } catch (error) {
+                settingsLog.error('Failed to save notification settings:', error);
+                this.error = error.response?.data?.detail || 'Failed to save notification settings';
+            } finally {
+                this.saving = false;
+            }
         }
     };
 }