Implement backend API migration and file size limit controls

- Migrate useRelaySettings and useChartData hooks to new backend API structure
- Add core kinds protection system to prevent removal of essential event types
- Implement file size limit controls for photos, videos, and audio
- Add FileSizeLimitInput component with proper theme integration
- Update MediaSection to include configurable file size inputs
- Create transformation functions for new backend settings format
- Support dynamic media types and chart data from backend configuration
- Add TypeScript interfaces for new API structure

Author: Maphikza

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

@@ -46,20 +46,26 @@ interface DesktopLayoutProps {
     photos: {
         selected: string[];
         isActive: boolean;
+        maxSizeMB: number;
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
+        onMaxSizeChange: (size: number) => void;
     };
     videos: {
         selected: string[];
         isActive: boolean;
+        maxSizeMB: number;
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
+        onMaxSizeChange: (size: number) => void;
     };
     audio: {
         selected: string[];
         isActive: boolean;
+        maxSizeMB: number;
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
+        onMaxSizeChange: (size: number) => void;
     };
     // Moderation section props
     moderationMode: string;

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

@@ -43,20 +43,26 @@ interface MobileLayoutProps {
     photos: {
         selected: string[];
         isActive: boolean;
+        maxSizeMB: number;
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
+        onMaxSizeChange: (size: number) => void;
     };
     videos: {
         selected: string[];
         isActive: boolean;
+        maxSizeMB: number;
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
+        onMaxSizeChange: (size: number) => void;
     };
     audio: {
         selected: string[];
         isActive: boolean;
+        maxSizeMB: number;
         onChange: (values: string[]) => void;
         onToggle: (checked: boolean) => void;
+        onMaxSizeChange: (size: number) => void;
     };
     // Moderation section props
     moderationMode: string;

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

@@ -5,26 +5,33 @@ import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
 import { CollapsibleSection } from '../../shared/CollapsibleSection/CollapsibleSection';
 import { MediaTypeList } from './components/MediaTypeList';
 import { MediaToggle } from './components/MediaToggle';
+import { FileSizeLimitInput } from './components/FileSizeLimitInput';
 
 export interface MediaSectionProps {
   mode: string;
   photos: {
     selected: string[];
     isActive: boolean;
+    maxSizeMB: number;
     onChange: (values: string[]) => void;
     onToggle: (checked: boolean) => void;
+    onMaxSizeChange: (size: number) => void;
   };
   videos: {
     selected: string[];
     isActive: boolean;
+    maxSizeMB: number;
     onChange: (values: string[]) => void;
     onToggle: (checked: boolean) => void;
+    onMaxSizeChange: (size: number) => void;
   };
   audio: {
     selected: string[];
     isActive: boolean;
+    maxSizeMB: number;
     onChange: (values: string[]) => void;
     onToggle: (checked: boolean) => void;
+    onMaxSizeChange: (size: number) => void;
   };
 }
 
@@ -87,6 +94,15 @@ export const MediaSection: React.FC<MediaSectionProps> = ({
             onChange={photos.onToggle}
             mode={mode}
           />
+          <FileSizeLimitInput
+            label="Maximum Photo Size"
+            value={photos.maxSizeMB}
+            onChange={photos.onMaxSizeChange}
+            min={1}
+            max={1000}
+            description="Set the maximum file size limit for photo uploads"
+            disabled={!photos.isActive}
+          />
           <MediaTypeList
             formats={imageFormats}
             selectedFormats={photos.selected}
@@ -104,6 +120,15 @@ export const MediaSection: React.FC<MediaSectionProps> = ({
             onChange={videos.onToggle}
             mode={mode}
           />
+          <FileSizeLimitInput
+            label="Maximum Video Size"
+            value={videos.maxSizeMB}
+            onChange={videos.onMaxSizeChange}
+            min={1}
+            max={5000}
+            description="Set the maximum file size limit for video uploads"
+            disabled={!videos.isActive}
+          />
           <MediaTypeList
             formats={videoFormats}
             selectedFormats={videos.selected}
@@ -121,6 +146,15 @@ export const MediaSection: React.FC<MediaSectionProps> = ({
             onChange={audio.onToggle}
             mode={mode}
           />
+          <FileSizeLimitInput
+            label="Maximum Audio Size"
+            value={audio.maxSizeMB}
+            onChange={audio.onMaxSizeChange}
+            min={1}
+            max={500}
+            description="Set the maximum file size limit for audio uploads"
+            disabled={!audio.isActive}
+          />
           <MediaTypeList
             formats={audioFormats}
             selectedFormats={audio.selected}

src/components/relay-settings/sections/MediaSection/components/FileSizeLimitInput.tsx

@@ -0,0 +1,107 @@
+// src/components/relay-settings/sections/MediaSection/components/FileSizeLimitInput.tsx
+
+import React from 'react';
+import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
+import { InputNumber, Space } from 'antd';
+import styled from 'styled-components';
+
+const StyledContainer = styled.div`
+  margin: 16px 0;
+  padding: 12px;
+  background: var(--secondary-background-color);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+`;
+
+const StyledLabel = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-main-color);
+  margin-bottom: 8px;
+`;
+
+const StyledDescription = styled.div`
+  font-size: 12px;
+  color: var(--text-light-color);
+  margin-bottom: 12px;
+`;
+
+const StyledInputWrapper = styled.div`
+  .ant-input-number {
+    width: 120px;
+    background: var(--background-color);
+    border-color: var(--border-color);
+    color: var(--text-main-color);
+    
+    &:hover {
+      border-color: var(--primary-color);
+    }
+    
+    &:focus {
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 2px var(--primary-color)20;
+    }
+  }
+  
+  .ant-input-number-input {
+    color: var(--text-main-color);
+  }
+`;
+
+const StyledUnit = styled.span`
+  font-size: 14px;
+  color: var(--text-light-color);
+  margin-left: 8px;
+`;
+
+export interface FileSizeLimitInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  description?: string;
+  disabled?: boolean;
+}
+
+export const FileSizeLimitInput: React.FC<FileSizeLimitInputProps> = ({
+  label,
+  value,
+  onChange,
+  min = 1,
+  max = 5000,
+  step = 1,
+  description,
+  disabled = false,
+}) => {
+  const handleChange = (newValue: number | null) => {
+    if (newValue !== null && newValue >= min && newValue <= max) {
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <StyledContainer>
+      <StyledLabel>{label}</StyledLabel>
+      {description && <StyledDescription>{description}</StyledDescription>}
+      <StyledInputWrapper>
+        <Space align="center">
+          <InputNumber
+            value={value}
+            onChange={handleChange}
+            min={min}
+            max={max}
+            step={step}
+            disabled={disabled}
+            placeholder="Enter size"
+            precision={0}
+          />
+          <StyledUnit>MB</StyledUnit>
+        </Space>
+      </StyledInputWrapper>
+    </StyledContainer>
+  );
+};
+
+export default FileSizeLimitInput;

src/constants/coreKinds.ts

@@ -0,0 +1,25 @@
+// Core kinds that are essential for relay operation and cannot be removed
+export const CORE_KINDS = [
+  'kind0',    // User profiles - Required for user management (CRITICAL - relay unusable without)
+  'kind22242', // Auth events - Required for NIP-42 authentication
+  'kind10010', // Mute list - Required for content filtering/mute words
+  'kind19841', // Storage manifest - Required for file tracking
+  'kind19842', // Storage metadata - Required for file info  
+  'kind19843', // Storage delete - Required for file cleanup
+];
+
+// Optional kinds that can be toggled (kind1 can be removed if needed)
+export const OPTIONAL_KINDS = [
+  'kind1',    // Text notes - Core functionality but can be disabled if needed
+];
+
+// Helper function to ensure core kinds are always included
+export const ensureCoreKinds = (kindList: string[]): string[] => {
+  const combined = [...kindList, ...CORE_KINDS];
+  return Array.from(new Set(combined));
+};
+
+// Helper function to check if a kind is protected
+export const isCoreKind = (kind: string): boolean => {
+  return CORE_KINDS.includes(kind);
+};

src/constants/relaySettings.ts

@@ -16,9 +16,13 @@ export type Settings = {
   isAudioActive: boolean;
   isFileStorageActive: boolean;
   moderationMode: string;    // "strict" or "passive"
+  // File size limits in MB
+  photoMaxSizeMB: number;
+  videoMaxSizeMB: number;
+  audioMaxSizeMB: number;
 }
 
-export type Category = 'kinds' | 'photos' | 'videos' | 'gitNestr' | 'audio' | 'dynamicKinds' | 'appBuckets' | 'dynamicAppBuckets';  
+export type Category = 'kinds' | 'photos' | 'videos' | 'gitNestr' | 'audio' | 'dynamicKinds' | 'appBuckets' | 'dynamicAppBuckets' | 'photoMaxSizeMB' | 'videoMaxSizeMB' | 'audioMaxSizeMB';  
 export const noteOptions = [
   { kind: 0, kindString: 'kind0', description: 'Metadata', category: 1 },
   { kind: 1, kindString: 'kind1', description: 'Text Note', category: 1 },
@@ -43,6 +47,12 @@ export const noteOptions = [
   { kind: 10011, kindString: 'kind10011', description: 'Issue Notes', category: 3 },
   { kind: 10022, kindString: 'kind10022', description: 'PR Notes', category: 3 },
   { kind: 9803, kindString: 'kind9803', description: 'Commit Notes', category: 3 },
+  // Core kinds essential for relay operation
+  { kind: 10010, kindString: 'kind10010', description: 'Content Filtering', category: 1 },
+  { kind: 22242, kindString: 'kind22242', description: 'NIP-42 Auth Events', category: 1 },
+  { kind: 19841, kindString: 'kind19841', description: 'Storage Manifest', category: 1 },
+  { kind: 19842, kindString: 'kind19842', description: 'Storage Metadata', category: 1 },
+  { kind: 19843, kindString: 'kind19843', description: 'Storage Delete', category: 1 },
 ];
 export const appBuckets = [
   { id: 'nostr', label: 'Nostr' },

src/hooks/useChartData.ts

@@ -5,6 +5,7 @@ import config from '@app/config/config';
 import { readToken } from '@app/services/localStorage.service';
 import { message } from 'antd';
 import { useHandleLogout } from './authUtils';
+import { FileCountResponse } from '@app/types/newSettings.types';
 
 interface ChartDataItem {
   value: number;
@@ -43,16 +44,52 @@ const useChartData = () => {
           throw new Error(`Network response was not ok (status: ${response.status})`);
         }
 
-        const data = await response.json();
+        const data: FileCountResponse = await response.json();
 
         // Process the data into chartDataItems using translated names
-        const newChartData: ChartDataItem[] = [
-          { value: data.kinds, name: t('categories.kinds') },
-          { value: data.photos, name: t('categories.photos') },
-          { value: data.videos, name: t('categories.videos') },
-          { value: data.audio, name: t('categories.audio') },
-          { value: data.misc, name: t('categories.misc') },
-        ];
+        // Handle dynamic media types while maintaining UI compatibility
+        const newChartData: ChartDataItem[] = [];
+        
+        // Always include kinds first
+        newChartData.push({ value: data.kinds, name: t('categories.kinds') });
+        
+        // Destructure to separate kinds from media types
+        const { kinds, ...mediaCounts } = data;
+        
+        // Map dynamic media types to chart data with fallback translations
+        Object.entries(mediaCounts).forEach(([mediaType, count]) => {
+          let translationKey = '';
+          let fallbackName = '';
+          
+          // Map new media types to existing translation keys for UI compatibility
+          switch (mediaType) {
+            case 'image':
+              translationKey = 'categories.photos';
+              fallbackName = 'Photos';
+              break;
+            case 'video':
+              translationKey = 'categories.videos';
+              fallbackName = 'Videos';
+              break;
+            case 'audio':
+              translationKey = 'categories.audio';
+              fallbackName = 'Audio';
+              break;
+            case 'git':
+              translationKey = 'categories.misc';
+              fallbackName = 'Git';
+              break;
+            default:
+              // For any new media types not yet in translations
+              translationKey = `categories.${mediaType}`;
+              fallbackName = mediaType.charAt(0).toUpperCase() + mediaType.slice(1);
+              break;
+          }
+          
+          // Use translation if available, otherwise use fallback
+          const displayName = t(translationKey, { defaultValue: fallbackName });
+          newChartData.push({ value: count, name: displayName });
+        });
 
         setChartData(newChartData);
       } catch (error) {