Add placeholder components to be worked on

web/components/CustomPageContent.tsx

@@ -0,0 +1,8 @@
+interface Props {
+  content: string;
+}
+
+export default function CustomPageContent(props: Props) {
+  const { content } = props;
+  return <div>{content}</div>;
+}

web/components/ExternalActionButton.tsx

@@ -0,0 +1,9 @@
+import { ExternalAction } from '../interfaces/external-action.interface';
+
+interface Props {
+  action: ExternalAction;
+}
+
+export default function ExternalActionButton(props: Props) {
+  return <div>External action button component goes here</div>;
+}

web/components/PageLogo.tsx

@@ -0,0 +1,7 @@
+interface Props {
+  url: string;
+}
+
+export default function PageLogo(props: Props) {
+  return <div>Pimary logo component goes here</div>;
+}

web/components/SocialLinks.tsx

@@ -0,0 +1,9 @@
+import { SocialLink } from '../interfaces/social-link.model';
+
+interface Props {
+  links: SocialLink[];
+}
+
+export default function SocialLinks(props: Props) {
+  return <div>Social links component goes here</div>;
+}

web/components/UserDropdownMenu.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function UserDropdown(props: Props) {
+  return <div>User settings dropdown component goes here</div>;
+}

web/components/chat/ChatActionMessage.jsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatSystemMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatContainer.tsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  messages: ChatMessage[];
+}
+
+export default function ChatContainer(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatModeratorNotification.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function ChatModerationNotification(props: Props) {
+  return <div>You are now a moderator notification component goes here</div>;
+}

web/components/chat/ChatSocialMessage.jsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatSocialMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatSystemMessage.tsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatSystemMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatTextField.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function ChatTextField(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatUserMessage.tsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatUserMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/layouts/main.tsx

@@ -1,10 +1,10 @@
 import { useRecoilValue } from 'recoil';
 import { Layout, Row, Col } from 'antd';
 import { useState } from 'react';
-import { ServerStatus } from '../../models/ServerStatus';
+import { ServerStatus } from '../../interfaces/server-status.model';
 import { ServerStatusStore, serverStatusState } from '../stores/ServerStatusStore';
 import { ClientConfigStore, clientConfigState } from '../stores/ClientConfigStore';
-import { ClientConfig } from '../../models/ClientConfig';
+import { ClientConfig } from '../../interfaces/client-config.model';
 
 const { Header, Content, Footer, Sider } = Layout;
 

web/components/modals/AuthModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function AuthModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/BrowserNotifyModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function BrowserNotifyModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/FediAuthModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function FediAuthModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/FollowModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function FollowModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/IndieAuthModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function IndieAuthModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/stores/ClientConfigStore.tsx

@@ -1,14 +1,25 @@
 import { useEffect } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
-import { makeEmptyClientConfig, ClientConfig } from '../../models/ClientConfig';
-import ClientConfigService from '../../services/ClientConfigService';
+import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
+import ClientConfigService from '../../services/client-config-service';
 
+// The config that comes from the API.
 export const clientConfigState = atom({
   key: 'clientConfigState',
   default: makeEmptyClientConfig(),
 });
 
+export const chatCurrentlyVisible = atom({
+  key: 'chatvisible',
+  default: false,
+});
+
+export const chatDislayName = atom({
+  key: 'chatDisplayName',
+  default: '',
+});
+
 export function ClientConfigStore(): ReactElement {
   const [, setClientConfig] = useRecoilState<ClientConfig>(clientConfigState);
 

web/components/stores/ServerStatusStore.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
-import { ServerStatus, makeEmptyServerStatus } from '../../models/ServerStatus';
-import ServerStatusService from '../../services/StatusService';
+import { ServerStatus, makeEmptyServerStatus } from '../../interfaces/server-status.model';
+import ServerStatusService from '../../services/status-service';
 
 export const serverStatusState = atom({
   key: 'serverStatusState',

web/components/video/StatusBar.jsx

@@ -0,0 +1,9 @@
+interface Props {
+  online: boolean;
+  viewers: number;
+  timer: string;
+}
+
+export default function StatusBar(props: Props) {
+  return <div>Stream status bar goes here</div>;
+}