feat: modal resize and draggable to absolute position

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

src/renderer/src/components/ui/modal/stacked/hooks.tsx

@@ -1,6 +1,8 @@
 import { getUISettings } from "@renderer/atoms/settings/ui"
 import { jotaiStore } from "@renderer/lib/jotai"
-import { useCallback, useContext, useId, useRef } from "react"
+import { useCallback, useContext, useId, useRef, useState } from "react"
+import { flushSync } from "react-dom"
+import { useEventCallback } from "usehooks-ts"
 
 import { modalStackAtom } from "./atom"
 import { CurrentModalContext } from "./context"
@@ -73,3 +75,42 @@ const actions = {
 }
 
 export const useCurrentModal = () => useContext(CurrentModalContext)
+
+export const useResizeableModal = (
+ modalElementRef: React.RefObject<HTMLDivElement>,
+ {
+ enableResizeable,
+ }: {
+ enableResizeable: boolean
+ },
+) => {
+ const [resizeableStyle, setResizeableStyle] = useState(
+ {} as React.CSSProperties,
+ )
+ const [isResizeable, setIsResizeable] = useState(false)
+
+ const handlePointDown = useEventCallback(() => {
+ if (!enableResizeable) return
+ if (isResizeable) return
+ const $modalElement = modalElementRef.current
+ if (!$modalElement) return
+
+ const rect = $modalElement.getBoundingClientRect()
+ const { x, y } = rect
+
+ flushSync(() => {
+ setIsResizeable(true)
+ setResizeableStyle({
+ position: "fixed",
+ top: `${y}px`,
+ left: `${x}px`,
+ })
+ })
+ })
+
+ return {
+ resizeableStyle,
+ isResizeable,
+ handlePointDown,
+ }
+}