feat(ui): improved resize handle styles

Simplify the handle component and use the provided data attributes to style the handles correctly.

Fixes a styling issue where you if you hover at the T-junction between two handles, only one brightens up.

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx

@@ -92,7 +92,7 @@ const GalleryPanelContent = () => {
             <BoardsListWrapper />
           </Flex>
         </Panel>
-        <ResizeHandle id="gallery-panel-handle" orientation="horizontal" {...boardsListPanel.resizeHandleProps} />
+        <ResizeHandle id="gallery-panel-handle" {...boardsListPanel.resizeHandleProps} />
         <Panel id="gallery-wrapper-panel" minSize={20}>
           <Gallery />
         </Panel>

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSideBySide.tsx

@@ -42,11 +42,7 @@ export const ImageComparisonSideBySide = memo(({ firstImage, secondImage }: Comp
               </Flex>
             </Flex>
           </Panel>
-          <ResizeHandle
-            id="image-comparison-side-by-side-handle"
-            onDoubleClick={onDoubleClickHandle}
-            orientation="vertical"
-          />
+          <ResizeHandle id="image-comparison-side-by-side-handle" onDoubleClick={onDoubleClickHandle} />
 
           <Panel minSize={20}>
             <Flex position="relative" w="full" h="full" alignItems="center" justifyContent="center">

invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx

@@ -51,7 +51,7 @@ const NodeEditorPanelGroup = () => {
           <Panel id="workflow" collapsible minSize={25}>
             <WorkflowPanel />
           </Panel>
-          <ResizeHandle orientation="horizontal" onDoubleClick={handleDoubleClickHandle} />
+          <ResizeHandle onDoubleClick={handleDoubleClickHandle} />
           <Panel id="inspector" collapsible minSize={25}>
             <InspectorPanel />
           </Panel>

invokeai/frontend/web/src/features/ui/components/AppContent.tsx

@@ -139,15 +139,15 @@ export const AppContent = memo(() => {
                   </Box>
                 </Flex>
               </Panel>
-              <ResizeHandle id="left-main-handle" orientation="vertical" {...leftPanel.resizeHandleProps} />
+              <ResizeHandle id="left-main-handle" {...leftPanel.resizeHandleProps} />
             </>
           )}
           <Panel id="main-panel" order={1} minSize={20} style={panelStyles}>
             <MainPanelContent />
           </Panel>
           {withRightPanel && (
             <>
-              <ResizeHandle id="main-right-handle" orientation="vertical" {...rightPanel.resizeHandleProps} />
+              <ResizeHandle id="main-right-handle" {...rightPanel.resizeHandleProps} />
               <Panel order={2} style={panelStyles} collapsible {...rightPanel.panelProps}>
                 <RightPanelContent />
               </Panel>

invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx

@@ -1,61 +1,60 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Box, chakra, Flex } from '@invoke-ai/ui-library';
+import { chakra } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import type { PanelResizeHandleProps } from 'react-resizable-panels';
 import { PanelResizeHandle } from 'react-resizable-panels';
 
-type ResizeHandleProps = PanelResizeHandleProps & {
-  orientation: 'horizontal' | 'vertical';
-};
-
 const ChakraPanelResizeHandle = chakra(PanelResizeHandle);
 
-const ResizeHandle = (props: ResizeHandleProps) => {
-  const { orientation, ...rest } = props;
-
-  return (
-    <ChakraPanelResizeHandle {...rest}>
-      <Flex sx={sx} data-orientation={orientation}>
-        <Box className="resize-handle-inner" data-orientation={orientation} />
-      </Flex>
-    </ChakraPanelResizeHandle>
-  );
+const ResizeHandle = (props: Omit<PanelResizeHandleProps, 'style'>) => {
+  return <ChakraPanelResizeHandle {...props} sx={sx} />;
 };
 
 export default memo(ResizeHandle);
 
 const sx: SystemStyleObject = {
-  display: 'flex',
-  pos: 'relative',
-  '&[data-orientation="horizontal"]': {
-    w: 'full',
-    h: 5,
-  },
-  '&[data-orientation="vertical"]': { w: 5, h: 'full' },
-  alignItems: 'center',
-  justifyContent: 'center',
-  div: {
-    bg: 'base.800',
+  '&[data-resize-handle-state="hover"]': {
+    _before: {
+      background: 'base.600 !important',
+    },
   },
-  _hover: {
-    div: { bg: 'base.700' },
+  '&[data-resize-handle-state="drag"]': {
+    _before: {
+      background: 'base.500 !important',
+    },
   },
-  _active: {
-    div: { bg: 'base.600' },
+  '&[data-panel-group-direction="horizontal"]': {
+    w: 4,
+    h: 'full',
+    position: 'relative',
+    _before: {
+      transitionProperty: 'background',
+      transitionDuration: 'normal',
+      content: '""',
+      w: '2px',
+      h: 'full',
+      background: 'base.800',
+      position: 'absolute',
+      left: '50%',
+      top: 0,
+      transform: 'translateX(-50%)',
+    },
   },
-  transitionProperty: 'common',
-  transitionDuration: 'normal',
-  '.resize-handle-inner': {
-    '&[data-orientation="horizontal"]': {
-      w: '100%',
+  '&[data-panel-group-direction="vertical"]': {
+    h: 4,
+    w: 'full',
+    position: 'relative',
+    _before: {
+      transitionProperty: 'background',
+      transitionDuration: 'normal',
+      content: '""',
+      w: 'full',
       h: '2px',
+      background: 'base.800',
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      transform: 'translateY(-50%)',
     },
-    '&[data-orientation="vertical"]': {
-      w: '2px',
-      h: '100%',
-    },
-    borderRadius: 'base',
-    transitionProperty: 'inherit',
-    transitionDuration: 'inherit',
   },
 };