open preview drawer from calendar views

src/frontend/src/components/calendar/OrderCalendar.tsx

@@ -22,6 +22,7 @@ import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import useCalendar from '../../hooks/UseCalendar';
+import { openGlobalPreview } from '../../states/PreviewDrawerState';
 import { useUserState } from '../../states/UserState';
 import {
   AssignedToMeFilter,
@@ -166,14 +167,18 @@ export default function OrderCalendar({
     }
   };
 
-  // Callback when PurchaseOrder is clicked
+  // Callback when an order is clicked - open preview drawer, or navigate on modifier click
   const onClickOrder = (info: EventClickArg) => {
-    if (!!info.event.id) {
+    if (!info.event.id) return;
+
+    if (info.jsEvent.ctrlKey || info.jsEvent.metaKey || info.jsEvent.shiftKey) {
       navigateToLink(
         getDetailUrl(model, info.event.id),
         navigate,
         info.jsEvent
       );
+    } else {
+      openGlobalPreview(model, Number.parseInt(info.event.id));
     }
   };
 

src/frontend/src/components/previews/GlobalPreviewDrawer.tsx

@@ -8,7 +8,8 @@ export default function GlobalPreviewDrawer() {
   const instance = usePreviewDrawerState((state) => state.instance);
   const closePreview = usePreviewDrawerState((state) => state.closePreview);
 
-  if (!isOpen || modelType === undefined || id === undefined) {
+  // Only skip rendering before the drawer has ever been opened
+  if (modelType === undefined || id === undefined) {
     return null;
   }
 

src/frontend/src/components/previews/PreviewDrawer.tsx

@@ -36,11 +36,16 @@ export default function PreviewDrawer({
   return (
     <Drawer
       position='right'
-      size='lg'
+      size='xl'
       title={<StylishText size='lg'>{`${modelInfo.label} #${id}`}</StylishText>}
       opened={opened}
       onClose={onClose}
       withCloseButton
+      transitionProps={{
+        transition: 'slide-left',
+        duration: 300,
+        timingFunction: 'ease'
+      }}
     >
       <Stack gap='xs'>
         {!instance && instanceQuery.isFetching ? (

src/frontend/src/states/PreviewDrawerState.tsx

@@ -22,12 +22,7 @@ export const usePreviewDrawerState = create<PreviewDrawerStateProps>()(
     },
 
     closePreview: () => {
-      set({
-        modelType: undefined,
-        id: undefined,
-        instance: undefined,
-        isOpen: false
-      });
+      set({ isOpen: false });
     }
   })
 );