From cd53cf38fe6330699495c9c26d29e37322d3082a Mon Sep 17 00:00:00 2001 From: V Date: Sat, 13 May 2023 23:58:24 +0200 Subject: [PATCH] ReverseImageSearch: Add engine icons --- src/plugins/reverseImageSearch.tsx | 30 ++++++++++++++++++++++++++---- src/webpack/common/types/menu.d.ts | 4 ++-- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/plugins/reverseImageSearch.tsx b/src/plugins/reverseImageSearch.tsx index c375e19c..811e7ff0 100644 --- a/src/plugins/reverseImageSearch.tsx +++ b/src/plugins/reverseImageSearch.tsx @@ -17,6 +17,8 @@ */ import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu"; +import { Flex } from "@components/Flex"; +import { OpenExternalIcon } from "@components/Icons"; import { Devs } from "@utils/constants"; import definePlugin from "@utils/types"; import { Menu } from "@webpack/common"; @@ -28,7 +30,7 @@ const Engines = { IQDB: "https://iqdb.org/?url=", TinEye: "https://www.tineye.com/search?url=", ImgOps: "https://imgops.com/start?url=" -}; +} as const; function search(src: string, engine: string) { open(engine + encodeURIComponent(src), "_blank"); @@ -50,13 +52,28 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => key="search-image" id="search-image" > - {Object.keys(Engines).map(engine => { + {Object.keys(Engines).map((engine, i) => { const key = "search-image-" + engine; return ( + = 3 // Do not round Google, Yandex & SauceNAO + ? "50%" + : void 0 + }} + aria-hidden="true" + height={16} + width={16} + src={new URL("/favicon.ico", Engines[engine]).toString().replace("lens.", "")} + /> + {engine} + + } action={() => search(src, Engines[engine])} /> ); @@ -64,7 +81,12 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => + + All + + } action={() => Object.values(Engines).forEach(e => search(src, e))} /> diff --git a/src/webpack/common/types/menu.d.ts b/src/webpack/common/types/menu.d.ts index 8e9218f3..58ea626c 100644 --- a/src/webpack/common/types/menu.d.ts +++ b/src/webpack/common/types/menu.d.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, UIEvent } from "react"; +import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, ReactNode, UIEvent } from "react"; type RC = ComponentType>>; @@ -35,7 +35,7 @@ export interface Menu { }>; MenuItem: RC<{ id: string; - label: string; + label: ReactNode; action?(e: MouseEvent): void; icon?: ComponentType;