feat: share link from cuesheet

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

@@ -0,0 +1,37 @@
+import { useDisclosure } from '@mantine/hooks';
+
+import Button from '../../../../common/components/buttons/Button';
+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';
+
+function CuesheetShareModal() {
+  const { data: infoData } = useInfo();
+  const { data: urlPresetData } = useUrlPresets();
+  const [isOpen, handler] = useDisclosure();
+
+  // Don't render the modal content until it's open and data is loaded
+  const showModalContent = isOpen && infoData && urlPresetData;
+
+  return (
+    <>
+      <Button variant='subtle' onClick={handler.open}>
+        <RotatedLink />
+        Share...
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={handler.close}
+        title='Share cuesheet view'
+        showCloseButton
+        bodyElements={
+          showModalContent ? <GenerateLinkFormExport lockedPath={{ value: 'cuesheet', label: 'Cuesheet' }} /> : null
+        }
+      />
+    </>
+  );
+}
+
+export default CuesheetShareModal;

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

@@ -7,10 +7,11 @@ import { OntimeEntry } from 'ontime-types';
 import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
-import RotatedLink from '../../../../common/components/icons/RotatedLink';
 import PopoverContents from '../../../../common/components/popover/Popover';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 
+import CuesheetShareModal from './CuesheetShareModal';
+
 import style from './CuesheetTableSettings.module.scss';
 
 interface CuesheetTableSettingsProps {
@@ -41,13 +42,8 @@ function CuesheetTableSettings({
 
       <div className={style.inline}>
         <ViewSettingsFollowButton />
-
         <Editor.Separator orientation='vertical' />
-
-        <Button variant='subtle'>
-          <RotatedLink />
-          Share...
-        </Button>
+        <CuesheetShareModal />
       </div>
     </div>
   );