feat: add visual status indicators to relay settings components

- Add ✅/❌ indicators to event kinds to show selection status
- Add ✅/⚠️/❌ indicators to dynamic kinds based on registration and selection
- Add ✅/❌ indicators to media type extensions (photo, video, audio)
- Add ✅/❌ indicators to network protocol options
- Improve visual consistency across all relay settings sections
- Make selection status immediately visible for better UX

Author: Maphikza

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

@@ -51,7 +51,15 @@ export const DynamicKindsList: React.FC<DynamicKindsListProps> = ({
     >
       {dynamicKinds.map((kind) => {
         const isRegistered = isDynamicKindRegistered(kind);
-        const statusIcon = isRegistered ? '✅' : (allowUnregisteredKinds ? '⚠️' : '🚫');
+        const isSelected = selectedDynamicKinds.includes(kind);
+        
+        // Show status based on registration and selection
+        let statusIcon;
+        if (isSelected) {
+          statusIcon = isRegistered ? '✅' : '⚠️'; // Selected: green check for registered, warning for unregistered
+        } else {
+          statusIcon = '❌'; // Not selected: red X
+        }
 
         return (
           <div

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

@@ -43,9 +43,20 @@ export const KindsList: React.FC<KindsListProps> = ({
           <div className="custom-checkbox-group grid-checkbox-group large-label">
             {group.notes.map((note) => {
               const isSelected = selectedKinds.includes(note.kindString);
+              const statusIcon = isSelected ? '✅' : '❌';
 
               return (
-                <div className="checkbox-container" style={{ paddingLeft: '1rem' }} key={note.kindString}>
+                <div 
+                  className="checkbox-container" 
+                  style={{ 
+                    paddingLeft: '1rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.5rem'
+                  }} 
+                  key={note.kindString}
+                >
+                  <span style={{ fontSize: '1.2em', minWidth: '1.5rem' }}>{statusIcon}</span>
                   <BaseCheckbox
                     value={note.kindString}
                     disabled={!isKindsActive}

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

@@ -26,19 +26,27 @@ export const MediaTypeList: React.FC<MediaTypeListProps> = ({
 }) => {
   const theme = useAppSelector((state) => state.theme.theme);
 
-  const options = formats.map((format) => ({
-    label: (
-      <S.CheckboxLabel
-        style={{
-          color: themeObject[theme].textMain
-        }}
-        isActive={true}
-      >
-        {format.ext.toUpperCase()}
-      </S.CheckboxLabel>
-    ),
-    value: format.mime
-  }));
+  const options = formats.map((format) => {
+    const isSelected = selectedFormats.includes(format.mime);
+    const statusIcon = isSelected ? '✅' : '❌';
+    
+    return {
+      label: (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <span style={{ fontSize: '1.2em', minWidth: '1.5rem' }}>{statusIcon}</span>
+          <S.CheckboxLabel
+            style={{
+              color: themeObject[theme].textMain
+            }}
+            isActive={true}
+          >
+            {format.ext.toUpperCase()}
+          </S.CheckboxLabel>
+        </div>
+      ),
+      value: format.mime
+    };
+  });
 
   return (
     <BaseCheckbox.Group

src/components/relay-settings/sections/NetworkSection/components/ProtocolSelect.tsx

@@ -23,8 +23,28 @@ export const ProtocolSelect: React.FC<ProtocolSelectProps> = ({
       </S.LabelSpan>
       <Checkbox.Group
         options={[
-          { label: 'WebSocket', value: 'WebSocket', style: { fontSize: '.85rem' } },
-          { label: 'Libp2p QUIC', value: 'QUIC', style: { fontSize: '.85rem' } },
+          { 
+            label: (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <span style={{ fontSize: '1.2em', minWidth: '1.5rem' }}>
+                  {selectedProtocols.includes('WebSocket') ? '✅' : '❌'}
+                </span>
+                <span style={{ fontSize: '.85rem' }}>WebSocket</span>
+              </div>
+            ), 
+            value: 'WebSocket' 
+          },
+          { 
+            label: (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <span style={{ fontSize: '1.2em', minWidth: '1.5rem' }}>
+                  {selectedProtocols.includes('QUIC') ? '✅' : '❌'}
+                </span>
+                <span style={{ fontSize: '.85rem' }}>Libp2p QUIC</span>
+              </div>
+            ), 
+            value: 'QUIC' 
+          },
         ]}
         value={selectedProtocols}
         className="custom-checkbox-group"