refactor: improve empty state for project info

apps/client/src/common/components/state/EmptyPage.module.scss

@@ -0,0 +1,20 @@
+@use '../../../theme/viewerDefs' as *;
+
+/* share the same style as a page layout */
+.page {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  height: 100vh;
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  background: var(--background-color-override, $viewer-background-color);
+  color: var(--color-override, $viewer-color);
+  padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 5rem;
+}

apps/client/src/common/components/state/EmptyPage.tsx

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+
+import Empty from './Empty';
+
+import style from './EmptyPage.module.scss';
+
+interface EmptyPageProps {
+  text?: string;
+  style?: CSSProperties;
+}
+
+export default function EmptyPage(props: EmptyPageProps) {
+  const { text, ...rest } = props;
+
+  return (
+    <div className={style.page}>
+      <Empty text={text} {...rest} />
+    </div>
+  );
+}

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -1,6 +1,7 @@
 import { ProjectData } from 'ontime-types';
 
 import Empty from '../../common/components/state/Empty';
+import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -16,7 +17,7 @@ interface ProjectInfoProps {
   isMirrored: boolean;
 }
 
-export default function ProjectInfoProps(props: ProjectInfoProps) {
+export default function ProjectInfo(props: ProjectInfoProps) {
   const { general, isMirrored } = props;
 
   useWindowTitle('Project info');
@@ -25,6 +26,25 @@ export default function ProjectInfoProps(props: ProjectInfoProps) {
     return <Empty text='No data found' />;
   }
 
+  if (!general) {
+    return (
+      <>
+        <ViewParamsEditor viewOptions={projectInfoOptions} />
+        return <EmptyPage text='No data found' />;
+      </>
+    );
+  }
+
+  const isEmpty = Object.values(general).every((value) => !value);
+  if (isEmpty) {
+    return (
+      <>
+        <ViewParamsEditor viewOptions={projectInfoOptions} />
+        <EmptyPage text='The project has no data yet' />;
+      </>
+    );
+  }
+
   return (
     <div className={`project ${isMirrored ? 'mirror' : ''}`} data-testid='project-view'>
       <ViewParamsEditor viewOptions={projectInfoOptions} />