refactor(call-to-action): split into separate file & add translations

apps/client/src/translations/en/translation.json

@@ -1992,5 +1992,13 @@
   "modal": {
     "close": "Close",
     "help_title": "Display more information about this screen"
+  },
+  "call_to_action": {
+    "next_theme_title": "TriliumNext theme is now stable",
+    "next_theme_message": "For a while now, we've been working on a new theme to give the application a more modern look.",
+    "next_theme_button": "Switch to the TriliumNext theme",
+    "background_effects_title": "Background effects are now stable",
+    "background_effects_message": "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.",
+    "background_effects_button": "Enable background effects"
   }
 }

apps/client/src/widgets/dialogs/call_to_action.tsx

@@ -1,56 +1,8 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
 import ReactBasicWidget from "../react/ReactBasicWidget";
-import options from "../../services/options";
+import { CallToAction, getCallToActions } from "./call_to_action_definitions";
-import { OptionNames } from "@triliumnext/commons";
-import utils from "../../services/utils";
-
-interface CallToAction {
-    title: string;
-    message: string;
-    enabled: () => boolean;
-    buttons: {
-        text: string;
-        onClick: () => (void | Promise<void>);
-    }[];
-}
-
-function isNextTheme() {
-    return [ "next", "next-light", "next-dark" ].includes(options.get("theme"));
-}
-
-const CALL_TO_ACTIONS: CallToAction[] = [
-    {
-        title: "TriliumNext theme is now stable",
-        message: "For a while now, we've been working on a new theme to give the application a more modern look.",
-        enabled: () => !isNextTheme(),
-        buttons: [
-            {
-                text: "Switch to the TriliumNext theme",
-                async onClick() {
-                    await options.save("theme", "next");
-                    await options.save("backgroundEffects", "true");
-                    utils.reloadFrontendApp("call-to-action");
-                }
-            }
-        ]
-    },
-    {
-        title: "Background effects are now stable",
-        message: "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.",
-        enabled: () => isNextTheme() && !options.is("backgroundEffects"),
-        buttons: [
-            {
-                text: "Enable background effects",
-                async onClick() {
-                    await options.save("backgroundEffects", "true");
-                    utils.restartDesktopApp();
-                }
-            }
-        ]
-    }
-];
 
 function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
     const [ activeIndex, setActiveIndex ] = useState(0);
@@ -96,8 +48,7 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
 export class CallToActionDialog extends ReactBasicWidget {
 
     get component() {
-        const filteredCallToActions = CALL_TO_ACTIONS.filter((callToAction) => callToAction.enabled());
+        return <CallToActionDialogComponent activeCallToActions={getCallToActions()} /> 
-        return <CallToActionDialogComponent activeCallToActions={filteredCallToActions} /> 
     }
 
 }

apps/client/src/widgets/dialogs/call_to_action_definitions.ts

@@ -0,0 +1,53 @@
+import utils from "../../services/utils";
+import options from "../../services/options";
+import { t } from "../../services/i18n";
+
+export interface CallToAction {
+    title: string;
+    message: string;
+    enabled: () => boolean;
+    buttons: {
+        text: string;
+        onClick: () => (void | Promise<void>);
+    }[];
+}
+
+function isNextTheme() {
+    return [ "next", "next-light", "next-dark" ].includes(options.get("theme"));
+}
+
+const CALL_TO_ACTIONS: CallToAction[] = [
+    {
+        title: t("call_to_action.next_theme_title"),
+        message: t("call_to_action.next_theme_message"),
+        enabled: () => !isNextTheme(),
+        buttons: [
+            {
+                text: t("call_to_action.next_theme_button"),
+                async onClick() {
+                    await options.save("theme", "next");
+                    await options.save("backgroundEffects", "true");
+                    utils.reloadFrontendApp("call-to-action");
+                }
+            }
+        ]
+    },
+    {
+        title: t("call_to_action.background_effects_title"),
+        message: t("call_to_action.background_effects_message"),
+        enabled: () => isNextTheme() && !options.is("backgroundEffects"),
+        buttons: [
+            {
+                text: t("call_to_action.background_effects_button"),
+                async onClick() {
+                    await options.save("backgroundEffects", "true");
+                    utils.restartDesktopApp();
+                }
+            }
+        ]
+    }
+];
+
+export function getCallToActions() {
+    return CALL_TO_ACTIONS.filter((callToAction) => callToAction.enabled());
+}