From 1baaee582e5e5d1f1e4a4cc57e454664c97f4ae0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 12 Aug 2025 18:42:55 +0300 Subject: [PATCH] refactor(call-to-action): split into separate file & add translations --- .../src/translations/en/translation.json | 8 +++ .../src/widgets/dialogs/call_to_action.tsx | 55 +------------------ .../dialogs/call_to_action_definitions.ts | 53 ++++++++++++++++++ 3 files changed, 64 insertions(+), 52 deletions(-) create mode 100644 apps/client/src/widgets/dialogs/call_to_action_definitions.ts diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index f5a6656ec..28c22cf34 100644 --- a/apps/client/src/translations/en/translation.json +++ b/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" } } diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx index 1e3f2ac1f..076914aab 100644 --- a/apps/client/src/widgets/dialogs/call_to_action.tsx +++ b/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 { OptionNames } from "@triliumnext/commons"; -import utils from "../../services/utils"; - -interface CallToAction { - title: string; - message: string; - enabled: () => boolean; - buttons: { - text: string; - onClick: () => (void | Promise); - }[]; -} - -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(); - } - } - ] - } -]; +import { CallToAction, getCallToActions } from "./call_to_action_definitions"; 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 + return } } \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/call_to_action_definitions.ts b/apps/client/src/widgets/dialogs/call_to_action_definitions.ts new file mode 100644 index 000000000..1b7b49e0d --- /dev/null +++ b/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); + }[]; +} + +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()); +}