refactor: restructure settings

refactor: migrate react components

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

@@ -30,7 +30,7 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
   }
 
   return (
-    <tr className={style.blockRow} style={{ '--user-bg': colour }}>
+    <tr className={style.blockRow} style={{ '--user-bg': colour }} data-testid='cuesheet-block'>
       {showActionMenu && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton

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

@@ -18,6 +18,7 @@ function DelayRow({ duration, parentBgColour }: DelayRowProps) {
       style={{
         '--user-bg': parentBgColour ?? 'transparent',
       }}
+      data-testid='cuesheet-delay'
     >
       <td tabIndex={0} role='cell'>
         {delayTime}

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

@@ -84,6 +84,7 @@ export default function EventRow({
         '--user-bg': parentBgColour ?? 'transparent',
       }}
       ref={selectedRef ?? ownRef}
+      data-testid='cuesheet-event'
     >
       {showActionMenu && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetShareModal.tsx

@@ -5,7 +5,7 @@ import RotatedLink from '../../../../common/components/icons/RotatedLink';
 import Modal from '../../../../common/components/modal/Modal';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
-import GenerateLinkFormExport from '../../../../features/app-settings/panel/network-panel/GenerateLinkFormExport';
+import GenerateLinkFormExport from '../../../../features/app-settings/panel/feature-panel/GenerateLinkFormExport';
 
 function CuesheetShareModal() {
   const { data: infoData } = useInfo();

apps/client/src/views/editor/Editor.tsx

@@ -40,7 +40,7 @@ export default function Editor() {
     if (isSettingsOpen) {
       close();
     } else {
-      setLocation('project');
+      setLocation('settings');
     }
   }, [close, isSettingsOpen, setLocation]);
 
@@ -54,12 +54,7 @@ export default function Editor() {
         <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={handler.open}>
           <IoApps />
         </IconButton>
-        <IconButton
-          aria-label='Toggle settings'
-          variant={isSettingsOpen ? 'subtle' : 'subtle-white'}
-          size='xlarge'
-          onClick={toggleSettings}
-        >
+        <IconButton aria-label='Toggle settings' variant='subtle-white' size='xlarge' onClick={toggleSettings}>
           {isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
         </IconButton>
       </EditorOverview>

apps/client/src/views/editor/welcome/Welcome.tsx

@@ -74,7 +74,7 @@ export default function Welcome({ onClose }: WelcomeProps) {
           <div className={style.column}>
             <div className={style.header}>
               Welcome to Ontime
-              <IconButton variant='subtle-white'>
+              <IconButton aria-label='close welcome modal' variant='subtle-white'>
                 <IoClose />
               </IconButton>
             </div>

apps/client/src/views/editor/welcome/composite/ImportProjectButton.tsx

@@ -4,7 +4,6 @@
  */
 
 import { ChangeEvent, useRef } from 'react';
-import { Input } from '@chakra-ui/react';
 
 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches } from '../../../../common/api/utils';
@@ -41,7 +40,7 @@ export default function ImportProjectButton({ onFinish }: ImportProjectButtonPro
 
   return (
     <>
-      <Input
+      <input
         ref={fileInputRef}
         style={{ display: 'none' }}
         type='file'