From a3a0bae17f6afe4fda191ad634ea398e56ce5427 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 6 Dec 2024 16:17:51 -0500
Subject: [PATCH 01/22] add draggable sidebar component for timeline

---
 .../src/assets/localization/en/button.json    |  2 +-
 .../ProtocolSteps/DraggableSidebar.tsx        | 91 +++++++++++++++++++
 .../ProtocolSteps/Timeline/AddStepButton.tsx  | 21 +++--
 .../Timeline/TimelineToolbox.tsx              | 10 +-
 .../pages/Designer/ProtocolSteps/index.tsx    |  7 +-
 5 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx

diff --git a/protocol-designer/src/assets/localization/en/button.json b/protocol-designer/src/assets/localization/en/button.json
index bedb95b28c1..af643b9b815 100644
--- a/protocol-designer/src/assets/localization/en/button.json
+++ b/protocol-designer/src/assets/localization/en/button.json
@@ -1,5 +1,5 @@
 {
-  "add_step": "+ Add Step",
+  "add_step": "Add Step",
   "add_off_deck": "+ Off-deck labware",
   "cancel": "cancel",
   "close": "close",
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
new file mode 100644
index 00000000000..afd010f44a8
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -0,0 +1,91 @@
+import { useState, useRef, useCallback, useEffect } from 'react'
+import styled from 'styled-components'
+import { DIRECTION_COLUMN, DISPLAY_FLEX, Flex } from '@opentrons/components'
+import { TimelineToolbox } from './Timeline/TimelineToolbox'
+
+const SidebarContainer = styled(Flex)<{ width: number }>`
+  display: ${DISPLAY_FLEX};
+  flex-direction: ${DIRECTION_COLUMN};
+  background-color: #f4f4f4;
+  border-right: 1px solid #ccc;
+  position: relative;
+  width: ${props => props.width}px;
+  overflow: hidden;
+`
+
+const SidebarContent = styled(Flex)`
+  flex: 1;
+`
+
+const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+  width: 0.3125rem;
+  cursor: ew-resize;
+  background-color: #ddd;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: blue; /* Hover state */
+  }
+
+  ${props =>
+    props.dragging === true &&
+    `
+    background-color: darkblue; /* Dragging state */
+  `}
+`
+
+const INITIAL_SIDEBAR_WIDTH = 350
+const MIN_SIDEBAR_WIDTH = 80
+const MAX_SIDEBAR_WIDTH = 350
+
+export function DraggableSidebar(): JSX.Element {
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const [isResizing, setIsResizing] = useState(false)
+  const [sidebarWidth, setSidebarWidth] = useState(INITIAL_SIDEBAR_WIDTH)
+
+  const startResizing = useCallback(() => {
+    setIsResizing(true)
+  }, [])
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false)
+  }, [])
+
+  const resize = useCallback(
+    (mouseMoveEvent: MouseEvent) => {
+      if (isResizing && sidebarRef.current != null) {
+        const newWidth =
+          mouseMoveEvent.clientX -
+          sidebarRef.current.getBoundingClientRect().left
+
+        if (newWidth >= MIN_SIDEBAR_WIDTH && newWidth <= MAX_SIDEBAR_WIDTH) {
+          setSidebarWidth(newWidth)
+        }
+      }
+    },
+    [isResizing]
+  )
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize)
+    window.addEventListener('mouseup', stopResizing)
+
+    return () => {
+      window.removeEventListener('mousemove', resize)
+      window.removeEventListener('mouseup', stopResizing)
+    }
+  }, [resize, stopResizing])
+
+  return (
+    <SidebarContainer ref={sidebarRef} width={sidebarWidth}>
+      <SidebarContent>
+        <TimelineToolbox sidebarWidth={sidebarWidth} />
+      </SidebarContent>
+      <SidebarResizer dragging={isResizing} onMouseDown={startResizing} />
+    </SidebarContainer>
+  )
+}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index b7e070de5c5..8318dffc33c 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -3,18 +3,21 @@ import { useDispatch, useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import {
-  useHoverTooltip,
-  TOOLTIP_TOP,
-  TOOLTIP_FIXED,
-  Tooltip,
+  BORDERS,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  POSITION_ABSOLUTE,
-  BORDERS,
+  Icon,
   NO_WRAP,
-  useOnClickOutside,
+  POSITION_ABSOLUTE,
   SecondaryButton,
+  SPACING,
+  StyledText,
+  TOOLTIP_FIXED,
+  TOOLTIP_TOP,
+  Tooltip,
+  useHoverTooltip,
+  useOnClickOutside,
 } from '@opentrons/components'
 import {
   HEATERSHAKER_MODULE_TYPE,
@@ -188,8 +191,10 @@ export function AddStepButton(): JSX.Element {
           setShowStepOverflowMenu(true)
         }}
         disabled={isStepCreationDisabled}
+        gridGap={SPACING.spacing10}
       >
-        {t('button:add_step')}
+        <Icon name="plus" size="1rem" />
+        <StyledText>{t('button:add_step')}</StyledText>
       </SecondaryButton>
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index 8ec9a91a6f0..45c9fe31997 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -25,7 +25,13 @@ import { DraggableSteps } from './DraggableSteps'
 import type { StepIdType } from '../../../../form-types'
 import type { ThunkDispatch } from '../../../../types'
 
-export const TimelineToolbox = (): JSX.Element => {
+interface TimelineToolboxProps {
+  sidebarWidth: number
+}
+
+export const TimelineToolbox = ({
+  sidebarWidth,
+}: TimelineToolboxProps): JSX.Element => {
   const { t } = useTranslation('protocol_steps')
   const orderedStepIds = useSelector(stepFormSelectors.getOrderedStepIds)
   const formData = useSelector(getUnsavedForm)
@@ -60,7 +66,7 @@ export const TimelineToolbox = (): JSX.Element => {
   return (
     <Toolbox
       position={POSITION_RELATIVE}
-      width="19.5rem"
+      width={`${sidebarWidth / 16}rem`}
       title={
         <StyledText desktopStyle="bodyLargeSemiBold">
           {t('timeline')}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 687553f3dc6..b769125a07d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -29,12 +29,13 @@ import {
 } from '../../../ui/steps/selectors'
 import { DeckSetupContainer } from '../DeckSetup'
 import { OffDeck } from '../Offdeck'
-import { TimelineToolbox, SubstepsToolbox } from './Timeline'
+import { SubstepsToolbox } from './Timeline'
 import { StepForm } from './StepForm'
 import { StepSummary } from './StepSummary'
 import { BatchEditToolbox } from './BatchEditToolbox'
 import { getDesignerTab } from '../../../file-data/selectors'
 import { TimelineAlerts } from '../../../organisms'
+import { DraggableSidebar } from './DraggableSidebar'
 
 const CONTENT_MAX_WIDTH = '46.9375rem'
 
@@ -62,6 +63,8 @@ export function ProtocolSteps(): JSX.Element {
       : null
 
   const stepDetails = currentStep?.stepDetails ?? null
+
+  console.log('ProtocolSteps')
   return (
     <Flex
       backgroundColor={COLORS.grey10}
@@ -71,7 +74,7 @@ export function ProtocolSteps(): JSX.Element {
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       padding={SPACING.spacing12}
     >
-      <TimelineToolbox />
+      <DraggableSidebar />
       <Flex
         alignItems={ALIGN_CENTER}
         alignSelf={ALIGN_CENTER}

From 6f81ca4f2a5dbd3eb7535aaef4ebf25c38aa352e Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 11 Dec 2024 17:05:31 -0500
Subject: [PATCH 02/22] update add step button

---
 .../ProtocolSteps/DraggableSidebar.tsx        | 71 +++++++-------
 .../ProtocolSteps/Timeline/AddStepButton.tsx  | 94 ++++++-------------
 .../Timeline/TimelineToolbox.tsx              |  7 +-
 .../Designer/ProtocolSteps/Timeline/utils.ts  | 55 ++++++++++-
 4 files changed, 126 insertions(+), 101 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index afd010f44a8..4493ca07857 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -3,41 +3,6 @@ import styled from 'styled-components'
 import { DIRECTION_COLUMN, DISPLAY_FLEX, Flex } from '@opentrons/components'
 import { TimelineToolbox } from './Timeline/TimelineToolbox'
 
-const SidebarContainer = styled(Flex)<{ width: number }>`
-  display: ${DISPLAY_FLEX};
-  flex-direction: ${DIRECTION_COLUMN};
-  background-color: #f4f4f4;
-  border-right: 1px solid #ccc;
-  position: relative;
-  width: ${props => props.width}px;
-  overflow: hidden;
-`
-
-const SidebarContent = styled(Flex)`
-  flex: 1;
-`
-
-const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
-  width: 0.3125rem;
-  cursor: ew-resize;
-  background-color: #ddd;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background-color: blue; /* Hover state */
-  }
-
-  ${props =>
-    props.dragging === true &&
-    `
-    background-color: darkblue; /* Dragging state */
-  `}
-`
-
 const INITIAL_SIDEBAR_WIDTH = 350
 const MIN_SIDEBAR_WIDTH = 80
 const MAX_SIDEBAR_WIDTH = 350
@@ -89,3 +54,39 @@ export function DraggableSidebar(): JSX.Element {
     </SidebarContainer>
   )
 }
+
+const SidebarContainer = styled(Flex)<{ width: number }>`
+  display: ${DISPLAY_FLEX};
+  flex-direction: ${DIRECTION_COLUMN};
+  background-color: #f4f4f4;
+  border-right: 1px solid #ccc;
+  position: relative;
+  width: ${props => props.width}px;
+  /* width: 100%; */
+  overflow: hidden;
+`
+
+const SidebarContent = styled(Flex)`
+  flex: 1;
+`
+
+const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+  width: 0.3125rem;
+  cursor: ew-resize;
+  background-color: #ddd;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: blue; /* Hover state */
+  }
+
+  ${props =>
+    props.dragging === true &&
+    `
+    background-color: darkblue; /* Dragging state */
+  `}
+`
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index a10d0d2dae4..16ad9a86eae 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -2,12 +2,15 @@ import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 import {
+  ALIGN_CENTER,
   BORDERS,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   Icon,
+  JUSTIFY_CENTER,
   NO_WRAP,
   POSITION_ABSOLUTE,
   SecondaryButton,
@@ -19,26 +22,18 @@ import {
   useHoverTooltip,
   useOnClickOutside,
 } from '@opentrons/components'
-import {
-  HEATERSHAKER_MODULE_TYPE,
-  MAGNETIC_MODULE_TYPE,
-  TEMPERATURE_MODULE_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
-} from '@opentrons/shared-data'
 import {
   actions as stepsActions,
   getIsMultiSelectMode,
 } from '../../../../ui/steps'
-import {
-  selectors as stepFormSelectors,
-  getIsModuleOnDeck,
-} from '../../../../step-forms'
+import { selectors as stepFormSelectors } from '../../../../step-forms'
 import {
   CLOSE_UNSAVED_STEP_FORM,
   ConfirmDeleteModal,
   getMainPagePortalEl,
 } from '../../../../organisms'
 import { getEnableComment } from '../../../../feature-flags/selectors'
+import { getIsStepTypeEnabled, getSupportedSteps } from './utils'
 
 import { AddStepOverflowButton } from './AddStepOverflowButton'
 
@@ -47,7 +42,11 @@ import type { ThunkDispatch } from 'redux-thunk'
 import type { BaseState } from '../../../../types'
 import type { StepType } from '../../../../form-types'
 
-export function AddStepButton(): JSX.Element {
+interface AddStepButtonProps {
+  hasIcon: boolean
+}
+
+export function AddStepButton({ hasIcon }: AddStepButtonProps): JSX.Element {
   const { t } = useTranslation(['tooltip', 'button'])
   const enableComment = useSelector(getEnableComment)
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
@@ -75,51 +74,11 @@ export function AddStepButton(): JSX.Element {
     null
   )
 
-  const getSupportedSteps = (): Array<
-    Exclude<StepType, 'manualIntervention'>
-  > =>
-    enableComment
-      ? [
-          'comment',
-          'moveLabware',
-          'moveLiquid',
-          'mix',
-          'pause',
-          'heaterShaker',
-          'magnet',
-          'temperature',
-          'thermocycler',
-        ]
-      : [
-          'moveLabware',
-          'moveLiquid',
-          'mix',
-          'pause',
-          'heaterShaker',
-          'magnet',
-          'temperature',
-          'thermocycler',
-        ]
-  const isStepTypeEnabled: Record<
-    Exclude<StepType, 'manualIntervention'>,
-    boolean
-  > = {
-    comment: enableComment,
-    moveLabware: true,
-    moveLiquid: true,
-    mix: true,
-    pause: true,
-    magnet: getIsModuleOnDeck(modules, MAGNETIC_MODULE_TYPE),
-    temperature: getIsModuleOnDeck(modules, TEMPERATURE_MODULE_TYPE),
-    thermocycler: getIsModuleOnDeck(modules, THERMOCYCLER_MODULE_TYPE),
-    heaterShaker: getIsModuleOnDeck(modules, HEATERSHAKER_MODULE_TYPE),
-  }
-
   const addStep = (stepType: StepType): ReturnType<any> =>
     dispatch(stepsActions.addAndSelectStep({ stepType }))
 
-  const items = getSupportedSteps()
-    .filter(stepType => isStepTypeEnabled[stepType])
+  const items = getSupportedSteps(enableComment)
+    .filter(stepType => getIsStepTypeEnabled(enableComment, modules)[stepType])
     .map(stepType => (
       <AddStepOverflowButton
         key={stepType}
@@ -157,16 +116,8 @@ export function AddStepButton(): JSX.Element {
 
       {showStepOverflowMenu ? (
         <Flex
-          position={POSITION_ABSOLUTE}
-          zIndex={5}
+          css={STEP_OVERFLOW_MENU_STYLE}
           ref={overflowWrapperRef}
-          left="19.5rem"
-          whiteSpace={NO_WRAP}
-          bottom="4.2rem"
-          borderRadius={BORDERS.borderRadius8}
-          boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
-          backgroundColor={COLORS.white}
-          flexDirection={DIRECTION_COLUMN}
           onClick={(e: MouseEvent) => {
             e.preventDefault()
             e.stopPropagation()
@@ -182,6 +133,10 @@ export function AddStepButton(): JSX.Element {
         </Tooltip>
       )}
       <SecondaryButton
+        display="flex"
+        justifyContent={JUSTIFY_CENTER}
+        alignItems={ALIGN_CENTER}
+        gridGap={SPACING.spacing10}
         width="100%"
         {...targetProps}
         id="AddStepButton"
@@ -189,11 +144,22 @@ export function AddStepButton(): JSX.Element {
           setShowStepOverflowMenu(true)
         }}
         disabled={isStepCreationDisabled}
-        gridGap={SPACING.spacing10}
       >
-        <Icon name="plus" size="1rem" />
+        {hasIcon ? <Icon name="plus" size="1rem" /> : null}
         <StyledText>{t('button:add_step')}</StyledText>
       </SecondaryButton>
     </>
   )
 }
+
+const STEP_OVERFLOW_MENU_STYLE = css`
+  position: ${POSITION_ABSOLUTE};
+  z-index: 5;
+  left: 19.5rem;
+  white-space: ${NO_WRAP};
+  bottom: 4.2rem;
+  border-radius: ${BORDERS.borderRadius8};
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background-color: ${COLORS.white};
+  flex-direction: ${DIRECTION_COLUMN};
+`
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index c210250dab3..77c259e7e25 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -25,6 +25,7 @@ import { DraggableSteps } from './DraggableSteps'
 import type { StepIdType } from '../../../../form-types'
 import type { ThunkDispatch } from '../../../../types'
 
+const SIDEBAR_MIN_WIDTH_FOR_ICON = 179
 interface TimelineToolboxProps {
   sidebarWidth: number
 }
@@ -74,7 +75,11 @@ export const TimelineToolbox = ({
       }
       titlePadding={SPACING.spacing12}
       childrenPadding={SPACING.spacing12}
-      confirmButton={formData != null ? undefined : <AddStepButton />}
+      confirmButton={
+        formData != null ? undefined : (
+          <AddStepButton hasIcon={sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON} />
+        )
+      }
       height="calc(100vh - 6rem)"
     >
       <Flex
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index 2d918b7790f..8fc515b254b 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -1,7 +1,17 @@
 import round from 'lodash/round'
 import uniq from 'lodash/uniq'
 import { UAParser } from 'ua-parser-js'
-import type { StepIdType } from '../../../../form-types'
+
+import {
+  HEATERSHAKER_MODULE_TYPE,
+  MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+} from '@opentrons/shared-data'
+import { getIsModuleOnDeck } from '../../../../step-forms'
+
+import type { ModuleOnDeck } from '../../../../step-forms'
+import type { StepType, StepIdType } from '../../../../form-types'
 
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
   title.replace(
@@ -128,3 +138,46 @@ export const getMouseClickKeyInfo = (
 }
 
 const getUserOS = (): string | undefined => new UAParser().getOS().name
+
+export const getSupportedSteps = (
+  enableComment: boolean
+): Array<Exclude<StepType, 'manualIntervention'>> =>
+  enableComment
+    ? [
+        'comment',
+        'moveLabware',
+        'moveLiquid',
+        'mix',
+        'pause',
+        'heaterShaker',
+        'magnet',
+        'temperature',
+        'thermocycler',
+      ]
+    : [
+        'moveLabware',
+        'moveLiquid',
+        'mix',
+        'pause',
+        'heaterShaker',
+        'magnet',
+        'temperature',
+        'thermocycler',
+      ]
+
+export const getIsStepTypeEnabled = (
+  enableComment: boolean,
+  modules: Record<string, ModuleOnDeck>
+): Record<Exclude<StepType, 'manualIntervention'>, boolean> => {
+  return {
+    comment: enableComment,
+    moveLabware: true,
+    moveLiquid: true,
+    mix: true,
+    pause: true,
+    magnet: getIsModuleOnDeck(modules, MAGNETIC_MODULE_TYPE),
+    temperature: getIsModuleOnDeck(modules, TEMPERATURE_MODULE_TYPE),
+    thermocycler: getIsModuleOnDeck(modules, THERMOCYCLER_MODULE_TYPE),
+    heaterShaker: getIsModuleOnDeck(modules, HEATERSHAKER_MODULE_TYPE),
+  }
+}

From 041bda12904f7a38cf38d5695c2b2c8ae4a8bf7c Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 11 Dec 2024 18:03:16 -0500
Subject: [PATCH 03/22] modify icon position with sidebarWidth

---
 .../ProtocolSteps/Timeline/AddStepButton.tsx  |  8 +++---
 .../Timeline/ConnectedStepInfo.tsx            |  3 +++
 .../ProtocolSteps/Timeline/DraggableSteps.tsx |  7 ++++-
 .../ProtocolSteps/Timeline/StepContainer.tsx  | 27 ++++++++++++-------
 .../Timeline/TerminalItemStep.tsx             |  7 +++--
 .../Timeline/TimelineToolbox.tsx              | 16 ++++++++---
 6 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index 16ad9a86eae..19a19797e39 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -43,10 +43,10 @@ import type { BaseState } from '../../../../types'
 import type { StepType } from '../../../../form-types'
 
 interface AddStepButtonProps {
-  hasIcon: boolean
+  hasText: boolean
 }
 
-export function AddStepButton({ hasIcon }: AddStepButtonProps): JSX.Element {
+export function AddStepButton({ hasText }: AddStepButtonProps): JSX.Element {
   const { t } = useTranslation(['tooltip', 'button'])
   const enableComment = useSelector(getEnableComment)
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
@@ -145,8 +145,8 @@ export function AddStepButton({ hasIcon }: AddStepButtonProps): JSX.Element {
         }}
         disabled={isStepCreationDisabled}
       >
-        {hasIcon ? <Icon name="plus" size="1rem" /> : null}
-        <StyledText>{t('button:add_step')}</StyledText>
+        <Icon name="plus" size="1rem" />
+        {hasText ? <StyledText>{t('button:add_step')}</StyledText> : null}
       </SecondaryButton>
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
index 70cdf70a984..1a9ac29f33d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
@@ -49,6 +49,7 @@ export interface ConnectedStepInfoProps {
   dragHovered?: boolean
   openedOverflowMenuId?: string | null
   setOpenedOverflowMenuId?: Dispatch<SetStateAction<string | null>>
+  sidebarWidth: number
 }
 
 export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
@@ -58,6 +59,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
     dragHovered = false,
     openedOverflowMenuId,
     setOpenedOverflowMenuId,
+    sidebarWidth,
   } = props
   const { t } = useTranslation('application')
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
@@ -227,6 +229,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
           step.stepName || t(`stepType.${step.stepType}`)
         }`}
         dragHovered={dragHovered}
+        sidebarWidth={sidebarWidth}
       />
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
index 02e1ad772fa..f7b50126820 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
@@ -31,6 +31,7 @@ interface DragDropStepProps extends ConnectedStepItemProps {
   orderedStepIds: string[]
   openedOverflowMenuId?: string | null
   setOpenedOverflowMenuId?: Dispatch<SetStateAction<string | null>>
+  sidebarWidth: number
 }
 
 interface DropType {
@@ -46,6 +47,7 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
     stepNumber,
     openedOverflowMenuId,
     setOpenedOverflowMenuId,
+    sidebarWidth,
   } = props
   const stepRef = useRef<HTMLDivElement>(null)
 
@@ -94,6 +96,7 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
         stepNumber={stepNumber}
         stepId={stepId}
         dragHovered={hovered}
+        sidebarWidth={sidebarWidth}
       />
     </Box>
   )
@@ -102,9 +105,10 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
 interface DraggableStepsProps {
   orderedStepIds: StepIdType[]
   reorderSteps: (steps: StepIdType[]) => void
+  sidebarWidth: number
 }
 export function DraggableSteps(props: DraggableStepsProps): JSX.Element | null {
-  const { orderedStepIds, reorderSteps } = props
+  const { orderedStepIds, reorderSteps, sidebarWidth } = props
   const { t } = useTranslation('shared')
   const [openedOverflowMenuId, setOpenedOverflowMenuId] = useState<
     string | null
@@ -146,6 +150,7 @@ export function DraggableSteps(props: DraggableStepsProps): JSX.Element | null {
           orderedStepIds={orderedStepIds}
           openedOverflowMenuId={openedOverflowMenuId}
           setOpenedOverflowMenuId={setOpenedOverflowMenuId}
+          sidebarWidth={sidebarWidth}
         />
       ))}
       <StepDragPreview />
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 3db0802fbd5..843c7e920f1 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -12,6 +12,7 @@ import {
   Divider,
   Flex,
   Icon,
+  JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_START,
   OverflowBtn,
@@ -48,9 +49,11 @@ import type { BaseState } from '../../../../types'
 const STARTING_DECK_STATE = 'Starting deck'
 const FINAL_DECK_STATE = 'Ending deck'
 const PX_HEIGHT_TO_TOP_OF_CONTAINER = 32
+const SIDEBAR_MIN_WIDTH_FOR_ICON = 179
 export interface StepContainerProps {
   title: string
   iconName: IconName
+  sidebarWidth: number
   openedOverflowMenuId?: string | null
   setOpenedOverflowMenuId?: Dispatch<SetStateAction<string | null>>
   stepId?: string
@@ -83,6 +86,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     dragHovered = false,
     setOpenedOverflowMenuId,
     openedOverflowMenuId,
+    sidebarWidth,
   } = props
   const [top, setTop] = useState<number>(0)
   const menuRootRef = useRef<HTMLDivElement | null>(null)
@@ -91,6 +95,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
   const multiSelectItemIds = useSelector(getMultiSelectItemIds)
 
+  const hasText = sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON
   let backgroundColor = isStartingOrEndingState ? COLORS.blue20 : COLORS.grey20
   let color = COLORS.black90
   if (selected) {
@@ -183,14 +188,14 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
 
   return (
     <>
-      {showDeleteConfirmation && (
+      {showDeleteConfirmation === true && (
         <ConfirmDeleteModal
           modalType={DELETE_STEP_FORM}
           onCancelClick={cancelDelete}
           onContinueClick={confirmDelete}
         />
       )}
-      {showMultiDeleteConfirmation && (
+      {showMultiDeleteConfirmation === true && (
         <ConfirmDeleteModal
           modalType={DELETE_MULTIPLE_STEP_FORMS}
           onContinueClick={confirmMultiDelete}
@@ -226,10 +231,10 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
             <Flex
               alignItems={ALIGN_CENTER}
               gridGap={SPACING.spacing8}
-              justifyContent={JUSTIFY_START}
+              justifyContent={hasText ? JUSTIFY_START : JUSTIFY_CENTER}
               width="100%"
             >
-              {iconName && (
+              {iconName != null && (
                 <Icon
                   size="1.25rem"
                   name={iconName}
@@ -237,12 +242,14 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
                   minWidth="1.25rem"
                 />
               )}
-              <StyledText
-                desktopStyle="bodyDefaultRegular"
-                css={LINE_CLAMP_TEXT_STYLE(1)}
-              >
-                {capitalizeFirstLetterAfterNumber(title)}
-              </StyledText>
+              {hasText ? (
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(1)}
+                >
+                  {capitalizeFirstLetterAfterNumber(title)}
+                </StyledText>
+              ) : null}
             </Flex>
             {selected && !isStartingOrEndingState ? (
               <OverflowBtn
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
index fc808579af4..bdd2a60e9b1 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
@@ -21,6 +21,7 @@ import {
   toggleViewSubstep,
 } from '../../../../ui/steps/actions/actions'
 import { StepContainer } from './StepContainer'
+import { START_TERMINAL_ITEM_ID } from '../../../../steplist'
 
 import type {
   SelectTerminalItemAction,
@@ -32,10 +33,11 @@ import type { ThunkDispatch } from '../../../../types'
 export interface TerminalItemStepProps {
   id: TerminalItemId
   title: string
+  sidebarWidth: number
 }
 
 export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
-  const { id, title } = props
+  const { id, title, sidebarWidth } = props
   const hovered = useSelector(getHoveredTerminalItemId) === id
   const selected = useSelector(getSelectedTerminalItemId) === id
   const currentFormIsPresaved = useSelector(getCurrentFormIsPresaved)
@@ -83,7 +85,7 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
       <StepContainer
         {...{
           stepId: `TerminalItem_${id}`,
-          iconName: title === 'Starting deck state' ? 'ot-start' : 'ot-end',
+          iconName: id === START_TERMINAL_ITEM_ID ? 'ot-start' : 'ot-end',
           hovered,
           selected,
           title,
@@ -91,6 +93,7 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
           onMouseEnter,
           onMouseLeave,
         }}
+        sidebarWidth={sidebarWidth}
       />
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index 19b64a22f86..1d241bb6aac 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import {
   DIRECTION_COLUMN,
   Flex,
+  OVERFLOW_WRAP_ANYWHERE,
   POSITION_RELATIVE,
   SPACING,
   StyledText,
@@ -72,7 +73,10 @@ export const TimelineToolbox = ({
       width={`${sidebarWidth / 16}rem`}
       maxHeight={`calc(100vh - ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem - 2 * ${SPACING.spacing12})`}
       title={
-        <StyledText desktopStyle="bodyLargeSemiBold">
+        <StyledText
+          desktopStyle="bodyLargeSemiBold"
+          overflowWrap={OVERFLOW_WRAP_ANYWHERE}
+        >
           {t('timeline')}
         </StyledText>
       }
@@ -80,7 +84,7 @@ export const TimelineToolbox = ({
       childrenPadding={SPACING.spacing12}
       confirmButton={
         formData != null ? undefined : (
-          <AddStepButton hasIcon={sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON} />
+          <AddStepButton hasText={sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON} />
         )
       }
     >
@@ -92,15 +96,21 @@ export const TimelineToolbox = ({
         <TerminalItemStep
           id={START_TERMINAL_ITEM_ID}
           title={t('starting_deck')}
+          sidebarWidth={sidebarWidth}
         />
         <DraggableSteps
           orderedStepIds={orderedStepIds}
           reorderSteps={(stepIds: StepIdType[]) => {
             dispatch(steplistActions.reorderSteps(stepIds))
           }}
+          sidebarWidth={sidebarWidth}
         />
         <PresavedStep />
-        <TerminalItemStep id={END_TERMINAL_ITEM_ID} title={t('ending_deck')} />
+        <TerminalItemStep
+          id={END_TERMINAL_ITEM_ID}
+          title={t('ending_deck')}
+          sidebarWidth={sidebarWidth}
+        />
       </Flex>
     </Toolbox>
   )

From 7e7127eea6d90dbe49e8d5107dd953bb064f12ca Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 16:01:07 -0500
Subject: [PATCH 04/22] fix hotkey info position issue

---
 .../ProtocolSteps/DraggableSidebar.tsx        | 69 +++++++++++++++----
 .../ProtocolSteps/Timeline/StepContainer.tsx  |  4 +-
 .../pages/Designer/ProtocolSteps/index.tsx    | 43 ++++++++++--
 3 files changed, 96 insertions(+), 20 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index 4493ca07857..52cdb8b72ba 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -7,7 +7,13 @@ const INITIAL_SIDEBAR_WIDTH = 350
 const MIN_SIDEBAR_WIDTH = 80
 const MAX_SIDEBAR_WIDTH = 350
 
-export function DraggableSidebar(): JSX.Element {
+interface DraggableSidebarProps {
+  setTargetWidth: (width: number) => void
+}
+
+export function DraggableSidebar({
+  setTargetWidth,
+}: DraggableSidebarProps): JSX.Element {
   const sidebarRef = useRef<HTMLDivElement>(null)
   const [isResizing, setIsResizing] = useState(false)
   const [sidebarWidth, setSidebarWidth] = useState(INITIAL_SIDEBAR_WIDTH)
@@ -29,10 +35,11 @@ export function DraggableSidebar(): JSX.Element {
 
         if (newWidth >= MIN_SIDEBAR_WIDTH && newWidth <= MAX_SIDEBAR_WIDTH) {
           setSidebarWidth(newWidth)
+          setTargetWidth(newWidth)
         }
       }
     },
-    [isResizing]
+    [isResizing, setTargetWidth]
   )
 
   useEffect(() => {
@@ -46,29 +53,63 @@ export function DraggableSidebar(): JSX.Element {
   }, [resize, stopResizing])
 
   return (
-    <SidebarContainer ref={sidebarRef} width={sidebarWidth}>
-      <SidebarContent>
-        <TimelineToolbox sidebarWidth={sidebarWidth} />
-      </SidebarContent>
+    <SidebarContainer ref={sidebarRef} resizedWidth={sidebarWidth}>
+      {/* <SidebarContent> */}
+      <TimelineToolbox sidebarWidth={sidebarWidth} />
+      {/* </SidebarContent> */}
       <SidebarResizer dragging={isResizing} onMouseDown={startResizing} />
     </SidebarContainer>
   )
 }
 
-const SidebarContainer = styled(Flex)<{ width: number }>`
+// const SidebarContainer = styled(Flex)<{ resizedWidth: number }>`
+//   display: ${DISPLAY_FLEX};
+//   flex-direction: ${DIRECTION_COLUMN};
+//   background-color: #f4f4f4;
+//   border-right: 1px solid #ccc;
+//   position: relative;
+//   width: ${props => props.resizedWidth}px;
+//   overflow: hidden;
+//   height: 100%;
+// `
+
+const SidebarContainer = styled(Flex)<{ resizedWidth: number }>`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
   background-color: #f4f4f4;
   border-right: 1px solid #ccc;
   position: relative;
-  width: ${props => props.width}px;
-  /* width: 100%; */
-  overflow: hidden;
+  width: ${props => props.resizedWidth}px;
+  overflow: hidden; /* Prevent content overflow */
+  height: 100%;
+  margin: 0; /* Ensure no margins */
+  padding: 0; /* Ensure no padding */
 `
 
-const SidebarContent = styled(Flex)`
-  flex: 1;
-`
+// const SidebarContent = styled(Flex)`
+//   flex: 1;
+// `
+
+// const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+//   width: 0.3125rem;
+//   cursor: ew-resize;
+//   background-color: #ddd;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+//   bottom: 0;
+//   transition: background-color 0.2s ease;
+
+//   &:hover {
+//     background-color: blue; /* Hover state */
+//   }
+
+//   ${props =>
+//     props.dragging === true &&
+//     `
+//     background-color: darkblue; /* Dragging state */
+//   `}
+// `
 
 const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
   width: 0.3125rem;
@@ -78,6 +119,8 @@ const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
   top: 0;
   right: 0;
   bottom: 0;
+  margin: 0;
+  padding: 0;
   transition: background-color 0.2s ease;
 
   &:hover {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 843c7e920f1..540035782b3 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -215,7 +215,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           role="button"
           onDoubleClick={onDoubleClick}
           onClick={onClick}
-          padding={`${SPACING.spacing8} ${SPACING.spacing12}`}
+          padding={`${SPACING.spacing4} ${SPACING.spacing12}`}
           borderRadius={BORDERS.borderRadius8}
           width="100%"
           backgroundColor={backgroundColor}
@@ -226,7 +226,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
-            height="1.75rem"
+            height="1.9375rem"
           >
             <Flex
               alignItems={ALIGN_CENTER}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 519fd34e8b9..080685b12ed 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -1,15 +1,20 @@
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+
 import {
   ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  DIRECTION_ROW,
   FLEX_MAX_CONTENT,
   Flex,
   JUSTIFY_CENTER,
+  JUSTIFY_END,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_FIXED,
+  POSITION_RELATIVE,
   SPACING,
   StyledText,
   Tag,
@@ -57,6 +62,7 @@ export function ProtocolSteps(): JSX.Element {
   const [deckView, setDeckView] = useState<
     typeof leftString | typeof rightString
   >(leftString)
+  const [targetWidth, setTargetWidth] = useState<number>(350)
 
   const currentHoveredStepId = useSelector(getHoveredStepId)
   const currentSelectedStepId = useSelector(getSelectedStepId)
@@ -75,6 +81,7 @@ export function ProtocolSteps(): JSX.Element {
     hasTimelineErrors && tab === 'protocolSteps' && formData == null
   const stepDetails = currentStep?.stepDetails ?? null
 
+  console.log('targetWidth', targetWidth)
   return (
     <Flex
       backgroundColor={COLORS.grey10}
@@ -83,15 +90,37 @@ export function ProtocolSteps(): JSX.Element {
       width="100%"
       padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      // justifyContent={JUSTIFY_SPACE_BETWEEN}
+      id="container for sidebar and main"
     >
-      <DraggableSidebar />
       <Flex
+        // width="100%"
+        // minWidth="100%"
+        flex="1"
+        id="sidebar"
+        css={css`
+          outline: 1px solid red;
+        `}
+        height="100%"
+      >
+        <DraggableSidebar setTargetWidth={setTargetWidth} />
+      </Flex>
+      <Flex
+        backgroundColor={COLORS.blue35}
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
-        width="100%"
+        flex="2.85"
+        // width="82.3%"
+        // maxWidth="100%"
+        // minWidth="82.3%"
+        // maxwidth={targetWidth === null ? '100%' : `calc(100% - ${targetWidth})`}
+        id="main"
+        css={css`
+          outline: 1px solid blue;
+        `}
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
+        position={POSITION_RELATIVE}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
@@ -142,11 +171,15 @@ export function ProtocolSteps(): JSX.Element {
         </Flex>
         {enableHoyKeyDisplay ? (
           <Flex
+            id="hotkey-display"
             position={POSITION_FIXED}
-            left="21rem"
+            left={`calc(1.5rem + ${targetWidth}px)`}
             bottom="0.75rem"
-            gridGap={SPACING.spacing6}
+            gridGap={SPACING.spacing4}
             flexDirection={DIRECTION_COLUMN}
+            css={css`
+              outline: 1px solid orange;
+            `}
           >
             <Tag
               text={t('double_click_to_edit')}

From 37a66dbca6df340a8ba44228289d254a75e6bbe8 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 16:27:07 -0500
Subject: [PATCH 05/22] fix empty spacing issue

---
 .../ProtocolSteps/DraggableSidebar.tsx        | 71 +++++++------------
 .../pages/Designer/ProtocolSteps/index.tsx    | 30 +-------
 2 files changed, 26 insertions(+), 75 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index 52cdb8b72ba..13f0ecb16d7 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -1,6 +1,12 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
-import { DIRECTION_COLUMN, DISPLAY_FLEX, Flex } from '@opentrons/components'
+import {
+  DIRECTION_COLUMN,
+  DISPLAY_FLEX,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  Box,
+} from '@opentrons/components'
 import { TimelineToolbox } from './Timeline/TimelineToolbox'
 
 const INITIAL_SIDEBAR_WIDTH = 350
@@ -53,63 +59,36 @@ export function DraggableSidebar({
   }, [resize, stopResizing])
 
   return (
-    <SidebarContainer ref={sidebarRef} resizedWidth={sidebarWidth}>
-      {/* <SidebarContent> */}
-      <TimelineToolbox sidebarWidth={sidebarWidth} />
-      {/* </SidebarContent> */}
-      <SidebarResizer dragging={isResizing} onMouseDown={startResizing} />
-    </SidebarContainer>
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      height="100%"
+    >
+      <SidebarContainer ref={sidebarRef} resizedWidth={sidebarWidth}>
+        <SidebarContent>
+          <TimelineToolbox sidebarWidth={sidebarWidth} />
+        </SidebarContent>
+        <SidebarResizer dragging={isResizing} onMouseDown={startResizing} />
+      </SidebarContainer>
+    </Flex>
   )
 }
 
-// const SidebarContainer = styled(Flex)<{ resizedWidth: number }>`
-//   display: ${DISPLAY_FLEX};
-//   flex-direction: ${DIRECTION_COLUMN};
-//   background-color: #f4f4f4;
-//   border-right: 1px solid #ccc;
-//   position: relative;
-//   width: ${props => props.resizedWidth}px;
-//   overflow: hidden;
-//   height: 100%;
-// `
-
-const SidebarContainer = styled(Flex)<{ resizedWidth: number }>`
+const SidebarContainer = styled(Box)<{ resizedWidth: number }>`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
-  background-color: #f4f4f4;
+  /* background-color: #f4f4f4; */
+  background-color: #ff0000;
   border-right: 1px solid #ccc;
   position: relative;
   width: ${props => props.resizedWidth}px;
   overflow: hidden; /* Prevent content overflow */
   height: 100%;
-  margin: 0; /* Ensure no margins */
-  padding: 0; /* Ensure no padding */
 `
 
-// const SidebarContent = styled(Flex)`
-//   flex: 1;
-// `
-
-// const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
-//   width: 0.3125rem;
-//   cursor: ew-resize;
-//   background-color: #ddd;
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-//   bottom: 0;
-//   transition: background-color 0.2s ease;
-
-//   &:hover {
-//     background-color: blue; /* Hover state */
-//   }
-
-//   ${props =>
-//     props.dragging === true &&
-//     `
-//     background-color: darkblue; /* Dragging state */
-//   `}
-// `
+const SidebarContent = styled(Flex)`
+  flex: 1;
+`
 
 const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
   width: 0.3125rem;
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 080685b12ed..5624a1e0d9b 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -1,17 +1,14 @@
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
-  DIRECTION_ROW,
   FLEX_MAX_CONTENT,
   Flex,
   JUSTIFY_CENTER,
-  JUSTIFY_END,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_FIXED,
   POSITION_RELATIVE,
@@ -90,35 +87,14 @@ export function ProtocolSteps(): JSX.Element {
       width="100%"
       padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
-      // justifyContent={JUSTIFY_SPACE_BETWEEN}
-      id="container for sidebar and main"
     >
-      <Flex
-        // width="100%"
-        // minWidth="100%"
-        flex="1"
-        id="sidebar"
-        css={css`
-          outline: 1px solid red;
-        `}
-        height="100%"
-      >
-        <DraggableSidebar setTargetWidth={setTargetWidth} />
-      </Flex>
+      <DraggableSidebar setTargetWidth={setTargetWidth} />
       <Flex
         backgroundColor={COLORS.blue35}
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
         flex="2.85"
-        // width="82.3%"
-        // maxWidth="100%"
-        // minWidth="82.3%"
-        // maxwidth={targetWidth === null ? '100%' : `calc(100% - ${targetWidth})`}
-        id="main"
-        css={css`
-          outline: 1px solid blue;
-        `}
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
         position={POSITION_RELATIVE}
       >
@@ -171,15 +147,11 @@ export function ProtocolSteps(): JSX.Element {
         </Flex>
         {enableHoyKeyDisplay ? (
           <Flex
-            id="hotkey-display"
             position={POSITION_FIXED}
             left={`calc(1.5rem + ${targetWidth}px)`}
             bottom="0.75rem"
             gridGap={SPACING.spacing4}
             flexDirection={DIRECTION_COLUMN}
-            css={css`
-              outline: 1px solid orange;
-            `}
           >
             <Tag
               text={t('double_click_to_edit')}

From 892b2cce7c105bd750fd07dd07fbd92a1bedeefe Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 16:32:44 -0500
Subject: [PATCH 06/22] restore flex to keep the fixed two col

---
 protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 5624a1e0d9b..a6b5d4a1520 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -88,9 +88,10 @@ export function ProtocolSteps(): JSX.Element {
       padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
     >
-      <DraggableSidebar setTargetWidth={setTargetWidth} />
+      <Flex flex="1" height="100%">
+        <DraggableSidebar setTargetWidth={setTargetWidth} />
+      </Flex>
       <Flex
-        backgroundColor={COLORS.blue35}
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}

From d79b7ee49d7b7b4050e64e5dd1ba6eb738b28c24 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 17:11:08 -0500
Subject: [PATCH 07/22] fix check-js errors

---
 .../ProtocolSteps/Timeline/DraggableSteps.tsx | 11 +++++++--
 .../ProtocolSteps/Timeline/PresavedStep.tsx   |  9 ++++++-
 .../Timeline/TimelineToolbox.tsx              |  2 +-
 .../Timeline/__tests__/AddStepButton.test.tsx | 24 +++++++++++++++----
 .../Timeline/__tests__/StepContainer.test.tsx |  1 +
 .../__tests__/TimelineToolbox.test.tsx        | 15 ++++++++----
 6 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
index f7b50126820..592cdec02f3 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
@@ -153,12 +153,18 @@ export function DraggableSteps(props: DraggableStepsProps): JSX.Element | null {
           sidebarWidth={sidebarWidth}
         />
       ))}
-      <StepDragPreview />
+      <StepDragPreview sidebarWidth={sidebarWidth} />
     </Flex>
   )
 }
 
-function StepDragPreview(): JSX.Element | null {
+interface StepDragPreviewProps {
+  sidebarWidth: number
+}
+
+function StepDragPreview({
+  sidebarWidth,
+}: StepDragPreviewProps): JSX.Element | null {
   const [{ isDragging, itemType, item, currentOffset }] = useDrag(() => ({
     type: DND_TYPES.STEP_ITEM,
     collect: (monitor: DragLayerMonitor) => ({
@@ -187,6 +193,7 @@ function StepDragPreview(): JSX.Element | null {
       <StepContainer
         iconName={stepIconsByType[stepType]}
         title={stepName || ''}
+        sidebarWidth={sidebarWidth}
       />
     </Flex>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx
index 9d0289ddb9c..346c296855f 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx
@@ -10,7 +10,13 @@ import {
 } from '../../../../ui/steps'
 import { StepContainer } from './StepContainer'
 
-export function PresavedStep(): JSX.Element | null {
+interface PresavedStepProps {
+  sidebarWidth: number
+}
+
+export function PresavedStep({
+  sidebarWidth,
+}: PresavedStepProps): JSX.Element | null {
   const { t } = useTranslation('application')
   const presavedStepForm = useSelector(stepFormSelectors.getPresavedStepForm)
   const stepNumber = useSelector(stepFormSelectors.getOrderedStepIds).length + 1
@@ -39,6 +45,7 @@ export function PresavedStep(): JSX.Element | null {
       hovered={hovered}
       iconName={stepIconsByType[stepType]}
       title={`${stepNumber}. ${t(`stepType.${stepType}`)}`}
+      sidebarWidth={sidebarWidth}
     />
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index 1d241bb6aac..63028088e58 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -105,7 +105,7 @@ export const TimelineToolbox = ({
           }}
           sidebarWidth={sidebarWidth}
         />
-        <PresavedStep />
+        <PresavedStep sidebarWidth={sidebarWidth} />
         <TerminalItemStep
           id={END_TERMINAL_ITEM_ID}
           title={t('ending_deck')}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx
index 4b7b716b0c7..a2fcea0a7e2 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx
@@ -1,4 +1,4 @@
-import { describe, it, vi, beforeEach } from 'vitest'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import {
   HEATERSHAKER_MODULE_TYPE,
@@ -20,18 +20,25 @@ import {
 } from '../../../../../step-forms/selectors'
 import { getIsMultiSelectMode } from '../../../../../ui/steps'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../../../feature-flags/selectors')
 vi.mock('../../../../../ui/steps')
 vi.mock('../../../../../step-forms/selectors')
 
-const render = () => {
-  return renderWithProviders(<AddStepButton />, {
+const render = (props: ComponentProps<typeof AddStepButton>) => {
+  return renderWithProviders(<AddStepButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AddStepButton', () => {
+  let props: ComponentProps<typeof AddStepButton>
+
   beforeEach(() => {
+    props = {
+      hasText: true,
+    }
     vi.mocked(getEnableComment).mockReturnValue(true)
     vi.mocked(getCurrentFormIsPresaved).mockReturnValue(false)
     vi.mocked(getIsMultiSelectMode).mockReturnValue(false)
@@ -73,8 +80,8 @@ describe('AddStepButton', () => {
   })
 
   it('renders add step button and clicking on it renders the overflow menu with all modules', () => {
-    render()
-    fireEvent.click(screen.getByText('+ Add Step'))
+    render(props)
+    fireEvent.click(screen.getByText('Add Step'))
     screen.getByText('Comment')
     screen.getByText('Transfer')
     screen.getByText('Mix')
@@ -84,4 +91,11 @@ describe('AddStepButton', () => {
     screen.getByText('Temperature')
     screen.getByText('Magnet')
   })
+
+  it('should not render texts if hasText is false', () => {
+    props.hasText = false
+    render(props)
+    const text = screen.queryByText('Add Step')
+    expect(text).toBeNull()
+  })
 })
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
index 32df562e61a..4933dffe3ed 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
@@ -32,6 +32,7 @@ describe('StepContainer', () => {
       stepId: 'mockStepId',
       hasError: false,
       isStepAfterError: false,
+      sidebarWidth: 350,
     }
     vi.mocked(StepOverflowMenu).mockReturnValue(
       <div>mock StepOverflowMenu</div>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
index c4ae078c572..1b8fdad45aa 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
@@ -6,25 +6,32 @@ import {
   getOrderedStepIds,
   getUnsavedForm,
 } from '../../../../../step-forms/selectors'
-import { TimelineToolbox } from '../TimelineToolbox'
 import { TerminalItemStep } from '../TerminalItemStep'
 import { DraggableSteps } from '../DraggableSteps'
 import { PresavedStep } from '../PresavedStep'
 import { AddStepButton } from '../AddStepButton'
+import { TimelineToolbox } from '../TimelineToolbox'
+
+import type { ComponentProps } from 'react'
 
 vi.mock('../AddStepButton')
 vi.mock('../DraggableSteps')
 vi.mock('../PresavedStep')
 vi.mock('../TerminalItemStep')
 vi.mock('../../../../../step-forms/selectors')
-const render = () => {
-  return renderWithProviders(<TimelineToolbox />, {
+const render = (props: ComponentProps<typeof TimelineToolbox>) => {
+  return renderWithProviders(<TimelineToolbox {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TimelineToolbox', () => {
+  let props: ComponentProps<typeof TimelineToolbox>
+
   beforeEach(() => {
+    props = {
+      sidebarWidth: 350,
+    }
     vi.mocked(getOrderedStepIds).mockReturnValue(['mock1Step'])
     vi.mocked(getUnsavedForm).mockReturnValue(null)
     vi.mocked(TerminalItemStep).mockReturnValue(
@@ -35,7 +42,7 @@ describe('TimelineToolbox', () => {
     vi.mocked(AddStepButton).mockReturnValue(<div>mock AddStepButton</div>)
   })
   it('renders 2 terminal item steps, a draggable step and presaved step with toolbox title', () => {
-    render()
+    render(props)
     screen.getByText('Timeline')
     screen.getByText('mock AddStepButton')
     screen.getByText('mock PresavedStep')

From 9b88d76d72059548479dba51eaae49588630b5ff Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 17:32:33 -0500
Subject: [PATCH 08/22] modify a component name

---
 .../ProtocolSteps/Timeline/SubstepsToolbox.tsx        |  6 +++---
 .../pages/Designer/ProtocolSteps/Timeline/index.ts    |  2 +-
 .../ProtocolSteps/__tests__/ProtocolSteps.test.tsx    | 11 ++++++-----
 .../src/pages/Designer/ProtocolSteps/index.tsx        |  4 ++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
index eb0a0ba835b..a7e272c3623 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
@@ -22,12 +22,12 @@ import { ThermocyclerProfileSubsteps } from './ThermocyclerProfileSubsteps'
 import type { SubstepIdentifier } from '../../../../steplist'
 import type { HoverOnSubstepAction } from '../../../../ui/steps'
 
-interface SubstepsToolboxProps {
+interface SubStepsToolboxProps {
   stepId: string
 }
 
-export function SubstepsToolbox(
-  props: SubstepsToolboxProps
+export function SubStepsToolbox(
+  props: SubStepsToolboxProps
 ): JSX.Element | null {
   const { stepId } = props
   const { t, i18n } = useTranslation([
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts
index 2b4945b756b..14a0f0058af 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts
@@ -1,2 +1,2 @@
-export * from './SubstepsToolbox'
+export * from './SubStepsToolbox'
 export * from './TimelineToolbox'
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
index 9ff98460fc6..104c10cf505 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -19,8 +19,9 @@ import {
 import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
 import { DeckSetupContainer } from '../../DeckSetup'
 import { OffDeck } from '../../Offdeck'
+import { SubStepsToolbox } from '../Timeline'
 import { ProtocolSteps } from '..'
-import { SubstepsToolbox, TimelineToolbox } from '../Timeline'
+
 import type { SavedStepFormState } from '../../../../step-forms'
 
 vi.mock('../../Offdeck')
@@ -64,7 +65,7 @@ describe('ProtocolSteps', () => {
       timeline: [],
       errors: [],
     })
-    vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
+    // vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
     vi.mocked(DeckSetupContainer).mockReturnValue(
       <div>mock DeckSetupContainer</div>
     )
@@ -72,7 +73,7 @@ describe('ProtocolSteps', () => {
     vi.mocked(OffDeck).mockReturnValue(<div>mock OffDeck</div>)
     vi.mocked(getUnsavedForm).mockReturnValue(null)
     vi.mocked(getSelectedSubstep).mockReturnValue(null)
-    vi.mocked(SubstepsToolbox).mockReturnValue(<div>mock SubstepsToolbox</div>)
+    vi.mocked(SubStepsToolbox).mockReturnValue(<div>mock SubStepsToolbox</div>)
     vi.mocked(getEnableHotKeysDisplay).mockReturnValue(true)
     vi.mocked(getSavedStepForms).mockReturnValue(
       MOCK_STEP_FORMS as SavedStepFormState
@@ -84,7 +85,7 @@ describe('ProtocolSteps', () => {
 
   it('renders each component in ProtocolSteps', () => {
     render()
-    screen.getByText('mock TimelineToolbox')
+    // screen.getByText('mock TimelineToolbox')
     screen.getByText('mock DeckSetupContainer')
   })
 
@@ -98,7 +99,7 @@ describe('ProtocolSteps', () => {
   it('renders the substepToolbox when selectedSubstep is not null', () => {
     vi.mocked(getSelectedSubstep).mockReturnValue('mockId')
     render()
-    screen.getByText('mock SubstepsToolbox')
+    screen.getByText('mock SubStepsToolbox')
   })
 
   it('renders the hot keys display', () => {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index a6b5d4a1520..19bab8da5b6 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -32,7 +32,7 @@ import {
 } from '../../../ui/steps/selectors'
 import { DeckSetupContainer } from '../DeckSetup'
 import { OffDeck } from '../Offdeck'
-import { SubstepsToolbox } from './Timeline'
+import { SubStepsToolbox } from './Timeline'
 import { StepForm } from './StepForm'
 import { StepSummary } from './StepSummary'
 import { BatchEditToolbox } from './BatchEditToolbox'
@@ -173,7 +173,7 @@ export function ProtocolSteps(): JSX.Element {
         ) : null}
       </Flex>
       {formData == null && selectedSubstep ? (
-        <SubstepsToolbox stepId={selectedSubstep} />
+        <SubStepsToolbox stepId={selectedSubstep} />
       ) : null}
       <StepForm />
       {isMultiSelectMode ? <BatchEditToolbox /> : null}

From 8c96b57a57cb0b5f8e765162dfe24165b56da182 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 17:39:40 -0500
Subject: [PATCH 09/22] fix test error

---
 .../ProtocolSteps/__tests__/ProtocolSteps.test.tsx        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
index 104c10cf505..31c1c93eafc 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -20,6 +20,7 @@ import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
 import { DeckSetupContainer } from '../../DeckSetup'
 import { OffDeck } from '../../Offdeck'
 import { SubStepsToolbox } from '../Timeline'
+import { DraggableSidebar } from '../DraggableSidebar'
 import { ProtocolSteps } from '..'
 
 import type { SavedStepFormState } from '../../../../step-forms'
@@ -32,6 +33,7 @@ vi.mock('../StepForm')
 vi.mock('../../DeckSetup')
 vi.mock('../StepSummary.tsx')
 vi.mock('../Timeline')
+vi.mock('../DraggableSidebar')
 vi.mock('../../../../feature-flags/selectors')
 vi.mock('../../../../file-data/selectors')
 vi.mock('../../../../organisms/Alerts')
@@ -65,7 +67,9 @@ describe('ProtocolSteps', () => {
       timeline: [],
       errors: [],
     })
-    // vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
+    vi.mocked(DraggableSidebar).mockReturnValue(
+      <div>mock DraggableSidebar</div>
+    )
     vi.mocked(DeckSetupContainer).mockReturnValue(
       <div>mock DeckSetupContainer</div>
     )
@@ -85,7 +89,7 @@ describe('ProtocolSteps', () => {
 
   it('renders each component in ProtocolSteps', () => {
     render()
-    // screen.getByText('mock TimelineToolbox')
+    screen.getByText('mock DraggableSidebar')
     screen.getByText('mock DeckSetupContainer')
   })
 

From e5dcda62be1d247e1397c471d62f93c839838859 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 18:07:35 -0500
Subject: [PATCH 10/22] add test

---
 .../ProtocolSteps/DraggableSidebar.tsx        |  2 +-
 .../__tests__/DraggableSidebar.test.tsx       | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index 13f0ecb16d7..b7a9b44dbc0 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -1,11 +1,11 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import {
+  Box,
   DIRECTION_COLUMN,
   DISPLAY_FLEX,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
 } from '@opentrons/components'
 import { TimelineToolbox } from './Timeline/TimelineToolbox'
 
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
new file mode 100644
index 00000000000..4c232baea0d
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
@@ -0,0 +1,43 @@
+import { describe, it, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { TimelineToolbox } from '../Timeline'
+import { DraggableSidebar } from '../DraggableSidebar'
+
+import type { ComponentProps } from 'react'
+
+vi.mock('../Timeline')
+vi.mock('../../../../step-forms/selectors')
+vi.mock('../../../../ui/steps/selectors')
+// vi.mock('../Timeline', async importOriginal => {
+//   const actual = await importOriginal<typeof TimelineToolbox>()
+//   return {
+//     ...actual,
+//     TimelineToolbox: () => <div>mock TimelineToolbox</div>,
+//   }
+// })
+
+const mockSetTargetWidth = vi.fn()
+
+const render = (props: ComponentProps<typeof DraggableSidebar>) => {
+  return renderWithProviders(<DraggableSidebar {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('DraggableSidebar', () => {
+  let props: ComponentProps<typeof DraggableSidebar>
+  beforeEach(() => {
+    props = {
+      setTargetWidth: mockSetTargetWidth,
+    }
+    vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
+  })
+
+  it('renders mock TimelineToolbox', () => {
+    render(props)
+    screen.getByText('mock TimelineToolbox')
+  })
+})

From 5daede5a8bf6a9b7f0682d698a93ed579ab01685 Mon Sep 17 00:00:00 2001
From: koji <baxin1919@gmail.com>
Date: Fri, 13 Dec 2024 22:33:33 -0500
Subject: [PATCH 11/22] fix check-js errors

---
 .../Timeline/{SubstepsToolbox.tsx => SubStepsToolbox.tsx}         | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/{SubstepsToolbox.tsx => SubStepsToolbox.tsx} (100%)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
rename to protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx

From 996fde690c5be48c40b94fcd5f9ca30aee09a331 Mon Sep 17 00:00:00 2001
From: koji <baxin1919@gmail.com>
Date: Fri, 13 Dec 2024 23:56:07 -0500
Subject: [PATCH 12/22] added a base test

---
 .../ProtocolSteps/DraggableSidebar.tsx        |  6 ++---
 .../__tests__/TimelineToolbox.test.tsx        |  1 +
 .../__tests__/DraggableSidebar.test.tsx       | 23 +++++++++----------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index b7a9b44dbc0..f5f55c84228 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -74,11 +74,9 @@ export function DraggableSidebar({
   )
 }
 
-const SidebarContainer = styled(Box)<{ resizedWidth: number }>`
+const SidebarContainer = styled(Box) <{ resizedWidth: number }>`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
-  /* background-color: #f4f4f4; */
-  background-color: #ff0000;
   border-right: 1px solid #ccc;
   position: relative;
   width: ${props => props.resizedWidth}px;
@@ -90,7 +88,7 @@ const SidebarContent = styled(Flex)`
   flex: 1;
 `
 
-const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+const SidebarResizer = styled(Flex) <{ dragging: boolean }>`
   width: 0.3125rem;
   cursor: ew-resize;
   background-color: #ddd;
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
index 1b8fdad45aa..f6b11ce36a5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
@@ -41,6 +41,7 @@ describe('TimelineToolbox', () => {
     vi.mocked(PresavedStep).mockReturnValue(<div>mock PresavedStep</div>)
     vi.mocked(AddStepButton).mockReturnValue(<div>mock AddStepButton</div>)
   })
+
   it('renders 2 terminal item steps, a draggable step and presaved step with toolbox title', () => {
     render(props)
     screen.getByText('Timeline')
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
index 4c232baea0d..62e7b04558d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
@@ -3,21 +3,17 @@ import { screen } from '@testing-library/react'
 
 import { i18n } from '../../../../assets/localization'
 import { renderWithProviders } from '../../../../__testing-utils__'
-import { TimelineToolbox } from '../Timeline'
 import { DraggableSidebar } from '../DraggableSidebar'
 
 import type { ComponentProps } from 'react'
 
-vi.mock('../Timeline')
+
 vi.mock('../../../../step-forms/selectors')
 vi.mock('../../../../ui/steps/selectors')
-// vi.mock('../Timeline', async importOriginal => {
-//   const actual = await importOriginal<typeof TimelineToolbox>()
-//   return {
-//     ...actual,
-//     TimelineToolbox: () => <div>mock TimelineToolbox</div>,
-//   }
-// })
+vi.mock('../../../../feature-flags/selectors')
+vi.mock('../Timeline/DraggableSteps')
+vi.mock('../Timeline/PresavedStep')
+vi.mock('../Timeline/AddStepButton')
 
 const mockSetTargetWidth = vi.fn()
 
@@ -33,11 +29,14 @@ describe('DraggableSidebar', () => {
     props = {
       setTargetWidth: mockSetTargetWidth,
     }
-    vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
   })
 
-  it('renders mock TimelineToolbox', () => {
+  it('renders initial timeline toolbox', () => {
     render(props)
-    screen.getByText('mock TimelineToolbox')
+    screen.getByText('Timeline')
+    screen.getByText('Starting deck')
+    screen.getByText('Ending deck')
   })
+
+  // ToDo (kk: 2024/12/12): Add more tests
 })

From 7b99baf9a176aa7e1943592a603737329a34aee1 Mon Sep 17 00:00:00 2001
From: koji <baxin1919@gmail.com>
Date: Sat, 14 Dec 2024 00:23:39 -0500
Subject: [PATCH 13/22] fix format errors

---
 .../src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx     | 4 ++--
 .../ProtocolSteps/__tests__/DraggableSidebar.test.tsx         | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index f5f55c84228..03cee3a678a 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -74,7 +74,7 @@ export function DraggableSidebar({
   )
 }
 
-const SidebarContainer = styled(Box) <{ resizedWidth: number }>`
+const SidebarContainer = styled(Box)<{ resizedWidth: number }>`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
   border-right: 1px solid #ccc;
@@ -88,7 +88,7 @@ const SidebarContent = styled(Flex)`
   flex: 1;
 `
 
-const SidebarResizer = styled(Flex) <{ dragging: boolean }>`
+const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
   width: 0.3125rem;
   cursor: ew-resize;
   background-color: #ddd;
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
index 62e7b04558d..4ea6b03d2ab 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
@@ -7,7 +7,6 @@ import { DraggableSidebar } from '../DraggableSidebar'
 
 import type { ComponentProps } from 'react'
 
-
 vi.mock('../../../../step-forms/selectors')
 vi.mock('../../../../ui/steps/selectors')
 vi.mock('../../../../feature-flags/selectors')

From ea625d2544fae7bf72b49ee486e9975d419f4b7b Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 16 Dec 2024 08:50:38 -0500
Subject: [PATCH 14/22] clean up draggable sidebar a little bit

---
 .../Designer/ProtocolSteps/DraggableSidebar.tsx     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index b7a9b44dbc0..cbe6b9d9823 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -9,7 +9,7 @@ import {
 } from '@opentrons/components'
 import { TimelineToolbox } from './Timeline/TimelineToolbox'
 
-const INITIAL_SIDEBAR_WIDTH = 350
+const INITIAL_SIDEBAR_WIDTH = 276
 const MIN_SIDEBAR_WIDTH = 80
 const MAX_SIDEBAR_WIDTH = 350
 
@@ -74,15 +74,14 @@ export function DraggableSidebar({
   )
 }
 
-const SidebarContainer = styled(Box)<{ resizedWidth: number }>`
+const SidebarContainer = styled(Box)`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
   /* background-color: #f4f4f4; */
   background-color: #ff0000;
   border-right: 1px solid #ccc;
   position: relative;
-  width: ${props => props.resizedWidth}px;
-  overflow: hidden; /* Prevent content overflow */
+  overflow: hidden;
   height: 100%;
 `
 
@@ -90,7 +89,11 @@ const SidebarContent = styled(Flex)`
   flex: 1;
 `
 
-const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+interface SidebarResizerProps {
+  dragging: boolean
+}
+
+const SidebarResizer = styled(Flex)<SidebarResizerProps>`
   width: 0.3125rem;
   cursor: ew-resize;
   background-color: #ddd;

From 3671140095cde7ce6ea69626c0b281f90703f31c Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 18 Dec 2024 10:47:28 -0500
Subject: [PATCH 15/22] address feedback

---
 .../pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx | 3 ++-
 .../pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx | 5 +++--
 .../Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx    | 6 +++---
 .../src/pages/Designer/ProtocolSteps/index.tsx              | 1 -
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index 19a19797e39..d6bd9006127 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -8,6 +8,7 @@ import {
   BORDERS,
   COLORS,
   DIRECTION_COLUMN,
+  DISPLAY_FLEX,
   Flex,
   Icon,
   JUSTIFY_CENTER,
@@ -133,7 +134,7 @@ export function AddStepButton({ hasText }: AddStepButtonProps): JSX.Element {
         </Tooltip>
       )}
       <SecondaryButton
-        display="flex"
+        display={DISPLAY_FLEX}
         justifyContent={JUSTIFY_CENTER}
         alignItems={ALIGN_CENTER}
         gridGap={SPACING.spacing10}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 540035782b3..d0534b234cf 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -49,7 +49,8 @@ import type { BaseState } from '../../../../types'
 const STARTING_DECK_STATE = 'Starting deck'
 const FINAL_DECK_STATE = 'Ending deck'
 const PX_HEIGHT_TO_TOP_OF_CONTAINER = 32
-const SIDEBAR_MIN_WIDTH_FOR_ICON = 179
+const PX_SIDEBAR_MIN_WIDTH_FOR_ICON = 179
+
 export interface StepContainerProps {
   title: string
   iconName: IconName
@@ -95,7 +96,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
   const multiSelectItemIds = useSelector(getMultiSelectItemIds)
 
-  const hasText = sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON
+  const hasText = sidebarWidth > PX_SIDEBAR_MIN_WIDTH_FOR_ICON
   let backgroundColor = isStartingOrEndingState ? COLORS.blue20 : COLORS.grey20
   let color = COLORS.black90
   if (selected) {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
index 6baa8c12478..7c92c22376d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
@@ -1,5 +1,7 @@
+import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useConditionalConfirm } from '@opentrons/components'
+
 import {
   getHoveredTerminalItemId,
   getSelectedTerminalItemId,
@@ -10,6 +12,7 @@ import {
   getCurrentFormIsPresaved,
   getCurrentFormHasUnsavedChanges,
 } from '../../../../step-forms/selectors'
+import { START_TERMINAL_ITEM_ID } from '../../../../steplist'
 import {
   CLOSE_STEP_FORM_WITH_CHANGES,
   CLOSE_UNSAVED_STEP_FORM,
@@ -21,7 +24,6 @@ import {
   toggleViewSubstep,
 } from '../../../../ui/steps/actions/actions'
 import { StepContainer } from './StepContainer'
-import { START_TERMINAL_ITEM_ID } from '../../../../steplist'
 
 import type {
   SelectTerminalItemAction,
@@ -29,11 +31,9 @@ import type {
 } from '../../../../ui/steps'
 import type { TerminalItemId } from '../../../../steplist'
 import type { ThunkDispatch } from '../../../../types'
-import { useTranslation } from 'react-i18next'
 
 export interface TerminalItemStepProps {
   id: TerminalItemId
-  title: string
   sidebarWidth: number
 }
 
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 19bab8da5b6..38f4979b0cf 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -78,7 +78,6 @@ export function ProtocolSteps(): JSX.Element {
     hasTimelineErrors && tab === 'protocolSteps' && formData == null
   const stepDetails = currentStep?.stepDetails ?? null
 
-  console.log('targetWidth', targetWidth)
   return (
     <Flex
       backgroundColor={COLORS.grey10}

From 0cf372ba0e3d049076bde5f46a1bfd3dbb2f7deb Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 18 Dec 2024 13:31:41 -0500
Subject: [PATCH 16/22] fix check-js errors

---
 .../pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index 63028088e58..be6642d10c8 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -95,7 +95,6 @@ export const TimelineToolbox = ({
       >
         <TerminalItemStep
           id={START_TERMINAL_ITEM_ID}
-          title={t('starting_deck')}
           sidebarWidth={sidebarWidth}
         />
         <DraggableSteps
@@ -108,7 +107,6 @@ export const TimelineToolbox = ({
         <PresavedStep sidebarWidth={sidebarWidth} />
         <TerminalItemStep
           id={END_TERMINAL_ITEM_ID}
-          title={t('ending_deck')}
           sidebarWidth={sidebarWidth}
         />
       </Flex>

From eca5df783945185c374f81f1444b696ef17bfb3d Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 18 Dec 2024 15:23:22 -0500
Subject: [PATCH 17/22] fix check-js error

---
 .../pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
index 53e2871bd34..7c92c22376d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
-import { useTranslation } from 'react-i18next'
 import { useConditionalConfirm } from '@opentrons/components'
 
 import {

From 25bc420b310a696426f044dbbf5072fca5933472 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 18 Dec 2024 23:32:05 -0500
Subject: [PATCH 18/22] resolve the pointed-out UI issues

---
 .../src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx      | 3 ++-
 .../pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index e4d762eee83..37842133282 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -79,7 +79,7 @@ const SidebarContainer = styled(Box)`
   flex-direction: ${DIRECTION_COLUMN};
   border-right: 1px solid #ccc;
   position: relative;
-  overflow: hidden;
+  /* overflow: hidden; */
   height: 100%;
 `
 
@@ -92,6 +92,7 @@ interface SidebarResizerProps {
 }
 
 const SidebarResizer = styled(Flex)<SidebarResizerProps>`
+  user-select: none;
   width: 0.3125rem;
   cursor: ew-resize;
   background-color: #ddd;
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index d6bd9006127..bae5743f725 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -156,7 +156,7 @@ export function AddStepButton({ hasText }: AddStepButtonProps): JSX.Element {
 const STEP_OVERFLOW_MENU_STYLE = css`
   position: ${POSITION_ABSOLUTE};
   z-index: 5;
-  left: 19.5rem;
+  right: -7.75rem;
   white-space: ${NO_WRAP};
   bottom: 4.2rem;
   border-radius: ${BORDERS.borderRadius8};

From 22538f23d568f7b7cdc6ad090bad7de9f7b3a3ae Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 20 Dec 2024 10:44:27 -0500
Subject: [PATCH 19/22] remove unused lines

---
 .../Designer/ProtocolSteps/Timeline/utils.ts  | 43 -------------------
 1 file changed, 43 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index 8fc515b254b..5865071fd2a 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -138,46 +138,3 @@ export const getMouseClickKeyInfo = (
 }
 
 const getUserOS = (): string | undefined => new UAParser().getOS().name
-
-export const getSupportedSteps = (
-  enableComment: boolean
-): Array<Exclude<StepType, 'manualIntervention'>> =>
-  enableComment
-    ? [
-        'comment',
-        'moveLabware',
-        'moveLiquid',
-        'mix',
-        'pause',
-        'heaterShaker',
-        'magnet',
-        'temperature',
-        'thermocycler',
-      ]
-    : [
-        'moveLabware',
-        'moveLiquid',
-        'mix',
-        'pause',
-        'heaterShaker',
-        'magnet',
-        'temperature',
-        'thermocycler',
-      ]
-
-export const getIsStepTypeEnabled = (
-  enableComment: boolean,
-  modules: Record<string, ModuleOnDeck>
-): Record<Exclude<StepType, 'manualIntervention'>, boolean> => {
-  return {
-    comment: enableComment,
-    moveLabware: true,
-    moveLiquid: true,
-    mix: true,
-    pause: true,
-    magnet: getIsModuleOnDeck(modules, MAGNETIC_MODULE_TYPE),
-    temperature: getIsModuleOnDeck(modules, TEMPERATURE_MODULE_TYPE),
-    thermocycler: getIsModuleOnDeck(modules, THERMOCYCLER_MODULE_TYPE),
-    heaterShaker: getIsModuleOnDeck(modules, HEATERSHAKER_MODULE_TYPE),
-  }
-}

From 82371075d5a443338517807964fc16ee14856bba Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 20 Dec 2024 10:45:50 -0500
Subject: [PATCH 20/22] fix lint errors

---
 .../pages/Designer/ProtocolSteps/Timeline/utils.ts    | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index 5865071fd2a..76ae129167a 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -2,17 +2,6 @@ import round from 'lodash/round'
 import uniq from 'lodash/uniq'
 import { UAParser } from 'ua-parser-js'
 
-import {
-  HEATERSHAKER_MODULE_TYPE,
-  MAGNETIC_MODULE_TYPE,
-  TEMPERATURE_MODULE_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
-} from '@opentrons/shared-data'
-import { getIsModuleOnDeck } from '../../../../step-forms'
-
-import type { ModuleOnDeck } from '../../../../step-forms'
-import type { StepType, StepIdType } from '../../../../form-types'
-
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
   title.replace(
     /(^[\d\W]*)([a-zA-Z])|(-[a-zA-Z])/g,

From bcaf94b0e2912d71898643a28a290c9dd55ffd49 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 20 Dec 2024 11:06:16 -0500
Subject: [PATCH 21/22] fix check-js errors

---
 .../src/pages/Designer/ProtocolSteps/Timeline/utils.ts          | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index 76ae129167a..b12d5598ca1 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -2,6 +2,8 @@ import round from 'lodash/round'
 import uniq from 'lodash/uniq'
 import { UAParser } from 'ua-parser-js'
 
+import type { StepIdType } from '../../../../form-types'
+
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
   title.replace(
     /(^[\d\W]*)([a-zA-Z])|(-[a-zA-Z])/g,

From f6525ac01f35a5c0af5a36c7b9356e2e251cea64 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 20 Dec 2024 14:45:07 -0500
Subject: [PATCH 22/22] modify styles a little bit

---
 .../pages/Designer/ProtocolSteps/DraggableSidebar.tsx    | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index 37842133282..210abdec6ba 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import {
   Box,
+  COLORS,
   DIRECTION_COLUMN,
   DISPLAY_FLEX,
   Flex,
@@ -17,6 +18,8 @@ interface DraggableSidebarProps {
   setTargetWidth: (width: number) => void
 }
 
+// Note (kk:2024/12/20 the designer will revisit responsive sidebar design in 2025
+// we will need to update the details to align with the updated design
 export function DraggableSidebar({
   setTargetWidth,
 }: DraggableSidebarProps): JSX.Element {
@@ -93,7 +96,7 @@ interface SidebarResizerProps {
 
 const SidebarResizer = styled(Flex)<SidebarResizerProps>`
   user-select: none;
-  width: 0.3125rem;
+  width: 2px;
   cursor: ew-resize;
   background-color: #ddd;
   position: absolute;
@@ -105,12 +108,12 @@ const SidebarResizer = styled(Flex)<SidebarResizerProps>`
   transition: background-color 0.2s ease;
 
   &:hover {
-    background-color: blue; /* Hover state */
+    background-color: ${COLORS.blue50}; /* Hover state */
   }
 
   ${props =>
     props.dragging === true &&
     `
-    background-color: darkblue; /* Dragging state */
+    background-color: ${COLORS.blue55}; /* Dragging state */
   `}
 `