From 06c2fd18d1c65c6ee869bc6d6a2c3f140076275e Mon Sep 17 00:00:00 2001 From: ujiro99 Date: Wed, 9 Jul 2025 08:57:21 +0900 Subject: [PATCH 1/7] v0.13.0 --- manifest.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 97a20086..ac7ce223 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "__MSG_extName__", "description": "__MSG_extDescription__", - "version": "0.12.3", + "version": "0.13.0", "default_locale": "en", "icons": { "128": "icon128.png" diff --git a/package.json b/package.json index a0c10b5b..1f72554b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "selection-command", - "version": "0.12.3", + "version": "0.13.0", "author": "ujiro99", "license": "MIT", "private": true, From cec75769e5ce2fbdf343f7879fe95fefbc5f93c9 Mon Sep 17 00:00:00 2001 From: ujiro99 Date: Wed, 9 Jul 2025 09:05:45 +0900 Subject: [PATCH 2/7] Fix: URL of selection command hub. --- src/components/commandHub/MyCommands.tsx | 56 +++--- .../option/editor/CommandListMenu.tsx | 2 +- src/const.ts | 190 +++++++++--------- 3 files changed, 124 insertions(+), 124 deletions(-) diff --git a/src/components/commandHub/MyCommands.tsx b/src/components/commandHub/MyCommands.tsx index d077258f..25bf25c1 100644 --- a/src/components/commandHub/MyCommands.tsx +++ b/src/components/commandHub/MyCommands.tsx @@ -1,12 +1,12 @@ -import React, { useState, useEffect, useRef, forwardRef } from 'react' -import { ChevronLeft, ChevronRight } from 'lucide-react' -import ColorThief from 'colorthief' -import { useSettingsWithImageCache } from '@/hooks/useSetting' -import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics' -import { t } from '@/services/i18n' -import { cn, isSearchCommand, isPageActionCommand } from '@/lib/utils' -import { HUB_URL, SCREEN } from '@/const' -import type { Command } from '@/types' +import React, { useState, useEffect, useRef, forwardRef } from "react" +import { ChevronLeft, ChevronRight } from "lucide-react" +import ColorThief from "colorthief" +import { useSettingsWithImageCache } from "@/hooks/useSetting" +import { sendEvent, ANALYTICS_EVENTS } from "@/services/analytics" +import { t } from "@/services/i18n" +import { cn, isSearchCommand, isPageActionCommand } from "@/lib/utils" +import { HUB_URL, SCREEN } from "@/const" +import type { Command } from "@/types" export const MyCommands = (): JSX.Element => { const [urls, setUrls] = useState([]) @@ -73,18 +73,18 @@ export const MyCommands = (): JSX.Element => { return (
-

{t('commnadHub_youcanshare')}

+

{t("commnadHub_youcanshare")}

{!enableMarquee ? (
@@ -92,16 +92,16 @@ export const MyCommands = (): JSX.Element => { ) : (
diff --git a/src/components/SelectAnchor.tsx b/src/components/SelectAnchor.tsx index 0cf9c1ea..019b4e7a 100644 --- a/src/components/SelectAnchor.tsx +++ b/src/components/SelectAnchor.tsx @@ -1,11 +1,11 @@ -import React, { useState, useEffect, forwardRef, useCallback } from 'react' -import { LinkClickGuard } from '@/components/LinkClickGuard' -import { useUserSettings } from '@/hooks/useSetting' -import { useSelectContext } from '@/hooks/useSelectContext' -import { useLeftClickHold } from '@/hooks/useLeftClickHold' -import { MOUSE, EXIT_DURATION, STARTUP_METHOD } from '@/const' -import { isEmpty, isPopup } from '@/lib/utils' -import { Point } from '@/types' +import React, { useState, useEffect, forwardRef, useCallback } from "react" +import { LinkClickGuard } from "@/components/LinkClickGuard" +import { useUserSettings } from "@/hooks/useSetting" +import { useSelectContext } from "@/hooks/useSelectContext" +import { useLeftClickHold } from "@/hooks/useLeftClickHold" +import { MOUSE, EXIT_DURATION, STARTUP_METHOD } from "@/const" +import { isEmpty, isPopup } from "@/lib/utils" +import { Point } from "@/types" const SIZE = 40 @@ -118,15 +118,15 @@ export const SelectAnchor = forwardRef((_props, ref) => { setAnchor({ x: e.clientX, y: e.clientY }) } - document.addEventListener('mousedown', onMouseDown) - document.addEventListener('mouseup', onMouseUp) - document.addEventListener('click', onClick) - document.addEventListener('dblclick', onDouble) + document.addEventListener("mousedown", onMouseDown) + document.addEventListener("mouseup", onMouseUp) + document.addEventListener("click", onClick) + document.addEventListener("dblclick", onDouble) return () => { - document.removeEventListener('mousedown', onMouseDown) - document.removeEventListener('mouseup', onMouseUp) - document.removeEventListener('click', onClick) - document.removeEventListener('dblclick', onDouble) + document.removeEventListener("mousedown", onMouseDown) + document.removeEventListener("mouseup", onMouseUp) + document.removeEventListener("click", onClick) + document.removeEventListener("dblclick", onDouble) } }, [isMouseDown, isDragging, detectHold, selected, releaseAnchor, setAnchor]) @@ -139,10 +139,10 @@ export const SelectAnchor = forwardRef((_props, ref) => { } } if (isMouseDown) { - document.addEventListener('mousemove', onMouseMove) + document.addEventListener("mousemove", onMouseMove) } return () => { - document.removeEventListener('mousemove', onMouseMove) + document.removeEventListener("mousemove", onMouseMove) } }, [point, isMouseDown, setIsDragging, releaseAnchor]) @@ -155,12 +155,12 @@ export const SelectAnchor = forwardRef((_props, ref) => { if (point == null) return null const styles = { - position: 'absolute', + position: "absolute", top: window.scrollY + point.y - offset.y - SIZE / 2, left: window.scrollX + point.x - offset.x - SIZE / 2, height: SIZE, width: SIZE, - pointerEvents: 'none', + pointerEvents: "none", zIndex: 2147483647, // backgroundColor: 'rgba(255, 0, 0, 0.3)', // border: '1px solid red', diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 40880d5e..8e715f01 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -1,13 +1,13 @@ -import { useContext, useEffect, useState } from 'react' -import clsx from 'clsx' +import { useContext, useEffect, useState } from "react" +import clsx from "clsx" import { Popover, PopoverContent, PopoverAnchor, PopoverArrow, -} from '@/components/ui/popover' -import { popupContext } from '@/components/Popup' -import { SIDE } from '@/const' +} from "@/components/ui/popover" +import { popupContext } from "@/components/Popup" +import { SIDE } from "@/const" type PopupProps = { text: string @@ -28,13 +28,13 @@ export function Tooltip(props: PopupProps) { const show = () => setIsOpen(true) const hide = () => setIsOpen(false) if (elm) { - elm.addEventListener('mouseenter', show) - elm.addEventListener('mouseleave', hide) + elm.addEventListener("mouseenter", show) + elm.addEventListener("mouseleave", hide) } return () => { if (elm) { - elm.removeEventListener('mouseenter', show) - elm.removeEventListener('mouseleave', hide) + elm.removeEventListener("mouseenter", show) + elm.removeEventListener("mouseleave", hide) } } }, [elm]) @@ -63,10 +63,10 @@ export function Tooltip(props: PopupProps) { {shouldRender && ( diff --git a/src/components/commandHub/CommandHub.tsx b/src/components/commandHub/CommandHub.tsx index 216e1639..0fcbbd2b 100644 --- a/src/components/commandHub/CommandHub.tsx +++ b/src/components/commandHub/CommandHub.tsx @@ -1,5 +1,5 @@ -import { DownloadButton } from '@/components/commandHub/DownloadButton' -import { StarButton } from '@/components/commandHub/StarButton' +import { DownloadButton } from "@/components/commandHub/DownloadButton" +import { StarButton } from "@/components/commandHub/StarButton" export const CommandHub = (): JSX.Element => { return ( diff --git a/src/components/commandHub/DownloadButton.tsx b/src/components/commandHub/DownloadButton.tsx index d2e6135e..edb19676 100644 --- a/src/components/commandHub/DownloadButton.tsx +++ b/src/components/commandHub/DownloadButton.tsx @@ -1,17 +1,17 @@ -import { useState, useEffect } from 'react' -import clsx from 'clsx' -import { Ipc, BgCommand } from '@/services/ipc' -import { useSection } from '@/hooks/useSetting' -import { useDetectUrlChanged } from '@/hooks/useDetectUrlChanged' -import { CACHE_SECTIONS } from '@/services/settingsCache' -import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics' +import { useState, useEffect } from "react" +import clsx from "clsx" +import { Ipc, BgCommand } from "@/services/ipc" +import { useSection } from "@/hooks/useSetting" +import { useDetectUrlChanged } from "@/hooks/useDetectUrlChanged" +import { CACHE_SECTIONS } from "@/services/settingsCache" +import { sendEvent, ANALYTICS_EVENTS } from "@/services/analytics" import { Popover, PopoverContent, PopoverAnchor, PopoverArrow, -} from '@/components/ui/popover' -import { SCREEN } from '@/const' +} from "@/components/ui/popover" +import { SCREEN } from "@/const" const TooltipDuration = 2000 @@ -24,13 +24,13 @@ export const DownloadButton = (): JSX.Element => { const open = position != null const setButtonClickListener = () => { - document.querySelectorAll('button[data-command]').forEach((button) => { + document.querySelectorAll("button[data-command]").forEach((button) => { if (!(button instanceof HTMLButtonElement)) return const command = button.dataset.command const id = button.dataset.id if (command == null) return - button.dataset.clickable = 'true' - button.addEventListener('click', () => { + button.dataset.clickable = "true" + button.addEventListener("click", () => { Ipc.send(BgCommand.addCommand, { command }).then((res) => { if (res) { sendEvent( @@ -52,15 +52,15 @@ export const DownloadButton = (): JSX.Element => { const installed = document.querySelector( `button[data-id="${id}"]`, ) as HTMLElement - if (installed) installed.style.display = 'none' + if (installed) installed.style.display = "none" // show installed label const p = document.querySelector(`p[data-id="${id}"]`) as HTMLElement - if (p) p.style.display = 'block' + if (p) p.style.display = "block" }) } const updateCount = () => { - document.querySelectorAll('span[data-id]').forEach((span) => { + document.querySelectorAll("span[data-id]").forEach((span) => { if (!(span instanceof HTMLElement)) return const count = Number(span.dataset.downloadCount) if (count == null || isNaN(count)) return @@ -121,7 +121,7 @@ export const DownloadButton = (): JSX.Element => { {shouldRender && ( { ) const updateButton = useCallback(() => { - document.querySelectorAll('button[data-star-id]').forEach((button) => { + document.querySelectorAll("button[data-star-id]").forEach((button) => { if (!(button instanceof HTMLButtonElement)) return const id = button.dataset.starId if (id == null) return - button.addEventListener('click', updateStar) - button.dataset.clickable = 'true' + button.addEventListener("click", updateStar) + button.dataset.clickable = "true" if (stars?.some((s: any) => s.id === id)) { - button.dataset.starred = 'true' + button.dataset.starred = "true" } else { - button.dataset.starred = 'false' + button.dataset.starred = "false" } }) }, [stars]) const updateCount = () => { - document.querySelectorAll('span[data-star-id]').forEach((span) => { + document.querySelectorAll("span[data-star-id]").forEach((span) => { if (!(span instanceof HTMLElement)) return const count = Number(span.dataset.starCount) if (count == null || isNaN(count)) return @@ -71,9 +71,9 @@ export const StarButton = (): JSX.Element => { } const removeButtonEvent = () => { - document.querySelectorAll('button[data-star-id]').forEach((button) => { + document.querySelectorAll("button[data-star-id]").forEach((button) => { if (!(button instanceof HTMLButtonElement)) return - button.removeEventListener('click', updateStar) + button.removeEventListener("click", updateStar) }) } diff --git a/src/components/help/PageActionHelp.tsx b/src/components/help/PageActionHelp.tsx index 8bd39c45..4acc0dfb 100644 --- a/src/components/help/PageActionHelp.tsx +++ b/src/components/help/PageActionHelp.tsx @@ -1,5 +1,5 @@ -import { useState, useRef, useEffect } from 'react' -import { CircleHelp } from 'lucide-react' +import { useState, useRef, useEffect } from "react" +import { CircleHelp } from "lucide-react" import { Dialog, @@ -10,8 +10,8 @@ import { DialogHeader, DialogTitle, DialogFooter, -} from '@/components/ui/dialog' -import { Button } from '@/components/ui/button' +} from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" import { Carousel, CarouselContent, @@ -19,14 +19,14 @@ import { CarouselNext, CarouselPrevious, type CarouselApi, -} from '@/components/ui/carousel' -import { Tooltip } from '@/components/Tooltip' -import { t } from '@/services/i18n' -import { cn } from '@/lib/utils' -import { ANALYTICS_EVENTS, sendEvent } from '@/services/analytics' -import { SCREEN } from '@/const' +} from "@/components/ui/carousel" +import { Tooltip } from "@/components/Tooltip" +import { t } from "@/services/i18n" +import { cn } from "@/lib/utils" +import { ANALYTICS_EVENTS, sendEvent } from "@/services/analytics" +import { SCREEN } from "@/const" -import css from './help.module.css' +import css from "./help.module.css" type HelpDialogProps = { open: boolean @@ -44,7 +44,7 @@ export const PaeActionHelp = ({ className }: Props) => { @@ -322,7 +322,7 @@ const HelpDialog = ({ open, onOpenChange }: HelpDialogProps) => { diff --git a/src/components/menu/InvisibleItem.tsx b/src/components/menu/InvisibleItem.tsx index 002ad2f9..ba3b74ca 100644 --- a/src/components/menu/InvisibleItem.tsx +++ b/src/components/menu/InvisibleItem.tsx @@ -1,15 +1,15 @@ -import React, { useRef, useEffect, useMemo } from 'react' -import { cn } from '@/lib/utils' +import React, { useRef, useEffect, useMemo } from "react" +import { cn } from "@/lib/utils" -import { ResultPopup } from '@/components/result/ResultPopup' -import { Icon } from '@/components/Icon' -import { useContextMenu } from '@/hooks/useContextMenu' -import { useSelectContext } from '@/hooks/useSelectContext' -import { useCommandExecutor } from '@/hooks/useCommandExecutor' -import type { SelectionCommand } from '@/types' -import { POPUP_OFFSET, ExecState } from '@/const' +import { ResultPopup } from "@/components/result/ResultPopup" +import { Icon } from "@/components/Icon" +import { useContextMenu } from "@/hooks/useContextMenu" +import { useSelectContext } from "@/hooks/useSelectContext" +import { useCommandExecutor } from "@/hooks/useCommandExecutor" +import type { SelectionCommand } from "@/types" +import { POPUP_OFFSET, ExecState } from "@/const" -import css from './Menu.module.css' +import css from "./Menu.module.css" type InvisibleItemProps = { positionElm?: Element | null @@ -30,9 +30,9 @@ export function InvisibleItem(props: InvisibleItemProps): React.ReactNode { const onSelectionchange = () => { clearResult() } - document.addEventListener('selectionchange', onSelectionchange) + document.addEventListener("selectionchange", onSelectionchange) return () => { - document.removeEventListener('selectionchange', onSelectionchange) + document.removeEventListener("selectionchange", onSelectionchange) } }, []) @@ -53,12 +53,12 @@ export function InvisibleItem(props: InvisibleItemProps): React.ReactNode { const style = useMemo(() => { return { - position: 'absolute' as const, + position: "absolute" as const, top: window.scrollY + position.y, left: window.scrollX + position.x, height: 0, width: 0, - pointerEvents: 'none' as const, + pointerEvents: "none" as const, } }, [position]) @@ -82,7 +82,7 @@ export function InvisibleItem(props: InvisibleItemProps): React.ReactNode { visible={visible} positionRef={elmRef} onClose={clearResult} - className={'pointer-events-auto'} + className={"pointer-events-auto"} > {result} @@ -104,7 +104,7 @@ function IconWithState(props: ImageProps): JSX.Element {
{status === ExecState.EXECUTING && ( diff --git a/src/components/menu/MenuImage.tsx b/src/components/menu/MenuImage.tsx index 141461f7..1b44f664 100644 --- a/src/components/menu/MenuImage.tsx +++ b/src/components/menu/MenuImage.tsx @@ -1,6 +1,6 @@ -import { useState } from 'react' -import { isEmpty, cn } from '@/lib/utils' -import css from './Menu.module.css' +import { useState } from "react" +import { isEmpty, cn } from "@/lib/utils" +import css from "./Menu.module.css" type MenuImageProps = { src?: string diff --git a/src/components/option/CopyButton.tsx b/src/components/option/CopyButton.tsx index 9553ee46..f6e703e1 100644 --- a/src/components/option/CopyButton.tsx +++ b/src/components/option/CopyButton.tsx @@ -1,5 +1,5 @@ -import { useState, useRef } from 'react' -import { Copy } from 'lucide-react' +import { useState, useRef } from "react" +import { Copy } from "lucide-react" import { Dialog, DialogClose, @@ -8,12 +8,12 @@ import { DialogHeader, DialogTitle, DialogFooter, -} from '@/components/ui/dialog' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' -import { Tooltip } from '@/components/Tooltip' -import { t } from '@/services/i18n' -import { cn } from '@/lib/utils' +} from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Tooltip } from "@/components/Tooltip" +import { t } from "@/services/i18n" +import { cn } from "@/lib/utils" type CopyButtonProps = { srcTitle: string @@ -40,7 +40,7 @@ export const CopyButton = ({ type="button" ref={buttonRef} className={cn( - 'outline-gray-200 p-2 rounded-md transition hover:bg-gray-100 hover:scale-125 group/edit-button', + "outline-gray-200 p-2 rounded-md transition hover:bg-gray-100 hover:scale-125 group/edit-button", className, )} onClick={() => setOpen(true)} @@ -58,7 +58,7 @@ export const CopyButton = ({ /> ) @@ -71,7 +71,7 @@ function incrementLastNumber(str: string): string { const incrementedNumber = (parseInt(number, 10) + 1).toString() return str.slice(0, -number.length) + incrementedNumber } else { - return str + ' 1' + return str + " 1" } } @@ -98,9 +98,9 @@ export const CopyDialog = ({ - {t('Option_copy_title')} + {t("Option_copy_title")} - {t('Option_copy_desc')} + {t("Option_copy_desc")} diff --git a/src/components/option/EditButton.tsx b/src/components/option/EditButton.tsx index 9ffd7458..652b5582 100644 --- a/src/components/option/EditButton.tsx +++ b/src/components/option/EditButton.tsx @@ -1,8 +1,8 @@ -import React, { useRef } from 'react' -import { Pencil } from 'lucide-react' -import { Tooltip } from '@/components/Tooltip' -import { t } from '@/services/i18n' -import { cn } from '@/lib/utils' +import React, { useRef } from "react" +import { Pencil } from "lucide-react" +import { Tooltip } from "@/components/Tooltip" +import { t } from "@/services/i18n" +import { cn } from "@/lib/utils" type EditButtonProps = { onClick: () => void @@ -27,14 +27,14 @@ export const EditButton = ({
) diff --git a/src/components/option/LoadingIcon.tsx b/src/components/option/LoadingIcon.tsx index d58c738d..f868b907 100644 --- a/src/components/option/LoadingIcon.tsx +++ b/src/components/option/LoadingIcon.tsx @@ -1,5 +1,5 @@ -import React, { forwardRef } from 'react' -import styles from './LoadingIcon.module.css' +import React, { forwardRef } from "react" +import styles from "./LoadingIcon.module.css" type LoadingIconProp = { children?: React.ReactNode diff --git a/src/components/option/RemoveButton.tsx b/src/components/option/RemoveButton.tsx index 29e55d26..fcabcd6d 100644 --- a/src/components/option/RemoveButton.tsx +++ b/src/components/option/RemoveButton.tsx @@ -1,10 +1,10 @@ -import { useState, useRef } from 'react' -import { Trash2 } from 'lucide-react' -import { Tooltip } from '@/components/Tooltip' -import { MenuImage } from '@/components/menu/MenuImage' -import { RemoveDialog } from '@/components/option/RemoveDialog' -import { cn } from '@/lib/utils' -import { t } from '@/services/i18n' +import { useState, useRef } from "react" +import { Trash2 } from "lucide-react" +import { Tooltip } from "@/components/Tooltip" +import { MenuImage } from "@/components/menu/MenuImage" +import { RemoveDialog } from "@/components/option/RemoveDialog" +import { cn } from "@/lib/utils" +import { t } from "@/services/i18n" type RemoveButtonProps = { onRemove: () => void @@ -31,7 +31,7 @@ export const RemoveButton = ({ ) diff --git a/src/components/option/RemoveDialog.tsx b/src/components/option/RemoveDialog.tsx index c6ad3b7a..73f7ded5 100644 --- a/src/components/option/RemoveDialog.tsx +++ b/src/components/option/RemoveDialog.tsx @@ -1,6 +1,6 @@ -import { useRef } from 'react' -import { Trash2 } from 'lucide-react' -import { t } from '@/services/i18n' +import { useRef } from "react" +import { Trash2 } from "lucide-react" +import { t } from "@/services/i18n" import { Dialog, @@ -11,8 +11,8 @@ import { DialogHeader, DialogTitle, DialogFooter, -} from '@/components/ui/dialog' -import { Button } from '@/components/ui/button' +} from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" type RemoveDialogProps = { open: boolean @@ -34,7 +34,7 @@ export const RemoveDialog = (props: RemoveDialogProps) => { - {t('Option_remove_title')} + {t("Option_remove_title")} {props.description}
@@ -43,7 +43,7 @@ export const RemoveDialog = (props: RemoveDialogProps) => { @@ -55,7 +55,7 @@ export const RemoveDialog = (props: RemoveDialogProps) => { ref={closeRef} > - {t('Option_remove_ok')} + {t("Option_remove_ok")} diff --git a/src/components/option/SortableItem.tsx b/src/components/option/SortableItem.tsx index b8da2cc5..3e4f42e4 100644 --- a/src/components/option/SortableItem.tsx +++ b/src/components/option/SortableItem.tsx @@ -1,8 +1,8 @@ -import { useSortable } from '@dnd-kit/sortable' -import { CSS } from '@dnd-kit/utilities' -import { GripVertical } from 'lucide-react' -import { cn } from '@/lib/utils' -import type { Command, CommandFolder } from '@/types' +import { useSortable } from "@dnd-kit/sortable" +import { CSS } from "@dnd-kit/utilities" +import { GripVertical } from "lucide-react" +import { cn } from "@/lib/utils" +import type { Command, CommandFolder } from "@/types" type SrotabelItemProps = { id: string @@ -34,7 +34,7 @@ export function SortableItem(props: SrotabelItemProps) { }, transition: { duration: 150, - easing: 'cubic-bezier(0.25, 1, 0.5, 1)', + easing: "cubic-bezier(0.25, 1, 0.5, 1)", }, }) @@ -49,19 +49,19 @@ export function SortableItem(props: SrotabelItemProps) { ref={isDroppable ? setNodeRef : null} style={style} className={cn( - 'pl-1 flex items-center cursor-auto', - props.index === 0 ? '' : 'border-t', + "pl-1 flex items-center cursor-auto", + props.index === 0 ? "" : "border-t", props.index === activeIndex - ? 'border-y bg-gray-100/80 shadow-lg relative z-10' - : '', + ? "border-y bg-gray-100/80 shadow-lg relative z-10" + : "", props.className, )} {...attributes} >
void @@ -17,12 +17,12 @@ type Props = { export const TableOfContents = (props: Props) => { const properties = [ - 'startupMethod', - 'commands', - 'shortcuts', - 'linkCommand', - 'pageRules', - 'userStyles', + "startupMethod", + "commands", + "shortcuts", + "linkCommand", + "pageRules", + "userStyles", ] const labels = properties.reduce( @@ -65,17 +65,17 @@ const Icon = ({ className: string }) => { switch (name) { - case 'startupMethod': + case "startupMethod": return - case 'commands': + case "commands": return - case 'linkCommand': + case "linkCommand": return - case 'shortcuts': + case "shortcuts": return - case 'pageRules': + case "pageRules": return - case 'userStyles': + case "userStyles": return default: return null diff --git a/src/components/option/editor/CommandEditDialog.tsx b/src/components/option/editor/CommandEditDialog.tsx index 3e5e0cbb..24641af6 100644 --- a/src/components/option/editor/CommandEditDialog.tsx +++ b/src/components/option/editor/CommandEditDialog.tsx @@ -1,7 +1,7 @@ -import { useState, useEffect, useRef } from 'react' -import { useForm, useFieldArray, useWatch } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { z } from 'zod' +import { useState, useEffect, useRef } from "react" +import { useForm, useFieldArray, useWatch } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { z } from "zod" import { Plus, Trash2, @@ -9,7 +9,7 @@ import { SquareTerminal, ChevronsUpDown, ChevronsDownUp, -} from 'lucide-react' +} from "lucide-react" import { Dialog, @@ -20,7 +20,7 @@ import { DialogTitle, DialogFooter, DialogPortal, -} from '@/components/ui/dialog' +} from "@/components/ui/dialog" import { FormControl, @@ -28,24 +28,24 @@ import { FormField, FormItem, FormLabel, -} from '@/components/ui/form' +} from "@/components/ui/form" import { Collapsible, CollapsibleContent, CollapsibleTrigger, -} from '@/components/ui/collapsible' - -import { Input } from '@/components/ui/input' -import { Form } from '@/components/ui/form' -import { Button } from '@/components/ui/button' -import { InputField } from '@/components/option/field/InputField' -import { IconField } from '@/components/option/field/IconField' -import { SelectField } from '@/components/option/field/SelectField' -import { TextareaField } from '@/components/option/field/TextareaField' -import { PageActionSection } from '@/components/option/editor/PageActionSection' -import { PaeActionHelp } from '@/components/help/PageActionHelp' -import { PageActionStep } from '@/types/schema' +} from "@/components/ui/collapsible" + +import { Input } from "@/components/ui/input" +import { Form } from "@/components/ui/form" +import { Button } from "@/components/ui/button" +import { InputField } from "@/components/option/field/InputField" +import { IconField } from "@/components/option/field/IconField" +import { SelectField } from "@/components/option/field/SelectField" +import { TextareaField } from "@/components/option/field/TextareaField" +import { PageActionSection } from "@/components/option/editor/PageActionSection" +import { PaeActionHelp } from "@/components/help/PageActionHelp" +import { PageActionStep } from "@/types/schema" import { OPEN_MODE, @@ -56,44 +56,44 @@ import { PAGE_ACTION_OPEN_MODE, ICON_NOT_FOUND, SCREEN, -} from '@/const' +} from "@/const" import { FaviconContextProvider, useFavicon, FaviconEvent, -} from '@/hooks/option/useFavicon' +} from "@/hooks/option/useFavicon" -import { Ipc, BgCommand } from '@/services/ipc' -import { getScreenSize } from '@/services/screen' -import { Storage, SESSION_STORAGE_KEY } from '@/services/storage' -import { ANALYTICS_EVENTS, sendEvent } from '@/services/analytics' +import { Ipc, BgCommand } from "@/services/ipc" +import { getScreenSize } from "@/services/screen" +import { Storage, SESSION_STORAGE_KEY } from "@/services/storage" +import { ANALYTICS_EVENTS, sendEvent } from "@/services/analytics" -import { isEmpty, e2a, cn } from '@/lib/utils' -import { t as _t } from '@/services/i18n' +import { isEmpty, e2a, cn } from "@/lib/utils" +import { t as _t } from "@/services/i18n" const t = (key: string, p?: string[]) => _t(`Option_${key}`, p) -import { SEARCH_OPEN_MODE, isSearchType, commandSchema } from '@/types/schema' +import { SEARCH_OPEN_MODE, isSearchType, commandSchema } from "@/types/schema" import type { SelectionCommand, CommandFolder, PageActionRecordingData, -} from '@/types' +} from "@/types" -import css from './CommandEditDialog.module.css' -import { calcLevel } from '@/services/option/commandTree' +import css from "./CommandEditDialog.module.css" +import { calcLevel } from "@/services/option/commandTree" const EmptyFolder = { id: ROOT_FOLDER, - title: t('Command_rootFolder'), + title: t("Command_rootFolder"), } as CommandFolder const defaultValue = (openMode: OPEN_MODE) => { if (SEARCH_OPEN_MODE.includes(openMode as any)) { return { - id: '', - searchUrl: '', - iconUrl: '', + id: "", + searchUrl: "", + iconUrl: "", openMode: OPEN_MODE.POPUP as const, openModeSecondary: OPEN_MODE.TAB as const, spaceEncoding: SPACE_ENCODING.PLUS, @@ -106,19 +106,19 @@ const defaultValue = (openMode: OPEN_MODE) => { } if (openMode === OPEN_MODE.API) { return { - id: '', - searchUrl: '', - iconUrl: '', + id: "", + searchUrl: "", + iconUrl: "", openMode: OPEN_MODE.API as const, - fetchOptions: '', + fetchOptions: "", variables: [], parentFolderId: ROOT_FOLDER, } } if (openMode === OPEN_MODE.PAGE_ACTION) { return { - id: '', - iconUrl: '', + id: "", + iconUrl: "", openMode: OPEN_MODE.PAGE_ACTION as const, parentFolderId: ROOT_FOLDER, popupOption: { @@ -126,7 +126,7 @@ const defaultValue = (openMode: OPEN_MODE) => { height: POPUP_OPTION.height + 50, }, pageActionOption: { - startUrl: '', + startUrl: "", openMode: PAGE_ACTION_OPEN_MODE.POPUP, steps: [], }, @@ -134,10 +134,10 @@ const defaultValue = (openMode: OPEN_MODE) => { } if (openMode === OPEN_MODE.LINK_POPUP) { return { - id: '', - title: 'Link Popup', + id: "", + title: "Link Popup", iconUrl: - 'https://cdn3.iconfinder.com/data/icons/fluent-regular-24px-vol-5/24/ic_fluent_open_24_regular-1024.png', + "https://cdn3.iconfinder.com/data/icons/fluent-regular-24px-vol-5/24/ic_fluent_open_24_regular-1024.png", openMode: OPEN_MODE.LINK_POPUP as const, parentFolderId: ROOT_FOLDER, popupOption: { @@ -148,10 +148,10 @@ const defaultValue = (openMode: OPEN_MODE) => { } if (openMode === OPEN_MODE.COPY) { return { - id: '', - title: 'Copy text', + id: "", + title: "Copy text", iconUrl: - 'https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-2/256/copy-light-1024.png', + "https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-2/256/copy-light-1024.png", openMode: OPEN_MODE.COPY as const, copyOption: COPY_OPTION.DEFAULT, parentFolderId: ROOT_FOLDER, @@ -159,10 +159,10 @@ const defaultValue = (openMode: OPEN_MODE) => { } if (openMode === OPEN_MODE.GET_TEXT_STYLES) { return { - id: '', - title: 'Get Text Styles', + id: "", + title: "Get Text Styles", iconUrl: - 'https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-3/256/paint-brush-light-1024.png', + "https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-3/256/paint-brush-light-1024.png", openMode: OPEN_MODE.GET_TEXT_STYLES as const, parentFolderId: ROOT_FOLDER, } @@ -211,7 +211,7 @@ const CommandEditDialogInner = ({ const form = useForm>({ resolver: zodResolver(commandSchema), - mode: 'onChange', + mode: "onChange", defaultValues: defaultValue(DEFAULT_MODE), }) const { register, reset, getValues, setValue, clearErrors } = form @@ -220,27 +220,27 @@ const CommandEditDialogInner = ({ const isUpdate = command != null const variableArray = useFieldArray({ - name: 'variables', + name: "variables", control: form.control, - keyName: '_id', + keyName: "_id", }) const openMode = useWatch({ control: form.control, - name: 'openMode', + name: "openMode", defaultValue: DEFAULT_MODE, }) const searchUrl = useWatch({ control: form.control, - name: 'searchUrl', - defaultValue: '', + name: "searchUrl", + defaultValue: "", }) const startUrl = useWatch({ control: form.control, - name: 'pageActionOption.startUrl', - defaultValue: '', + name: "pageActionOption.startUrl", + defaultValue: "", }) const iconUrlSrc = searchUrl || startUrl @@ -250,21 +250,21 @@ const CommandEditDialogInner = ({ SESSION_STORAGE_KEY.PA_RECORDING, { startUrl, - openMode: getValues('pageActionOption.openMode'), - size: getValues('popupOption') ?? POPUP_OPTION, - steps: getValues('pageActionOption.steps'), + openMode: getValues("pageActionOption.openMode"), + size: getValues("popupOption") ?? POPUP_OPTION, + steps: getValues("pageActionOption.steps"), }, ) await Ipc.send(BgCommand.startPageActionRecorder, { startUrl, - openMode: getValues('pageActionOption.openMode'), - size: getValues('popupOption') ?? POPUP_OPTION, + openMode: getValues("pageActionOption.openMode"), + size: getValues("popupOption") ?? POPUP_OPTION, screen: await getScreenSize(), }) sendEvent( ANALYTICS_EVENTS.OPEN_DIALOG, { - event_label: 'pageAction_recorder', + event_label: "pageAction_recorder", }, SCREEN.OPTION, ) @@ -301,7 +301,7 @@ const CommandEditDialogInner = ({ }, [iconUrlSrc, setIconUrlSrc]) useEffect(() => { - if (!open) setIconUrlSrc('') + if (!open) setIconUrlSrc("") setTimeout(() => { setInitialized(open) }, 100) @@ -312,8 +312,8 @@ const CommandEditDialogInner = ({ SESSION_STORAGE_KEY.PA_RECORDING, ({ size, steps }) => { if (steps == null) return - setValue('popupOption', size) - setValue('pageActionOption.steps', steps as PageActionStep[]) + setValue("popupOption", size) + setValue("pageActionOption.steps", steps as PageActionStep[]) }, ) }, []) @@ -321,11 +321,11 @@ const CommandEditDialogInner = ({ useEffect(() => { const sub = (e: any) => { if (e.type === FaviconEvent.FAIL) { - setValue('iconUrl', ICON_NOT_FOUND) + setValue("iconUrl", ICON_NOT_FOUND) } else { - setValue('iconUrl', e.detail.faviconUrl) + setValue("iconUrl", e.detail.faviconUrl) } - clearErrors('iconUrl') + clearErrors("iconUrl") } subscribe(FaviconEvent.START, sub) @@ -345,13 +345,13 @@ const CommandEditDialogInner = ({ - {t('Command_edit')} + {t("Command_edit")} {openMode === OPEN_MODE.PAGE_ACTION && ( )} - {t('Command_input')} + {t("Command_input")}
@@ -372,10 +372,10 @@ const CommandEditDialogInner = ({ @@ -399,7 +399,7 @@ const CommandEditDialogInner = ({ ({ name: t(`openMode_${mode}`), value: mode, @@ -412,19 +412,19 @@ const CommandEditDialogInner = ({ @@ -442,7 +442,7 @@ const CommandEditDialogInner = ({ (
- {t('variables')} + {t("variables")}
@@ -467,7 +467,7 @@ const CommandEditDialogInner = ({ render={({ field }) => ( - {t('variableName')} + {t("variableName")} @@ -482,7 +482,7 @@ const CommandEditDialogInner = ({ render={({ field }) => ( - {t('variableValue')} + {t("variableValue")} @@ -511,8 +511,8 @@ const CommandEditDialogInner = ({ className="relative mt-1 rounded-lg h-7 left-[50%] translate-x-[-50%]" onClick={() => variableArray.append({ - name: '', - value: '', + name: "", + value: "", }) } > @@ -529,7 +529,7 @@ const CommandEditDialogInner = ({ ({ name: t(`copyOption_${opt}`), value: opt, @@ -540,7 +540,7 @@ const CommandEditDialogInner = ({ {/* details */} - {t('labelDetail')} + {t("labelDetail")} @@ -578,19 +578,19 @@ const CommandEditDialogInner = ({ ({ name: t(`spaceEncoding_${enc}`), value: enc, }))} - description={t('spaceEncoding_desc')} + description={t("spaceEncoding_desc")} /> )} ({ name: folder.title, value: folder.id, @@ -606,7 +606,7 @@ const CommandEditDialogInner = ({ diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx index 31dddd30..2ad0773b 100644 --- a/src/components/option/editor/CommandList.tsx +++ b/src/components/option/editor/CommandList.tsx @@ -1,5 +1,5 @@ -import { useState, useRef, useEffect } from 'react' -import { useFieldArray } from 'react-hook-form' +import { useState, useRef, useEffect } from "react" +import { useFieldArray } from "react-hook-form" import { DndContext, @@ -9,42 +9,42 @@ import { useSensor, useSensors, DragStartEvent, -} from '@dnd-kit/core' +} from "@dnd-kit/core" import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, -} from '@dnd-kit/sortable' +} from "@dnd-kit/sortable" -import { CommandEditDialog } from '@/components/option/editor/CommandEditDialog' -import { FolderEditDialog } from '@/components/option/editor/FolderEditDialog' +import { CommandEditDialog } from "@/components/option/editor/CommandEditDialog" +import { FolderEditDialog } from "@/components/option/editor/FolderEditDialog" import { CommandSchemaType, CommandsSchemaType, FoldersSchemaType, -} from '@/types/schema' +} from "@/types/schema" -import { ANALYTICS_EVENTS, sendEvent } from '@/services/analytics' -import { SCREEN } from '@/const' -import type { Command, CommandFolder, SelectionCommand } from '@/types' +import { ANALYTICS_EVENTS, sendEvent } from "@/services/analytics" +import { SCREEN } from "@/const" +import type { Command, CommandFolder, SelectionCommand } from "@/types" // Imported services and hooks import { toCommandTree, toFlatten, type FlattenNode, -} from '@/services/option/commandTree' +} from "@/services/option/commandTree" import { isCommand, isFolder, getDescendantFolderIds, -} from '@/services/option/commandUtils' -import { isValidDrop } from '@/services/option/dragAndDrop' -import { useCommandActions } from '@/hooks/option/useCommandActions' -import { useCommandDragDrop } from '@/hooks/option/useCommandDragDrop' -import { CommandListMenu } from './CommandListMenu' -import { CommandTreeRenderer } from './CommandTreeRenderer' +} from "@/services/option/commandUtils" +import { isValidDrop } from "@/services/option/dragAndDrop" +import { useCommandActions } from "@/hooks/option/useCommandActions" +import { useCommandDragDrop } from "@/hooks/option/useCommandDragDrop" +import { CommandListMenu } from "./CommandListMenu" +import { CommandTreeRenderer } from "./CommandTreeRenderer" // Drag filtering utilities @@ -109,16 +109,16 @@ export const CommandList = ({ control }: CommandListProps) => { const commandsRef = useRef(null) const editDataRef = useRef(null) - const commandArray = useFieldArray({ - name: 'commands', + const commandArray = useFieldArray({ + name: "commands", control: control, - keyName: '_id', + keyName: "_id", }) - const folderArray = useFieldArray({ - name: 'folders', + const folderArray = useFieldArray({ + name: "folders", control: control, - keyName: '_id', + keyName: "_id", }) const sensors = useSensors( @@ -140,7 +140,7 @@ export const CommandList = ({ control }: CommandListProps) => { sendEvent( ANALYTICS_EVENTS.OPEN_DIALOG, { - event_label: 'command_edit', + event_label: "command_edit", }, SCREEN.OPTION, ) @@ -253,8 +253,8 @@ export const CommandList = ({ control }: CommandListProps) => { useEffect(() => { commandsRef.current?.style.setProperty( - 'height', - commandsRef.current.scrollHeight + 'px', + "height", + commandsRef.current.scrollHeight + "px", ) }, [commandArray.fields, folderArray.fields]) diff --git a/src/components/option/editor/CommandTreeRenderer.tsx b/src/components/option/editor/CommandTreeRenderer.tsx index c24ebfa0..a15931ac 100644 --- a/src/components/option/editor/CommandTreeRenderer.tsx +++ b/src/components/option/editor/CommandTreeRenderer.tsx @@ -1,17 +1,17 @@ -import React from 'react' -import { SortableItem } from '@/components/option/SortableItem' -import { EditButton } from '@/components/option/EditButton' -import { CopyButton } from '@/components/option/CopyButton' -import { RemoveButton } from '@/components/option/RemoveButton' -import { MenuImage } from '@/components/menu/MenuImage' -import type { FlattenNode } from '@/services/option/commandTree' -import type { CommandFolder } from '@/types' +import React from "react" +import { SortableItem } from "@/components/option/SortableItem" +import { EditButton } from "@/components/option/EditButton" +import { CopyButton } from "@/components/option/CopyButton" +import { RemoveButton } from "@/components/option/RemoveButton" +import { MenuImage } from "@/components/menu/MenuImage" +import type { FlattenNode } from "@/services/option/commandTree" +import type { CommandFolder } from "@/types" import { isCommand, isFolder, isPageActionCommand, -} from '@/services/option/commandUtils' -import { calcLevel } from '@/services/option/commandTree' +} from "@/services/option/commandUtils" +import { calcLevel } from "@/services/option/commandTree" interface Props { nodes: FlattenNode[] diff --git a/src/components/option/editor/FolderEditDialog.tsx b/src/components/option/editor/FolderEditDialog.tsx index 61c1f838..15a9acf8 100644 --- a/src/components/option/editor/FolderEditDialog.tsx +++ b/src/components/option/editor/FolderEditDialog.tsx @@ -1,8 +1,8 @@ -import { useEffect } from 'react' -import { useForm } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { z } from 'zod' -import { FolderPlus, Save } from 'lucide-react' +import { useEffect } from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { z } from "zod" +import { FolderPlus, Save } from "lucide-react" import { Dialog, DialogClose, @@ -12,21 +12,21 @@ import { DialogTitle, DialogFooter, DialogPortal, -} from '@/components/ui/dialog' -import { Form } from '@/components/ui/form' -import { Button } from '@/components/ui/button' -import { InputField } from '@/components/option/field/InputField' -import { IconField } from '@/components/option/field/IconField' -import { SwitchField } from '@/components/option/field/SwitchField' -import { SelectField } from '@/components/option/field/SelectField' -import { isEmpty } from '@/lib/utils' -import { t as _t } from '@/services/i18n' -import { ROOT_FOLDER } from '@/const' -import { folderSchema } from '@/types/schema' -import { getDescendantFolderIds } from '@/services/option/commandUtils' +} from "@/components/ui/dialog" +import { Form } from "@/components/ui/form" +import { Button } from "@/components/ui/button" +import { InputField } from "@/components/option/field/InputField" +import { IconField } from "@/components/option/field/IconField" +import { SwitchField } from "@/components/option/field/SwitchField" +import { SelectField } from "@/components/option/field/SelectField" +import { isEmpty } from "@/lib/utils" +import { t as _t } from "@/services/i18n" +import { ROOT_FOLDER } from "@/const" +import { folderSchema } from "@/types/schema" +import { getDescendantFolderIds } from "@/services/option/commandUtils" const t = (key: string, p?: string[]) => _t(`Option_${key}`, p) -import type { CommandFolder } from '@/types' -import { calcLevel } from '@/services/option/commandTree' +import type { CommandFolder } from "@/types" +import { calcLevel } from "@/services/option/commandTree" type FolderEditDialog = { open: boolean @@ -44,17 +44,17 @@ export const FolderEditDialog = ({ folders, }: FolderEditDialog) => { const DefaultValue = { - id: '', - title: '', + id: "", + title: "", iconUrl: - 'https://cdn4.iconfinder.com/data/icons/basic-ui-2-line/32/folder-archive-document-archives-fold-1024.png', + "https://cdn4.iconfinder.com/data/icons/basic-ui-2-line/32/folder-archive-document-archives-fold-1024.png", onlyIcon: true, parentFolderId: ROOT_FOLDER, } const form = useForm>({ resolver: zodResolver(folderSchema), - mode: 'onChange', + mode: "onChange", defaultValues: DefaultValue, }) @@ -72,38 +72,38 @@ export const FolderEditDialog = ({ - {t('folders_edit')} + {t("folders_edit")} - {t('folders_input')} + {t("folders_input")}
{ @@ -126,15 +126,15 @@ export const FolderEditDialog = ({
diff --git a/src/components/option/editor/PageActionSection.tsx b/src/components/option/editor/PageActionSection.tsx index 9925618f..ac29c311 100644 --- a/src/components/option/editor/PageActionSection.tsx +++ b/src/components/option/editor/PageActionSection.tsx @@ -1,21 +1,21 @@ -import { useState } from 'react' -import { useFieldArray } from 'react-hook-form' -import { Disc3 } from 'lucide-react' -import { PAGE_ACTION_OPEN_MODE } from '@/const' -import { FormLabel, FormDescription } from '@/components/ui/form' -import type { PageAction } from '@/services/pageAction' -import { t as _t } from '@/services/i18n' +import { useState } from "react" +import { useFieldArray } from "react-hook-form" +import { Disc3 } from "lucide-react" +import { PAGE_ACTION_OPEN_MODE } from "@/const" +import { FormLabel, FormDescription } from "@/components/ui/form" +import type { PageAction } from "@/services/pageAction" +import { t as _t } from "@/services/i18n" const t = (key: string, p?: string[]) => _t(`Option_${key}`, p) -import { cn, e2a, isEmpty, capitalize } from '@/lib/utils' -import { PageActionStep } from '@/types/schema' -import { DeepPartial } from '@/types' +import { cn, e2a, isEmpty, capitalize } from "@/lib/utils" +import { PageActionStep } from "@/types/schema" +import { DeepPartial } from "@/types" -import { InputField } from '@/components/option/field/InputField' -import { SelectField } from '@/components/option/field/SelectField' -import { StepList } from '@/components/pageAction/StepList' -import { InputEditor } from '@/components/pageAction/InputEditor' -import { RemoveDialog } from '@/components/option/RemoveDialog' -import { TypeIcon } from '@/components/pageAction/TypeIcon' +import { InputField } from "@/components/option/field/InputField" +import { SelectField } from "@/components/option/field/SelectField" +import { StepList } from "@/components/pageAction/StepList" +import { InputEditor } from "@/components/pageAction/InputEditor" +import { RemoveDialog } from "@/components/option/RemoveDialog" +import { TypeIcon } from "@/components/pageAction/TypeIcon" type PageActionSectionProps = { form: any @@ -29,12 +29,12 @@ export const PageActionSection = ({ const { register, getValues } = form const pageActionArray = useFieldArray({ - name: 'pageActionOption.steps', + name: "pageActionOption.steps", control: form.control, - keyName: '_id', + keyName: "_id", }) const steps = pageActionArray.fields as unknown as PageActionStep[] - const recDisabled = !getValues('pageActionOption.startUrl') + const recDisabled = !getValues("pageActionOption.startUrl") // for Editor const [editId, setEditId] = useState(null) @@ -90,19 +90,19 @@ export const PageActionSection = ({ mode !== PAGE_ACTION_OPEN_MODE.NONE) .map((mode) => ({ @@ -113,8 +113,8 @@ export const PageActionSection = ({
- {t('pageAction_title')} - {t('pageAction_desc')} + {t("pageAction_title")} + {t("pageAction_desc")}
_t(`Option_${key}`, p) -import { POPUP_ENABLED, LINK_COMMAND_ENABLED, INHERIT } from '@/const' -import { e2a, cn } from '@/lib/utils' -import type { PageRule, PopupPlacementOrInherit } from '@/types' -import { PopupPlacementSchema } from '@/types/schema' +import { POPUP_ENABLED, LINK_COMMAND_ENABLED, INHERIT } from "@/const" +import { e2a, cn } from "@/lib/utils" +import type { PageRule, PopupPlacementOrInherit } from "@/types" +import { PopupPlacementSchema } from "@/types/schema" -import css from './CommandEditDialog.module.css' +import css from "./CommandEditDialog.module.css" export const pageRuleSchema = z.object({ - urlPattern: z.string().url({ message: t('zod_url') }), + urlPattern: z.string().url({ message: t("zod_url") }), popupEnabled: z.nativeEnum(POPUP_ENABLED), - popupPlacement: z.union([ - z.literal('inherit'), - PopupPlacementSchema, - ]), + popupPlacement: z.union([z.literal("inherit"), PopupPlacementSchema]), linkCommandEnabled: z.nativeEnum(LINK_COMMAND_ENABLED), }) @@ -52,7 +46,7 @@ const pageRulesSchema = z.object({ type pageRulesType = z.infer const DefaultRule = { - urlPattern: '', + urlPattern: "", popupEnabled: POPUP_ENABLED.ENABLE, popupPlacement: INHERIT as PopupPlacementOrInherit, linkCommandEnabled: LINK_COMMAND_ENABLED.INHERIT, @@ -78,10 +72,10 @@ export const PageRuleList = ({ } } - const pageRuleArray = useFieldArray({ + const pageRuleArray = useFieldArray({ control: control, - name: 'pageRules', - keyName: '_id', + name: "pageRules", + keyName: "_id", }) const upsert = (rule: PageRule) => { @@ -110,15 +104,15 @@ export const PageRuleList = ({ ref={addButtonRef} > - {t('pageRules') - .split(' ') + {t("pageRules") + .split(" ") .map((w) => ( {w} ))}
@@ -127,8 +121,8 @@ export const PageRuleList = ({
  • @@ -144,16 +138,16 @@ export const PageRuleList = ({

    • - {t('popupEnabled')}: {t(`${field.popupEnabled}`)} + {t("popupEnabled")}: {t(`${field.popupEnabled}`)}
    • - {t('popupPlacement')}:{' '} + {t("popupPlacement")}:{" "} {field.popupPlacement === INHERIT - ? t('inherit') + ? t("inherit") : `${field.popupPlacement.side} ${field.popupPlacement.align}`}
    • - {t('linkCommandEnabled')}:{' '} + {t("linkCommandEnabled")}:{" "} {t(`linkCommand_enabled${field.linkCommandEnabled}`, [ t(`linkCommand_enabled${linkCommandEnabled}`), ])} @@ -207,20 +201,20 @@ export const PageRuleDialog = ({ }: PageRuleDialogProps) => { const form = useForm>({ resolver: zodResolver(pageRuleSchema), - mode: 'onChange', + mode: "onChange", }) const { register, reset, setValue, watch } = form - const popupPlacement = watch('popupPlacement') + const popupPlacement = watch("popupPlacement") const [isCollapsibleOpen, setIsCollapsibleOpen] = useState(false) const handlePopupPlacementSubmit = ( data: z.infer, ) => { - setValue('popupPlacement', data) + setValue("popupPlacement", data) } const handleInheritChange = (inherit: boolean) => { - setValue('popupPlacement', inherit ? INHERIT : PopupPlacement) + setValue("popupPlacement", inherit ? INHERIT : PopupPlacement) setIsCollapsibleOpen(!inherit) } @@ -245,25 +239,25 @@ export const PageRuleDialog = ({ - {t('pageRules_add')} + {t("pageRules_add")} - {t('pageRules_add_desc')} + {t("pageRules_add_desc")}
      ({ name: t(`${mode}`), value: mode, @@ -272,7 +266,7 @@ export const PageRuleDialog = ({ ({ name: t(`linkCommand_enabled${opt}`, [ t(`linkCommand_enabled${linkCommandEnabled}`), @@ -289,24 +283,31 @@ export const PageRuleDialog = ({ onChange={(e) => handleInheritChange(e.target.checked)} className="rounded border-gray-300 cursor-pointer" /> -
      @@ -316,7 +317,7 @@ export const PageRuleDialog = ({ diff --git a/src/components/option/editor/ShortcutList.tsx b/src/components/option/editor/ShortcutList.tsx index 38912926..594bec5d 100644 --- a/src/components/option/editor/ShortcutList.tsx +++ b/src/components/option/editor/ShortcutList.tsx @@ -1,21 +1,21 @@ -import { useEffect, useState, useMemo } from 'react' -import { Control, useFieldArray, useWatch } from 'react-hook-form' -import { Keyboard, SquareArrowOutUpRight } from 'lucide-react' -import { SelectField } from '@/components/option/field/SelectField' +import { useEffect, useState, useMemo } from "react" +import { Control, useFieldArray, useWatch } from "react-hook-form" +import { Keyboard, SquareArrowOutUpRight } from "lucide-react" +import { SelectField } from "@/components/option/field/SelectField" import type { SelectOptionType, SelectGroupType, -} from '@/components/option/field/SelectField' -import { t as _t } from '@/services/i18n' -import { Ipc, BgCommand } from '@/services/ipc' -import type { Command, CommandFolder, ShortcutCommand } from '@/types' +} from "@/components/option/field/SelectField" +import { t as _t } from "@/services/i18n" +import { Ipc, BgCommand } from "@/services/ipc" +import type { Command, CommandFolder, ShortcutCommand } from "@/types" import { OPEN_MODE_BG, SHORTCUT_PLACEHOLDER, SHORTCUT_NO_SELECTION_BEHAVIOR, -} from '@/const' -import { cn } from '@/lib/utils' -import css from './ShortcutList.module.css' +} from "@/const" +import { cn } from "@/lib/utils" +import css from "./ShortcutList.module.css" const t = (key: string, p?: string[]) => _t(`Option_${key}`, p) @@ -33,11 +33,11 @@ const createNameRender = (openMode: string) => { {name} - {t('shortcut_text_selection_only')} + {t("shortcut_text_selection_only")} ) @@ -53,12 +53,12 @@ const groupCommandsByFolder = ( // Create a map to store commands by folder const commandsByFolder = new Map() - commandsByFolder.set('root', []) + commandsByFolder.set("root", []) // First, group commands by folder commands.forEach((command) => { if (!command) return - const folderId = command.parentFolderId || 'root' + const folderId = command.parentFolderId || "root" if (!commandsByFolder.has(folderId)) { commandsByFolder.set(folderId, []) } @@ -70,12 +70,12 @@ const groupCommandsByFolder = ( commands.forEach((command) => { if (!command) return - const folderId = command.parentFolderId || 'root' + const folderId = command.parentFolderId || "root" const folderCommands = commandsByFolder.get(folderId) if (!folderCommands) return - if (folderId === 'root') { + if (folderId === "root") { // For root commands, add them individually result.push({ name: command.title, @@ -88,7 +88,7 @@ const groupCommandsByFolder = ( const folder = folderMap.get(folderId) if ( folder && - !result.some((item) => 'label' in item && item.label === folder.title) + !result.some((item) => "label" in item && item.label === folder.title) ) { result.push({ label: folder.title, @@ -114,26 +114,26 @@ export function ShortcutList({ control }: ShortcutListProps) { shortcuts: { shortcuts: ShortcutCommand[] } }>({ control, - name: 'shortcuts.shortcuts', + name: "shortcuts.shortcuts", }) const userCommands = useWatch({ control, - name: 'commands', + name: "commands", defaultValue: [], }) const folders = useWatch({ control, - name: 'folders', + name: "folders", defaultValue: [], }) const shortcutValues = useWatch({ control, - name: 'shortcuts.shortcuts', + name: "shortcuts.shortcuts", }) const updateCommands = () => { chrome.commands.getAll((cmds) => { - const filteredCommands = cmds.filter((cmd) => cmd.description !== '') + const filteredCommands = cmds.filter((cmd) => cmd.description !== "") setCommands(filteredCommands) }) } @@ -144,7 +144,7 @@ export function ShortcutList({ control }: ShortcutListProps) { // Update commands when the page becomes visible or focused const handleVisibilityChange = () => { - if (document.visibilityState === 'visible') { + if (document.visibilityState === "visible") { updateCommands() } } @@ -153,12 +153,12 @@ export function ShortcutList({ control }: ShortcutListProps) { updateCommands() } - document.addEventListener('visibilitychange', handleVisibilityChange) - window.addEventListener('focus', handleFocus) + document.addEventListener("visibilitychange", handleVisibilityChange) + window.addEventListener("focus", handleFocus) return () => { - document.removeEventListener('visibilitychange', handleVisibilityChange) - window.removeEventListener('focus', handleFocus) + document.removeEventListener("visibilitychange", handleVisibilityChange) + window.removeEventListener("focus", handleFocus) } }, []) @@ -166,7 +166,7 @@ export function ShortcutList({ control }: ShortcutListProps) { // Initialize the shortcuts if (fields.length !== 0) return const initialData = commands.map((cmd) => ({ - id: cmd.name || '', + id: cmd.name || "", commandId: SHORTCUT_PLACEHOLDER, noSelectionBehavior: SHORTCUT_NO_SELECTION_BEHAVIOR.USE_CLIPBOARD, })) @@ -180,11 +180,11 @@ export function ShortcutList({ control }: ShortcutListProps) { const noSelectionOptions = [ { - name: t('shortcut_no_selection_do_nothing'), + name: t("shortcut_no_selection_do_nothing"), value: SHORTCUT_NO_SELECTION_BEHAVIOR.DO_NOTHING, }, { - name: t('shortcut_no_selection_use_clipboard'), + name: t("shortcut_no_selection_use_clipboard"), value: SHORTCUT_NO_SELECTION_BEHAVIOR.USE_CLIPBOARD, }, ] @@ -193,13 +193,13 @@ export function ShortcutList({ control }: ShortcutListProps) {
      -

      {t('shortcuts')}

      +

      {t("shortcuts")}

      - {t('shortcuts_desc')} + {t("shortcuts_desc")}
      - {t('shortcuts_settings_desc')}{' '} + {t("shortcuts_settings_desc")}{" "}

      @@ -220,7 +220,7 @@ export function ShortcutList({ control }: ShortcutListProps) { const opts = [ { - name: t('shortcut_select_placeholder'), + name: t("shortcut_select_placeholder"), value: SHORTCUT_PLACEHOLDER, }, ...options, @@ -238,14 +238,14 @@ export function ShortcutList({ control }: ShortcutListProps) { {showNoSel && ( diff --git a/src/components/option/editor/UserStyleList.tsx b/src/components/option/editor/UserStyleList.tsx index 2430250e..d51f4177 100644 --- a/src/components/option/editor/UserStyleList.tsx +++ b/src/components/option/editor/UserStyleList.tsx @@ -1,8 +1,8 @@ -import { useEffect, useState, useRef } from 'react' -import { useForm, useFieldArray } from 'react-hook-form' -import { z } from 'zod' -import { zodResolver } from '@hookform/resolvers/zod' -import { Paintbrush, Save } from 'lucide-react' +import { useEffect, useState, useRef } from "react" +import { useForm, useFieldArray } from "react-hook-form" +import { z } from "zod" +import { zodResolver } from "@hookform/resolvers/zod" +import { Paintbrush, Save } from "lucide-react" import { Form, FormControl, @@ -11,7 +11,7 @@ import { FormItem, FormLabel, FormMessage, -} from '@/components/ui/form' +} from "@/components/ui/form" import { Dialog, DialogClose, @@ -21,23 +21,23 @@ import { DialogTitle, DialogFooter, DialogPortal, -} from '@/components/ui/dialog' +} from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from '@/components/ui/select' -import { Tooltip } from '@/components/Tooltip' -import { Input } from '@/components/ui/input' -import { Button } from '@/components/ui/button' -import { EditButton } from '@/components/option/EditButton' -import { RemoveButton } from '@/components/option/RemoveButton' +} from "@/components/ui/select" +import { Tooltip } from "@/components/Tooltip" +import { Input } from "@/components/ui/input" +import { Button } from "@/components/ui/button" +import { EditButton } from "@/components/option/EditButton" +import { RemoveButton } from "@/components/option/RemoveButton" -import { STYLE_VARIABLE } from '@/const' -import { cn, hyphen2Underscore } from '@/lib/utils' -import { t as _t } from '@/services/i18n' +import { STYLE_VARIABLE } from "@/const" +import { cn, hyphen2Underscore } from "@/lib/utils" +import { t as _t } from "@/services/i18n" const t = (key: string, p?: string[]) => _t(`Option_${key}`, p) export const userStyleSchema = z.object({ @@ -53,7 +53,7 @@ type UserStyleType = z.infer type UserStylesType = z.infer type AttributesType = { - type: 'string' | 'number' | 'color' + type: "string" | "number" | "color" default: string | number max?: number min?: number @@ -64,43 +64,43 @@ type AttributeMap = Record const Attributes: AttributeMap = { [STYLE_VARIABLE.BACKGROUND_COLOR]: { - type: 'color', - default: '#FFFFFF', + type: "color", + default: "#FFFFFF", }, [STYLE_VARIABLE.BORDER_COLOR]: { - type: 'color', - default: '#F3F4F6', + type: "color", + default: "#F3F4F6", }, [STYLE_VARIABLE.FONT_SCALE]: { - type: 'number', + type: "number", default: 1, max: 3, min: 0.5, step: 0.1, }, [STYLE_VARIABLE.IMAGE_SCALE]: { - type: 'number', + type: "number", default: 1, max: 3, min: 0.5, step: 0.1, }, [STYLE_VARIABLE.PADDING_SCALE]: { - type: 'number', + type: "number", default: 1, max: 3, min: 0.5, step: 0.1, }, [STYLE_VARIABLE.POPUP_DELAY]: { - type: 'number', + type: "number", default: 250, max: 1000, min: 0, step: 10, }, [STYLE_VARIABLE.POPUP_DURATION]: { - type: 'number', + type: "number", default: 150, max: 1000, min: 0, @@ -115,13 +115,13 @@ const Units: UnitMap = { [STYLE_VARIABLE.FONT_SCALE]: undefined, [STYLE_VARIABLE.IMAGE_SCALE]: undefined, [STYLE_VARIABLE.PADDING_SCALE]: undefined, - [STYLE_VARIABLE.POPUP_DELAY]: 'ms', - [STYLE_VARIABLE.POPUP_DURATION]: 'ms', + [STYLE_VARIABLE.POPUP_DELAY]: "ms", + [STYLE_VARIABLE.POPUP_DURATION]: "ms", } const DefaultValue = { name: STYLE_VARIABLE.FONT_SCALE, - value: '', + value: "", } as const type UserStyleListProps = { @@ -133,10 +133,10 @@ export const UserStyleList = ({ control }: UserStyleListProps) => { const editorRef = useRef(DefaultValue) const addButtonRef = useRef(null) - const array = useFieldArray({ - name: 'userStyles', + const array = useFieldArray({ + name: "userStyles", control: control, - keyName: '_id', + keyName: "_id", }) const selectedList = array.fields.map((field) => field.name) @@ -149,7 +149,7 @@ export const UserStyleList = ({ control }: UserStyleListProps) => { if (!open) { editorRef.current = { name: defaultName, - value: '', + value: "", } } _setDialogOpen(open) @@ -188,15 +188,15 @@ export const UserStyleList = ({ control }: UserStyleListProps) => { disabled={selectedAll} > - {t('userStyles') - .split(' ') + {t("userStyles") + .split(" ") .map((w) => ( {w} ))}
      @@ -205,8 +205,8 @@ export const UserStyleList = ({ control }: UserStyleListProps) => {

    • @@ -264,11 +264,11 @@ export const UserStyleDialog = ({ const isUpdate = (variable as any)._id != null const form = useForm>({ resolver: zodResolver(userStyleSchema), - mode: 'onChange', + mode: "onChange", defaultValues: variable, }) const { reset, watch, setValue } = form - const variableName = watch('name') + const variableName = watch("name") const attr = Attributes[variableName] useEffect(() => { @@ -277,7 +277,7 @@ export const UserStyleDialog = ({ useEffect(() => { if (!isUpdate) { - setValue('value', Attributes[variableName]?.default) + setValue("value", Attributes[variableName]?.default) } }, [variableName]) @@ -288,10 +288,10 @@ export const UserStyleDialog = ({ - {t('userStyles_add')} + {t("userStyles_add")} - {t('userStyles_add_desc')} + {t("userStyles_add_desc")} {isUpdate ? (

      - {t('userStyles_name')} + {t("userStyles_name")}

      {t( `userStyles_option_${hyphen2Underscore(field.value)}`, @@ -313,10 +313,10 @@ export const UserStyleDialog = ({ onValueChange={field.onChange} value={field.value} > - {t('userStyles_name')} + {t("userStyles_name")} - + @@ -347,7 +347,7 @@ export const UserStyleDialog = ({ name="value" render={({ field }) => ( - {t('userStyles_value')} + {t("userStyles_value")} diff --git a/src/components/option/field/IconField.tsx b/src/components/option/field/IconField.tsx index 80f63b51..9da01f42 100644 --- a/src/components/option/field/IconField.tsx +++ b/src/components/option/field/IconField.tsx @@ -1,10 +1,10 @@ -import React, { useState, useRef } from 'react' -import { useController } from 'react-hook-form' -import { FormLabel, FormMessage, FormDescription } from '@/components/ui/form' -import { Input } from '@/components/ui/input' -import { MenuImage } from '@/components/menu/MenuImage' -import { isEmpty, isValidSVG } from '@/lib/utils' -import { t as _t } from '@/services/i18n' +import React, { useState, useRef } from "react" +import { useController } from "react-hook-form" +import { FormLabel, FormMessage, FormDescription } from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { MenuImage } from "@/components/menu/MenuImage" +import { isEmpty, isValidSVG } from "@/lib/utils" +import { t as _t } from "@/services/i18n" const t = (key: string, p?: string[]) => _t(`Option_${key}`, p) type IconField = { @@ -16,7 +16,7 @@ type IconField = { description?: string } -import { useFavicon } from '@/hooks/option/useFavicon' +import { useFavicon } from "@/hooks/option/useFavicon" export const IconField = ({ control, @@ -138,13 +138,13 @@ const UrlOrSvgInput = ({ const handleInputChange = (event: React.ChangeEvent) => { const inputText = event.target.value if (isValidUrl(inputText)) { - onChange({ url: inputText, svg: '' }) + onChange({ url: inputText, svg: "" }) } else if (isValidSVG(inputText)) { - onChange({ url: '', svg: inputText }) + onChange({ url: "", svg: inputText }) } else { - onChange({ url: inputText, svg: '' }) + onChange({ url: inputText, svg: "" }) if (inputText.length > 0) { - setError(t('icon_error')) + setError(t("icon_error")) } return } @@ -155,7 +155,7 @@ const UrlOrSvgInput = ({ <> _t(`Option_${key}`, p) type PopupPlacementType = z.infer @@ -34,7 +34,7 @@ export const PopupPlacementField = ({ }: PopupPlacementFieldType) => { const form = useForm({ resolver: zodResolver(PopupPlacementSchema), - mode: 'onChange', + mode: "onChange", defaultValues: defaultValues, }) const { register } = form @@ -47,19 +47,19 @@ export const PopupPlacementField = ({ const side = useWatch({ control: form.control, - name: 'side', + name: "side", }) const align = useWatch({ control: form.control, - name: 'align', + name: "align", }) const isAlignOffsetDisabled = align === ALIGN.center return (

      -

      {t('popupPlacement')}

      +

      {t("popupPlacement")}

      (
      - {t('popupPlacement_side')} + {t("popupPlacement_side")} - {t('popupPlacement_side_desc')} + {t("popupPlacement_side_desc")}
      @@ -90,7 +90,7 @@ export const PopupPlacementField = ({
      - {t('mouse_pointer')} + {t("mouse_pointer")}
      @@ -107,15 +107,15 @@ export const PopupPlacementField = ({ (
      - {t('popupPlacement_align')} + {t("popupPlacement_align")} - {t('popupPlacement_align_desc')} + {t("popupPlacement_align_desc")}
      @@ -167,19 +167,23 @@ export const PopupPlacementField = ({ { value={side} aria-label={t(`popupPlacement_${side}`)} className={cn( - 'relative w-full h-9 shadow-sm text-xs font-mono text-gray-600', + "relative w-full h-9 shadow-sm text-xs font-mono text-gray-600", )} > {checked && } @@ -219,7 +223,7 @@ const AlignItem = ({ current: ALIGN }) => { const _side = - side === SIDE.left || side === SIDE.right ? 'vertical' : 'horizontal' + side === SIDE.left || side === SIDE.right ? "vertical" : "horizontal" const checked = align === current return ( @@ -228,8 +232,8 @@ const AlignItem = ({ value={align} aria-label={t(`popupPlacement_${align}`)} className={cn( - 'relative', - 'flex-col gap-0 h-auto w-full py-1 shadow-sm text-xs font-mono text-gray-600', + "relative", + "flex-col gap-0 h-auto w-full py-1 shadow-sm text-xs font-mono text-gray-600", )} > {checked && } diff --git a/src/components/option/field/SelectField.tsx b/src/components/option/field/SelectField.tsx index 0e9e0efe..8169bb44 100644 --- a/src/components/option/field/SelectField.tsx +++ b/src/components/option/field/SelectField.tsx @@ -5,7 +5,7 @@ import { FormLabel, FormMessage, FormDescription, -} from '@/components/ui/form' +} from "@/components/ui/form" import { Select, SelectContent, @@ -14,8 +14,8 @@ import { SelectValue, SelectGroup, SelectLabel, -} from '@/components/ui/select' -import { MenuImage } from '@/components/menu/MenuImage' +} from "@/components/ui/select" +import { MenuImage } from "@/components/menu/MenuImage" export type SelectOptionType = { name: string @@ -120,7 +120,7 @@ export const SelectField = ({ {options.map((item, index) => { - if ('options' in item) { + if ("options" in item) { // Grouped options return ( diff --git a/src/components/option/field/SwitchField.tsx b/src/components/option/field/SwitchField.tsx index 99617629..e906d12f 100644 --- a/src/components/option/field/SwitchField.tsx +++ b/src/components/option/field/SwitchField.tsx @@ -1,4 +1,4 @@ -import { Switch } from '@/components/ui/switch' +import { Switch } from "@/components/ui/switch" import { FormControl, @@ -7,7 +7,7 @@ import { FormItem, FormLabel, FormMessage, -} from '@/components/ui/form' +} from "@/components/ui/form" type SwitchFieldType = { control: any diff --git a/src/components/option/field/TextareaField.tsx b/src/components/option/field/TextareaField.tsx index b1481152..57653ec1 100644 --- a/src/components/option/field/TextareaField.tsx +++ b/src/components/option/field/TextareaField.tsx @@ -1,13 +1,13 @@ -import React, { useEffect } from 'react' -import { Textarea } from '@/components/ui/textarea' +import React, { useEffect } from "react" +import { Textarea } from "@/components/ui/textarea" import { FormControl, FormField, FormItem, FormLabel, FormMessage, -} from '@/components/ui/form' -import { cn } from '@/lib/utils' +} from "@/components/ui/form" +import { cn } from "@/lib/utils" type TextareaFieldType = { control: any @@ -25,8 +25,8 @@ export const TextareaField = ({ className, }: TextareaFieldType) => { const updateHeight = (elm: HTMLTextAreaElement) => { - elm.style.height = '5px' - elm.style.height = elm.scrollHeight + 'px' + elm.style.height = "5px" + elm.style.height = elm.scrollHeight + "px" } const handleInput = (e: React.FormEvent) => { @@ -55,7 +55,7 @@ export const TextareaField = ({ id={`textarea-${name}`} {...field} placeholder={placeholder} - className={cn('resize-none max-h-80', className)} + className={cn("resize-none max-h-80", className)} onInput={handleInput} /> diff --git a/src/components/pageAction/Controller.tsx b/src/components/pageAction/Controller.tsx index 41b0b621..d0a18f38 100644 --- a/src/components/pageAction/Controller.tsx +++ b/src/components/pageAction/Controller.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, forwardRef } from 'react' +import { useEffect, useState, forwardRef } from "react" import { Disc3, Circle, @@ -7,23 +7,28 @@ import { RotateCcw, Check, LoaderCircle, -} from 'lucide-react' -import { StepList } from '@/components/pageAction/StepList' -import { usePageActionContext } from '@/hooks/pageAction/usePageActionContext' +} from "lucide-react" +import { StepList } from "@/components/pageAction/StepList" +import { usePageActionContext } from "@/hooks/pageAction/usePageActionContext" import { PageActionListener as Listener, RunningStatus, -} from '@/services/pageAction' -import { Ipc, BgCommand, RunPageAction } from '@/services/ipc' -import { t } from '@/services/i18n' -import type { PageActiontStatus, PageActionStep, DeepPartial } from '@/types' -import { cn } from '@/lib/utils' +} from "@/services/pageAction" +import { Ipc, BgCommand, RunPageAction } from "@/services/ipc" +import { t } from "@/services/i18n" +import type { + PageActiontStatus, + PageActionStep, + PageActiontResult, + DeepPartial, +} from "@/types" +import { cn } from "@/lib/utils" import { PAGE_ACTION_OPEN_MODE, PAGE_ACTION_EXEC_STATE as EXEC_STATE, -} from '@/const' +} from "@/const" -import css from './PageActionRecorder.module.css' +import css from "./PageActionRecorder.module.css" type Props = { steps: PageActionStep[] @@ -43,9 +48,9 @@ export const Controller = forwardRef( const [hover, setHover] = useState(false) const clearState = () => { - setCurrentId('') - setFailedId('') - setFailedMesage('') + setCurrentId("") + setFailedId("") + setFailedMesage("") } const preview = () => { @@ -54,9 +59,9 @@ export const Controller = forwardRef( Ipc.send(BgCommand.previewPageAction, { steps: props.steps, openMode: PAGE_ACTION_OPEN_MODE.NONE, - srcUrl: `{{${t('PageAction_InputMenu_url')}}}`, - selectedText: `{{${t('PageAction_InputMenu_selectedText')}}}`, - clipboardText: `{{${t('PageAction_InputMenu_clipboard')}}}`, + srcUrl: `{{${t("PageAction_InputMenu_url")}}}`, + selectedText: `{{${t("PageAction_InputMenu_selectedText")}}}`, + clipboardText: `{{${t("PageAction_InputMenu_clipboard")}}}`, }) }, 100) clearState() @@ -85,11 +90,15 @@ export const Controller = forwardRef( } const onStatusChange = ({ results }: PageActiontStatus) => { - const r = results.find((r) => r.status === EXEC_STATE.Start) + const r = results.find( + (r: PageActiontResult) => r.status === EXEC_STATE.Start, + ) if (r != null) { setCurrentId(r.stepId) } - const f = results.find((r) => r.status === EXEC_STATE.Failed) + const f = results.find( + (r: PageActiontResult) => r.status === EXEC_STATE.Failed, + ) if (f != null) { setFailedId(f?.stepId) setFailedMesage(f.message) @@ -100,8 +109,8 @@ export const Controller = forwardRef( RunningStatus.subscribe(onStatusChange) RunningStatus.get().then((status) => { setCurrentId(status.stepId) - setFailedId('') - setFailedMesage('') + setFailedId("") + setFailedMesage("") }) return () => { RunningStatus.unsubscribe(onStatusChange) @@ -124,8 +133,8 @@ export const Controller = forwardRef( return (
      ( className={css.recordButtonIcon} /> - {t('PageAction_Controller_recording')}... + {t("PageAction_Controller_recording")}... ) : isRunning ? ( @@ -154,7 +163,7 @@ export const Controller = forwardRef( className="stroke-sky-500 animate-spin" /> - {t('PageAction_Controller_previewing')} + {t("PageAction_Controller_previewing")}
      ) : ( @@ -169,7 +178,7 @@ export const Controller = forwardRef( className="stroke-gray-500 fill-gray-100" /> - {t('PageAction_Controller_not_recording')} + {t("PageAction_Controller_not_recording")} )} @@ -178,7 +187,7 @@ export const Controller = forwardRef( @@ -189,21 +198,21 @@ export const Controller = forwardRef( > - {t('PageAction_Controller_stop')} + {t("PageAction_Controller_stop")} ) : ( )}
      diff --git a/src/components/pageAction/Draggable.tsx b/src/components/pageAction/Draggable.tsx index aad23af5..749c6390 100644 --- a/src/components/pageAction/Draggable.tsx +++ b/src/components/pageAction/Draggable.tsx @@ -1,9 +1,9 @@ -import { useDraggable } from '@dnd-kit/core' -import { cn } from '@/lib/utils' -import { GripVertical } from 'lucide-react' -import { Point } from '@/types' +import { useDraggable } from "@dnd-kit/core" +import { cn } from "@/lib/utils" +import { GripVertical } from "lucide-react" +import { Point } from "@/types" -import css from './PageActionRecorder.module.css' +import css from "./PageActionRecorder.module.css" type Props = { id: string @@ -35,9 +35,9 @@ export function Draggable(props: Props) { diffY = transform?.y ?? 0 const style = { - position: 'absolute', + position: "absolute", transform: `translate3d(${diffX}px, ${diffY}px, 0)`, - transition: 'box-shadow 0.1s ease', + transition: "box-shadow 0.1s ease", ...pos, } as React.CSSProperties @@ -45,14 +45,14 @@ export function Draggable(props: Props) {
      {props.children}