feat: use styled-components for panel resizer (#1131)

packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx

@@ -1,5 +1,6 @@
 import { Component, createRef, MouseEventHandler } from 'react'
 import { debounce } from '@/Utils'
+import styled from 'styled-components'
 
 export type ResizeFinishCallback = (
   lastWidth: number,
@@ -38,6 +39,50 @@ type State = {
   pressed: boolean
 }
 
+const StyledPanelResizer = styled.div<{
+  hoverable?: boolean
+  alwaysVisible?: boolean
+  pressed: boolean
+  collapsed: boolean
+}>`
+  background-color: var(--panel-resizer-background-color);
+  border-bottom: none;
+  border-top: none;
+  cursor: col-resize;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 4px;
+  z-index: var(--z-index-panel-resizer);
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &.left {
+    left: 0;
+    right: none;
+  }
+
+  ${(props) => (props.alwaysVisible || props.collapsed || props.pressed) && 'opacity: 1;'}
+
+  &:hover {
+    ${(props) => props.hoverable && 'opacity: 1;'}
+  }
+`
+
 class PanelResizer extends Component<Props, State> {
   private overlay?: HTMLDivElement
   private resizerElementRef = createRef<HTMLDivElement>()
@@ -77,6 +122,7 @@ class PanelResizer extends Component<Props, State> {
   }
 
   override componentDidMount() {
+    console.log(this.resizerElementRef.current)
     this.resizerElementRef.current?.addEventListener('dblclick', this.onDblClick)
   }
 
@@ -306,13 +352,15 @@ class PanelResizer extends Component<Props, State> {
 
   override render() {
     return (
-      <div
-        className={`panel-resizer ${this.props.side} ${this.props.hoverable ? 'hoverable' : ''} ${
-          this.props.alwaysVisible ? 'alwaysVisible' : ''
-        } ${this.state.pressed ? 'dragging' : ''} ${this.state.collapsed ? 'collapsed' : ''}`}
+      <StyledPanelResizer
+        hoverable={this.props.hoverable}
+        alwaysVisible={this.props.alwaysVisible}
+        pressed={this.state.pressed}
+        collapsed={this.state.collapsed}
+        className={this.props.side}
         onMouseDown={this.onMouseDown}
         ref={this.resizerElementRef}
-      ></div>
+      />
     )
   }
 }