From 8de7078d10b733456c480117ba8ed8d2166e20b9 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 31 Aug 2024 16:28:21 +0800
Subject: [PATCH] fix: draggable panel dragging bg color

Signed-off-by: Innei <i@innei.in>
---
 .../components/ui/divider/PanelSpliter.tsx    | 30 ++++++++++++-------
 .../(main)/(layer)/feeds/[feedId]/layout.tsx  |  4 +--
 src/renderer/src/pages/(main)/layout.tsx      |  2 +-
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/ui/divider/PanelSpliter.tsx b/src/renderer/src/components/ui/divider/PanelSpliter.tsx
index ce42c74ea1..e6680e4201 100644
--- a/src/renderer/src/components/ui/divider/PanelSpliter.tsx
+++ b/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>
+  )
+}
diff --git a/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx b/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx
index fe20facdb2..355d619504 100644
--- a/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx
+++ b/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>
   )
diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
index c85f19bb32..b5132cfd7f 100644
--- a/src/renderer/src/pages/(main)/layout.tsx
+++ b/src/renderer/src/pages/(main)/layout.tsx
@@ -219,7 +219,7 @@ const FeedResponsiveResizerContainer = ({
         }}
       />
 
-      {delayShowSplitter && <PanelSplitter {...separatorProps} />}
+      {delayShowSplitter && <PanelSplitter isDragging={isDragging} {...separatorProps} />}
     </>
   )
 }