feat: cuesheet sharing

feat: locked presets

refactor: simplify locked param

refactor: create share links

apps/client/src/common/components/modal/Modal.module.scss

@@ -7,7 +7,7 @@
   padding-inline: 1rem;
   min-width: min(680px, 90vw);
   min-height: min(200px, 10vh);
-  max-width: min(800px, 90vw);
+  max-width: min(900px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -1,20 +1,23 @@
 import { memo } from 'react';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 
+import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
+
 import FloatingNavigation from './floating-navigation/FloatingNavigation';
 import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 import NavigationMenu from './NavigationMenu';
-import useViewEditor from './useViewEditor';
 
 interface ViewNavigationMenuProps {
-  isLockable?: boolean;
+  /** prevent navigation and settings*/
+  isViewLocked?: boolean;
+  /** prevent showing settings */
   suppressSettings?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isLockable, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
-  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
+  const { open: showEditFormDrawer } = useViewParamsEditorStore();
 
   useHotkeys([
     [

apps/client/src/common/components/navigation-menu/useViewEditor.tsx

@@ -1,23 +0,0 @@
-import { useMemo } from 'react';
-import { useSearchParams } from 'react-router';
-
-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
-
-interface EditorVisibilityOptions {
-  isLockable?: boolean;
-}
-
-export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
-  const [searchParams] = useSearchParams();
-  const { open: showEditFormDrawer } = useViewParamsEditorStore();
-
-  const isViewLocked = useMemo(() => {
-    if (!isLockable) {
-      return false;
-    }
-    return isStringBoolean(searchParams.get('locked'));
-  }, [isLockable, searchParams]);
-
-  return { showEditFormDrawer, isViewLocked };
-}

apps/client/src/common/components/radio-group/RadioGroup.module.scss

@@ -3,6 +3,13 @@
   color: $gray-900;
   font-size: calc(1rem - 2px);
   color: $ui-white;
+
+  &[data-disabled] {
+    .item {
+      opacity: $opacity-disabled;
+      cursor: not-allowed;
+    }
+  }
 }
 
 .horizontal {

apps/client/src/common/components/state/EmptyTableBody.module.scss

@@ -5,6 +5,7 @@
   .emptyCell {
     margin-inline: auto;
     text-align: center;
+    padding-top: 10vh;
   }
 
   .empty {

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -24,6 +24,7 @@ interface EditFormDrawerProps {
 
 export default memo(ViewParamsEditor);
 function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
+  // TODO: can we ensure that the options update when the user loads an alias?
   const [_, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
   const { isOpen, close } = useViewParamsEditorStore();
@@ -62,7 +63,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
         <Dialog.Popup className={style.drawer}>
           <div className={style.header}>
             <Dialog.Title>Customise</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' onClick={handleClose}>
+            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
               <IoClose />
             </IconButton>
           </div>
@@ -86,7 +87,13 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
             <Button variant='subtle' size='large' onClick={resetParams} type='reset'>
               Reset to default
             </Button>
-            <Button variant='primary' size='large' form='edit-params-form' type='submit'>
+            <Button
+              variant='primary'
+              size='large'
+              form='edit-params-form'
+              type='submit'
+              data-testid='apply-view-params'
+            >
               Apply
             </Button>
           </div>