refactor: empty state for cuesheet

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

@@ -11,8 +11,7 @@ interface EmptyProps {
   className?: string;
 }
 
-export default function Empty(props: EmptyProps) {
+export default function Empty({ text, className, ...rest }: EmptyProps) {
-  const { text, className, ...rest } = props;
   return (
     <div className={cx([style.emptyContainer, className])} {...rest}>
       <EmptyImage className={style.empty} />

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

@@ -0,0 +1,19 @@
+.emptyContainer {
+  width: 100%;
+  color: $white-10;
+
+  .emptyCell {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  .empty {
+    width: 100%;
+    opacity: 0.8;
+  }
+
+  .text {
+    font-weight: 600;
+    font-size: 2em;
+  }
+}

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

@@ -0,0 +1,20 @@
+import EmptyImage from '../../../assets/images/empty.svg?react';
+
+import style from './EmptyTableBody.module.scss';
+
+interface EmptyTableBodyProps {
+  text: string;
+}
+
+export default function EmptyTableBody({ text }: EmptyTableBodyProps) {
+  return (
+    <tbody className={style.emptyContainer}>
+      <tr>
+        <td colSpan={99} className={style.emptyCell}>
+          <EmptyImage className={style.empty} />
+          {text && <span className={style.text}>{text}</span>}
+        </td>
+      </tr>
+    </tbody>
+  );
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx

@@ -13,6 +13,7 @@ import {
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 
 import { RUNDOWN } from '../../../../common/api/constants';
+import EmptyTableBody from '../../../../common/components/state/EmptyTableBody';
 import { useSelectedEventId } from '../../../../common/hooks/useSocket';
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -47,6 +48,10 @@ export default function CuesheetBody({ rowModel, selectedRef, table }: CuesheetB
     };
   }, []);
 
+  if (rowModel.rows.length === 0) {
+    return <EmptyTableBody text='No data in rundown' />;
+  }
+
   return (
     <tbody>
       {rowModel.rows.map((row, index) => {