Fix dynamic kinds handling in blacklist mode

- Properly include dynamic kinds in backend whitelist calculation
- Separate predefined vs dynamic kinds in reconciliation logic
- Fix kind formatting in AddKindForm
- Improve UI labels for better UX
- Show dynamic kinds in both whitelist and blacklist modes

Author: Maphikza

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

@@ -14,23 +14,21 @@ export const AddKindForm: React.FC<AddKindFormProps> = ({ onAddKind, mode }) =>
 
   const handleAddKind = () => {
     if (newKind) {
-      onAddKind(newKind);
+      // Ensure the kind is in the correct format
+      const formattedKind = newKind.startsWith('kind') ? newKind : `kind${newKind}`;
+      onAddKind(formattedKind);
       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>
+      <h3>{mode === 'blacklist' ? 'Add Custom Kind to Whitelist' : 'Add Custom Kind'}</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"
+          placeholder="Enter kind number (e.g., 12345)"
         />
         <BaseButton onClick={handleAddKind}>
           Add Kind

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

@@ -21,7 +21,7 @@ export const DynamicKindsList: React.FC<DynamicKindsListProps> = ({
   onRemoveKind,
   mode,
 }) => {
-  if (!dynamicKinds.length || mode === 'whitelist') {
+  if (!dynamicKinds.length) {
     return null;
   }
 
@@ -50,7 +50,7 @@ export const DynamicKindsList: React.FC<DynamicKindsListProps> = ({
               isActive={true}
               style={{ fontSize: '1rem', paddingRight: '.8rem', paddingLeft: '.8rem' }}
             >
-              {`kind` + kind}
+              {kind}
             </S.CheckboxLabel>
           </div>
           <BaseButton

src/hooks/useRelaySettings.ts

@@ -116,22 +116,35 @@ const useRelaySettings = () => {
       // Handle kinds based on mode
       const backendKinds = backendData.event_filtering.kind_whitelist || [];
 
+      // Get all stored dynamic kinds from localStorage
+      const allStoredDynamicKinds = JSON.parse(localStorage.getItem('dynamicKinds') || '[]');
+      
       if (settings.mode === 'blacklist') {
         // In blacklist mode: backend sends allowed kinds, we need to calculate blocked kinds
         const allPossibleKinds = getAllPossibleKinds();
         const backendKindsSet = new Set(backendKinds);
         const allKindsSet = new Set(allPossibleKinds);
 
-        // Calculate blocked kinds: all possible kinds minus backend allowed kinds
-        const blockedKinds = Array.from(allKindsSet).filter(kind => !backendKindsSet.has(kind));
+        // Calculate blocked predefined kinds: all possible kinds minus backend allowed kinds
+        const blockedPredefinedKinds = Array.from(allKindsSet).filter(kind => !backendKindsSet.has(kind));
         // Only show non-core kinds as blocked (core kinds can't be blocked)
-        settings.kinds = blockedKinds.filter(kind => !isCoreKind(kind));
+        settings.kinds = blockedPredefinedKinds.filter(kind => !isCoreKind(kind));
+        
+        // Calculate blocked dynamic kinds: stored dynamic kinds that are NOT in backend allowed kinds
+        settings.dynamicKinds = allStoredDynamicKinds.filter((kind: string) => !backendKindsSet.has(kind));
 
         console.log('[useRelaySettings] Blacklist mode - Backend allowed kinds:', backendKinds);
-        console.log('[useRelaySettings] Blacklist mode - Calculated blocked kinds:', settings.kinds);
+        console.log('[useRelaySettings] Blacklist mode - Calculated blocked predefined kinds:', settings.kinds);
+        console.log('[useRelaySettings] Blacklist mode - Calculated blocked dynamic kinds:', settings.dynamicKinds);
       } else {
         // In whitelist mode: backend sends allowed kinds directly
-        settings.kinds = ensureCoreKinds(backendKinds);
+        // Separate predefined kinds from dynamic kinds
+        const allPossibleKinds = getAllPossibleKinds();
+        const predefinedKinds = backendKinds.filter((kind: string) => allPossibleKinds.includes(kind));
+        const dynamicKinds = backendKinds.filter((kind: string) => !allPossibleKinds.includes(kind) && allStoredDynamicKinds.includes(kind));
+        
+        settings.kinds = ensureCoreKinds(predefinedKinds);
+        settings.dynamicKinds = dynamicKinds;
       }
 
       // Extract mime types and file sizes from actual backend format
@@ -242,9 +255,20 @@ const useRelaySettings = () => {
         event_filtering: {
           mode: settings.mode,
           moderation_mode: settings.moderationMode,
-          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
+          kind_whitelist: (() => {
+            if (settings.mode === 'blacklist') {
+              // For blacklist: get all predefined allowed kinds, then add unblocked dynamic kinds
+              const predefinedAllowed = calculateInverseKinds(settings.kinds);
+              // Get all stored dynamic kinds from localStorage
+              const allStoredDynamicKinds = JSON.parse(localStorage.getItem('dynamicKinds') || '[]');
+              // Add dynamic kinds that are NOT blocked (not in settings.dynamicKinds)
+              const allowedDynamicKinds = allStoredDynamicKinds.filter((kind: string) => !settings.dynamicKinds.includes(kind));
+              return [...predefinedAllowed, ...allowedDynamicKinds];
+            } else {
+              // For whitelist: send all selected kinds (including dynamic)
+              return ensureCoreKinds([...settings.kinds, ...settings.dynamicKinds]);
+            }
+          })(),
           media_definitions: mediaDefinitions,
           dynamic_kinds: {
             enabled: false,