refactor: remove useContextBridge hook

src/renderer/Core/App.tsx

@@ -4,13 +4,7 @@ import type { IpcRendererEvent } from "electron";
 import { useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router";
 import { Extension } from "./Extension";
-import {
-    useContextBridge,
-    useExcludedSearchResultItems,
-    useFavorites,
-    useScrollBar,
-    useSearchResultItems,
-} from "./Hooks";
+import { useExcludedSearchResultItems, useFavorites, useScrollBar, useSearchResultItems } from "./Hooks";
 import { useI18n } from "./I18n";
 import { Search } from "./Search";
 import { Settings } from "./Settings";
@@ -19,8 +13,7 @@ import { ThemeContext } from "./ThemeContext";
 import { useAppCssProperties } from "./useAppCssProperties";
 
 export const App = () => {
-    const { contextBridge } = useContextBridge();
-    const [theme, setTheme] = useState<Theme>(getTheme(contextBridge));
+    const [theme, setTheme] = useState<Theme>(getTheme(window.ContextBridge));
     const [shouldPreferDarkColors, setShouldPreferDarkColors] = useState<boolean>(
         window.matchMedia("(prefers-color-scheme: dark)").matches,
     );
@@ -31,24 +24,24 @@ export const App = () => {
     const navigate = useNavigate();
     const { appCssProperties } = useAppCssProperties();
 
-    useI18n({ contextBridge });
+    useI18n();
     useScrollBar({ document, theme });
 
     useEffect(() => {
         const navigateToEventHandler = (_: IpcRendererEvent, { pathname }: { pathname: string }) =>
             navigate({ pathname });
 
         const nativeThemeChangedEventHandler = () => {
-            setTheme(getTheme(contextBridge));
+            setTheme(getTheme(window.ContextBridge));
             setShouldPreferDarkColors(window.matchMedia("(prefers-color-scheme: dark)").matches);
         };
 
-        contextBridge.ipcRenderer.on("navigateTo", navigateToEventHandler);
-        contextBridge.ipcRenderer.on("nativeThemeChanged", nativeThemeChangedEventHandler);
+        window.ContextBridge.ipcRenderer.on("navigateTo", navigateToEventHandler);
+        window.ContextBridge.ipcRenderer.on("nativeThemeChanged", nativeThemeChangedEventHandler);
 
         return () => {
-            contextBridge.ipcRenderer.off("navigateTo", navigateToEventHandler);
-            contextBridge.ipcRenderer.off("nativeThemeChanged", nativeThemeChangedEventHandler);
+            window.ContextBridge.ipcRenderer.off("navigateTo", navigateToEventHandler);
+            window.ContextBridge.ipcRenderer.off("nativeThemeChanged", nativeThemeChangedEventHandler);
         };
     }, []);
 

src/renderer/Core/Components/BasicSearch.tsx

@@ -1,6 +1,5 @@
 import { BaseLayout } from "@Core/BaseLayout";
 import { Header } from "@Core/Header";
-import { useContextBridge } from "@Core/Hooks";
 import { getNextSearchResultItemId } from "@Core/Search/Helpers/getNextSearchResultItemId";
 import { getPreviousSearchResultItemId } from "@Core/Search/Helpers/getPreviousSearchResultItemId";
 import { SearchResultList } from "@Core/Search/SearchResultList";
@@ -24,7 +23,6 @@ export const BasicSearch = ({
     debounceDurationInMs,
     showGoBackButton,
 }: BasicSearchProps) => {
-    const { contextBridge } = useContextBridge();
     const navigate = useNavigate();
     const [searchTerm, setSearchTerm] = useState<string>("");
     const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -64,17 +62,17 @@ export const BasicSearch = ({
         const selectedSearchResultItem = getSelectedSearchResultItem();
 
         if (selectedSearchResultItem) {
-            await contextBridge.invokeAction(selectedSearchResultItem.defaultAction);
+            await window.ContextBridge.invokeAction(selectedSearchResultItem.defaultAction);
         }
     };
 
     const clickHandlers: Record<string, (s: SearchResultItem) => void> = {
         selectSearchResultItem: (s) => setSelectedItemId(s.id),
-        invokeSearchResultItem: (s) => contextBridge.invokeAction(s.defaultAction),
+        invokeSearchResultItem: (s) => window.ContextBridge.invokeAction(s.defaultAction),
     };
 
     const handleSearchResultItemClickEvent = (searchResultItem: SearchResultItem) => {
-        const singleClickBehavior = contextBridge.getSettingValue(
+        const singleClickBehavior = window.ContextBridge.getSettingValue(
             "keyboardAndMouse.singleClickBehavior",
             "selectSearchResultItem",
         );
@@ -83,7 +81,7 @@ export const BasicSearch = ({
     };
 
     const handleSearchResultItemDoubleClickEvent = (searchResultItem: SearchResultItem) => {
-        const doubleClickBehavior = contextBridge.getSettingValue(
+        const doubleClickBehavior = window.ContextBridge.getSettingValue(
             "keyboardAndMouse.doubleClickBehavior",
             "invokeSearchResultItem",
         );

src/renderer/Core/Hooks/index.ts

@@ -1,4 +1,3 @@
-export * from "./useContextBridge";
 export * from "./useExcludedSearchResultItems";
 export * from "./useExtensionProps";
 export * from "./useExtensionSetting";

src/renderer/Core/Hooks/useExcludedSearchResultItems.ts

@@ -1,21 +1,21 @@
 import { useEffect, useState } from "react";
-import { useContextBridge } from "./useContextBridge";
 
 export const useExcludedSearchResultItems = () => {
-    const { contextBridge } = useContextBridge();
-
     const [excludedSearchResultItemIds, setExcludedSearchResultItemIds] = useState<string[]>(
-        contextBridge.getExcludedSearchResultItemIds(),
+        window.ContextBridge.getExcludedSearchResultItemIds(),
     );
 
     useEffect(() => {
         const excludedSearchResultItemsUpdatedEventHandler = () =>
-            setExcludedSearchResultItemIds(contextBridge.getExcludedSearchResultItemIds());
+            setExcludedSearchResultItemIds(window.ContextBridge.getExcludedSearchResultItemIds());
 
-        contextBridge.ipcRenderer.on("excludedSearchResultItemsUpdated", excludedSearchResultItemsUpdatedEventHandler);
+        window.ContextBridge.ipcRenderer.on(
+            "excludedSearchResultItemsUpdated",
+            excludedSearchResultItemsUpdatedEventHandler,
+        );
 
         return () => {
-            contextBridge.ipcRenderer.off(
+            window.ContextBridge.ipcRenderer.off(
                 "excludedSearchResultItemsUpdated",
                 excludedSearchResultItemsUpdatedEventHandler,
             );

src/renderer/Core/Hooks/useExtensionProps.ts

@@ -1,13 +1,11 @@
 import type { ExtensionProps } from "@Core/ExtensionProps";
 import { useNavigate } from "react-router";
-import { useContextBridge } from "./useContextBridge";
 
 export const useExtensionProps = (): ExtensionProps => {
     const navigate = useNavigate();
-    const { contextBridge } = useContextBridge();
 
     return {
-        contextBridge,
+        contextBridge: window.ContextBridge,
         goBack: () => navigate({ pathname: "/" }),
     };
 };

src/renderer/Core/Hooks/useExtensionSetting.ts

@@ -1,6 +1,5 @@
 import { getExtensionSettingKey } from "@common/Core/Extension";
 import { useState } from "react";
-import { useContextBridge } from "./useContextBridge";
 
 export const useExtensionSetting = <Value>({
     extensionId,
@@ -11,22 +10,20 @@ export const useExtensionSetting = <Value>({
     key: string;
     isSensitive?: boolean;
 }) => {
-    const { contextBridge } = useContextBridge();
-
     const settingKey = getExtensionSettingKey(extensionId, key);
 
     const [value, setValue] = useState<Value>(
-        contextBridge.getSettingValue(
+        window.ContextBridge.getSettingValue(
             settingKey,
-            contextBridge.getExtensionSettingDefaultValue(extensionId, key),
+            window.ContextBridge.getExtensionSettingDefaultValue(extensionId, key),
             isSensitive,
         ),
     );
 
     const updateValue = async (updatedValue: Value) => {
         setValue(updatedValue);
 
-        await contextBridge.updateSettingValue(settingKey, updatedValue, isSensitive);
+        await window.ContextBridge.updateSettingValue(settingKey, updatedValue, isSensitive);
     };
 
     return { value, updateValue };

src/renderer/Core/Hooks/useFavorites.ts

@@ -1,18 +1,15 @@
 import { useEffect, useState } from "react";
-import { useContextBridge } from "./useContextBridge";
 
 export const useFavorites = () => {
-    const { contextBridge } = useContextBridge();
-
-    const [favorites, setFavorites] = useState<string[]>(contextBridge.getFavorites());
+    const [favorites, setFavorites] = useState<string[]>(window.ContextBridge.getFavorites());
 
     useEffect(() => {
-        const favoritesUpdatedEventHandler = () => setFavorites(contextBridge.getFavorites());
+        const favoritesUpdatedEventHandler = () => setFavorites(window.ContextBridge.getFavorites());
 
-        contextBridge.ipcRenderer.on("favoritesUpdated", favoritesUpdatedEventHandler);
+        window.ContextBridge.ipcRenderer.on("favoritesUpdated", favoritesUpdatedEventHandler);
 
         return () => {
-            contextBridge.ipcRenderer.off("favoritesUpdated", favoritesUpdatedEventHandler);
+            window.ContextBridge.ipcRenderer.off("favoritesUpdated", favoritesUpdatedEventHandler);
         };
     }, []);
 

src/renderer/Core/Hooks/useSearchResultItems.ts

@@ -1,21 +1,18 @@
 import type { SearchResultItem } from "@common/Core";
 import { useEffect, useState } from "react";
-import { useContextBridge } from "./useContextBridge";
 
 export const useSearchResultItems = () => {
-    const { contextBridge } = useContextBridge();
-
     const [searchResultItems, setSearchResultItems] = useState<SearchResultItem[]>(
-        contextBridge.getSearchResultItems(),
+        window.ContextBridge.getSearchResultItems(),
     );
 
     useEffect(() => {
-        const searchIndexUpdatedEventHandler = () => setSearchResultItems(contextBridge.getSearchResultItems());
+        const searchIndexUpdatedEventHandler = () => setSearchResultItems(window.ContextBridge.getSearchResultItems());
 
-        contextBridge.ipcRenderer.on("searchIndexUpdated", searchIndexUpdatedEventHandler);
+        window.ContextBridge.ipcRenderer.on("searchIndexUpdated", searchIndexUpdatedEventHandler);
 
         return () => {
-            contextBridge.ipcRenderer.off("searchIndexUpdated", searchIndexUpdatedEventHandler);
+            window.ContextBridge.ipcRenderer.off("searchIndexUpdated", searchIndexUpdatedEventHandler);
         };
     }, []);
 

src/renderer/Core/Hooks/useSetting.ts

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useContextBridge } from "./useContextBridge";
 
 export const useSetting = <Value>({
     key,
@@ -10,13 +9,11 @@ export const useSetting = <Value>({
     defaultValue: Value;
     isSensitive?: boolean;
 }) => {
-    const { contextBridge } = useContextBridge();
-
-    const [value, setValue] = useState<Value>(contextBridge.getSettingValue(key, defaultValue, isSensitive));
+    const [value, setValue] = useState<Value>(window.ContextBridge.getSettingValue(key, defaultValue, isSensitive));
 
     const updateValue = async (updatedValue: Value) => {
         setValue(updatedValue);
-        await contextBridge.updateSettingValue(key, updatedValue, isSensitive);
+        await window.ContextBridge.updateSettingValue(key, updatedValue, isSensitive);
     };
 
     return { value, updateValue };

src/renderer/Core/I18n/useI18n.ts

@@ -1,17 +1,16 @@
-import type { ContextBridge } from "@common/Core";
 import { use } from "i18next";
 import { initReactI18next } from "react-i18next";
 import { createResources } from "./createResources";
 import { getCoreResources } from "./getCoreResources";
 import { getExtensionResources } from "./getExtensionResources";
 
-export const useI18n = ({ contextBridge }: { contextBridge: ContextBridge }) => {
+export const useI18n = () => {
     return use(initReactI18next).init({
         resources: createResources([
             ...getCoreResources(),
-            ...getExtensionResources(contextBridge.getExtensionResources()),
+            ...getExtensionResources(window.ContextBridge.getExtensionResources()),
         ]),
-        lng: contextBridge.getSettingValue("general.language", "en-US"),
+        lng: window.ContextBridge.getSettingValue("general.language", "en-US"),
         fallbackLng: "en-US",
     });
 };

src/renderer/Core/Search/ActionsMenu/ActionsMenu.tsx

@@ -1,5 +1,4 @@
 import { KeyboardShortcut } from "@Core/Components";
-import { useContextBridge } from "@Core/Hooks";
 import { type SearchResultItem, type SearchResultItemAction } from "@common/Core";
 import {
     Button,
@@ -38,15 +37,17 @@ export const ActionsMenu = ({
     onOpenChange,
     keyboardShortcut,
 }: AdditionalActionsProps) => {
-    const { contextBridge } = useContextBridge();
     const { t } = useTranslation();
 
     const toasterId = useId("copiedToClipboardToasterId");
     const { dispatchToast } = useToastController(toasterId);
 
     const actions = searchResultItem ? getActions(searchResultItem, favorites) : [];
 
-    const showKeyboardShortcuts = contextBridge.getSettingValue<boolean>("appearance.showKeyboardShortcuts", true);
+    const showKeyboardShortcuts = window.ContextBridge.getSettingValue<boolean>(
+        "appearance.showKeyboardShortcuts",
+        true,
+    );
 
     useEffect(() => {
         const copiedToClipboardHandler = () =>
@@ -57,10 +58,10 @@ export const ActionsMenu = ({
                 { intent: "success", position: "bottom" },
             );
 
-        contextBridge.ipcRenderer.on("copiedToClipboard", copiedToClipboardHandler);
+        window.ContextBridge.ipcRenderer.on("copiedToClipboard", copiedToClipboardHandler);
 
         return () => {
-            contextBridge.ipcRenderer.off("copiedToClipboard", copiedToClipboardHandler);
+            window.ContextBridge.ipcRenderer.off("copiedToClipboard", copiedToClipboardHandler);
         };
     }, []);
 

src/renderer/Core/Search/ConfirmationDialog.tsx

@@ -9,20 +9,17 @@ import {
     DialogTitle,
 } from "@fluentui/react-components";
 import { t } from "i18next";
-import { useContextBridge } from "../Hooks";
 
 type ConfirmationDialogProps = {
     action?: SearchResultItemAction;
     closeDialog: () => void;
 };
 
 export const ConfirmationDialog = ({ action, closeDialog }: ConfirmationDialogProps) => {
-    const { contextBridge } = useContextBridge();
-
     const invokeAction = async () => {
         if (action) {
             closeDialog();
-            await contextBridge.invokeAction(action);
+            await window.ContextBridge.invokeAction(action);
         }
     };