From 6f34e1006ba0f5d92f0c8120dfa6eee79af58ef9 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Tue, 8 Jul 2025 17:11:25 +0200
Subject: [PATCH] refactor: migrate project data

---
 apps/client/src/AppRouter.tsx                 |  2 +-
 .../navigation-menu/ViewNavigationMenu.tsx    |  8 +-
 apps/client/src/common/models/ProjectData.ts  |  6 +-
 .../panel/project-panel/ProjectCreateForm.tsx | 18 ++---
 .../panel/settings-panel/ProjectData.tsx      | 24 +++---
 .../control/message/MessageControlExport.tsx  |  2 +-
 .../control/playback/TimerControlExport.tsx   |  2 +-
 .../src/features/rundown/RundownExport.tsx    |  2 +-
 .../src/features/viewers/clock/Clock.tsx      |  2 +-
 .../viewers/minimal-timer/MinimalTimer.tsx    |  2 +-
 apps/client/src/translation/languages/de.ts   |  4 +-
 apps/client/src/translation/languages/en.ts   |  4 +-
 apps/client/src/translation/languages/es.ts   |  4 +-
 apps/client/src/translation/languages/fr.ts   |  5 +-
 apps/client/src/translation/languages/it.ts   |  4 +-
 apps/client/src/views/backstage/Backstage.tsx |  6 +-
 apps/client/src/views/countdown/Countdown.tsx |  2 +-
 .../cuesheet/__tests__/cuesheet.utils.test.ts |  2 +-
 .../src/views/project-info/ProjectInfo.scss   |  5 +-
 .../src/views/project-info/ProjectInfo.tsx    | 78 +++++++++++--------
 .../backstage-info/BackstageInfo.tsx          | 40 ----------
 .../project-info/custom-info/CustomInfo.tsx   | 36 ---------
 .../views/project-info/projectInfo.options.ts | 25 ------
 apps/client/src/views/studio/Studio.tsx       |  2 +-
 .../src/views/timeline/TimelinePage.tsx       |  2 +-
 apps/client/src/views/timer/Timer.tsx         |  2 +-
 apps/server/src/api-data/db/db.controller.ts  |  6 +-
 apps/server/src/api-data/db/db.validation.ts  |  7 +-
 .../project-data/projectData.parser.ts        |  6 +-
 .../project-data/projectData.router.ts        |  7 +-
 .../project-data/projectData.validation.ts    |  7 +-
 .../__tests__/DataProvider.utils.test.ts      |  8 +-
 apps/server/src/models/dataModel.ts           |  6 +-
 apps/server/src/models/demoProject.ts         |  6 +-
 .../project-service/ProjectService.ts         |  4 +-
 apps/server/test-db/db.json                   |  6 +-
 e2e/tests/fixtures/e2e-test-db.json           |  6 +-
 .../src/definitions/core/ProjectData.type.ts  |  6 +-
 38 files changed, 136 insertions(+), 228 deletions(-)
 delete mode 100644 apps/client/src/views/project-info/backstage-info/BackstageInfo.tsx
 delete mode 100644 apps/client/src/views/project-info/custom-info/CustomInfo.tsx
 delete mode 100644 apps/client/src/views/project-info/projectInfo.options.ts

diff --git a/apps/client/src/AppRouter.tsx b/apps/client/src/AppRouter.tsx
index d64f8bd55..926c91849 100644
--- a/apps/client/src/AppRouter.tsx
+++ b/apps/client/src/AppRouter.tsx
@@ -38,7 +38,7 @@ const SMinimalTimer = withPreset(withData(MinimalTimerView));
 const SClock = withPreset(withData(ClockView));
 const SCountdown = withPreset(withData(Countdown));
 const SBackstage = withPreset(withData(Backstage));
-const SProjectInfo = withPreset(withData(ProjectInfo));
+const SProjectInfo = withPreset(ProjectInfo); // NOTE: ProjectInfo does not use the viewWrapper since it has no options
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
 const STimeline = withPreset(withData(Timeline));
diff --git a/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx
index 0b36187f1..733cd1f54 100644
--- a/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx
@@ -8,11 +8,11 @@ import useViewEditor from './useViewEditor';
 
 interface ViewNavigationMenuProps {
   isLockable?: boolean;
-  supressSettings?: boolean;
+  suppressSettings?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isLockable, supressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isLockable, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
   const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
 
@@ -28,7 +28,7 @@ function ViewNavigationMenu({ isLockable, supressSettings }: ViewNavigationMenuP
     [
       'mod + ,',
       () => {
-        if (isViewLocked || supressSettings) return;
+        if (isViewLocked || suppressSettings) return;
         showEditFormDrawer();
       },
       { preventDefault: true },
@@ -43,7 +43,7 @@ function ViewNavigationMenu({ isLockable, supressSettings }: ViewNavigationMenuP
     <>
       <FloatingNavigation
         toggleMenu={menuHandler.toggle}
-        toggleSettings={supressSettings ? undefined : () => showEditFormDrawer()}
+        toggleSettings={suppressSettings ? undefined : () => showEditFormDrawer()}
       />
       <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
     </>
diff --git a/apps/client/src/common/models/ProjectData.ts b/apps/client/src/common/models/ProjectData.ts
index 8ee964be4..899f7052d 100644
--- a/apps/client/src/common/models/ProjectData.ts
+++ b/apps/client/src/common/models/ProjectData.ts
@@ -3,8 +3,8 @@ import { ProjectData } from 'ontime-types';
 export const projectDataPlaceholder: ProjectData = {
   title: '',
   description: '',
-  backstageUrl: '',
-  backstageInfo: '',
-  projectLogo: null,
+  url: '',
+  info: '',
+  logo: null,
   custom: [],
 };
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
index 4b8c3e607..ed3c2c604 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
@@ -22,8 +22,8 @@ interface ProjectCreateFromProps {
 type ProjectCreateFormValues = {
   title?: string;
   description?: string;
-  backstageInfo?: string;
-  backstageUrl?: string;
+  info?: string;
+  url?: string;
   custom?: { title: string; value: string }[];
 };
 
@@ -107,18 +107,12 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
           <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
         </label>
         <label>
-          Backstage info
-          <Textarea
-            fluid
-            maxLength={150}
-            placeholder='Wi-Fi password: 1234'
-            resize='vertical'
-            {...register('backstageInfo')}
-          />
+          Project info
+          <Textarea fluid maxLength={150} placeholder='Wi-Fi password: 1234' resize='vertical' {...register('info')} />
         </label>
         <label>
-          Backstage QR code Url
-          <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
+          Project QR code URL
+          <Input fluid placeholder={documentationUrl} {...register('url')} />
         </label>
         <Panel.Section>
           <Panel.ListItem>
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx b/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx
index 5d9126225..524c82f80 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx
@@ -61,16 +61,16 @@ export default function ProjectData() {
       validateLogo(file);
       const response = await uploadProjectLogo(file);
 
-      setValue('projectLogo', response.data.logoFilename, {
+      setValue('logo', response.data.logoFilename, {
         shouldDirty: true,
       });
     } catch (error) {
       const message = maybeAxiosError(error);
-      setError('projectLogo', { message });
+      setError('logo', { message });
     }
   };
 
-  const { ref, ...projectLogoRest } = register('projectLogo');
+  const { ref, ...projectLogoRest } = register('logo');
 
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -81,7 +81,7 @@ export default function ProjectData() {
   const handleDeleteLogo = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setValue('projectLogo', null, {
+    setValue('logo', null, {
       shouldDirty: true,
     });
   };
@@ -149,12 +149,12 @@ export default function ProjectData() {
                 onChange={handleUploadProjectLogo}
               />
               <Panel.Card className={style.uploadLogoCard}>
-                {watch('projectLogo') ? (
+                {watch('logo') ? (
                   <>
-                    <img src={`${projectLogoPath}/${watch('projectLogo')}`} />
+                    <img src={`${projectLogoPath}/${watch('logo')}`} />
                     <Button
                       variant='subtle-destructive'
-                      disabled={isSubmitting || !watch('projectLogo')}
+                      disabled={isSubmitting || !watch('logo')}
                       onClick={handleDeleteLogo}
                     >
                       <IoTrash />
@@ -167,7 +167,7 @@ export default function ProjectData() {
                     Upload logo
                   </Button>
                 )}
-                {errors?.projectLogo?.message && <Panel.Error>{errors.projectLogo.message}</Panel.Error>}
+                {errors?.logo?.message && <Panel.Error>{errors.logo.message}</Panel.Error>}
               </Panel.Card>
             </label>
           </Panel.Section>
@@ -177,18 +177,18 @@ export default function ProjectData() {
             <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
           </label>
           <label>
-            Backstage info
+            Project info
             <Textarea
               fluid
               maxLength={150}
               placeholder='Wi-Fi password: 1234'
               resize='vertical'
-              {...register('backstageInfo')}
+              {...register('info')}
             />
           </label>
           <label>
-            Backstage QR code URL
-            <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
+            Project QR code URL
+            <Input fluid placeholder={documentationUrl} {...register('url')} />
           </label>
           <Panel.Section style={{ marginTop: 0 }}>
             <Panel.ListItem>
diff --git a/apps/client/src/features/control/message/MessageControlExport.tsx b/apps/client/src/features/control/message/MessageControlExport.tsx
index d33956843..0348254eb 100644
--- a/apps/client/src/features/control/message/MessageControlExport.tsx
+++ b/apps/client/src/features/control/message/MessageControlExport.tsx
@@ -20,7 +20,7 @@ function MessageControlExport() {
     <ProtectRoute permission='editor'>
       <div className={style.messages} data-testid='panel-messages-control'>
         {!isExtracted && <Corner onClick={(event) => handleLinks('messagecontrol', event)} />}
-        {isExtracted && <ViewNavigationMenu supressSettings />}
+        {isExtracted && <ViewNavigationMenu suppressSettings />}
 
         <div className={classes}>
           <ErrorBoundary>
diff --git a/apps/client/src/features/control/playback/TimerControlExport.tsx b/apps/client/src/features/control/playback/TimerControlExport.tsx
index 126608391..265dd1536 100644
--- a/apps/client/src/features/control/playback/TimerControlExport.tsx
+++ b/apps/client/src/features/control/playback/TimerControlExport.tsx
@@ -18,7 +18,7 @@ function TimerControlExport() {
     <ProtectRoute permission='editor'>
       <div className={style.playback} data-testid='panel-timer-control'>
         {!isExtracted && <Corner onClick={(event) => handleLinks('timercontrol', event)} />}
-        {isExtracted && <ViewNavigationMenu supressSettings />}
+        {isExtracted && <ViewNavigationMenu suppressSettings />}
 
         <div className={style.content}>
           <ErrorBoundary>
diff --git a/apps/client/src/features/rundown/RundownExport.tsx b/apps/client/src/features/rundown/RundownExport.tsx
index 3073c3a3f..a99eea386 100644
--- a/apps/client/src/features/rundown/RundownExport.tsx
+++ b/apps/client/src/features/rundown/RundownExport.tsx
@@ -36,7 +36,7 @@ function RundownExport() {
           data-testid='panel-rundown'
         >
           <FinderPlacement />
-          <ViewNavigationMenu supressSettings />
+          <ViewNavigationMenu suppressSettings />
           <div className={style.content}>
             <ErrorBoundary>
               <ContextMenu>
diff --git a/apps/client/src/features/viewers/clock/Clock.tsx b/apps/client/src/features/viewers/clock/Clock.tsx
index b5454caa3..0c83b9814 100644
--- a/apps/client/src/features/viewers/clock/Clock.tsx
+++ b/apps/client/src/features/viewers/clock/Clock.tsx
@@ -125,7 +125,7 @@ export default function Clock(props: ClockProps) {
       }}
       data-testid='clock-view'
     >
-      {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+      {general?.logo && <ViewLogo name={general.logo} className='logo' />}
       <ViewParamsEditor viewOptions={clockOptions} />
       <SuperscriptTime
         time={clock}
diff --git a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
index 5a22a3ec0..85c20e3d6 100644
--- a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
+++ b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
@@ -160,7 +160,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
       }}
       data-testid='minimal-timer'
     >
-      {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+      {general?.logo && <ViewLogo name={general.logo} className='logo' />}
       <ViewParamsEditor viewOptions={MINIMAL_TIMER_OPTIONS} />
       {showEndMessage ? (
         <div className='end-message'>{viewSettings.endMessage}</div>
diff --git a/apps/client/src/translation/languages/de.ts b/apps/client/src/translation/languages/de.ts
index 080bc0909..080bcac20 100644
--- a/apps/client/src/translation/languages/de.ts
+++ b/apps/client/src/translation/languages/de.ts
@@ -25,6 +25,6 @@ export const langDe: TranslationObject = {
   'timeline.followedby': 'Gefolgt von',
   'project.title': 'Titel',
   'project.description': 'Beschreibung',
-  'project.backstage_info': 'Backstage-Informationen',
-  'project.backstage_url': 'Backstage-URL',
+  'project.info': 'Projektinfo',
+  'project.url': 'Projekt-URL',
 };
diff --git a/apps/client/src/translation/languages/en.ts b/apps/client/src/translation/languages/en.ts
index be7b5a355..ef0c5aeae 100644
--- a/apps/client/src/translation/languages/en.ts
+++ b/apps/client/src/translation/languages/en.ts
@@ -23,8 +23,8 @@ export const langEn = {
   'timeline.followedby': 'Followed by',
   'project.title': 'Title',
   'project.description': 'Description',
-  'project.backstage_info': 'Backstage Info',
-  'project.backstage_url': 'Backstage URL',
+  'project.info': 'Project Info',
+  'project.url': 'Project URL',
 };
 
 export type TranslationObject = Record<keyof typeof langEn, string>;
diff --git a/apps/client/src/translation/languages/es.ts b/apps/client/src/translation/languages/es.ts
index b70d2aaae..b545ba642 100644
--- a/apps/client/src/translation/languages/es.ts
+++ b/apps/client/src/translation/languages/es.ts
@@ -25,6 +25,6 @@ export const langEs: TranslationObject = {
   'timeline.followedby': 'Seguido por',
   'project.title': 'Título',
   'project.description': 'Descripción',
-  'project.backstage_info': 'Información de backstage',
-  'project.backstage_url': 'URL de backstage',
+  'project.info': 'Información del proyecto',
+  'project.url': 'URL del proyecto',
 };
diff --git a/apps/client/src/translation/languages/fr.ts b/apps/client/src/translation/languages/fr.ts
index 46973da11..673bde6bf 100644
--- a/apps/client/src/translation/languages/fr.ts
+++ b/apps/client/src/translation/languages/fr.ts
@@ -25,7 +25,6 @@ export const langFr: TranslationObject = {
   'timeline.followedby': 'Suivi de',
   'project.title': 'Titre',
   'project.description': 'Description',
-  'project.backstage_info': 'Informations des coulisses',
-  'project.backstage_url': 'URL des coulisses',
-
+  'project.info': 'Informations du projet',
+  'project.url': 'URL du projet',
 };
diff --git a/apps/client/src/translation/languages/it.ts b/apps/client/src/translation/languages/it.ts
index 569c8efb0..3b7968ffc 100644
--- a/apps/client/src/translation/languages/it.ts
+++ b/apps/client/src/translation/languages/it.ts
@@ -25,6 +25,6 @@ export const langIt: TranslationObject = {
   'timeline.followedby': 'Seguito da',
   'project.title': 'Titolo',
   'project.description': 'Descrizione',
-  'project.backstage_info': 'Informazioni di backstage',
-  'project.backstage_url': 'URL di backstage',
+  'project.info': 'Informazioni sul progetto',
+  'project.url': 'URL del progetto',
 };
diff --git a/apps/client/src/views/backstage/Backstage.tsx b/apps/client/src/views/backstage/Backstage.tsx
index 30ed1b42d..d618722ca 100644
--- a/apps/client/src/views/backstage/Backstage.tsx
+++ b/apps/client/src/views/backstage/Backstage.tsx
@@ -103,7 +103,7 @@ export default function Backstage(props: BackstageProps) {
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <ViewParamsEditor viewOptions={backstageOptions} />
       <div className='project-header'>
-        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+        {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         <div className='title'>{general.title}</div>
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>
@@ -171,8 +171,8 @@ export default function Backstage(props: BackstageProps) {
       {showSchedule && <ScheduleExport selectedId={selectedId} />}
 
       <div className={cx(['info', !showSchedule && 'info--stretch'])}>
-        {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}
-        {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
+        {general.url && <QRCode value={general.url} size={qrSize} level='L' className='qr' />}
+        {general.info && <div className='info__message'>{general.info}</div>}
       </div>
     </div>
   );
diff --git a/apps/client/src/views/countdown/Countdown.tsx b/apps/client/src/views/countdown/Countdown.tsx
index 10af1ea61..b06aab754 100644
--- a/apps/client/src/views/countdown/Countdown.tsx
+++ b/apps/client/src/views/countdown/Countdown.tsx
@@ -72,7 +72,7 @@ export default function Countdown({
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <ViewParamsEditor viewOptions={countdownOptions} />
       <div className='project-header'>
-        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+        {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         <div className='title'>{general.title}</div>
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>
diff --git a/apps/client/src/views/cuesheet/__tests__/cuesheet.utils.test.ts b/apps/client/src/views/cuesheet/__tests__/cuesheet.utils.test.ts
index b305f3ea0..83e0690a6 100644
--- a/apps/client/src/views/cuesheet/__tests__/cuesheet.utils.test.ts
+++ b/apps/client/src/views/cuesheet/__tests__/cuesheet.utils.test.ts
@@ -38,7 +38,7 @@ describe('makeTable()', () => {
     const headerData = {
       title: 'test title',
       description: 'test description',
-      projectLogo: 'test logo',
+      logo: 'test logo',
     };
     const tableData = [
       {
diff --git a/apps/client/src/views/project-info/ProjectInfo.scss b/apps/client/src/views/project-info/ProjectInfo.scss
index 71eb9b986..20091079e 100644
--- a/apps/client/src/views/project-info/ProjectInfo.scss
+++ b/apps/client/src/views/project-info/ProjectInfo.scss
@@ -41,7 +41,10 @@
     white-space: break-spaces;
   }
 
-  a.info__value {
+  .link.info__value {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
     color: $action-text-color;
   
     &:hover {
diff --git a/apps/client/src/views/project-info/ProjectInfo.tsx b/apps/client/src/views/project-info/ProjectInfo.tsx
index 5ece8f0be..ec7e8beec 100644
--- a/apps/client/src/views/project-info/ProjectInfo.tsx
+++ b/apps/client/src/views/project-info/ProjectInfo.tsx
@@ -1,37 +1,30 @@
-import { ProjectData } from 'ontime-types';
+import { Fragment } from 'react/jsx-runtime';
+import { IoOpenOutline } from 'react-icons/io5';
 
-import Empty from '../../common/components/state/Empty';
+import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 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';
+import useProjectData from '../../common/hooks-query/useProjectData';
+import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { useTranslation } from '../../translation/TranslationProvider';
 
-import BackstageInfo from './backstage-info/BackstageInfo';
-import CustomInfo from './custom-info/CustomInfo';
-import { projectInfoOptions } from './projectInfo.options';
-
 import './ProjectInfo.scss';
 
-interface ProjectInfoProps {
-  general: ProjectData;
-  isMirrored: boolean;
-}
-
-export default function ProjectInfo(props: ProjectInfoProps) {
-  const { general, isMirrored } = props;
+export default function ProjectInfo() {
+  // persisted app state
+  const isMirrored = useViewOptionsStore((state) => state.mirror);
+  const { data, status } = useProjectData();
   const { getLocalizedString } = useTranslation();
 
   useWindowTitle('Project info');
 
-  if (!general) {
-    return <Empty text={getLocalizedString('common.no_data')} />;
-  }
-
-  if (!general) {
+  if (status === 'pending' || !data) {
     return (
       <>
-        <ViewParamsEditor viewOptions={projectInfoOptions} />
+        <ViewNavigationMenu isLockable suppressSettings />
+        <ViewParamsEditor viewOptions={[]} />
         <EmptyPage text={getLocalizedString('common.no_data')} />;
       </>
     );
@@ -41,13 +34,12 @@ export default function ProjectInfo(props: ProjectInfoProps) {
    * Check if there is data to show at all
    * We need a special check for the project fields which can be an empty array
    */
-  const isEmpty = Object.values(general).every(
-    (value) => !value || (value && Array.isArray(value) && value.length === 0),
-  );
+  const isEmpty = Object.values(data).every((value) => !value || (value && Array.isArray(value) && value.length === 0));
   if (isEmpty) {
     return (
       <>
-        <ViewParamsEditor viewOptions={projectInfoOptions} />
+        <ViewNavigationMenu isLockable suppressSettings />
+        <ViewParamsEditor viewOptions={[]} />
         <EmptyPage text={getLocalizedString('common.no_data')} />;
       </>
     );
@@ -55,23 +47,47 @@ export default function ProjectInfo(props: ProjectInfoProps) {
 
   return (
     <div className={`project ${isMirrored ? 'mirror' : ''}`} data-testid='project-view'>
-      <ViewParamsEditor viewOptions={projectInfoOptions} />
-      {general.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+      <ViewNavigationMenu isLockable suppressSettings />
+      <ViewParamsEditor viewOptions={[]} />
+      {data.logo && <ViewLogo name={data.logo} className='logo' />}
       <div className='info'>
-        {general.title && (
+        {data.title && (
           <>
             <div className='info__label'>{getLocalizedString('project.title')}</div>
-            <div className='info__value'>{general.title}</div>
+            <div className='info__value'>{data.title}</div>
           </>
         )}
-        {general.description && (
+        {data.description && (
           <>
             <div className='info__label'>{getLocalizedString('project.description')}</div>
-            <div className='info__value'>{general.description}</div>
+            <div className='info__value'>{data.description}</div>
           </>
         )}
-        <BackstageInfo general={general} />
-        <CustomInfo general={general} />
+        {data.info && (
+          <>
+            <div className='info__label'>{getLocalizedString('project.info')}</div>
+            <div className='info__value'>{data.info}</div>
+          </>
+        )}
+        {data.url && (
+          <>
+            <div className='info__label'>{getLocalizedString('project.url')}</div>
+            <a href={data.url} target='_blank' rel='noreferrer' className='info__value link'>
+              {data.url} <IoOpenOutline style={{ fontSize: '1em' }} />
+            </a>
+          </>
+        )}
+        {data.custom.map((info, idx) => {
+          if (!info.title || !info.value) {
+            return null;
+          }
+          return (
+            <Fragment key={`${info.title}-${idx}`}>
+              <div className='info__label'>{info.title}</div>
+              <div className='info__value'>{info.value}</div>
+            </Fragment>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/apps/client/src/views/project-info/backstage-info/BackstageInfo.tsx b/apps/client/src/views/project-info/backstage-info/BackstageInfo.tsx
deleted file mode 100644
index 1e9d21731..000000000
--- a/apps/client/src/views/project-info/backstage-info/BackstageInfo.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import { ProjectData } from 'ontime-types';
-
-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-import { useTranslation } from '../../../translation/TranslationProvider';
-
-interface BackstageInfoProps {
-  general: ProjectData;
-}
-
-export default function BackstageInfo(props: BackstageInfoProps) {
-  const { general } = props;
-  const [searchParams] = useSearchParams();
-  const { getLocalizedString } = useTranslation();
-
-  const showBackstage = isStringBoolean(searchParams.get('showBackstage'));
-
-  if (!showBackstage) {
-    return null;
-  }
-
-  return (
-    <>
-      {general.backstageInfo && (
-        <>
-          <div className='info__label'>{getLocalizedString('project.backstage_info')}</div>
-          <div className='info__value'>{general.backstageInfo}</div>
-        </>
-      )}
-      {general.backstageUrl && (
-        <>
-          <div className='info__label'>{getLocalizedString('project.backstage_url')}</div>
-          <a href={general.backstageUrl} target='_blank' rel='noreferrer' className='info__value'>
-            {general.backstageUrl}
-          </a>
-        </>
-      )}
-    </>
-  );
-}
diff --git a/apps/client/src/views/project-info/custom-info/CustomInfo.tsx b/apps/client/src/views/project-info/custom-info/CustomInfo.tsx
deleted file mode 100644
index 3cef9e11c..000000000
--- a/apps/client/src/views/project-info/custom-info/CustomInfo.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Fragment } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { ProjectData } from 'ontime-types';
-
-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-
-interface CustomInfoProps {
-  general: ProjectData;
-}
-
-export default function CustomInfo(props: CustomInfoProps) {
-  const { general } = props;
-  const [searchParams] = useSearchParams();
-
-  const showCustom = isStringBoolean(searchParams.get('showCustom'));
-
-  if (!showCustom || general.custom === undefined || general.custom.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {general.custom.map((info, idx) => {
-        if (!info.title || !info.value) {
-          return null;
-        }
-        return (
-          <Fragment key={`${info.title}-${idx}`}>
-            <div className='info__label'>{info.title}</div>
-            <div className='info__value'>{info.value}</div>
-          </Fragment>
-        );
-      })}
-    </>
-  );
-}
diff --git a/apps/client/src/views/project-info/projectInfo.options.ts b/apps/client/src/views/project-info/projectInfo.options.ts
deleted file mode 100644
index 4243abdc3..000000000
--- a/apps/client/src/views/project-info/projectInfo.options.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
-
-export const projectInfoOptions: ViewOption[] = [
-  {
-    title: OptionTitle.BehaviourOptions,
-    collapsible: true,
-    options: [
-      {
-        id: 'showBackstage',
-        title: 'Show backstage Data',
-        description: 'Whether to show fields related to the backstage views',
-        type: 'boolean',
-        defaultValue: false,
-      },
-      {
-        id: 'showCustom',
-        title: 'Show Custom Data',
-        description: 'Whether to show fields related to the custom data',
-        type: 'boolean',
-        defaultValue: false,
-      },
-    ],
-  },
-];
diff --git a/apps/client/src/views/studio/Studio.tsx b/apps/client/src/views/studio/Studio.tsx
index 7823064a1..9841622c0 100644
--- a/apps/client/src/views/studio/Studio.tsx
+++ b/apps/client/src/views/studio/Studio.tsx
@@ -50,7 +50,7 @@ export default function Studio({
       <ViewParamsEditor viewOptions={studioOptions} />
 
       <div className='project-header'>
-        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+        {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         <div className='title'>{general.title}</div>
       </div>
 
diff --git a/apps/client/src/views/timeline/TimelinePage.tsx b/apps/client/src/views/timeline/TimelinePage.tsx
index 1d6980bf2..6d22ea18e 100644
--- a/apps/client/src/views/timeline/TimelinePage.tsx
+++ b/apps/client/src/views/timeline/TimelinePage.tsx
@@ -75,7 +75,7 @@ export default function TimelinePage(props: TimelinePageProps) {
     <div className='timeline' data-testid='timeline-view'>
       <ViewParamsEditor viewOptions={progressOptions} />
       <div className='project-header'>
-        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+        {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         {general.title}
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>
diff --git a/apps/client/src/views/timer/Timer.tsx b/apps/client/src/views/timer/Timer.tsx
index 406be6088..8c1652200 100644
--- a/apps/client/src/views/timer/Timer.tsx
+++ b/apps/client/src/views/timer/Timer.tsx
@@ -131,7 +131,7 @@ export default function Timer(props: TimerProps) {
       className={cx(['stage-timer', isMirrored && 'mirror', showFinished && 'stage-timer--finished'])}
       data-testid='timer-view'
     >
-      {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+      {general?.logo && <ViewLogo name={general.logo} className='logo' />}
 
       <ViewParamsEditor viewOptions={timerOptions} />
 
diff --git a/apps/server/src/api-data/db/db.controller.ts b/apps/server/src/api-data/db/db.controller.ts
index 830f0821f..50b4b47a4 100644
--- a/apps/server/src/api-data/db/db.controller.ts
+++ b/apps/server/src/api-data/db/db.controller.ts
@@ -53,9 +53,9 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
       project: {
         title: req.body?.title ?? '',
         description: req.body?.description ?? '',
-        backstageUrl: req.body?.backstageUrl ?? '',
-        backstageInfo: req.body?.backstageInfo ?? '',
-        projectLogo: req.body?.projectLogo ?? null,
+        url: req.body?.url ?? '',
+        info: req.body?.info ?? '',
+        logo: req.body?.logo ?? null,
         custom: req.body?.custom ?? [],
       },
     });
diff --git a/apps/server/src/api-data/db/db.validation.ts b/apps/server/src/api-data/db/db.validation.ts
index c0c6eb869..d563a3fe0 100644
--- a/apps/server/src/api-data/db/db.validation.ts
+++ b/apps/server/src/api-data/db/db.validation.ts
@@ -11,10 +11,9 @@ export const validateNewProject = [
   body('filename').optional().isString().trim(),
   body('title').optional().isString().trim(),
   body('description').optional().isString().trim(),
-  body('backstageUrl').optional().isString().trim(),
-  body('backstageInfo').optional().isString().trim(),
-  body('projectLogo').optional().isString().trim(),
-  body('endMessage').optional().isString().trim(),
+  body('url').optional().isString().trim(),
+  body('info').optional().isString().trim(),
+  body('logo').optional().isString().trim(),
   body('custom').optional().isArray(),
 
   requestValidationFunction,
diff --git a/apps/server/src/api-data/project-data/projectData.parser.ts b/apps/server/src/api-data/project-data/projectData.parser.ts
index d1d680fb6..4629c2c8e 100644
--- a/apps/server/src/api-data/project-data/projectData.parser.ts
+++ b/apps/server/src/api-data/project-data/projectData.parser.ts
@@ -17,9 +17,9 @@ export function parseProjectData(data: Partial<DatabaseModel>, emitError?: Error
   return {
     title: data.project.title ?? dbModel.project.title,
     description: data.project.description ?? dbModel.project.description,
-    backstageUrl: data.project.backstageUrl ?? dbModel.project.backstageUrl,
-    backstageInfo: data.project.backstageInfo ?? dbModel.project.backstageInfo,
-    projectLogo: data.project.projectLogo ?? dbModel.project.projectLogo,
+    url: data.project.url ?? dbModel.project.url,
+    info: data.project.info ?? dbModel.project.info,
+    logo: data.project.logo ?? dbModel.project.logo,
     custom: data.project.custom ?? dbModel.project.custom,
   };
 }
diff --git a/apps/server/src/api-data/project-data/projectData.router.ts b/apps/server/src/api-data/project-data/projectData.router.ts
index 7e9101d3f..afa521acd 100644
--- a/apps/server/src/api-data/project-data/projectData.router.ts
+++ b/apps/server/src/api-data/project-data/projectData.router.ts
@@ -21,10 +21,9 @@ router.post('/', projectSanitiser, async (req: Request, res: Response<ProjectDat
     const newData: Partial<ProjectData> = removeUndefined({
       title: req.body?.title,
       description: req.body?.description,
-      backstageUrl: req.body?.backstageUrl,
-      backstageInfo: req.body?.backstageInfo,
-      endMessage: req.body?.endMessage,
-      projectLogo: req.body?.projectLogo,
+      url: req.body?.url,
+      info: req.body?.info,
+      logo: req.body?.logo,
       custom: req.body?.custom,
     });
 
diff --git a/apps/server/src/api-data/project-data/projectData.validation.ts b/apps/server/src/api-data/project-data/projectData.validation.ts
index 7d2f7bdfd..43c423ee1 100644
--- a/apps/server/src/api-data/project-data/projectData.validation.ts
+++ b/apps/server/src/api-data/project-data/projectData.validation.ts
@@ -5,10 +5,9 @@ export const projectSanitiser = [
   body().notEmpty().withMessage('No object found in request'),
   body('title').optional().isString().trim(),
   body('description').optional().isString().trim(),
-  body('backstageUrl').optional().isString().trim(),
-  body('backstageInfo').optional().isString().trim(),
-  body('endMessage').optional().isString().trim(),
-  body('projectLogo').optional({ nullable: true }).isString().trim(), //this is not the logo itself but then name of the logo
+  body('url').optional().isString().trim(),
+  body('info').optional().isString().trim(),
+  body('logo').optional({ nullable: true }).isString().trim(), //this is not the logo itself but then name of the logo
   body('custom').optional().isArray(),
   body('custom.*.title').optional().isString().trim().notEmpty(),
   body('custom.*.value').optional().isString().trim().notEmpty(),
diff --git a/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts b/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts
index 87c68c7e8..e0a02b14a 100644
--- a/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts
+++ b/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts
@@ -42,7 +42,7 @@ describe('safeMerge', () => {
     const mergedData = safeMerge(demoDb, {
       project: {
         title: 'new title',
-        backstageInfo: 'new backstage info',
+        info: 'new backstage info',
         custom: [
           {
             title: 'new custom title',
@@ -55,9 +55,9 @@ describe('safeMerge', () => {
     expect(mergedData.project).toStrictEqual({
       title: 'new title',
       description: 'Turin 2022',
-      backstageUrl: 'www.github.com/cpvalente/ontime',
-      backstageInfo: 'new backstage info',
-      projectLogo: null,
+      url: 'www.github.com/cpvalente/ontime',
+      info: 'new backstage info',
+      logo: null,
       custom: [
         {
           title: 'new custom title',
diff --git a/apps/server/src/models/dataModel.ts b/apps/server/src/models/dataModel.ts
index 6e04204f0..566d0dab3 100644
--- a/apps/server/src/models/dataModel.ts
+++ b/apps/server/src/models/dataModel.ts
@@ -17,9 +17,9 @@ export const dbModel: DatabaseModel = {
   project: {
     title: '',
     description: '',
-    backstageUrl: '',
-    backstageInfo: '',
-    projectLogo: null,
+    url: '',
+    info: '',
+    logo: null,
     custom: [],
   },
   settings: {
diff --git a/apps/server/src/models/demoProject.ts b/apps/server/src/models/demoProject.ts
index ea4867fda..09724139a 100644
--- a/apps/server/src/models/demoProject.ts
+++ b/apps/server/src/models/demoProject.ts
@@ -504,9 +504,9 @@ export const demoDb: DatabaseModel = {
   project: {
     title: 'Eurovision Song Contest',
     description: 'Turin 2022',
-    backstageUrl: 'www.github.com/cpvalente/ontime',
-    backstageInfo: 'Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal',
-    projectLogo: null,
+    url: 'www.github.com/cpvalente/ontime',
+    info: 'Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal',
+    logo: null,
     custom: [],
   },
   settings: {
diff --git a/apps/server/src/services/project-service/ProjectService.ts b/apps/server/src/services/project-service/ProjectService.ts
index 79f5f91e3..77e6e38e7 100644
--- a/apps/server/src/services/project-service/ProjectService.ts
+++ b/apps/server/src/services/project-service/ProjectService.ts
@@ -322,8 +322,8 @@ export async function editCurrentProjectData(newData: Partial<ProjectData>) {
   const updatedProjectData = await getDataProvider().setProjectData(newData);
 
   // Delete the old logo if the logo has been removed
-  if (!updatedProjectData.projectLogo && currentProjectData.projectLogo) {
-    const filePath = join(publicDir.logoDir, currentProjectData.projectLogo);
+  if (!updatedProjectData.logo && currentProjectData.logo) {
+    const filePath = join(publicDir.logoDir, currentProjectData.logo);
 
     deleteFile(filePath).catch((_error) => {
       /** we do not handle this error */
diff --git a/apps/server/test-db/db.json b/apps/server/test-db/db.json
index 35bdf09f7..3f870d018 100644
--- a/apps/server/test-db/db.json
+++ b/apps/server/test-db/db.json
@@ -452,9 +452,9 @@
   "project": {
     "title": "Eurovision Song Contest",
     "description": "Turin 2022",
-    "backstageUrl": "www.github.com/cpvalente/ontime",
-    "backstageInfo": "Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal",
-    "projectLogo": null,
+    "url": "www.github.com/cpvalente/ontime",
+    "info": "Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal",
+    "logo": null,
     "custom": []
   },
   "settings": {
diff --git a/e2e/tests/fixtures/e2e-test-db.json b/e2e/tests/fixtures/e2e-test-db.json
index d96651a38..103dc35e9 100644
--- a/e2e/tests/fixtures/e2e-test-db.json
+++ b/e2e/tests/fixtures/e2e-test-db.json
@@ -469,9 +469,9 @@
   "project": {
     "title": "Eurovision Song Contest",
     "description": "Turin 2022",
-    "backstageUrl": "www.github.com/cpvalente/ontime",
-    "backstageInfo": "Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal",
-    "projectLogo": null,
+    "url": "www.github.com/cpvalente/ontime",
+    "info": "Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal",
+    "logo": null,
     "custom": []
   },
   "settings": {
diff --git a/packages/types/src/definitions/core/ProjectData.type.ts b/packages/types/src/definitions/core/ProjectData.type.ts
index ebd309ab3..34bee73ef 100644
--- a/packages/types/src/definitions/core/ProjectData.type.ts
+++ b/packages/types/src/definitions/core/ProjectData.type.ts
@@ -1,8 +1,8 @@
 export type ProjectData = {
   title: string;
   description: string;
-  backstageUrl: string;
-  backstageInfo: string;
-  projectLogo: string | null;
+  url: string;
+  info: string;
+  logo: string | null;
   custom: { title: string; value: string }[];
 };