Reorganize admin components to help bundling

web/components/admin/BanUserButton.tsx

@@ -1,8 +1,8 @@
 import { Modal, Button } from 'antd';
 import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
 import { FC } from 'react';
-import { USER_ENABLED_TOGGLE, fetchData } from '../utils/apis';
-import { User } from '../types/chat';
+import { USER_ENABLED_TOGGLE, fetchData } from '../../utils/apis';
+import { User } from '../../types/chat';
 
 export type BanUserButtonProps = {
   user: User;

web/components/admin/BannedIPsTable.tsx

@@ -3,8 +3,8 @@ import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import React, { FC } from 'react';
 import { StopTwoTone } from '@ant-design/icons';
-import { User } from '../types/chat';
-import { BANNED_IP_REMOVE, fetchData } from '../utils/apis';
+import { User } from '../../types/chat';
+import { BANNED_IP_REMOVE, fetchData } from '../../utils/apis';
 
 function formatDisplayDate(date: string | Date) {
   return format(new Date(date), 'MMM d H:mma');

web/components/admin/ClientTable.tsx

@@ -4,10 +4,10 @@ import { ColumnsType } from 'antd/es/table';
 import { SearchOutlined } from '@ant-design/icons';
 import { formatDistanceToNow } from 'date-fns';
 import { FC } from 'react';
-import { Client } from '../types/chat';
+import { Client } from '../../types/chat';
 import { UserPopover } from './UserPopover';
 import { BanUserButton } from './BanUserButton';
-import { formatUAstring } from '../utils/format';
+import { formatUAstring } from '../../utils/format';
 
 export type ClientTableProps = {
   data: Client[];

web/components/admin/ComposeFederatedPost.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useState } from 'react';
 
 import { Button, Input, Modal } from 'antd';
-import { STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
-import { fetchData, FEDERATION_MESSAGE_SEND } from '../utils/apis';
+import { STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
+import { fetchData, FEDERATION_MESSAGE_SEND } from '../../utils/apis';
 
 const { TextArea } = Input;
 

web/components/admin/CurrentVariantsTable.tsx

@@ -28,6 +28,7 @@ import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line import/prefer-default-export
 export const CurrentVariantsTable: FC = () => {
   const [displayModal, setDisplayModal] = useState(false);
   const [modalProcessing, setModalProcessing] = useState(false);

web/components/admin/EditCustomStyles.tsx

@@ -22,6 +22,7 @@ import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line import/prefer-default-export
 export const EditCustomStyles: FC = () => {
   const [content, setContent] = useState('/* Enter custom CSS here */');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);

web/components/admin/EditInstanceDetails2.tsx

@@ -22,7 +22,8 @@ const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
 
 const { Panel } = Collapse;
 
-export const EditInstanceDetails = () => {
+// eslint-disable-next-line react/function-component-definition
+export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
   const { setMessage } = useContext(AlertMessageContext);
@@ -161,4 +162,4 @@ export const EditInstanceDetails = () => {
       </Collapse>
     </div>
   );
-};
+}

web/components/admin/EditLogo.tsx

@@ -25,6 +25,7 @@ import {
   readableBytes,
 } from '../../utils/images';
 
+// eslint-disable-next-line import/prefer-default-export
 export const EditLogo: FC = () => {
   const [logoUrl, setlogoUrl] = useState(null);
   const [loading, setLoading] = useState(false);

web/components/admin/EditYPDetails.tsx

@@ -8,6 +8,7 @@ import { FIELD_PROPS_NSFW, FIELD_PROPS_YP } from '../../utils/config-constants';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line import/prefer-default-export
 export const EditYPDetails: FC = () => {
   const [formDataValues, setFormDataValues] = useState(null);
 

web/components/admin/MainLayout.tsx

@@ -20,19 +20,19 @@ import {
 
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
-import { upgradeVersionAvailable } from '../utils/apis';
-import { parseSecondsToDurationString } from '../utils/format';
+import { upgradeVersionAvailable } from '../../utils/apis';
+import { parseSecondsToDurationString } from '../../utils/format';
 
-import { OwncastLogo } from './common/OwncastLogo/OwncastLogo';
-import { ServerStatusContext } from '../utils/server-status-context';
-import { AlertMessageContext } from '../utils/alert-message-context';
+import { OwncastLogo } from '../common/OwncastLogo/OwncastLogo';
+import { ServerStatusContext } from '../../utils/server-status-context';
+import { AlertMessageContext } from '../../utils/alert-message-context';
 
-import { TextFieldWithSubmit } from './config/TextFieldWithSubmit';
-import { TEXTFIELD_PROPS_STREAM_TITLE } from '../utils/config-constants';
+import { TextFieldWithSubmit } from './TextFieldWithSubmit';
+import { TEXTFIELD_PROPS_STREAM_TITLE } from '../../utils/config-constants';
 import { ComposeFederatedPost } from './ComposeFederatedPost';
-import { UpdateArgs } from '../types/config-section';
+import { UpdateArgs } from '../../types/config-section';
 
-import FediverseIcon from '../assets/images/fediverse-black.png';
+import FediverseIcon from '../../assets/images/fediverse-black.png';
 
 // Lazy loaded components
 

web/components/admin/MessageVisiblityToggle.tsx

@@ -8,10 +8,9 @@ import {
   ExclamationCircleFilled,
 } from '@ant-design/icons';
 import dynamic from 'next/dynamic';
-import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../utils/apis';
-import { MessageType } from '../types/chat';
-import { OUTCOME_TIMEOUT } from '../pages/admin/chat/messages';
-import { isEmptyObject } from '../utils/format';
+import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
+import { MessageType } from '../../types/chat';
+import { isEmptyObject } from '../../utils/format';
 
 // Lazy loaded components
 
@@ -40,7 +39,7 @@ export const MessageVisiblityToggle: FC<MessageToggleProps> = ({
   const resetOutcome = () => {
     outcomeTimeout = setTimeout(() => {
       setOutcome(0);
-    }, OUTCOME_TIMEOUT);
+    }, 3000);
   };
 
   useEffect(() => () => {

web/components/admin/ModeratorUserButton.tsx

@@ -6,8 +6,8 @@ import {
   SafetyCertificateTwoTone,
 } from '@ant-design/icons';
 import { FC } from 'react';
-import { USER_SET_MODERATOR, fetchData } from '../utils/apis';
-import { User } from '../types/chat';
+import { USER_SET_MODERATOR, fetchData } from '../../utils/apis';
+import { User } from '../../types/chat';
 
 export type ModeratorUserButtonProps = {
   user: User;

web/components/admin/NewsFeed.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, FC } from 'react';
 import { Collapse, Typography, Skeleton } from 'antd';
 import format from 'date-fns/format';
 
-import { fetchExternalData } from '../utils/apis';
+import { fetchExternalData } from '../../utils/apis';
 
 const { Panel } = Collapse;
 const { Title, Link } = Typography;

web/components/admin/Offline.tsx

@@ -3,10 +3,10 @@ import { Card, Col, Row, Typography } from 'antd';
 import Link from 'next/link';
 import { FC, useContext } from 'react';
 import { LogTable } from './LogTable';
-import { OwncastLogo } from './common/OwncastLogo/OwncastLogo';
+import { OwncastLogo } from '../common/OwncastLogo/OwncastLogo';
 import { NewsFeed } from './NewsFeed';
-import { ConfigDetails } from '../types/config-section';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ConfigDetails } from '../../types/config-section';
+import { ServerStatusContext } from '../../utils/server-status-context';
 
 const { Paragraph, Text } = Typography;
 

web/components/admin/ResetYP.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../utils/input-statuses';
 import { FormStatusIndicator } from './FormStatusIndicator';
 
+// eslint-disable-next-line import/prefer-default-export
 export const ResetYP: FC = () => {
   const { setMessage } = useContext(AlertMessageContext);
 

web/components/admin/StreamHealthOverview.tsx

@@ -2,7 +2,7 @@ import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icon
 import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
 import Link from 'next/link';
 import React, { FC, useContext } from 'react';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
 
 export type StreamHealthOverviewProps = {
   showTroubleshootButton?: Boolean;

web/components/admin/UserPopover.tsx

@@ -10,9 +10,9 @@ import dynamic from 'next/dynamic';
 import { BanUserButton } from './BanUserButton';
 import { ModeratorUserButton } from './ModeratorUserButton';
 
-import { User, UserConnectionInfo } from '../types/chat';
+import { User, UserConnectionInfo } from '../../types/chat';
 import { formatDisplayDate } from './UserTable';
-import { formatUAstring } from '../utils/format';
+import { formatUAstring } from '../../utils/format';
 
 // Lazy loaded components
 

web/components/admin/UserTable.tsx

@@ -2,7 +2,7 @@ import { Table } from 'antd';
 import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import { FC } from 'react';
-import { User } from '../types/chat';
+import { User } from '../../types/chat';
 import { UserPopover } from './UserPopover';
 import { BanUserButton } from './BanUserButton';
 

web/components/admin/VideoLatency.tsx

@@ -34,6 +34,7 @@ const SLIDER_COMMENTS = {
   4: 'Highest latency, highest error tolerance',
 };
 
+// eslint-disable-next-line import/prefer-default-export
 export const VideoLatency: FC = () => {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [selectedOption, setSelectedOption] = useState(null);

web/components/admin/ViewerTable.tsx

@@ -3,8 +3,8 @@ import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import { formatDistanceToNow } from 'date-fns';
 import { FC } from 'react';
-import { User } from '../types/chat';
-import { formatUAstring } from '../utils/format';
+import { User } from '../../types/chat';
+import { formatUAstring } from '../../utils/format';
 
 export function formatDisplayDate(date: string | Date) {
   return format(new Date(date), 'MMM d H:mma');

web/components/admin/config/general/AppearanceConfig.tsx

@@ -3,17 +3,17 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Button, Col, Collapse, Row, Slider, Space } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import Title from 'antd/lib/typography/Title';
-import { EditCustomStyles } from '../../../../../components/config/EditCustomStyles';
-import s from '../appearance.module.scss';
-import { postConfigUpdateToAPI, RESET_TIMEOUT } from '../../../../../utils/config-constants';
+import { EditCustomStyles } from '../../EditCustomStyles';
+import s from './appearance.module.scss';
+import { postConfigUpdateToAPI, RESET_TIMEOUT } from '../../../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
+} from '../../../../utils/input-statuses';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Panel } = Collapse;
 
@@ -79,6 +79,7 @@ const allAvailableValues = [
   return obj;
 }, {});
 
+// eslint-disable-next-line react/function-component-definition
 function ColorPicker({
   value,
   name,
@@ -105,6 +106,7 @@ function ColorPicker({
     </Col>
   );
 }
+// eslint-disable-next-line react/function-component-definition
 export default function Appearance() {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig } = serverStatusData;

web/components/admin/config/general/EditInstanceDetails.tsx

@@ -4,8 +4,8 @@ import {
   TextFieldWithSubmit,
   TEXTFIELD_TYPE_TEXTAREA,
   TEXTFIELD_TYPE_URL,
-} from '../../../../../components/config/TextFieldWithSubmit';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+} from '../../TextFieldWithSubmit';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
   TEXTFIELD_PROPS_INSTANCE_URL,
@@ -16,13 +16,14 @@ import {
   FIELD_PROPS_YP,
   FIELD_PROPS_NSFW,
   FIELD_PROPS_HIDE_VIEWER_COUNT,
-} from '../../../../../utils/config-constants';
-import { UpdateArgs } from '../../../../../types/config-section';
-import { ToggleSwitch } from '../../../../../components/config/ToggleSwitch';
-import { EditLogo } from '../../../../../components/config/EditLogo';
+} from '../../../../utils/config-constants';
+import { UpdateArgs } from '../../../../types/config-section';
+import { ToggleSwitch } from '../../ToggleSwitch';
+import { EditLogo } from '../../EditLogo';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);

web/components/admin/config/general/EditInstanceTags.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import React, { useContext, useState, useEffect } from 'react';
 import { Typography, Tag } from 'antd';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   FIELD_PROPS_TAGS,
   RESET_TIMEOUT,
   postConfigUpdateToAPI,
-} from '../../../../../utils/config-constants';
-import { TextField } from '../../../../../components/config/TextField';
-import { UpdateArgs } from '../../../../../types/config-section';
+} from '../../../../utils/config-constants';
+import { TextField } from '../../TextField';
+import { UpdateArgs } from '../../../../types/config-section';
 import {
   createInputStatus,
   StatusState,
@@ -16,11 +16,12 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
   STATUS_WARNING,
-} from '../../../../../utils/input-statuses';
-import { TAG_COLOR } from '../../../../../components/config/EditValueArray';
+} from '../../../../utils/input-statuses';
+import { TAG_COLOR } from '../../EditValueArray';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditInstanceTags() {
   const [newTagInput, setNewTagInput] = useState<string>('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);

web/components/admin/config/general/EditPageContent.tsx

@@ -6,23 +6,24 @@ import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   API_CUSTOM_CONTENT,
-} from '../../../../../utils/config-constants';
+} from '../../../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_PROCESSING,
   STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
+} from '../../../../utils/input-statuses';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditPageContent() {
   const [content, setContent] = useState('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);

web/components/admin/config/general/EditSocialLinks.tsx

@@ -2,33 +2,30 @@ import React, { useState, useContext, useEffect } from 'react';
 import { Typography, Table, Button, Modal, Input } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { CaretDownOutlined, CaretUpOutlined, DeleteOutlined } from '@ant-design/icons';
-import { SocialDropdown } from '../../../../../components/config/SocialDropdown';
-import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../../utils/apis';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { SocialDropdown } from '../../SocialDropdown';
+import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   API_SOCIAL_HANDLES,
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   DEFAULT_SOCIAL_HANDLE,
   OTHER_SOCIAL_HANDLE_OPTION,
-} from '../../../../../utils/config-constants';
-import { SocialHandle, UpdateArgs } from '../../../../../types/config-section';
+} from '../../../../utils/config-constants';
+import { SocialHandle, UpdateArgs } from '../../../../types/config-section';
 import {
   isValidMatrixAccount,
   isValidAccount,
   isValidUrl,
   DEFAULT_TEXTFIELD_URL_PATTERN,
-} from '../../../../../utils/urls';
-import { TextField } from '../../../../../components/config/TextField';
-import {
-  createInputStatus,
-  STATUS_ERROR,
-  STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
+} from '../../../../utils/urls';
+import { TextField } from '../../TextField';
+import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditSocialLinks() {
   const [availableIconsList, setAvailableIconsList] = useState([]);
   const [currentSocialHandles, setCurrentSocialHandles] = useState([]);

web/components/admin/config/general/GeneralConfig.tsx

@@ -5,6 +5,7 @@ import EditInstanceTags from './EditInstanceTags';
 import EditSocialLinks from './EditSocialLinks';
 import EditPageContent from './EditPageContent';
 
+// eslint-disable-next-line react/function-component-definition
 export default function PublicFacingDetails() {
   return (
     <div className="config-public-details-page">

web/components/admin/config/server/EditStorage.tsx

@@ -1,27 +1,27 @@
 import { Button, Collapse } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useState, useEffect } from 'react';
-import { UpdateArgs } from '../../../../../types/config-section';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
-import { AlertMessageContext } from '../../../../../utils/alert-message-context';
+import { UpdateArgs } from '../../../../types/config-section';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
+import { AlertMessageContext } from '../../../../utils/alert-message-context';
 
 import {
   postConfigUpdateToAPI,
   API_S3_INFO,
   RESET_TIMEOUT,
   S3_TEXT_FIELDS_INFO,
-} from '../../../../../utils/config-constants';
+} from '../../../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_PROCESSING,
   STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { TextField } from '../../../../../components/config/TextField';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
-import { isValidUrl } from '../../../../../utils/urls';
-import { ToggleSwitch } from '../../../../../components/config/ToggleSwitch';
+} from '../../../../utils/input-statuses';
+import { TextField } from '../../TextField';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
+import { isValidUrl } from '../../../../utils/urls';
+import { ToggleSwitch } from '../../ToggleSwitch';
 
 const { Panel } = Collapse;
 
@@ -64,6 +64,7 @@ function checkSaveable(formValues: any, currentValues: any) {
   return false;
 }
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditStorage() {
   const [formDataValues, setFormDataValues] = useState(null);
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);

web/components/admin/config/server/ServerConfig.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { EditInstanceDetails } from '../../../../../components/config/EditInstanceDetails2';
+import EditInstanceDetails from '../../EditInstanceDetails2';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ConfigServerDetails() {
   return (
     <div className="config-server-details-form">

web/components/admin/config/server/StorageConfig.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import EditStorage from './EditStorage';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ConfigStorageInfo() {
   return (
     <>

web/components/admin/config/server/StreamKeys.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
 import { Table, Space, Button, Typography, Alert, Input, Form } from 'antd';
 import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 
-import { fetchData, UPDATE_STREAM_KEYS } from '../../../../../utils/apis';
+import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
 
 const { Paragraph } = Typography;
 const { Item } = Form;

web/pages/admin/actions.tsx

@@ -2,7 +2,7 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Form, Input, Modal, Space, Table, Typography } from 'antd';
 import _ from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
-import { FormStatusIndicator } from '../../components/config/FormStatusIndicator';
+import { FormStatusIndicator } from '../../components/admin/FormStatusIndicator';
 import { ExternalAction } from '../../interfaces/external-action';
 import {
   API_EXTERNAL_ACTIONS,

web/pages/admin/chat/emojis.tsx

@@ -2,7 +2,7 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Space, Table, Typography, Upload } from 'antd';
 import { RcFile } from 'antd/lib/upload';
 import React, { useEffect, useState } from 'react';
-import FormStatusIndicator from '../../../components/config/FormStatusIndicator';
+import FormStatusIndicator from '../../../components/admin/FormStatusIndicator';
 
 import { DELETE_EMOJI, fetchData, UPLOAD_EMOJI } from '../../../utils/apis';
 

web/pages/admin/chat/messages.tsx

@@ -13,8 +13,8 @@ import {
   UPDATE_CHAT_MESSGAE_VIZ,
 } from '../../../utils/apis';
 import { isEmptyObject } from '../../../utils/format';
-import { MessageVisiblityToggle } from '../../../components/MessageVisiblityToggle';
-import { UserPopover } from '../../../components/UserPopover';
+import { MessageVisiblityToggle } from '../../../components/admin/MessageVisiblityToggle';
+import { UserPopover } from '../../../components/admin/UserPopover';
 
 const { Title } = Typography;
 

web/pages/admin/chat/users.tsx

@@ -8,9 +8,9 @@ import {
   MODERATORS,
   BANNED_IPS,
 } from '../../../utils/apis';
-import { UserTable } from '../../../components/UserTable';
-import { ClientTable } from '../../../components/ClientTable';
-import { BannedIPsTable } from '../../../components/BannedIPsTable';
+import { UserTable } from '../../../components/admin/UserTable';
+import { ClientTable } from '../../../components/admin/ClientTable';
+import { BannedIPsTable } from '../../../components/admin/BannedIPsTable';
 
 export const FETCH_INTERVAL = 10 * 1000; // 10 sec
 

web/pages/admin/config-chat.tsx

@@ -1,9 +1,9 @@
 import { Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
-import { TEXTFIELD_TYPE_TEXTAREA } from '../../components/config/TextField';
-import { TextFieldWithSubmit } from '../../components/config/TextFieldWithSubmit';
-import { ToggleSwitch } from '../../components/config/ToggleSwitch';
-import { EditValueArray } from '../../components/config/EditValueArray';
+import { TEXTFIELD_TYPE_TEXTAREA } from '../../components/admin/TextField';
+import { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';
+import { ToggleSwitch } from '../../components/admin/ToggleSwitch';
+import { EditValueArray } from '../../components/admin/EditValueArray';
 import {
   createInputStatus,
   StatusState,

web/pages/admin/config-federation.tsx

@@ -6,10 +6,10 @@ import {
   TEXTFIELD_TYPE_TEXT,
   TEXTFIELD_TYPE_TEXTAREA,
   TEXTFIELD_TYPE_URL,
-} from '../../components/config/TextField';
-import { TextFieldWithSubmit } from '../../components/config/TextFieldWithSubmit';
-import { ToggleSwitch } from '../../components/config/ToggleSwitch';
-import { EditValueArray } from '../../components/config/EditValueArray';
+} from '../../components/admin/TextField';
+import { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';
+import { ToggleSwitch } from '../../components/admin/ToggleSwitch';
+import { EditValueArray } from '../../components/admin/EditValueArray';
 import { UpdateArgs } from '../../types/config-section';
 import {
   FIELD_PROPS_ENABLE_FEDERATION,

web/pages/admin/config-notify.tsx

@@ -2,14 +2,14 @@ import { Alert, Button, Col, Row, Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
 import Link from 'next/link';
 
-import Discord from '../../components/config/notification/discord';
-import Browser from '../../components/config/notification/browser';
-import Twitter from '../../components/config/notification/twitter';
-import Federation from '../../components/config/notification/federation';
+import Discord from '../../components/admin/notification/discord';
+import Browser from '../../components/admin/notification/browser';
+import Twitter from '../../components/admin/notification/twitter';
+import Federation from '../../components/admin/notification/federation';
 import {
   TextFieldWithSubmit,
   TEXTFIELD_TYPE_URL,
-} from '../../components/config/TextFieldWithSubmit';
+} from '../../components/admin/TextFieldWithSubmit';
 import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../../utils/config-constants';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { UpdateArgs } from '../../types/config-section';

web/pages/admin/config-social-items.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from 'antd';
-import EditSocialLinks from './config/general/components/EditSocialLinks';
+import EditSocialLinks from '../../components/admin/config/general/EditSocialLinks';
 
 const { Title } = Typography;
 

web/pages/admin/config-video.tsx

@@ -1,8 +1,8 @@
 import { Col, Collapse, Row, Typography } from 'antd';
 import React from 'react';
-import { CodecSelector as VideoCodecSelector } from '../../components/config/CodecSelector';
-import { VideoLatency } from '../../components/config/VideoLatency';
-import { CurrentVariantsTable } from '../../components/config/CurrentVariantsTable';
+import { CodecSelector as VideoCodecSelector } from '../../components/admin/CodecSelector';
+import { VideoLatency } from '../../components/admin/VideoLatency';
+import { CurrentVariantsTable } from '../../components/admin/CurrentVariantsTable';
 
 const { Panel } = Collapse;
 const { Title } = Typography;

web/pages/admin/config/general/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Tabs } from 'antd';
 
-import GeneralConfig from './components/GeneralConfig';
-import AppearanceConfig from './components/AppearanceConfig';
+import GeneralConfig from '../../../../components/admin/config/general/GeneralConfig';
+import AppearanceConfig from '../../../../components/admin/config/general/AppearanceConfig';
 
 export default function PublicFacingDetails() {
   return (

web/pages/admin/config/server/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Tabs } from 'antd';
 
-import StreamKeys from './components/StreamKeys';
-import ServerConfig from './components/ServerConfig';
-import StorageConfig from './components/StorageConfig';
+import StreamKeys from '../../../../components/admin/config/server/StreamKeys';
+import ServerConfig from '../../../../components/admin/config/server/ServerConfig';
+import StorageConfig from '../../../../components/admin/config/server/StorageConfig';
 
 export default function PublicFacingDetails() {
   return (

web/pages/admin/hardware-info.tsx

@@ -2,8 +2,8 @@ import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
 import { Row, Col, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
-import { Chart } from '../../components/Chart';
-import { StatisticItem } from '../../components/StatisticItem';
+import { Chart } from '../../components/admin/Chart';
+import { StatisticItem } from '../../components/admin/StatisticItem';
 
 // TODO: FIX TS WARNING FROM THIS.
 // interface TimedValue {

web/pages/admin/index.tsx

@@ -4,16 +4,16 @@ import { Skeleton, Card, Statistic, Row, Col } from 'antd';
 import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { formatDistanceToNow, formatRelative } from 'date-fns';
 import ServerStatusProvider, { ServerStatusContext } from '../../utils/server-status-context';
-import { LogTable } from '../../components/LogTable';
-import { Offline } from '../../components/Offline';
-import { StreamHealthOverview } from '../../components/StreamHealthOverview';
+import { LogTable } from '../../components/admin/LogTable';
+import { Offline } from '../../components/admin/Offline';
+import { StreamHealthOverview } from '../../components/admin/StreamHealthOverview';
 
 import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../../utils/apis';
 import { formatIPAddress, isEmptyObject } from '../../utils/format';
-import { NewsFeed } from '../../components/NewsFeed';
+import { NewsFeed } from '../../components/admin/NewsFeed';
 
 import AlertMessageProvider from '../../utils/alert-message-context';
-import { MainLayout } from '../../components/MainLayout';
+import { MainLayout } from '../../components/admin/MainLayout';
 
 function streamDetailsFormatter(streamDetails) {
   return (

web/pages/admin/logs.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { LogTable } from '../../components/LogTable';
+import { LogTable } from '../../components/admin/LogTable';
 
 import { LOGS_ALL, fetchData } from '../../utils/apis';
 

web/pages/admin/stream-health.tsx

@@ -4,8 +4,8 @@ import { Row, Col, Typography, Space, Statistic, Card, Alert, Spin } from 'antd'
 import React, { ReactNode, useEffect, useState } from 'react';
 import { ClockCircleOutlined, WarningOutlined, WifiOutlined } from '@ant-design/icons';
 import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../../utils/apis';
-import { Chart } from '../../components/Chart';
-import { StreamHealthOverview } from '../../components/StreamHealthOverview';
+import { Chart } from '../../components/admin/Chart';
+import { StreamHealthOverview } from '../../components/admin/StreamHealthOverview';
 
 interface TimedValue {
   time: Date;

web/pages/admin/viewer-info.tsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect, useContext } from 'react';
 import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
 import { DownOutlined, UserOutlined } from '@ant-design/icons';
 import { getUnixTime, sub } from 'date-fns';
-import { Chart } from '../../components/Chart';
-import { StatisticItem } from '../../components/StatisticItem';
-import { ViewerTable } from '../../components/ViewerTable';
+import { Chart } from '../../components/admin/Chart';
+import { StatisticItem } from '../../components/admin/StatisticItem';
+import { ViewerTable } from '../../components/admin/ViewerTable';
 
 import { ServerStatusContext } from '../../utils/server-status-context';
 

web/utils/config-constants.tsx

@@ -1,7 +1,7 @@
 // DEFAULT VALUES
 import { fetchData, SERVER_CONFIG_UPDATE_URL } from './apis';
 import { ApiPostArgs, VideoVariant, SocialHandle } from '../types/config-section';
-import { TEXTFIELD_TYPE_URL } from '../components/config/TextField';
+import { TEXTFIELD_TYPE_URL } from '../components/admin/TextField';
 import { DEFAULT_TEXTFIELD_URL_PATTERN } from './urls';
 
 export const TEXT_MAXLENGTH = 255;