Fix blacklist mode logic for event filtering

- Fix backend API communication for blacklist mode
- In blacklist mode: selected items are blocked, backend receives inverse (allowed items)
- In whitelist mode: selected items are allowed, backend receives them directly
- Fix mode switching to preserve blocked items when loading from backend
- Add helper functions to calculate inverse kinds for blacklist mode
- Ensure core kinds are never blockable in blacklist mode
- Add AddKindForm component for dynamic kind addition

Author: Maphikza

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

@@ -97,6 +97,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
     onKindsActiveChange,
     onKindsChange,
     onDynamicKindsChange,
+    onAddKind,
     onRemoveKind,
     // Media props
     photos,
@@ -171,6 +172,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
                         onKindsActiveChange={onKindsActiveChange}
                         onKindsChange={onKindsChange}
                         onDynamicKindsChange={onDynamicKindsChange}
+                        onAddKind={onAddKind}
                         onRemoveKind={onRemoveKind}
                     />
 

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

@@ -94,6 +94,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
     onKindsActiveChange,
     onKindsChange,
     onDynamicKindsChange,
+    onAddKind,
     onRemoveKind,
     // Media props
     photos,
@@ -162,6 +163,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
                     onKindsActiveChange={onKindsActiveChange}
                     onKindsChange={onKindsChange}
                     onDynamicKindsChange={onDynamicKindsChange}
+                    onAddKind={onAddKind}
                     onRemoveKind={onRemoveKind}
                 />
 

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

@@ -5,6 +5,7 @@ import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch';
 import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
 import { CollapsibleSection } from '../../shared/CollapsibleSection/CollapsibleSection';
 import { KindsList } from './components/KindsList';
+import { AddKindForm } from './components/AddKindForm';
 import { DynamicKindsList } from './components/DynamicKindsList';
 
 export interface KindsSectionProps {
@@ -16,6 +17,7 @@ export interface KindsSectionProps {
   onKindsActiveChange: (active: boolean) => void;
   onKindsChange: (values: string[]) => void;
   onDynamicKindsChange: (values: string[]) => void;
+  onAddKind: (kind: string) => void;
   onRemoveKind: (kind: string) => void;
 }
 
@@ -28,6 +30,7 @@ export const KindsSection: React.FC<KindsSectionProps> = ({
   onKindsActiveChange,
   onKindsChange,
   onDynamicKindsChange,
+  onAddKind,
   onRemoveKind,
 }) => {
   const header = mode !== 'whitelist' ? 'Blacklisted Kind Numbers' : 'Kind Numbers';
@@ -54,6 +57,11 @@ export const KindsSection: React.FC<KindsSectionProps> = ({
             onKindsChange={onKindsChange}
           />
 
+          <AddKindForm 
+            mode={mode}
+            onAddKind={onAddKind}
+          />
+
           <DynamicKindsList
             mode={mode}
             dynamicKinds={dynamicKinds}

src/components/relay-settings/sections/KindsSection/components/AddKindForm.tsx

@@ -0,0 +1,43 @@
+// src/components/relay-settings/sections/KindsSection/components/AddKindForm.tsx
+
+import React, { useState } from 'react';
+import { Input } from 'antd';
+import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
+
+interface AddKindFormProps {
+  onAddKind: (kind: string) => void;
+  mode: string;
+}
+
+export const AddKindForm: React.FC<AddKindFormProps> = ({ onAddKind, mode }) => {
+  const [newKind, setNewKind] = useState('');
+
+  const handleAddKind = () => {
+    if (newKind) {
+      onAddKind(newKind);
+      setNewKind('');
+    }
+  };
+
+  if (mode === 'whitelist') {
+    return null;
+  }
+
+  return (
+    <div style={{ padding: '1.5rem 0rem 0rem 0rem', display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
+      <h3>{'Add to Blacklist'}</h3>
+      <div style={{ display: 'flex' }} className="custom-checkbox-group grid-checkbox-group large-label">
+        <Input
+          value={newKind}
+          onChange={(e) => setNewKind(e.target.value)}
+          placeholder="Enter new kind"
+        />
+        <BaseButton onClick={handleAddKind}>
+          Add Kind
+        </BaseButton>
+      </div>
+    </div>
+  );
+};
+
+export default AddKindForm;

src/constants/coreKinds.ts

@@ -22,4 +22,22 @@ export const ensureCoreKinds = (kindList: string[]): string[] => {
 // Helper function to check if a kind is protected
 export const isCoreKind = (kind: string): boolean => {
   return CORE_KINDS.includes(kind);
+};
+
+// Helper function to get all possible kinds from noteOptions
+export const getAllPossibleKinds = (): string[] => {
+  // Import noteOptions dynamically to avoid circular dependency
+  const { noteOptions } = require('../constants/relaySettings');
+  return noteOptions.map((option: any) => option.kindString);
+};
+
+// Helper function to calculate inverse for blacklist mode
+export const calculateInverseKinds = (selectedKinds: string[]): string[] => {
+  const allPossibleKinds = getAllPossibleKinds();
+  // In blacklist mode: selected = blocked, so remove selected from all possible kinds
+  // Core kinds can never be blocked, so they're always in the whitelist
+  const allowedKinds = allPossibleKinds.filter(kind => 
+    !selectedKinds.includes(kind) || isCoreKind(kind)
+  );
+  return allowedKinds;
 };

src/hooks/useRelaySettings.ts

@@ -3,7 +3,7 @@ import config from '@app/config/config';
 import { readToken } from '@app/services/localStorage.service';
 import { useHandleLogout } from './authUtils';
 import { Settings } from '@app/constants/relaySettings';
-import { CORE_KINDS, ensureCoreKinds } from '@app/constants/coreKinds';
+import { CORE_KINDS, ensureCoreKinds, calculateInverseKinds, getAllPossibleKinds, isCoreKind } from '@app/constants/coreKinds';
 
 // Legacy interface - no longer used with new API
 // interface BackendRelaySettings { ... }
@@ -54,25 +54,32 @@ const useRelaySettings = () => {
       return;
     }
 
-    lastMode.current = relaySettings.mode;
-
-    if (relaySettings.mode === 'blacklist') {
-      // Store current settings before clearing
-      setPreviousSmartSettings({
-        kinds: relaySettings.kinds,
-        photos: relaySettings.photos,
-        videos: relaySettings.videos,
-        audio: relaySettings.audio,
-      });
+    // Only clear arrays when user manually switches TO blacklist mode
+    // Don't clear if we're in blacklist mode and already have blocked items (loaded from backend)
+    if (relaySettings.mode === 'blacklist' && lastMode.current === 'whitelist') {
+      // Only clear if we don't have any blocked items (user switching, not loading from backend)
+      const hasBlockedItems = relaySettings.kinds.length > 0 || relaySettings.photos.length > 0 || 
+                             relaySettings.videos.length > 0 || relaySettings.audio.length > 0;
+      
+      if (!hasBlockedItems) {
+        // Store current settings before clearing
+        setPreviousSmartSettings({
+          kinds: relaySettings.kinds,
+          photos: relaySettings.photos,
+          videos: relaySettings.videos,
+          audio: relaySettings.audio,
+        });
 
-      setRelaySettings(prev => ({
-        ...prev,
-        kinds: [],
-        photos: [],
-        videos: [],
-        audio: [],
-      }));
-    } else if (relaySettings.mode === 'whitelist' && previousSmartSettings) {
+        // Clear selections in blacklist mode - user starts fresh and selects what to block
+        setRelaySettings(prev => ({
+          ...prev,
+          kinds: [],
+          photos: [],
+          videos: [],
+          audio: [],
+        }));
+      }
+    } else if (relaySettings.mode === 'whitelist' && lastMode.current === 'blacklist' && previousSmartSettings) {
       // Restore previous whitelist mode settings
       setRelaySettings(prev => ({
         ...prev,
@@ -82,6 +89,9 @@ const useRelaySettings = () => {
         audio: previousSmartSettings.audio,
       }));
     }
+
+    // Update lastMode after processing
+    lastMode.current = relaySettings.mode;
   }, [relaySettings.mode, previousSmartSettings]);
   /* eslint-enable react-hooks/exhaustive-deps */
 
@@ -97,9 +107,19 @@ const useRelaySettings = () => {
     if (backendData.event_filtering) {
       settings.mode = backendData.event_filtering.mode || 'whitelist';
       settings.moderationMode = backendData.event_filtering.moderation_mode || 'strict';
-      // Always ensure core kinds are included from backend data
+      // Handle kinds based on mode
       const backendKinds = backendData.event_filtering.kind_whitelist || [];
-      settings.kinds = ensureCoreKinds(backendKinds);
+      
+      if (settings.mode === 'blacklist') {
+        // In blacklist mode: backend sends allowed kinds, we need to calculate blocked kinds
+        const allPossibleKinds = getAllPossibleKinds();
+        const blockedKinds = allPossibleKinds.filter(kind => !backendKinds.includes(kind));
+        // Only show non-core kinds as blocked (core kinds can't be blocked)
+        settings.kinds = blockedKinds.filter(kind => !isCoreKind(kind));
+      } else {
+        // In whitelist mode: backend sends allowed kinds directly
+        settings.kinds = ensureCoreKinds(backendKinds);
+      }
 
       // Extract mime types and file sizes from actual backend format
       const mediaDefinitions = backendData.event_filtering.media_definitions || {};
@@ -166,7 +186,9 @@ const useRelaySettings = () => {
         event_filtering: {
           mode: settings.mode,
           moderation_mode: settings.moderationMode,
-          kind_whitelist: ensureCoreKinds(settings.kinds), // Always include core kinds
+          kind_whitelist: settings.mode === 'blacklist' 
+            ? calculateInverseKinds(settings.kinds) // For blacklist: send inverse (all kinds except blocked ones)
+            : ensureCoreKinds(settings.kinds), // For whitelist: send selected kinds directly
           media_definitions: mediaDefinitions,
           dynamic_kinds: {
             enabled: false,