- start a README to document config admin later

- update constants
- add instanceUrl field to public details; if empty, then turn off yp.enabled.
- edit YP/Directory settings; hide if instanceUrl is empty
- update toggleswitch logic

web/pages/components/config/edit-directory.tsx

@@ -0,0 +1,60 @@
+// rename to "directory"
+import React, { useContext, useEffect } from 'react';
+import { Typography, Form } from 'antd';
+
+import ToggleSwitch from './form-toggleswitch';
+
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+const { Title } = Typography;
+
+export default function EditYPDetails() {
+  const [form] = Form.useForm();
+
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+
+  const { yp, instanceDetails } = serverConfig;
+  const { nsfw } = instanceDetails;
+  const { enabled, instanceUrl } = yp;
+
+  const initialValues = {
+    ...yp,
+    enabled,
+    nsfw,
+  };
+
+  const hasInstanceUrl = instanceUrl !== '';
+  
+  useEffect(() => {
+    form.setFieldsValue(initialValues);
+  }, [yp]);
+
+  const extraProps = {
+    initialValues,
+    disabled: !hasInstanceUrl,
+  };
+
+  // TODO: DISABLE THIS SECTION UNTIL instanceURL is populated
+  return (
+    <div className="config-directory-details-form">
+      <Title level={3}>Owncast Directory Settings</Title>
+      
+      <p>Would you like to appear in the <a href="https://directory.owncast.online" target="_blank" rel="noreferrer"><strong>Owncast Directory</strong></a>?</p>
+
+      <p><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
+
+      <div className="config-yp-container">
+        <Form
+          form={form}
+          layout="vertical"
+        >
+          <ToggleSwitch fieldName="enabled" configPath="yp" {...extraProps}/>
+          <ToggleSwitch fieldName="nsfw" configPath="instanceDetails" {...extraProps} />
+        </Form>
+      </div>      
+    </div>
+  ); 
+}
+
+