refactor: network interfaces can be copied or followed

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss

@@ -4,3 +4,8 @@
   gap: $section-spacing;
   row-gap: $element-inner-spacing;
 }
+
+.goIcon {
+  transform: rotate(45deg);
+  margin-left: 0.25rem;
+}

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx

@@ -1,19 +1,33 @@
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+
 import { serverPort } from '../../../../common/api/constants';
-import AppLink from '../../../../common/components/app-link/AppLink';
+import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
+import { openLink } from '../../../../common/utils/linkUtils';
 
 import style from './NetworkInterfaces.module.scss';
 
 export default function InfoNif() {
   const { data } = useInfo();
 
+  const handleClick = (address: string) => openLink(address);
+
   return (
     <div className={style.interfaces}>
-      {data?.networkInterfaces?.map((nif) => (
-        <AppLink key={nif.address} href={`http://${nif.address}:${serverPort}`}>
-          {`${nif.name} - ${nif.address}`}
-        </AppLink>
-      ))}
+      {data?.networkInterfaces?.map((nif) => {
+        const address = `http://${nif.address}:${serverPort}`;
+
+        return (
+          <CopyTag
+            key={nif.name}
+            copyValue={address}
+            onClick={() => handleClick(address)}
+            label='Copy IP or navigate to address'
+          >
+            {`${nif.name} - ${nif.address}`} <IoArrowUp className={style.goIcon} />
+          </CopyTag>
+        );
+      })}
     </div>
   );
 }

apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx

@@ -193,7 +193,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
         <Panel.ListGroup>
           <div className={style.buttonRow}>
             {isAuthenticating && <Spinner />}
-            <CopyTag label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
+            <CopyTag copyValue={authKey ?? ''} label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
               {authKey ? authKey : 'Upload files to generate Auth Key'}
             </CopyTag>
             <Button

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

@@ -1,4 +1,4 @@
-import { CSSProperties, useCallback, useEffect, useState } from 'react';
+import { CSSProperties, memo, useCallback, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
 import { CustomFieldLabel, isOntimeEvent, OntimeEvent } from 'ontime-types';
@@ -126,10 +126,32 @@ export default function EventEditor() {
           })}
         </div>
       </div>
-      <div className={style.footer}>
-        <CopyTag label='OSC trigger by id'>{`/ontime/load/id "${event.id}"`}</CopyTag>
-        <CopyTag label='OSC trigger by cue'>{`/ontime/load/cue "${event.cue}"`}</CopyTag>
-      </div>
+      <EventEditorFooter id={event.id} cue={event.cue} />
+    </div>
+  );
+}
+
+interface EventEditorFooterProps {
+  id: string;
+  cue: string;
+}
+
+const EventEditorFooter = memo(_EventEditorFooter);
+
+function _EventEditorFooter(props: EventEditorFooterProps) {
+  const { id, cue } = props;
+
+  const loadById = `/ontime/load/id "${id}"`;
+  const loadByCue = `/ontime/load/cue "${cue}"`;
+
+  return (
+    <div className={style.footer}>
+      <CopyTag copyValue={loadById} label='OSC trigger by ID'>
+        {loadById}
+      </CopyTag>
+      <CopyTag copyValue={loadByCue} label='OSC trigger by cue'>
+        {loadByCue}
+      </CopyTag>
     </div>
   );
 }