refactor: prepare rundown loading process

apps/client/src/features/app-settings/panel/project-panel/ManageRundowns.tsx

@@ -0,0 +1,111 @@
+import { IoAdd } from 'react-icons/io5';
+import { useDisclosure } from '@mantine/hooks';
+
+import Button from '../../../../common/components/buttons/Button';
+import Dialog from '../../../../common/components/dialog/Dialog';
+import { useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
+import { cx } from '../../../../common/utils/styleUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import style from './ProjectPanel.module.scss';
+
+export default function ManageRundowns() {
+  const { data } = useProjectRundowns();
+  const [deleteOpen, deleteHandlers] = useDisclosure();
+  const [loadOpen, loadHandlers] = useDisclosure();
+
+  return (
+    <>
+      <Panel.Section>
+        <Panel.Card>
+          <Panel.SubHeader>
+            Manage project rundowns
+            <Panel.InlineElements>
+              <Button onClick={() => undefined} disabled>
+                New <IoAdd />
+              </Button>
+            </Panel.InlineElements>
+          </Panel.SubHeader>
+          <Panel.Divider />
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th># Entries</th>
+                <th style={{ width: '100%' }}>Title</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {data.rundowns.map((rundown) => {
+                const isLoaded = data.loaded === rundown.id;
+                return (
+                  <tr key={rundown.id} className={cx([isLoaded && style.current])}>
+                    <td>{rundown.numEntries}</td>
+                    <td>{`${rundown.title}${isLoaded && ' (loaded)'}`}</td>
+                    <Panel.InlineElements as='td'>
+                      <Button size='small' onClick={() => loadHandlers.open()} disabled={isLoaded}>
+                        Load
+                      </Button>
+                      <Button
+                        size='small'
+                        variant='subtle-destructive'
+                        onClick={() => deleteHandlers.open()}
+                        disabled={isLoaded}
+                      >
+                        Delete
+                      </Button>
+                    </Panel.InlineElements>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </Panel.Table>
+        </Panel.Card>
+      </Panel.Section>
+      <Dialog
+        isOpen={deleteOpen}
+        onClose={deleteHandlers.close}
+        title='Load rundown'
+        showBackdrop
+        showCloseButton
+        bodyElements={
+          <>
+            You will lose all data in your rundown. <br /> Are you sure?
+          </>
+        }
+        footerElements={
+          <>
+            <Button size='large' onClick={deleteHandlers.close}>
+              Cancel
+            </Button>
+            <Button variant='destructive' size='large' onClick={() => undefined}>
+              Delete rundown
+            </Button>
+          </>
+        }
+      />
+      <Dialog
+        isOpen={loadOpen}
+        onClose={loadHandlers.close}
+        title='Delete rundown'
+        showBackdrop
+        showCloseButton
+        bodyElements={
+          <>
+            The current playback will be stopped. <br /> Are you sure?
+          </>
+        }
+        footerElements={
+          <>
+            <Button size='large' onClick={loadHandlers.close}>
+              Cancel
+            </Button>
+            <Button variant='primary' size='large' onClick={() => undefined}>
+              Load rundown
+            </Button>
+          </>
+        }
+      />
+    </>
+  );
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -26,6 +26,10 @@
   max-width: 400px;
 }
 
+.fullWidth {
+  width: 100%;
+}
+
 .innerColumn {
   margin: 0 2rem;
   margin-bottom: 2rem;
@@ -59,9 +63,11 @@
 }
 
 .customDataItem {
-  display: contents;
   width: 100%;
-
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+ 
   .titleRow{
     display: flex;
     gap: 1rem;

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.tsx

@@ -5,6 +5,7 @@ import QuickStart from '../../quick-start/QuickStart';
 import type { SettingsOptionId } from '../../useAppSettingsMenu';
 
 import ManageProjects from './ManageProjects';
+import ManageRundowns from './ManageRundowns';
 import ProjectData from './ProjectData';
 
 interface ProjectPanelProps extends PanelBaseProps {
@@ -13,7 +14,8 @@ interface ProjectPanelProps extends PanelBaseProps {
 
 export default function ProjectPanel({ location, setLocation }: ProjectPanelProps) {
   const projectRef = useScrollIntoView<HTMLDivElement>('data', location);
-  const manageRef = useScrollIntoView<HTMLDivElement>('manage', location);
+  const manageRundownsRef = useScrollIntoView<HTMLDivElement>('rundowns', location);
+  const manageProjectsRef = useScrollIntoView<HTMLDivElement>('list', location);
 
   const handleQuickClose = () => {
     setLocation('project');
@@ -26,7 +28,10 @@ export default function ProjectPanel({ location, setLocation }: ProjectPanelProp
       <div ref={projectRef}>
         <ProjectData />
       </div>
-      <div ref={manageRef}>
+      <div ref={manageRundownsRef}>
+        <ManageRundowns />
+      </div>
+      <div ref={manageProjectsRef}>
         <ManageProjects />
       </div>
     </>

apps/client/src/features/app-settings/useAppSettingsMenu.tsx

@@ -17,7 +17,8 @@ const staticOptions = [
     secondary: [
       { id: 'project__create', label: 'Create...' },
       { id: 'project__data', label: 'Project data' },
-      { id: 'project__manage', label: 'Manage projects' },
+      { id: 'project__rundowns', label: 'Manage rundowns' },
+      { id: 'project__list', label: 'Manage projects' },
     ],
   },
   {