diff --git a/apps/extension/src/content/BorrowConfirmationOverlay.tsx b/apps/extension/src/content/BorrowConfirmationOverlay.tsx index afcc677..0931834 100644 --- a/apps/extension/src/content/BorrowConfirmationOverlay.tsx +++ b/apps/extension/src/content/BorrowConfirmationOverlay.tsx @@ -1,6 +1,6 @@ import { useTranslation } from "@browser-skill/i18n/react"; import { RiCloseLine } from "@remixicon/react"; -import { useEffect, useRef, useState, type TransitionEvent } from "react"; +import { type TransitionEvent, useEffect, useRef, useState } from "react"; import logoUrl from "../../assets/logo.png"; export interface BorrowRequestData { diff --git a/apps/extension/src/content/HelpRequestOverlay.tsx b/apps/extension/src/content/HelpRequestOverlay.tsx index 1dc4fb9..7da83fb 100644 --- a/apps/extension/src/content/HelpRequestOverlay.tsx +++ b/apps/extension/src/content/HelpRequestOverlay.tsx @@ -1,12 +1,12 @@ import { useTranslation } from "@browser-skill/i18n/react"; import { RiArrowDownSLine } from "@remixicon/react"; import { + type PointerEvent as ReactPointerEvent, useCallback, useEffect, useLayoutEffect, useRef, useState, - type PointerEvent as ReactPointerEvent, } from "react"; import logoUrl from "../../assets/logo.png"; @@ -239,25 +239,29 @@ export function HelpRequestOverlay({ request }: Props) { }; }, [request]); - const onHeaderPointerDown = useCallback((e: ReactPointerEvent) => { - if (e.button !== 0) return; - if (e.target instanceof Element && e.target.closest("button, input, textarea, a, select")) return; - const banner = bannerRef.current; - if (!banner) return; - const rect = banner.getBoundingClientRect(); - dragStartRef.current = { - pointerX: e.clientX, - pointerY: e.clientY, - originLeft: rect.left, - originTop: rect.top, - panelW: banner.offsetWidth || PANEL_WIDTH, - panelH: banner.offsetHeight || (collapsed ? FALLBACK_PANEL_H_COLLAPSED : FALLBACK_PANEL_H), - }; - userMovedRef.current = true; - setDragPos({ top: rect.top, left: rect.left }); - setDragging(true); - e.preventDefault(); - }, [collapsed]); + const onHeaderPointerDown = useCallback( + (e: ReactPointerEvent) => { + if (e.button !== 0) return; + if (e.target instanceof Element && e.target.closest("button, input, textarea, a, select")) + return; + const banner = bannerRef.current; + if (!banner) return; + const rect = banner.getBoundingClientRect(); + dragStartRef.current = { + pointerX: e.clientX, + pointerY: e.clientY, + originLeft: rect.left, + originTop: rect.top, + panelW: banner.offsetWidth || PANEL_WIDTH, + panelH: banner.offsetHeight || (collapsed ? FALLBACK_PANEL_H_COLLAPSED : FALLBACK_PANEL_H), + }; + userMovedRef.current = true; + setDragPos({ top: rect.top, left: rect.left }); + setDragging(true); + e.preventDefault(); + }, + [collapsed], + ); useEffect(() => { if (!dragging) return; @@ -636,7 +640,11 @@ export function HelpRequestOverlay({ request }: Props) {
- browser-skill + browser-skill {request.title ?? t("helpRequest.title")}