fix: draggable panel dragging bg color

Signed-off-by: Innei <[email protected]>

src/renderer/src/components/ui/divider/PanelSpliter.tsx

@@ -1,16 +1,26 @@
+import { cn } from "@renderer/lib/utils"
 import * as React from "react"
 
 export const PanelSplitter = (
   props: React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLDivElement>,
     HTMLDivElement
-  >,
-) => (
-  <div className="relative h-full w-0 shrink-0">
-    <div
-      tabIndex={-1}
-      {...props}
-      className="absolute inset-0 z-[11] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500"
-    />
-  </div>
-)
+  > & {
+    isDragging?: boolean
+  },
+) => {
+  const { isDragging, ...rest } = props
+
+  return (
+    <div className="relative h-full w-0 shrink-0">
+      <div
+        tabIndex={-1}
+        {...rest}
+        className={cn(
+          "absolute inset-0 z-[11] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500",
+          isDragging ? "bg-accent" : "",
+        )}
+      />
+    </div>
+  )
+}

src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx

@@ -18,7 +18,7 @@ export function Component() {
   const entryColWidth = useMemo(() => getUISettings().entryColWidth, [])
   const { feedId, view } = useRouteParms()
   const inWideMode = view ? views[view].wideMode : false
-  const { position, separatorProps } = useResizable({
+  const { position, separatorProps, isDragging } = useResizable({
     axis: "x",
     // FIXME: Less than this width causes grid images to overflow on safari
     min: isSafari() ? 356 : 300,
@@ -44,7 +44,7 @@ export function Component() {
       >
         <EntryColumn key={`${feedId}-${view}`} />
       </div>
-      {!inWideMode && <PanelSplitter {...separatorProps} />}
+      {!inWideMode && <PanelSplitter {...separatorProps} isDragging={isDragging} />}
       <Outlet />
     </div>
   )

src/renderer/src/pages/(main)/layout.tsx

@@ -219,7 +219,7 @@ const FeedResponsiveResizerContainer = ({
         }}
       />
 
-      {delayShowSplitter && <PanelSplitter {...separatorProps} />}
+      {delayShowSplitter && <PanelSplitter isDragging={isDragging} {...separatorProps} />}
     </>
   )
 }