ReverseImageSearch: Add engine icons

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>

src/webpack/common/types/menu.d.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, UIEvent } from "react";
+import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, ReactNode, UIEvent } from "react";
 
 type RC<C> = ComponentType<PropsWithChildren<C & Record<string, any>>>;
 
@@ -35,7 +35,7 @@ export interface Menu {
     }>;
     MenuItem: RC<{
         id: string;
-        label: string;
+        label: ReactNode;
         action?(e: MouseEvent): void;
         icon?: ComponentType<any>;