Scaffold admin relays page

src/features/admin/nostr-relays.tsx

@@ -0,0 +1,42 @@
+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 'soapbox/features/nostr-relays/components/relay-editor';
+
+const messages = defineMessages({
+  title: { id: 'column.admin.nostr_relays', defaultMessage: 'Relays' },
+});
+
+const AdminNostrRelays: React.FC = () => {
+  const intl = useIntl();
+
+  const [relays, setRelays] = useState<RelayData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+  };
+
+  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 AdminNostrRelays;

src/features/ui/index.tsx

@@ -142,6 +142,7 @@ import {
   Bech32Redirect,
   Relays,
   Rules,
+  AdminNostrRelays,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -334,6 +335,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/soapbox/admin/users' staffOnly page={AdminPage} component={UserIndex} content={children} exact />
       <WrappedRoute path='/soapbox/admin/theme' staffOnly page={AdminPage} component={ThemeEditor} content={children} exact />
       <WrappedRoute path='/soapbox/admin/relays' staffOnly page={AdminPage} component={Relays} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/nostr/relays' staffOnly page={AdminPage} component={AdminNostrRelays} content={children} exact />
       {features.adminAnnouncements && <WrappedRoute path='/soapbox/admin/announcements' staffOnly page={AdminPage} component={Announcements} content={children} exact />}
       {features.domains && <WrappedRoute path='/soapbox/admin/domains' staffOnly page={AdminPage} component={Domains} content={children} exact />}
       {features.adminRules && <WrappedRoute path='/soapbox/admin/rules' staffOnly page={AdminPage} component={Rules} content={children} exact />}

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

@@ -175,3 +175,4 @@ export const Bech32Redirect = lazy(() => import('soapbox/features/nostr/Bech32Re
 export const Relays = lazy(() => import('soapbox/features/admin/relays'));
 export const Rules = lazy(() => import('soapbox/features/admin/rules'));
 export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
+export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));