UX tweak

* Playhead doesn't get occluded by other elements anymore

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx

@@ -20,7 +20,7 @@ const Label = styled.div`
   padding: 1px 8px;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  z-index: ${() => zIndexes.rightOverlay + 1};
+  z-index: ${() => zIndexes.currentFrameStamp};
 `
 
 const Line = styled.div`

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx

@@ -3,7 +3,7 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEdi
 import RoomToClick from '@theatre/studio/uiComponents/RoomToClick'
 import useDrag from '@theatre/studio/uiComponents/useDrag'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import {usePrism} from '@theatre/dataverse-react'
+import {usePrism, useVal} from '@theatre/dataverse-react'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import type {Pointer} from '@theatre/dataverse'
 import {val} from '@theatre/dataverse'
@@ -11,7 +11,10 @@ import clamp from 'lodash-es/clamp'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
-import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
+import {
+  attributeNameThatLocksFramestamp,
+  useLockFrameStampPosition,
+} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
 
 const Container = styled.div<{isVisible: boolean}>`
   --thumbColor: #00e0ff;
@@ -20,7 +23,7 @@ const Container = styled.div<{isVisible: boolean}>`
   left: 0;
   width: 5px;
   height: 100%;
-  z-index: ${() => zIndexes.seeker};
+  z-index: ${() => zIndexes.playhead};
   pointer-events: none;
 
   display: ${(props) => (props.isVisible ? 'block' : 'none')};
@@ -159,6 +162,9 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
 
   useDrag(thumbNode, gestureHandlers)
 
+  // hide the frame stamp when seeking
+  useLockFrameStampPosition(useVal(layoutP.seeker.isSeeking), -1)
+
   return usePrism(() => {
     const isSeeking = val(layoutP.seeker.isSeeking)
 

theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx

@@ -44,25 +44,25 @@ const LeftBackground = styled.div`
 `
 
 export const zIndexes = (() => {
-  const scrollableArea = 0
+  const s = {
-  const rightOverlay = scrollableArea + 1
+    rightBackground: 0,
-  const rightBackground = scrollableArea - 1
+    scrollableArea: 0,
-  const seeker = rightOverlay + 1
+    rightOverlay: 0,
-  const currentFrameStamp = seeker + 1
+    lengthIndicatorCover: 0,
-  const lengthIndicatorCover = currentFrameStamp + 1
+    lengthIndicatorStrip: 0,
-  const lengthIndicatorStrip = lengthIndicatorCover + 1
+    playhead: 0,
-  const horizontalScrollbar = lengthIndicatorStrip + 1
+    currentFrameStamp: 0,
-
+    horizontalScrollbar: 0,
-  return {
-    scrollableArea,
-    rightOverlay,
-    rightBackground,
-    seeker,
-    horizontalScrollbar,
-    currentFrameStamp,
-    lengthIndicatorCover,
-    lengthIndicatorStrip,
   }
+
+  // sort the z-indexes
+  let i = -1
+  for (const key of Object.keys(s)) {
+    s[key as unknown as keyof typeof s] = i
+    i++
+  }
+
+  return s
 })()
 
 const Header_Container = styled(PanelDragZone)`