refactor: improve links inside editor

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -76,10 +76,3 @@
   color: $ontime-roll;
   font-size: $text-body-size;
 }
-
-.reportLink {
-  color: $label-gray;
-  font-size: $text-body-size;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -3,6 +3,7 @@ import { Tooltip } from '@chakra-ui/react';
 import { MaybeNumber, Playback, TimerPhase } from 'ontime-types';
 import { dayInMs, millisToString } from 'ontime-utils';
 
+import AppLink from '../../../../common/components/link/app-link/AppLink';
 import { useTimer } from '../../../../common/hooks/useSocket';
 import useReport from '../../../../common/hooks-query/useReport';
 import { formatDuration } from '../../../../common/utils/time';
@@ -98,11 +99,7 @@ function StoppedStatus() {
   const hasReport = Object.keys(data).length > 0;
 
   if (hasReport) {
-    return (
-      <a className={style.reportLink} href='/editor?settings=feature_settings__report'>
-        Go to report management
-      </a>
-    );
+    return <AppLink search='settings=feature_settings__report'>Go to report management</AppLink>;
   }
 
   return null;

apps/client/src/features/rundown/event-editor/EventEditor.tsx

@@ -1,8 +1,7 @@
 import { CSSProperties, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { Button } from '@chakra-ui/react';
 import { CustomFieldLabel, OntimeEvent } from 'ontime-types';
 
+import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
@@ -29,7 +28,6 @@ export default function EventEditor(props: EventEditorProps) {
   const { event } = props;
   const { data: customFields } = useCustomFields();
   const { updateEvent } = useEventAction();
-  const [_searchParams, setSearchParams] = useSearchParams();
 
   const isEditor = window.location.pathname.includes('editor');
 
@@ -45,10 +43,6 @@ export default function EventEditor(props: EventEditorProps) {
     [event?.id, updateEvent],
   );
 
-  const handleOpenCustomManager = () => {
-    setSearchParams({ settings: 'feature_settings__custom' });
-  };
-
   if (!event) {
     return <EventEditorEmpty />;
   }
@@ -83,11 +77,7 @@ export default function EventEditor(props: EventEditorProps) {
       <div className={style.column}>
         <Editor.Title>
           Custom Fields
-          {isEditor && (
-            <Button variant='ontime-subtle' size='sm' onClick={handleOpenCustomManager}>
-              Manage
-            </Button>
-          )}
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage</AppLink>}
         </Editor.Title>
 
         {Object.keys(customFields).map((fieldKey) => {