embed screen style adjustments (#4063)

* restyle and relayout embed screen to account for smaller screen displays.
- address https://github.com/owncast/owncast/issues/3683 to address overflow issues
- address https://github.com/owncast/owncast/issues/4051 to move the name of the stream

* Javascript formatting autofixes

* clean up; restore package lock

* accommodate cases when there's no follow option; put follow form on one line, but wrap if need

* clean up

* separate out follow form into separate standalone component to be used in multiple places

* improve follow error styling; rm defaultProps for Modal to get rid of warning

* improve styling of follow form and components for legibility

* prettyify scss

* prettyify scss again

* one more time

* prettify ant file

* simplify layout, center everything

* just use gap

* tweak and lint

* lint, again

---------

Co-authored-by: Owncast <owncast@owncast.online>

web/components/modals/FollowModal/FollowForm.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable react/no-unescaped-entities */
+import { Input, Button, Alert, Spin, Space } from 'antd';
+import { FC, useState } from 'react';
+import styles from './FollowModal.module.scss';
+import { isValidFediverseAccount } from '../../../utils/validators';
+
+const ENDPOINT = '/api/remotefollow';
+
+export type FollowFormProps = {
+  handleClose?: () => void;
+};
+
+export const FollowForm: FC<FollowFormProps> = ({ handleClose }: FollowFormProps) => {
+  const [remoteAccount, setRemoteAccount] = useState(null);
+  const [valid, setValid] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const handleAccountChange = a => {
+    setRemoteAccount(a);
+    if (isValidFediverseAccount(a)) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+  };
+
+  const joinButtonPressed = () => {
+    window.open('https://owncast.online/join-fediverse', '_blank');
+  };
+
+  const remoteFollowButtonPressed = async () => {
+    if (!valid) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const sanitizedAccount = remoteAccount.replace(/^@+/, '');
+      const request = { account: sanitizedAccount };
+      const rawResponse = await fetch(ENDPOINT, {
+        method: 'POST',
+        body: JSON.stringify(request),
+      });
+      const result = await rawResponse.json();
+
+      if (result.redirectUrl) {
+        window.open(result.redirectUrl, '_blank');
+        handleClose();
+      }
+      if (!result.success) {
+        setErrorMessage(result.message);
+        setLoading(false);
+        return;
+      }
+      if (!result.redirectUrl) {
+        setErrorMessage('Unable to follow.');
+        setLoading(false);
+        return;
+      }
+    } catch (e) {
+      setErrorMessage(e.message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Spin spinning={loading}>
+      {errorMessage && (
+        <Alert
+          message="Follow Error"
+          description={errorMessage}
+          type="error"
+          closable
+          className={styles.errorAlert}
+        />
+      )}
+
+      <div className={styles.inputContainer}>
+        <div className={styles.instructions}>Enter your username @server to follow</div>
+        <Input
+          value={remoteAccount}
+          size="large"
+          onChange={e => handleAccountChange(e.target.value)}
+          placeholder="Your fediverse account @account@server"
+          defaultValue={remoteAccount}
+        />
+        <div className={styles.footer}>
+          You'll be redirected to your Fediverse server and asked to confirm the action.
+        </div>
+      </div>
+      <Space className={styles.buttons}>
+        <Button onClick={joinButtonPressed} type="text">
+          Join the Fediverse
+        </Button>
+        <Button disabled={!valid} type="primary" onClick={remoteFollowButtonPressed}>
+          Follow
+        </Button>
+      </Space>
+    </Spin>
+  );
+};