fix: recover cursor logic (#773)

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -28,7 +28,7 @@ $skip-opacity: 0.1;
     --status-color-active-override: #{$green-400};
   }
 
-  &.selected {
+  &.loaded {
     background-color: $gray-1325;
   }
 
@@ -47,6 +47,10 @@ $skip-opacity: 0.1;
     @include declare-overrides;
   }
 
+  &.selected {
+    outline: 1px solid $block-selected-color;
+  }
+
   &.hasCursor {
     outline: 1px solid $block-cursor-color;
   }

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -10,6 +10,7 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 import { EndAction, MaybeNumber, MaybeString, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
+import { useAppMode } from '../../../common/stores/appModeStore';
 import copyToClipboard from '../../../common/utils/copyToClipboard';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import type { EventItemActions } from '../RundownEntry';
@@ -41,7 +42,7 @@ interface EventBlockProps {
   isPast: boolean;
   next: boolean;
   skip: boolean;
-  selected: boolean;
+  loaded: boolean;
   hasCursor: boolean;
   playback?: Playback;
   isRolling: boolean;
@@ -77,7 +78,7 @@ export default function EventBlock(props: EventBlockProps) {
     isPast,
     next,
     skip = false,
-    selected,
+    loaded,
     hasCursor,
     playback,
     isRolling,
@@ -85,6 +86,7 @@ export default function EventBlock(props: EventBlockProps) {
   } = props;
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
   const { selectedEvents, setSelectedEvents } = useEventSelection();
+  const setCursor = useAppMode((state) => state.setCursor);
   const handleRef = useRef<null | HTMLSpanElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -205,13 +207,15 @@ export default function EventBlock(props: EventBlockProps) {
     };
   }, [handleRef]);
 
+  const isSelected = selectedEvents.has(eventId);
   const blockClasses = cx([
     style.eventBlock,
     skip ? style.skip : null,
     isPast ? style.past : null,
-    selected ? style.selected : null,
+    loaded ? style.loaded : null,
     playback ? style[playback] : null,
-    selectedEvents.has(eventId) ? style.hasCursor : null,
+    isSelected ? style.selected : null,
+    hasCursor ? style.hasCursor : null,
   ]);
 
   const handleFocusClick = (event: MouseEvent) => {
@@ -227,9 +231,8 @@ export default function EventBlock(props: EventBlockProps) {
     // UI indexes are 1 based
     const index = eventIndex - 1;
     const editMode = getSelectionMode(event);
-    return setSelectedEvents({ id: eventId, index, selectMode: editMode });
-
-    // moveCursorTo(eventId, true);
+    setSelectedEvents({ id: eventId, index, selectMode: editMode });
+    setCursor(eventId);
   };
 
   return (
@@ -267,7 +270,7 @@ export default function EventBlock(props: EventBlockProps) {
           delay={delay}
           next={next}
           skip={skip}
-          selected={selected}
+          loaded={loaded}
           playback={playback}
           isRolling={isRolling}
           actionHandler={actionHandler}

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -42,7 +42,7 @@ interface EventBlockInnerProps {
   delay: number;
   next: boolean;
   skip: boolean;
-  selected: boolean;
+  loaded: boolean;
   playback?: Playback;
   isRolling: boolean;
   actionHandler: (action: EventItemActions, payload?: any) => void;
@@ -64,7 +64,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     delay,
     next,
     skip = false,
-    selected,
+    loaded,
     playback,
     isRolling,
     actionHandler,
@@ -110,13 +110,13 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
         skip={skip}
         isPlaying={eventIsPlaying}
         isPaused={eventIsPaused}
-        selected={selected}
+        loaded={loaded}
         disablePlayback={skip || isRolling}
       />
       <div className={style.statusElements} id='block-status' data-ispublic={isPublic}>
         <span className={style.eventNote}>{note}</span>
-        <div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
-          {selected && <EventBlockProgressBar playback={playback} />}
+        <div className={loaded ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
+          {loaded && <EventBlockProgressBar playback={playback} />}
         </div>
         <div className={style.eventStatus} tabIndex={-1}>
           <Tooltip label={`Time type: ${timerType}`} {...tooltipProps}>
@@ -137,7 +137,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
         </div>
       </div>
       <div className={style.eventActions}>
-        <BlockActionMenu showClone enableDelete={!selected} actionHandler={actionHandler} />
+        <BlockActionMenu showClone enableDelete={!loaded} actionHandler={actionHandler} />
       </div>
     </>
   );

apps/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx

@@ -34,7 +34,7 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
           aria-label='Event options'
           icon={<IoEllipsisHorizontal />}
           tabIndex={-1}
-          variant='ontime-subtle-white'
+          variant='ontime-ghosted-white'
           size='sm'
           className={className}
         />

apps/client/src/features/rundown/event-block/composite/EventBlockPlayback.tsx

@@ -32,12 +32,12 @@ interface EventBlockPlaybackProps {
   skip: boolean;
   isPlaying: boolean;
   isPaused: boolean;
-  selected: boolean;
+  loaded: boolean;
   disablePlayback: boolean;
 }
 
 const EventBlockPlayback = (props: EventBlockPlaybackProps) => {
-  const { eventId, skip, isPlaying, isPaused, selected, disablePlayback } = props;
+  const { eventId, skip, isPlaying, isPaused, loaded, disablePlayback } = props;
   const { updateEvent } = useEventAction();
 
   const toggleSkip = () => {
@@ -93,7 +93,7 @@ const EventBlockPlayback = (props: EventBlockPlaybackProps) => {
         {...blockBtnStyle}
         clickHandler={toggleSkip}
         tabIndex={-1}
-        isDisabled={selected}
+        isDisabled={loaded}
       />
       <TooltipActionBtn
         variant='ontime-subtle-white'