Add basic Nostr relay editor UI

src/features/nostr-relays/components/relay-editor.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { HStack, Input } from 'soapbox/components/ui';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import { useInstance } from 'soapbox/hooks';
+
+interface IRelayEditor {
+  relays: RelayData[];
+  setRelays: (relays: RelayData[]) => void;
+}
+
+const RelayEditor: React.FC<IRelayEditor> = ({ relays, setRelays }) => {
+  const handleAddRelay = (): void => {
+    setRelays([...relays, { url: '' }]);
+  };
+
+  const handleRemoveRelay = (i: number): void => {
+    const newRelays = [...relays];
+    newRelays.splice(i, 1);
+    setRelays(newRelays);
+  };
+
+  return (
+    <Streamfield
+      values={relays}
+      onChange={setRelays}
+      component={RelayField}
+      onAddItem={handleAddRelay}
+      onRemoveItem={handleRemoveRelay}
+    />
+  );
+};
+
+interface RelayData {
+  url: string;
+  marker?: 'read' | 'write';
+}
+
+const RelayField: StreamfieldComponent<RelayData> = ({ value, onChange }) => {
+  const instance = useInstance();
+
+  const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange({ ...value, [key]: e.currentTarget.value });
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-2/5 grow'
+        value={value.url}
+        onChange={handleChange('url')}
+        placeholder={instance.nostr?.relay ?? `wss://${instance.domain}/relay`}
+      />
+    </HStack>
+  );
+};
+
+export default RelayEditor;
+
+export type { RelayData };

src/features/nostr-relays/index.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
+
+import RelayEditor, { RelayData } from './components/relay-editor';
+
+const messages = defineMessages({
+  title: { id: 'nostr_relays.title', defaultMessage: 'Relays' },
+});
+
+const NostrRelays = () => {
+  const intl = useIntl();
+
+  const [relays, setRelays] = useState<RelayData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleSubmit = (): void => {
+    setIsLoading(true);
+    // Save relays
+    setIsLoading(false);
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <Form onSubmit={handleSubmit}>
+        <Stack space={4}>
+          <RelayEditor relays={relays} setRelays={setRelays} />
+
+          <FormActions>
+            <Button to='/settings' theme='tertiary'>
+              <FormattedMessage id='common.cancel' defaultMessage='Cancel' />
+            </Button>
+
+            <Button theme='primary' type='submit' disabled={isLoading}>
+              <FormattedMessage id='edit_profile.save' defaultMessage='Save' />
+            </Button>
+          </FormActions>
+        </Stack>
+      </Form>
+    </Column>
+  );
+};
+
+export default NostrRelays;

src/features/ui/index.tsx

@@ -139,6 +139,7 @@ import {
   BookmarkFolders,
   EditIdentity,
   Domains,
+  NostrRelays,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -313,6 +314,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.accountAliases && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
       {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}
       {features.backups && <WrappedRoute path='/settings/backups' page={DefaultPage} component={Backups} content={children} />}
+      <WrappedRoute path='/settings/relays' page={DefaultPage} component={NostrRelays} content={children} />
       <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />
       <WrappedRoute path='/settings/password' page={DefaultPage} component={EditPassword} content={children} />
       <WrappedRoute path='/settings/account' page={DefaultPage} component={DeleteAccount} content={children} />

src/features/ui/util/async-components.ts

@@ -170,3 +170,4 @@ export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/
 export const EditIdentity = lazy(() => import('soapbox/features/edit-identity'));
 export const Domains = lazy(() => import('soapbox/features/admin/domains'));
 export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal'));
+export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays'));