Feature/push notification panel integration

src/components/settings/SettingsNavigation.tsx

@@ -11,6 +11,7 @@ import {
   InfoCircleOutlined,
   WalletOutlined,
   GlobalOutlined,
+  BellOutlined,
 } from '@ant-design/icons';
 
 const { Panel } = Collapse;
@@ -86,6 +87,12 @@ const settingsTabs: SettingsTab[] = [
     icon: <RobotOutlined className="item-icon" />,
     path: '/settings/ollama'
   },
+  {
+    key: 'push_notifications',
+    label: 'Push Notifications',
+    icon: <BellOutlined className="item-icon" />,
+    path: '/settings/push-notifications'
+  },
   {
     key: 'relay_info',
     label: 'Relay Info',

src/components/settings/SettingsPage.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
-import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
 import ImageModerationSettings from './ImageModerationSettings';
 import ContentFilterSettings from './ContentFilterSettings';
 import OllamaSettings from './OllamaSettings';
 import WalletSettings from './WalletSettings';
 import GeneralSettings from './GeneralSettings';
 import RelayInfoSettings from './RelayInfoSettings';
+import PushNotificationSettings from './PushNotificationSettings';
 import * as S from '@app/pages/DashboardPages/DashboardPage.styles';
 import * as PageStyles from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
 import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection';
@@ -48,6 +48,10 @@ const SettingsPage: React.FC = () => {
           <CollapsibleSection header="Wallet Settings">
             <WalletSettings />
           </CollapsibleSection>
+
+          <CollapsibleSection header="Push Notifications">
+            <PushNotificationSettings />
+          </CollapsibleSection>
         </S.LeftSideCol>
 
         <S.RightSideCol xl={8} xxl={7}>

src/components/settings/layouts/AdvancedSettingsLayout.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { Button, Space, Spin } from 'antd';
 import { LiquidBlueButton } from '@app/components/common/LiquidBlueButton';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
-import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
 import GeneralSettingsPanel from '../panels/GeneralSettingsPanel';
 import ImageModerationPanel from '../panels/ImageModerationPanel';
 import ContentFilterPanel from '../panels/ContentFilterPanel';
 import OllamaPanel from '../panels/OllamaPanel';
 import WalletPanel from '../panels/WalletPanel';
+import PushNotificationPanel from '../panels/PushNotificationPanel';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection';
 import { Balance } from '@app/components/relay-dashboard/Balance/Balance';
@@ -118,6 +118,10 @@ const AdvancedSettingsLayout: React.FC<AdvancedSettingsLayoutProps> = ({
           <CollapsibleSection header="Wallet">
             <WalletPanel />
           </CollapsibleSection>
+
+          <CollapsibleSection header="Push Notifications">
+            <PushNotificationPanel />
+          </CollapsibleSection>
 
           <div style={{ marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
             <Space size="middle">