From 4871dbd7efc91fff83f2a64257e7595cc28f89f5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 12 Aug 2025 17:48:44 +0300
Subject: [PATCH] feat(call_to_action): add actual functionality on action
 buttons

---
 .../src/widgets/dialogs/call_to_action.tsx    | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx
index e26b0583e..1e3f2ac1f 100644
--- a/apps/client/src/widgets/dialogs/call_to_action.tsx
+++ b/apps/client/src/widgets/dialogs/call_to_action.tsx
@@ -3,6 +3,8 @@ 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;
@@ -10,6 +12,7 @@ interface CallToAction {
     enabled: () => boolean;
     buttons: {
         text: string;
+        onClick: () => (void | Promise<void>);
     }[];
 }
 
@@ -23,15 +26,28 @@ const CALL_TO_ACTIONS: CallToAction[] = [
         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"}
+            {
+                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"),
+        enabled: () => isNextTheme() && !options.is("backgroundEffects"),
         buttons: [
-            { text: "Enable background effects" }
+            {
+                text: "Enable background effects",
+                async onClick() {
+                    await options.save("backgroundEffects", "true");
+                    utils.restartDesktopApp();
+                }
+            }
         ]
     }
 ];
@@ -55,13 +71,17 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
 
     return (
         <Modal
+            className="call-to-action"
+            size="md"
             title="New features"
             show={shown}
+            onHidden={() => setShown(false)}
             footerAlignment="between"
             footer={<>
                 <Button text="Dismiss" onClick={goToNext} />
                 {activeItem.buttons.map((button) =>
-                    <Button text={button.text} onClick={() => {
+                    <Button text={button.text} onClick={async () => {
+                        await button.onClick();
                         goToNext();
                     }}/>   
                 )}