refactor

src/App.jsx

@@ -99,6 +99,7 @@ const leftBarWidth = 240;
 
 
 const videoStyle = { width: '100%', height: '100%', objectFit: 'contain' };
+const bottomMotionStyle = { background: controlsBackground };
 
 
 const App = memo(() => {
@@ -2281,45 +2282,38 @@ const App = memo(() => {
 
             <AnimatePresence>
               {showRightBar && isFileOpened && (
-                <motion.div
-                  className="no-user-select"
-                  style={{ width: rightBarWidth, background: controlsBackground, color: 'rgba(255,255,255,0.7)', display: 'flex', flexDirection: 'column', overflowY: 'hidden' }}
-                  initial={{ x: rightBarWidth }}
-                  animate={{ x: 0 }}
-                  exit={{ x: rightBarWidth }}
-                >
-                  <SegmentList
-                    currentSegIndex={currentSegIndexSafe}
-                    apparentCutSegments={apparentCutSegments}
-                    inverseCutSegments={inverseCutSegments}
-                    getFrameCount={getFrameCount}
-                    formatTimecode={formatTimecode}
-                    onSegClick={setCurrentSegIndex}
-                    updateSegOrder={updateSegOrder}
-                    updateSegOrders={updateSegOrders}
-                    onLabelSegmentPress={onLabelSegmentPress}
-                    currentCutSeg={currentCutSeg}
-                    segmentAtCursor={segmentAtCursor}
-                    addCutSegment={addCutSegment}
-                    removeCutSegment={removeCutSegment}
-                    toggleSegmentsList={toggleSegmentsList}
-                    splitCurrentSegment={splitCurrentSegment}
-                    enabledSegmentsRaw={enabledSegmentsRaw}
-                    enabledSegments={enabledSegments}
-                    onExportSingleSegmentClick={enableOnlySegment}
-                    onExportSegmentEnabledToggle={toggleSegmentEnabled}
-                    onExportSegmentDisableAll={disableAllSegments}
-                    onExportSegmentEnableAll={enableAllSegments}
-                    jumpSegStart={jumpSegStart}
-                    jumpSegEnd={jumpSegEnd}
-                    onViewSegmentTagsPress={onViewSegmentTagsPress}
-                  />
-                </motion.div>
+                <SegmentList
+                  width={rightBarWidth}
+                  currentSegIndex={currentSegIndexSafe}
+                  apparentCutSegments={apparentCutSegments}
+                  inverseCutSegments={inverseCutSegments}
+                  getFrameCount={getFrameCount}
+                  formatTimecode={formatTimecode}
+                  onSegClick={setCurrentSegIndex}
+                  updateSegOrder={updateSegOrder}
+                  updateSegOrders={updateSegOrders}
+                  onLabelSegmentPress={onLabelSegmentPress}
+                  currentCutSeg={currentCutSeg}
+                  segmentAtCursor={segmentAtCursor}
+                  addCutSegment={addCutSegment}
+                  removeCutSegment={removeCutSegment}
+                  toggleSegmentsList={toggleSegmentsList}
+                  splitCurrentSegment={splitCurrentSegment}
+                  enabledSegmentsRaw={enabledSegmentsRaw}
+                  enabledSegments={enabledSegments}
+                  onExportSingleSegmentClick={enableOnlySegment}
+                  onExportSegmentEnabledToggle={toggleSegmentEnabled}
+                  onExportSegmentDisableAll={disableAllSegments}
+                  onExportSegmentEnableAll={enableAllSegments}
+                  jumpSegStart={jumpSegStart}
+                  jumpSegEnd={jumpSegEnd}
+                  onViewSegmentTagsPress={onViewSegmentTagsPress}
+                />
               )}
             </AnimatePresence>
           </div>
 
-          <motion.div className="no-user-select" style={{ background: controlsBackground }}>
+          <motion.div className="no-user-select" style={bottomMotionStyle}>
             <Timeline
               shouldShowKeyframes={shouldShowKeyframes}
               waveforms={waveforms}

src/SegmentList.jsx

@@ -11,7 +11,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 
 import useContextMenu from './hooks/useContextMenu';
 import useUserSettings from './hooks/useUserSettings';
-import { saveColor } from './colors';
+import { saveColor, controlsBackground } from './colors';
 import { getSegColor } from './util/colors';
 
 const buttonBaseStyle = {
@@ -124,7 +124,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
 });
 
 const SegmentList = memo(({
-  formatTimecode, apparentCutSegments, inverseCutSegments, getFrameCount, onSegClick,
+  width, formatTimecode, apparentCutSegments, inverseCutSegments, getFrameCount, onSegClick,
   currentSegIndex,
   updateSegOrder, updateSegOrders, addCutSegment, removeCutSegment,
   onLabelSegmentPress, currentCutSeg, segmentAtCursor, toggleSegmentsList, splitCurrentSegment,
@@ -242,7 +242,13 @@ const SegmentList = memo(({
   }
 
   return (
-    <>
+    <motion.div
+      className="no-user-select"
+      style={{ width, background: controlsBackground, color: 'rgba(255,255,255,0.7)', display: 'flex', flexDirection: 'column', overflowY: 'hidden' }}
+      initial={{ x: width }}
+      animate={{ x: 0 }}
+      exit={{ x: width }}
+    >
       <div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }} className="hide-scrollbar">
         <div style={{ fontSize: 14, marginBottom: 10 }}>
           <FaAngleRight
@@ -289,7 +295,7 @@ const SegmentList = memo(({
       </div>
 
       {segments.length > 0 && renderFooter()}
-    </>
+    </motion.div>
   );
 });