remove info panel (#721)

* refactor: remove info panel

* chore: update tests

apps/client/src/AppRouter.tsx

@@ -31,7 +31,6 @@ const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'
 const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
 const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
 const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
-const Info = lazy(() => import('./features/info/InfoExport'));
 
 export default function AppRouter() {
   return (
@@ -85,14 +84,6 @@ export default function AppRouter() {
             </EditorFeatureWrapper>
           }
         />
-        <Route
-          path='/info'
-          element={
-            <EditorFeatureWrapper>
-              <Info />
-            </EditorFeatureWrapper>
-          }
-        />
         {/*/!* Send to default if nothing found *!/*/}
         <Route path='*' element={<STimer />} />
       </Routes>

apps/client/src/common/hooks/useSocket.ts

@@ -80,18 +80,6 @@ export const setPlayback = {
   },
 };
 
-export const useInfoPanel = () => {
-  const featureSelector = (state: RuntimeStore) => ({
-    eventNow: state.eventNow,
-    eventNext: state.eventNext,
-    playback: state.playback,
-    selectedEventIndex: state.loaded.selectedEventIndex,
-    numEvents: state.loaded.numEvents,
-  });
-
-  return useRuntimeStore(featureSelector);
-};
-
 export const useCuesheet = () => {
   const featureSelector = (state: RuntimeStore) => ({
     playback: state.playback,

apps/client/src/features/editors/Editor.module.scss

@@ -46,17 +46,16 @@ $playback-width: 26rem;
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: $rundown-width $playback-width 1fr;
+  grid-template-columns: 1fr $playback-width;
   grid-template-areas:
-    'rundown play info'
+    'rundown play'
-    'rundown mess info';
+    'rundown mess';
   gap: 0.5rem;
   overflow: hidden;
 
   .rundown,
   .playback,
-  .messages,
+  .messages {
-  .info {
     position: relative;
     border-radius: 8px;
     height: 100%;
@@ -72,6 +71,7 @@ $playback-width: 26rem;
 
 .rundown {
   grid-area: rundown;
+  min-width: $rundown-width;
 
   .content {
     height: calc(100% - 1.5rem);
@@ -79,18 +79,6 @@ $playback-width: 26rem;
   }
 }
 
-.info {
-  grid-area: info;
-  min-width: 17rem;
-  max-width: 800px;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}
-
 .messages {
   grid-area: mess;
   min-width: 24rem;

apps/client/src/features/editors/Editor.tsx

@@ -16,7 +16,6 @@ import styles from './Editor.module.scss';
 const Rundown = lazy(() => import('../rundown/RundownExport'));
 const TimerControl = lazy(() => import('../control/playback/TimerControlExport'));
 const MessageControl = lazy(() => import('../control/message/MessageControlExport'));
-const Info = lazy(() => import('../info/InfoExport'));
 const EventEditor = lazy(() => import('../event-editor/EventEditorExport'));
 
 const IntegrationModal = lazy(() => import('../modals/integration-modal/IntegrationModal'));
@@ -85,7 +84,6 @@ export default function Editor() {
             <Rundown />
             <MessageControl />
             <TimerControl />
-            <Info />
           </div>
         )}
         <Overview />

apps/client/src/features/info/Info.module.scss

@@ -1,45 +0,0 @@
-@use '../../theme/mixins' as *;
-@use '../../theme/v2Styles' as *;
-
-.panelHeader {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  font-size: $inner-section-text-size;
-
-  .title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .selected {
-    min-width: max-content;
-    color: $label-gray;
-  }
-}
-
-.description {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.labels {
-  font-size: $inner-section-text-size;
-  display: flex;
-  flex-direction: column;
-  gap: $element-inner-spacing;
-}
-
-.label {
-  color: $section-white;
-}
-
-.content {
-  color: $secondary-text-gray;
-  margin-left: $element-inner-spacing;
-  font-size: $text-body-size;
-}

apps/client/src/features/info/Info.tsx

@@ -1,33 +0,0 @@
-import { useInfoPanel } from '../../common/hooks/useSocket';
-
-import CollapsableInfo from './CollapsableInfo';
-import InfoTitles from './InfoTitles';
-
-export default function Info() {
-  const data = useInfoPanel();
-
-  const titlesNow = {
-    title: data.eventNow?.title || '',
-    subtitle: data.eventNow?.subtitle || '',
-    presenter: data.eventNow?.presenter || '',
-    note: data.eventNow?.note || '',
-  };
-
-  const titlesNext = {
-    title: data.eventNext?.title || '',
-    subtitle: data.eventNext?.subtitle || '',
-    presenter: data.eventNext?.presenter || '',
-    note: data.eventNext?.note || '',
-  };
-
-  return (
-    <>
-      <CollapsableInfo title='Playing Now'>
-        <InfoTitles data={titlesNow} />
-      </CollapsableInfo>
-      <CollapsableInfo title='Playing Next'>
-        <InfoTitles data={titlesNext} />
-      </CollapsableInfo>
-    </>
-  );
-}

apps/client/src/features/info/InfoExport.tsx

@@ -1,24 +0,0 @@
-import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-
-import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
-import { handleLinks } from '../../common/utils/linkUtils';
-
-import Info from './Info';
-
-import style from '../editors/Editor.module.scss';
-
-const InfoExport = () => {
-  return (
-    <div className={style.info} data-testid='panel-info'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'info')} />
-      <div className={style.content}>
-        <ErrorBoundary>
-          <Info />
-        </ErrorBoundary>
-      </div>
-    </div>
-  );
-};
-
-export default memo(InfoExport);

apps/client/src/features/info/InfoTitles.tsx

@@ -1,36 +0,0 @@
-import style from './Info.module.scss';
-
-type TitleShape = {
-  title: string;
-  presenter: string;
-  subtitle: string;
-  note: string;
-};
-
-interface InfoTitleProps {
-  data: TitleShape;
-}
-
-export default function InfoTitles(props: InfoTitleProps) {
-  const { data } = props;
-  return (
-    <div className={style.labels}>
-      <div>
-        <span className={style.label}>Title:</span>
-        <span className={style.content}>{data.title}</span>
-      </div>
-      <div>
-        <span className={style.label}>Presenter:</span>
-        <span className={style.content}>{data.presenter}</span>
-      </div>
-      <div>
-        <span className={style.label}>Subtitle:</span>
-        <span className={style.content}>{data.subtitle}</span>
-      </div>
-      <div>
-        <span className={style.label}>Note:</span>
-        <span className={style.content}>{data.note}</span>
-      </div>
-    </div>
-  );
-}

e2e/tests/000-smoke-tests.spec.ts

@@ -13,7 +13,6 @@ test.describe('pages routes are available', () => {
       await expect(page.getByTestId('panel-rundown')).toBeVisible();
       await expect(page.getByTestId('panel-timer-control')).toBeVisible();
       await expect(page.getByTestId('panel-messages-control')).toBeVisible();
-      await expect(page.getByTestId('panel-info')).toBeVisible();
       await page.screenshot({ path: 'automated-screenshots/editor.png' });
     });
 
@@ -99,9 +98,5 @@ test.describe('pages routes are available', () => {
       await page.goto('http://localhost:4001/messagecontrol');
       await expect(page.getByTestId('panel-messages-control')).toBeVisible();
     });
-    test('info', async ({ page }) => {
-      await page.goto('http://localhost:4001/info');
-      await expect(page.getByTestId('panel-info')).toBeVisible();
-    });
   });
 });