fix: draggable panel dragging bg color

Signed-off-by: Innei <i@innei.in>

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} />}
  </>
  )
 }