Add moderation mode to relay settings with improved text contrast

This commit includes:
- Implementation of moderation mode feature in relay settings
- Addition of strict and passive mode options
- Improved text color contrast for better readability on dark backgrounds
- Integration with existing relay settings UI

Author: Maphikza

.env.development

@@ -1,7 +1,7 @@
 REACT_APP_BASE_URL=http://localhost:9002
 REACT_APP_WALLET_BASE_URL=http://localhost:9003
 REACT_APP_ASSETS_BUCKET=http://localhost
-REACT_APP_DEMO_MODE=true
+REACT_APP_DEMO_MODE=false
 
 # More info https://create-react-app.dev/docs/advanced-configuration
 ESLINT_NO_DEV_ERRORS=true

src/components/relay-settings/layouts/DesktopLayout.tsx

@@ -13,6 +13,7 @@ import { AppBucketsSection } from '@app/components/relay-settings/sections/AppBu
 import { SubscriptionSection } from '@app/components/relay-settings/sections/SubscriptionSection';
 import { KindsSection } from '@app/components/relay-settings/sections/KindsSection';
 import { MediaSection } from '@app/components/relay-settings/sections/MediaSection';
+import { ModerationSection } from '@app/components/relay-settings/sections/ModerationSection';
 import { useTranslation } from 'react-i18next';
 import { SubscriptionTier } from '@app/constants/relaySettings';
 
@@ -68,6 +69,9 @@ interface DesktopLayoutProps {
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
     };
+    // Moderation section props
+    moderationMode: string;
+    onModerationModeChange: (mode: string) => void;
 }
 
 export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
@@ -93,7 +97,6 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
     freeTierEnabled,
     freeTierLimit,
     onFreeTierChange,
-
     // Kinds props
     isKindsActive,
     selectedKinds,
@@ -108,6 +111,9 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
     photos,
     videos,
     audio,
+    // Moderation props
+    moderationMode,
+    onModerationModeChange,
 }) => {
     const { t } = useTranslation();
 
@@ -143,6 +149,11 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
                             freeTierLimit={freeTierLimit}
                             onFreeTierChange={onFreeTierChange}
                         />
+
+                        <ModerationSection
+                            moderationMode={moderationMode}
+                            onModerationModeChange={onModerationModeChange}
+                        />
                     </BaseCol>
                 </BaseRow>
 
@@ -215,4 +226,4 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
     );
 };
 
-export default DesktopLayout;
+export default DesktopLayout;

src/components/relay-settings/layouts/MobileLayout.tsx

@@ -10,6 +10,7 @@ import { AppBucketsSection } from '@app/components/relay-settings/sections/AppBu
 import { SubscriptionSection } from '@app/components/relay-settings/sections/SubscriptionSection';
 import { KindsSection } from '@app/components/relay-settings/sections/KindsSection';
 import { MediaSection } from '@app/components/relay-settings/sections/MediaSection';
+import { ModerationSection } from '@app/components/relay-settings/sections/ModerationSection';
 import { useTranslation } from 'react-i18next';
 import { SubscriptionTier } from '@app/constants/relaySettings';
 
@@ -65,6 +66,9 @@ interface MobileLayoutProps {
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
     };
+    // Moderation section props
+    moderationMode: string;
+    onModerationModeChange: (mode: string) => void;
 }
 
 export const MobileLayout: React.FC<MobileLayoutProps> = ({
@@ -104,6 +108,9 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
     photos,
     videos,
     audio,
+    // Moderation props
+    moderationMode,
+    onModerationModeChange,
 }) => {
     const { t } = useTranslation();
 
@@ -138,6 +145,11 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
                     onFreeTierChange={onFreeTierChange}
                 />
 
+                <ModerationSection
+                    moderationMode={moderationMode}
+                    onModerationModeChange={onModerationModeChange}
+                />
+
                 <S.SwitchContainer
                     style={{
                         display: 'grid',
@@ -190,4 +202,4 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
     );
 };
 
-export default MobileLayout;
+export default MobileLayout;

src/components/relay-settings/sections/ModerationSection/ModerationSection.tsx

@@ -0,0 +1,43 @@
+// src/components/relay-settings/sections/ModerationSection/ModerationSection.tsx
+
+import React from 'react';
+import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
+import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
+import { CollapsibleSection } from '../../shared/CollapsibleSection/CollapsibleSection';
+import { ModerationModeSelect } from './components/ModerationModeSelect';
+
+export interface ModerationSectionProps {
+  moderationMode: string;
+  onModerationModeChange: (mode: string) => void;
+}
+
+export const ModerationSection: React.FC<ModerationSectionProps> = ({
+  moderationMode,
+  onModerationModeChange,
+}) => {
+  return (
+    <CollapsibleSection header="Moderation Settings">
+      <S.Card>
+        <BaseCol span={24}>
+          <ModerationModeSelect 
+            moderationMode={moderationMode}
+            onChange={onModerationModeChange}
+          />
+          
+          <div style={{ marginTop: '1rem' }}>
+            <p style={{ fontSize: '0.9rem', color: '#c5d3e0' }}>
+              Moderation mode determines how events with media are handled while pending moderation.
+              <br />
+              <br />
+              <strong>Strict Mode:</strong> Events with media are not queryable while pending moderation, except by their authors.
+              <br />
+              <strong>Passive Mode:</strong> Events with media are queryable by everyone while pending moderation.
+            </p>
+          </div>
+        </BaseCol>
+      </S.Card>
+    </CollapsibleSection>
+  );
+};
+
+export default ModerationSection;

src/components/relay-settings/sections/ModerationSection/components/ModerationModeSelect.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Radio, Space, Typography } from 'antd';
+import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
+import { useTranslation } from 'react-i18next';
+
+const { Text } = Typography;
+
+interface ModerationModeSelectProps {
+  moderationMode: string;
+  onChange: (mode: string) => void;
+}
+
+export const ModerationModeSelect: React.FC<ModerationModeSelectProps> = ({
+  moderationMode,
+  onChange,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <S.LabelSpan style={{ marginBottom: '1rem' }}>
+        {t('Moderation Mode')}
+      </S.LabelSpan>
+      
+      <Radio.Group 
+        value={moderationMode} 
+        onChange={(e) => onChange(e.target.value)}
+        style={{ marginBottom: '1rem' }}
+      >
+        <Space direction="vertical">
+          <Radio value="strict">
+            <Text strong>Strict Mode</Text>
+            <div>
+              <Text style={{ color: '#c5d3e0' }}>
+                Events with media are not queryable while pending moderation, except by their authors.
+              </Text>
+            </div>
+          </Radio>
+          
+          <Radio value="passive">
+            <Text strong>Passive Mode</Text>
+            <div>
+              <Text style={{ color: '#c5d3e0' }}>
+                Events with media are queryable by everyone while pending moderation.
+              </Text>
+            </div>
+          </Radio>
+        </Space>
+      </Radio.Group>
+    </div>
+  );
+};
+
+export default ModerationModeSelect;

src/components/relay-settings/sections/ModerationSection/index.ts

@@ -0,0 +1,4 @@
+// src/components/relay-settings/sections/ModerationSection/index.ts
+
+export * from './ModerationSection';
+export { default } from './ModerationSection';

src/constants/relaySettings.ts

@@ -18,6 +18,7 @@ export type Settings = {
   subscription_tiers: SubscriptionTier[];
   freeTierEnabled: boolean;  // New field
   freeTierLimit: string;     // New field - e.g. "100 MB per month
+  moderationMode: string;    // "strict" or "passive"
 }
 
 export type SubscriptionTier = {

src/hooks/useRelaySettings.ts

@@ -20,6 +20,7 @@ interface BackendRelaySettings {
   subscription_tiers: BackendSubscriptionTier[];
   freeTierEnabled: boolean;  // New field
   freeTierLimit: string;     // New field - e.g. "100 MB per month"
+  moderationMode: string;    // "strict" or "passive"
   MimeTypeGroups: {
     images: string[];
     videos: string[];
@@ -56,7 +57,8 @@ const getInitialSettings = (): Settings => ({
   isFileStorageActive: false,
   subscription_tiers: defaultTiers,
   freeTierEnabled: false,
-  freeTierLimit: '100 MB per month'
+  freeTierLimit: '100 MB per month',
+  moderationMode: 'strict' // Default to strict mode
 });
 
 const useRelaySettings = () => {
@@ -139,6 +141,7 @@ const useRelaySettings = () => {
       })),
       freeTierEnabled: settings.freeTierEnabled,
       freeTierLimit: settings.freeTierLimit,
+      moderationMode: settings.moderationMode,
       MimeTypeGroups: mimeGroups,
       isFileStorageActive: settings.isFileStorageActive,
       MimeTypeWhitelist: settings.mode === 'smart'
@@ -161,6 +164,7 @@ const useRelaySettings = () => {
     settings.protocol = backendSettings.protocol as string[];
     settings.freeTierEnabled = backendSettings.freeTierEnabled ?? false;
     settings.freeTierLimit = backendSettings.freeTierLimit ?? '100 MB per month';
+    settings.moderationMode = backendSettings.moderationMode ?? 'strict';
 
     // Handle subscription tiers
     if (Array.isArray(backendSettings.subscription_tiers)) {

src/pages/RelaySettingsPage.tsx

@@ -42,8 +42,9 @@ const RelaySettingsPage: React.FC = () => {
     isAudioActive: true,
     isFileStorageActive: false,
     subscription_tiers: [],
-    freeTierEnabled: false,  // Add this
-    freeTierLimit: '100 MB per month'  // Add this
+    freeTierEnabled: false,
+    freeTierLimit: '100 MB per month',
+    moderationMode: 'strict'  // Default to strict mode
   });
 
   // Initialize stored dynamic items
@@ -138,6 +139,7 @@ const RelaySettingsPage: React.FC = () => {
         updateSettings('freeTierEnabled', settings.freeTierEnabled),
         updateSettings('freeTierLimit', settings.freeTierLimit),
         updateSettings('subscription_tiers', settings.subscription_tiers),
+        updateSettings('moderationMode', settings.moderationMode),
       ]);
 
       await saveSettings();
@@ -232,6 +234,12 @@ const RelaySettingsPage: React.FC = () => {
     updateSettings(type, checked);
   };
 
+  // Moderation mode handler
+  const handleModerationModeChange = (mode: string) => {
+    setSettings(prev => ({ ...prev, moderationMode: mode }));
+    updateSettings('moderationMode', mode);
+  };
+
   const layoutProps = {
     mode: settings.mode,
     onModeChange: handleModeChange,
@@ -269,7 +277,6 @@ const RelaySettingsPage: React.FC = () => {
       updateSettings('freeTierEnabled', enabled);
       updateSettings('freeTierLimit', limit);
     },
-
     // Kinds props
     isKindsActive: settings.isKindsActive,
     selectedKinds: settings.kinds,
@@ -299,6 +306,9 @@ const RelaySettingsPage: React.FC = () => {
       onChange: (values: string[]) => handleMediaChange('audio', values),
       onToggle: (checked: boolean) => handleMediaToggle('isAudioActive', checked),
     },
+    // Moderation props
+    moderationMode: settings.moderationMode,
+    onModerationModeChange: handleModerationModeChange,
   };
 
   return (