Add settings to show/hide the app icon in the dock on macOS (oliversc…

…hwendener#1228)

* feat: add settings to toggle "show in dock" on macOS

* chore: remove unnecessary console.logs

* fix: use descriptive parameter in toggleAppIconInDock

* chore: bootstrap Dock module after SettingsManager instead of at the end - unecessarily far down

* refactor: apply namespace for i18n directly in DockSettings

* refactor: move toggleAppIconInDock function

into bootstap as inlined anonymous function

* chore: rename toggleAppIconInDock to setAppIconVisibility

* refactor!: move Dock settings to General settings

* refactor: don't prop-drill the contextBridge hook

* style: add line break, remove unnecessary variable
in `DockModule`

* refactor: move OS check for Dock settings
to `General.tsx`

src/main/Core/Dock/DockModule.ts

@@ -1,7 +1,22 @@
-import type { App } from "electron";
+import type { Dependencies } from "@Core/Dependencies";
+import type { DependencyRegistry } from "@Core/DependencyRegistry";
 
 export class DockModule {
-    public static bootstrap(app: App) {
-        app.dock?.hide();
+    public static bootstrap(dependencyRegistry: DependencyRegistry<Dependencies>) {
+        const app = dependencyRegistry.get("App");
+        const settingsManager = dependencyRegistry.get("SettingsManager");
+        const eventSubscriber = dependencyRegistry.get("EventSubscriber");
+
+        const setAppIconVisibility = () => {
+            if (settingsManager.getValue("appearance.showAppIconInDock", false)) {
+                app.dock?.show();
+            } else {
+                app.dock?.hide();
+            }
+        };
+
+        setAppIconVisibility();
+
+        eventSubscriber.subscribe("settingUpdated[appearance.showAppIconInDock]", setAppIconVisibility);
     }
 }

src/main/index.ts

@@ -8,7 +8,6 @@ import * as Extensions from "./Extensions";
     await Electron.app.whenReady();
 
     Core.SingleInstanceLockModule.bootstrap(Electron.app);
-    Core.DockModule.bootstrap(Electron.app);
 
     const dependencyRegistry = Core.DependencyRegistryModule.bootstrap();
 
@@ -55,6 +54,7 @@ import * as Extensions from "./Extensions";
     Core.SettingsReaderModule.bootstrap(dependencyRegistry);
     Core.SettingsWriterModule.bootstrap(dependencyRegistry);
     Core.SettingsManagerModule.bootstrap(dependencyRegistry);
+    Core.DockModule.bootstrap(dependencyRegistry);
     await Core.ImageGeneratorModule.bootstrap(dependencyRegistry);
     Core.TranslatorModule.bootstrap(dependencyRegistry);
     Core.SearchIndexModule.bootstrap(dependencyRegistry);

src/renderer/Core/I18n/getCoreResources.ts

@@ -55,6 +55,7 @@ export const getCoreResources = (): { namespace: string; resources: Resources<Tr
                     searchHistoryEnabledDescription: "The search history lets you see your previous searches",
                     searchHistoryLimit: "Search History Limit",
                     searchHistoryLimitHint: "Limits the maximum number of search history items",
+                    showAppIconInDock: "Show app icon in dock",
                 },
                 "de-CH": {
                     title: "Allgemein",
@@ -70,6 +71,7 @@ export const getCoreResources = (): { namespace: string; resources: Resources<Tr
                     searchHistoryEnabledDescription: "Der Suchverlauf zeigt dir deine vorherigen Suchen",
                     searchHistoryLimit: "Suchverlauf Limit",
                     searchHistoryLimitHint: "Begrenzt die maximale Anzahl an Suchverlaufseinträgen",
+                    showAppIconInDock: "App-Symbol im Dock anzeigen",
                 },
             },
         },

src/renderer/Core/Settings/Pages/General/DockSettings.tsx

@@ -0,0 +1,28 @@
+import { useContextBridge, useSetting } from "@Core/Hooks";
+import { Setting } from "@Core/Settings/Setting";
+import { Switch } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
+
+export const DockSettings = () => {
+    const { t } = useTranslation("settingsGeneral");
+    const { contextBridge } = useContextBridge();
+
+    const { value: showAppIconInDock, updateValue: setShowAppIconInDock } = useSetting<boolean>({
+        key: "appearance.showAppIconInDock",
+        defaultValue: false,
+    });
+
+    const updateShowAppIconInDock = async (value: boolean) => {
+        await contextBridge.updateSettingValue("appearance.showAppIconInDock", value);
+        setShowAppIconInDock(value);
+    };
+
+    return (
+        <Setting
+            label={t("showAppIconInDock")}
+            control={
+                <Switch checked={showAppIconInDock} onChange={(_, { checked }) => updateShowAppIconInDock(checked)} />
+            }
+        />
+    );
+};

src/renderer/Core/Settings/Pages/General/General.tsx

@@ -1,18 +1,25 @@
+import { useContextBridge } from "@Core/Hooks";
 import { SettingGroup } from "@Core/Settings/SettingGroup";
 import { SettingGroupList } from "../../SettingGroupList";
 import { Autostart } from "./Autostart";
+import { DockSettings } from "./DockSettings";
 import { HotKey } from "./HotKey";
 import { Language } from "./Language";
 import { SearchHistory } from "./SearchHistory";
 import { UrlImageGenerator } from "./UrlImageGenerator";
 
 export const General = () => {
+    const { contextBridge } = useContextBridge();
+
+    const operatingSystem = contextBridge.getOperatingSystem();
+
     return (
         <SettingGroupList>
             <SettingGroup title="General">
                 <Language />
                 <HotKey />
                 <Autostart />
+                {operatingSystem === "macOS" && <DockSettings />}
             </SettingGroup>
             <SettingGroup title="Search History">
                 <SearchHistory />