Skip to content

Commit 04fbb12

Browse files
MaphikzaMaphikza
committed
feat: migrate from blacklist/whitelist mode to allow unregistered kinds
- Remove mode selector UI and replace with 'Allow Unregistered Kind Numbers' toggle - Add visual indicators for kind status (✅/❌/⚠️/🚫) - Update type definitions to support new backend structure - Refactor useRelaySettings hook to handle new fields - Update all components to work with new structure - Add warning display when allowing unregistered kinds - Add translation keys for new UI text - Remove all mode-related logic from components
1 parent b5a0c33 commit 04fbb12

15 files changed

Lines changed: 264 additions & 338 deletions

File tree

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

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ import { ModerationSection } from '@app/components/relay-settings/sections/Moder
1515
import { useTranslation } from 'react-i18next';
1616

1717
interface DesktopLayoutProps {
18-
mode: string;
19-
onModeChange: (checked: boolean) => void;
18+
allowUnregisteredKinds: boolean;
19+
registeredKinds: number[];
20+
onAllowUnregisteredKindsChange: (allowed: boolean) => void;
2021
onSaveClick: () => void;
2122
loadings: boolean[];
2223
// Network section props
@@ -65,8 +66,9 @@ interface DesktopLayoutProps {
6566
}
6667

6768
export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
68-
mode,
69-
onModeChange,
69+
allowUnregisteredKinds,
70+
registeredKinds,
71+
onAllowUnregisteredKindsChange,
7072
onSaveClick,
7173
loadings,
7274
// Network props
@@ -122,26 +124,34 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
122124
<BaseCol xs={24}>
123125
<S.SwitchContainer
124126
style={{
125-
width: '11rem',
127+
width: '20rem',
126128
display: 'grid',
127129
paddingTop: '3rem',
128130
gap: '.5rem',
129-
gridTemplateColumns: '1fr 3fr',
131+
gridTemplateColumns: '2fr 1fr',
130132
marginBottom: '1.5rem',
131133
}}
132134
>
133-
<S.LabelSpan>{t('common.serverSetting')}</S.LabelSpan>
135+
<S.LabelSpan>
136+
{t('common.allowUnregisteredKinds')}
137+
{allowUnregisteredKinds && (
138+
<span style={{ color: '#ff4d4f', fontSize: '0.9em', display: 'block', marginTop: '0.5rem' }}>
139+
⚠️ {t('common.allowUnregisteredKindsWarning')}
140+
</span>
141+
)}
142+
</S.LabelSpan>
134143
<S.LargeSwitch
135-
className="modeSwitch"
136-
checkedChildren="Whitelist"
137-
unCheckedChildren="Blacklist"
138-
checked={mode === 'whitelist'}
139-
onChange={onModeChange}
144+
className="allowUnregisteredSwitch"
145+
checkedChildren="ON"
146+
unCheckedChildren="OFF"
147+
checked={allowUnregisteredKinds}
148+
onChange={onAllowUnregisteredKindsChange}
140149
/>
141150
</S.SwitchContainer>
142151

143152
<KindsSection
144-
mode={mode}
153+
allowUnregisteredKinds={allowUnregisteredKinds}
154+
registeredKinds={registeredKinds}
145155
isKindsActive={isKindsActive}
146156
selectedKinds={selectedKinds}
147157
dynamicKinds={dynamicKinds}
@@ -154,7 +164,6 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
154164
/>
155165

156166
<MediaSection
157-
mode={mode}
158167
photos={photos}
159168
videos={videos}
160169
audio={audio}

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

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import { ModerationSection } from '@app/components/relay-settings/sections/Moder
1212
import { useTranslation } from 'react-i18next';
1313

1414
interface MobileLayoutProps {
15-
mode: string;
16-
onModeChange: (checked: boolean) => void;
15+
allowUnregisteredKinds: boolean;
16+
registeredKinds: number[];
17+
onAllowUnregisteredKindsChange: (allowed: boolean) => void;
1718
onSaveClick: () => void;
1819
loadings: boolean[];
1920
// Network section props
@@ -62,8 +63,9 @@ interface MobileLayoutProps {
6263
}
6364

6465
export const MobileLayout: React.FC<MobileLayoutProps> = ({
65-
mode,
66-
onModeChange,
66+
allowUnregisteredKinds,
67+
registeredKinds,
68+
onAllowUnregisteredKindsChange,
6769
onSaveClick,
6870
loadings,
6971
// Network props
@@ -115,23 +117,31 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
115117
style={{
116118
display: 'grid',
117119
paddingTop: '2rem',
118-
gridTemplateColumns: '5rem 6.5rem',
120+
gridTemplateColumns: '8rem 6.5rem',
119121
marginBottom: '1.5rem',
120122
marginTop: '1rem',
121123
}}
122124
>
123-
<S.LabelSpan>{t('common.serverSetting')}</S.LabelSpan>
124-
<S.LargeSwitch
125-
className="modeSwitch"
126-
checkedChildren="Whitelist"
127-
unCheckedChildren="Blacklist"
128-
checked={mode === 'whitelist'}
129-
onChange={onModeChange}
130-
/>
125+
<S.LabelSpan>
126+
{t('common.allowUnregisteredKinds')}
127+
{allowUnregisteredKinds && (
128+
<span style={{ color: '#ff4d4f', fontSize: '0.8em', display: 'block', marginTop: '0.3rem' }}>
129+
⚠️ {t('common.allowUnregisteredKindsWarning')}
130+
</span>
131+
)}
132+
</S.LabelSpan>
133+
<S.LargeSwitch
134+
className="allowUnregisteredSwitch"
135+
checkedChildren="ON"
136+
unCheckedChildren="OFF"
137+
checked={allowUnregisteredKinds}
138+
onChange={onAllowUnregisteredKindsChange}
139+
/>
131140
</S.SwitchContainer>
132141

133142
<KindsSection
134-
mode={mode}
143+
allowUnregisteredKinds={allowUnregisteredKinds}
144+
registeredKinds={registeredKinds}
135145
isKindsActive={isKindsActive}
136146
selectedKinds={selectedKinds}
137147
dynamicKinds={dynamicKinds}
@@ -144,7 +154,6 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
144154
/>
145155

146156
<MediaSection
147-
mode={mode}
148157
photos={photos}
149158
videos={videos}
150159
audio={audio}

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

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { AddKindForm } from './components/AddKindForm';
99
import { DynamicKindsList } from './components/DynamicKindsList';
1010

1111
export interface KindsSectionProps {
12-
mode: string;
12+
allowUnregisteredKinds: boolean;
13+
registeredKinds: number[];
1314
isKindsActive: boolean;
1415
selectedKinds: string[];
1516
dynamicKinds: string[];
@@ -22,7 +23,8 @@ export interface KindsSectionProps {
2223
}
2324

2425
export const KindsSection: React.FC<KindsSectionProps> = ({
25-
mode,
26+
allowUnregisteredKinds,
27+
registeredKinds,
2628
isKindsActive,
2729
selectedKinds,
2830
dynamicKinds,
@@ -33,37 +35,36 @@ export const KindsSection: React.FC<KindsSectionProps> = ({
3335
onAddKind,
3436
onRemoveKind,
3537
}) => {
36-
const header = mode !== 'whitelist' ? 'Blacklisted Kind Numbers' : 'Kind Numbers';
38+
const header = 'Event Kinds Configuration';
3739

3840
return (
3941
<CollapsibleSection header={header}>
4042
<S.Card>
4143
<div className="flex-col w-full">
42-
{mode !== 'blacklist' && mode !== '' && (
43-
<div className="switch-container">
44-
<BaseSwitch
45-
checkedChildren="ON"
46-
unCheckedChildren="OFF"
47-
checked={isKindsActive}
48-
onChange={() => onKindsActiveChange(!isKindsActive)}
49-
/>
50-
</div>
51-
)}
44+
<div className="switch-container">
45+
<BaseSwitch
46+
checkedChildren="ON"
47+
unCheckedChildren="OFF"
48+
checked={isKindsActive}
49+
onChange={() => onKindsActiveChange(!isKindsActive)}
50+
/>
51+
</div>
5252

5353
<KindsList
54-
mode={mode}
54+
allowUnregisteredKinds={allowUnregisteredKinds}
55+
registeredKinds={registeredKinds}
5556
selectedKinds={selectedKinds}
5657
isKindsActive={isKindsActive}
5758
onKindsChange={onKindsChange}
5859
/>
5960

60-
<AddKindForm
61-
mode={mode}
61+
<AddKindForm
6262
onAddKind={onAddKind}
6363
/>
6464

6565
<DynamicKindsList
66-
mode={mode}
66+
allowUnregisteredKinds={allowUnregisteredKinds}
67+
registeredKinds={registeredKinds}
6768
dynamicKinds={dynamicKinds}
6869
selectedDynamicKinds={selectedDynamicKinds}
6970
onDynamicKindsChange={onDynamicKindsChange}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
66

77
interface AddKindFormProps {
88
onAddKind: (kind: string) => void;
9-
mode: string;
109
}
1110

12-
export const AddKindForm: React.FC<AddKindFormProps> = ({ onAddKind, mode }) => {
11+
export const AddKindForm: React.FC<AddKindFormProps> = ({ onAddKind }) => {
1312
const [newKind, setNewKind] = useState('');
1413

1514
const handleAddKind = () => {
@@ -23,7 +22,7 @@ export const AddKindForm: React.FC<AddKindFormProps> = ({ onAddKind, mode }) =>
2322

2423
return (
2524
<div style={{ padding: '1.5rem 0rem 0rem 0rem', display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
26-
<h3>{mode === 'blacklist' ? 'Add Custom Kind to Whitelist' : 'Add Custom Kind'}</h3>
25+
<h3>Add Custom Kind</h3>
2726
<div style={{ display: 'flex' }} className="custom-checkbox-group grid-checkbox-group large-label">
2827
<Input
2928
value={newKind}

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

Lines changed: 51 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,21 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
77
import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
88

99
interface DynamicKindsListProps {
10+
allowUnregisteredKinds: boolean;
11+
registeredKinds: number[];
1012
dynamicKinds: string[];
1113
selectedDynamicKinds: string[];
1214
onDynamicKindsChange: (values: string[]) => void;
1315
onRemoveKind: (kind: string) => void;
14-
mode: string;
1516
}
1617

1718
export const DynamicKindsList: React.FC<DynamicKindsListProps> = ({
19+
allowUnregisteredKinds,
20+
registeredKinds,
1821
dynamicKinds,
1922
selectedDynamicKinds,
2023
onDynamicKindsChange,
2124
onRemoveKind,
22-
mode,
2325
}) => {
2426
if (!dynamicKinds.length) {
2527
return null;
@@ -29,38 +31,61 @@ export const DynamicKindsList: React.FC<DynamicKindsListProps> = ({
2931
onDynamicKindsChange(checkedValues as string[]);
3032
};
3133

34+
// Helper to extract kind number from string like "kind12345"
35+
const getKindNumber = (kindStr: string): number => {
36+
return parseInt(kindStr.replace('kind', ''), 10);
37+
};
38+
39+
// Check if a dynamic kind is registered
40+
const isDynamicKindRegistered = (kindStr: string): boolean => {
41+
const kindNumber = getKindNumber(kindStr);
42+
return registeredKinds.includes(kindNumber);
43+
};
44+
3245
return (
3346
<BaseCheckbox.Group
3447
style={{ paddingLeft: '1rem' }}
35-
className={`custom-checkbox-group grid-checkbox-group large-label ${dynamicKinds.length ? 'dynamic-group ' : ''}${mode === 'blacklist' ? 'blacklist-mode-active ' : ''}`}
48+
className={`custom-checkbox-group grid-checkbox-group large-label ${dynamicKinds.length ? 'dynamic-group ' : ''}`}
3649
value={selectedDynamicKinds}
3750
onChange={handleChange}
3851
>
39-
{dynamicKinds.map((kind) => (
40-
<div
41-
style={{ display: 'flex', flexDirection: 'row', gap: '.5rem', alignItems: 'center' }}
42-
key={kind}
43-
>
44-
<div className="checkbox-container">
45-
<BaseCheckbox
46-
className={mode === 'blacklist' ? 'blacklist-mode-active' : ''}
47-
value={kind}
48-
/>
49-
<S.CheckboxLabel
50-
isActive={true}
51-
style={{ fontSize: '1rem', paddingRight: '.8rem', paddingLeft: '.8rem' }}
52+
{dynamicKinds.map((kind) => {
53+
const isRegistered = isDynamicKindRegistered(kind);
54+
const statusIcon = isRegistered ? '✅' : (allowUnregisteredKinds ? '⚠️' : '🚫');
55+
56+
return (
57+
<div
58+
style={{ display: 'flex', flexDirection: 'row', gap: '.5rem', alignItems: 'center' }}
59+
key={kind}
60+
>
61+
<span style={{ fontSize: '1.2em' }}>{statusIcon}</span>
62+
<div className="checkbox-container">
63+
<BaseCheckbox
64+
value={kind}
65+
disabled={!isRegistered && !allowUnregisteredKinds}
66+
/>
67+
<S.CheckboxLabel
68+
isActive={isRegistered || allowUnregisteredKinds}
69+
style={{
70+
fontSize: '1rem',
71+
paddingRight: '.8rem',
72+
paddingLeft: '.8rem',
73+
opacity: (isRegistered || allowUnregisteredKinds) ? 1 : 0.6
74+
}}
75+
>
76+
{kind}
77+
{!isRegistered && <em> (Unregistered)</em>}
78+
</S.CheckboxLabel>
79+
</div>
80+
<BaseButton
81+
style={{ height: '2rem', width: '5rem', marginRight: '1rem' }}
82+
onClick={() => onRemoveKind(kind)}
5283
>
53-
{kind}
54-
</S.CheckboxLabel>
84+
Remove
85+
</BaseButton>
5586
</div>
56-
<BaseButton
57-
style={{ height: '2rem', width: '5rem', marginRight: '1rem' }}
58-
onClick={() => onRemoveKind(kind)}
59-
>
60-
Remove
61-
</BaseButton>
62-
</div>
63-
))}
87+
);
88+
})}
6489
</BaseCheckbox.Group>
6590
);
6691
};

0 commit comments

Comments
 (0)