Added "always on top" option

src/main/Core/BrowserWindow/BrowserWindowModule.ts

@@ -56,6 +56,10 @@ export class BrowserWindowModule {
             sendToBrowserWindow(browserWindow, `settingUpdated[${key}]`, { value });
         });
 
+        eventSubscriber.subscribe("settingUpdated[window.alwaysOnTop]", ({ value }: { value: boolean }) => {
+            browserWindow.setAlwaysOnTop(value);
+        });
+
         eventSubscriber.subscribe(
             "settingUpdated[window.backgroundMaterial]",
             ({ value }: { value: BrowserWindowConstructorOptions["backgroundMaterial"] }) => {

src/main/Core/BrowserWindow/createBrowserWindow.ts

@@ -11,7 +11,8 @@ export const createBrowserWindow = (dependencyRegistry: DependencyRegistry<Depen
     const operatingSystem = dependencyRegistry.get("OperatingSystem");
     const settingsManager = dependencyRegistry.get("SettingsManager");
 
-    const startHidden = settingsManager.getValue<boolean>("general.startHidden", false);
+    const startHidden = settingsManager.getValue<boolean>("window.showOnStartup", false);
+    const alwaysOnTop = settingsManager.getValue<boolean>("window.alwaysOnTop", false);
 
     const preloadScriptFilePath = join(__dirname, "..", "dist-preload", "index.js");
 
@@ -26,6 +27,7 @@ export const createBrowserWindow = (dependencyRegistry: DependencyRegistry<Depen
             allowRunningInsecureContent: !app.isPackaged,
             spellcheck: false,
         },
+        alwaysOnTop,
     };
 
     const extendDefaultBrowserWindowOptions = (browserWindowOptions: BrowserWindowConstructorOptions) => {

src/renderer/Core/I18n/getCoreTranslations.ts

@@ -185,11 +185,13 @@ export const getCoreTranslations = (): { namespace: string; translations: Transl
                     title: "Window",
                     hideWindowAfterExecution: "Hide window after execution",
                     hideWindowOnBlur: "Hide window on blur",
+                    alwaysOnTop: "Always on top",
                 },
                 "de-CH": {
                     title: "Fenster",
                     hideWindowAfterExecution: "Fenster verstecken nach Ausführung",
                     hideWindowOnBlur: "Fenster verstecken bei Fokusverlust",
+                    alwaysOnTop: "Immer im Vordergrund",
                 },
             },
         },

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

@@ -3,7 +3,6 @@ import { SectionList } from "../../SectionList";
 import { Autostart } from "./Autostart";
 import { HotKey } from "./HotKey";
 import { Language } from "./Language";
-import { StartHidden } from "./StartHidden";
 
 export const General = () => {
     return (
@@ -17,9 +16,6 @@ export const General = () => {
             <Section>
                 <Autostart />
             </Section>
-            <Section>
-                <StartHidden />
-            </Section>
         </SectionList>
     );
 };

src/renderer/Core/Settings/Pages/Window/AlwaysOnTop.tsx

@@ -0,0 +1,14 @@
+import { useSetting } from "@Core/Hooks";
+import { Field, Switch } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
+
+export const AlwaysOnTop = () => {
+    const { t } = useTranslation();
+    const { value, updateValue } = useSetting({ key: "window.alwaysOnTop", defaultValue: false });
+
+    return (
+        <Field label={t("alwaysOnTop", { ns: "settingsWindow" })}>
+            <Switch checked={value} onChange={(_, { checked }) => updateValue(checked)} />
+        </Field>
+    );
+};

src/renderer/Core/Settings/Pages/Window/BackgroundMaterial.tsx

@@ -0,0 +1,25 @@
+import { Dropdown, Field, Option } from "@fluentui/react-components";
+
+type Props = {
+    backgroundMaterial: string;
+    setBackgroundMaterial: (backgroundMaterial: string) => void;
+};
+
+export const BackgroundMaterial = ({ backgroundMaterial, setBackgroundMaterial }: Props) => {
+    const backgroundMaterialOptions = ["Acrylic", "Mica", "None", "Tabbed"];
+
+    return (
+        <Field label="Background material">
+            <Dropdown
+                value={backgroundMaterial}
+                onOptionSelect={(_, { optionValue }) => optionValue && setBackgroundMaterial(optionValue)}
+            >
+                {backgroundMaterialOptions.map((b) => (
+                    <Option key={`background-material-option-${b}`} value={b}>
+                        {b}
+                    </Option>
+                ))}
+            </Dropdown>
+        </Field>
+    );
+};

src/renderer/Core/Settings/Pages/Window/HideWindowAfterExecution.tsx

@@ -0,0 +1,21 @@
+import { useSetting } from "@Core/Hooks";
+import { Field, Switch } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
+
+export const HideWindowAfterExecution = () => {
+    const { t } = useTranslation();
+
+    const { value: hideWindowAfterExecution, updateValue: setHideWindowAfterExecution } = useSetting({
+        key: "window.hideWindowAfterExecution",
+        defaultValue: true,
+    });
+
+    return (
+        <Field label={t("hideWindowAfterExecution", { ns: "settingsWindow" })}>
+            <Switch
+                checked={hideWindowAfterExecution}
+                onChange={(_, { checked }) => setHideWindowAfterExecution(checked)}
+            />
+        </Field>
+    );
+};

src/renderer/Core/Settings/Pages/Window/HideWindowOnBlur.tsx

@@ -0,0 +1,18 @@
+import { useSetting } from "@Core/Hooks";
+import { Field, Switch } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
+
+export const HideWindowOnBlur = () => {
+    const { t } = useTranslation();
+
+    const { value: hideWindowOnBlur, updateValue: setHideWindowOnBlur } = useSetting({
+        key: "window.hideWindowOnBlur",
+        defaultValue: true,
+    });
+
+    return (
+        <Field label={t("hideWindowOnBlur", { ns: "settingsWindow" })}>
+            <Switch checked={hideWindowOnBlur} onChange={(_, { checked }) => setHideWindowOnBlur(checked)} />
+        </Field>
+    );
+};

src/renderer/Core/Settings/Pages/Window/Opacity.tsx

@@ -0,0 +1,21 @@
+import { useSetting } from "@Core/Hooks";
+import { Field, Slider } from "@fluentui/react-components";
+
+export const Opacity = () => {
+    const { value: acrylicOpacity, updateValue: setAcrylicOpacity } = useSetting({
+        key: "window.acrylicOpacity",
+        defaultValue: 0.6,
+    });
+
+    return (
+        <Field label={`Opacity: ${acrylicOpacity}`}>
+            <Slider
+                min={0}
+                max={1}
+                step={0.05}
+                value={acrylicOpacity}
+                onChange={(_, { value }) => setAcrylicOpacity(value)}
+            />
+        </Field>
+    );
+};

src/renderer/Core/Settings/Pages/Window/Vibrancy.tsx

@@ -0,0 +1,54 @@
+import { useSetting } from "@Core/Hooks";
+import { Dropdown, Field, Option } from "@fluentui/react-components";
+import { Virtualizer, useStaticVirtualizerMeasure } from "@fluentui/react-components/unstable";
+
+export const Vibrancy = () => {
+    const { value: vibrancy, updateValue: setVibrancy } = useSetting({ key: "window.vibrancy", defaultValue: "None" });
+
+    const vibrancyOptions = [
+        "None",
+        "content",
+        "fullscreen-ui",
+        "header",
+        "hud",
+        "menu",
+        "popover",
+        "selection",
+        "sheet",
+        "sidebar",
+        "titlebar",
+        "tooltip",
+        "under-page",
+        "under-window",
+        "window",
+    ];
+
+    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useStaticVirtualizerMeasure({
+        defaultItemSize: 20,
+        direction: "vertical",
+    });
+
+    return (
+        <Field label="Vibrancy">
+            <Dropdown
+                value={vibrancy}
+                onOptionSelect={(_, { optionValue }) => optionValue && setVibrancy(optionValue)}
+                listbox={{ ref: scrollRef, style: { maxHeight: 145 } }}
+            >
+                <Virtualizer
+                    numItems={vibrancyOptions.length}
+                    virtualizerLength={virtualizerLength}
+                    bufferItems={bufferItems}
+                    bufferSize={bufferSize}
+                    itemSize={20}
+                >
+                    {(i) => (
+                        <Option key={`window-vibrancy-option-${vibrancyOptions[i]}`} value={vibrancyOptions[i]}>
+                            {vibrancyOptions[i]}
+                        </Option>
+                    )}
+                </Virtualizer>
+            </Dropdown>
+        </Field>
+    );
+};