diff options
Diffstat (limited to 'src/plugins/reverseImageSearch.tsx')
| -rw-r--r-- | src/plugins/reverseImageSearch.tsx | 30 |
1 files changed, 26 insertions, 4 deletions
diff --git a/src/plugins/reverseImageSearch.tsx b/src/plugins/reverseImageSearch.tsx index c375e19..811e7ff 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 ( <Menu.MenuItem key={key} id={key} - label={engine} + label={ + <Flex style={{ alignItems: "center", gap: "0.5em" }}> + <img + style={{ + borderRadius: i >= 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} + </Flex> + } action={() => search(src, Engines[engine])} /> ); @@ -64,7 +81,12 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => <Menu.MenuItem key="search-image-all" id="search-image-all" - label="All" + label={ + <Flex style={{ alignItems: "center", gap: "0.5em" }}> + <OpenExternalIcon height={16} width={16} /> + All + </Flex> + } action={() => Object.values(Engines).forEach(e => search(src, e))} /> </Menu.MenuItem> |