From c3b22ff737b85491d99de5b438f02aa9ff040a4f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 15:54:27 +0200
Subject: [PATCH] refactor(react/launch_bar): port protected session status
 widget

---
 .../buttons/protected_session_status.ts       | 21 ------------
 .../src/widgets/containers/launcher.tsx       |  4 +--
 .../ProtectedSessionStatusWidget.tsx          | 33 +++++++++++++++++++
 3 files changed, 35 insertions(+), 23 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/protected_session_status.ts
 create mode 100644 apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx

diff --git a/apps/client/src/widgets/buttons/protected_session_status.ts b/apps/client/src/widgets/buttons/protected_session_status.ts
deleted file mode 100644
index e5dde7d3d..000000000
--- a/apps/client/src/widgets/buttons/protected_session_status.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { t } from "../../services/i18n.js";
-import protectedSessionHolder from "../../services/protected_session_holder.js";
-import CommandButtonWidget from "./command_button.js";
-
-export default class ProtectedSessionStatusWidget extends CommandButtonWidget {
-    constructor() {
-        super();
-
-        this.class("launcher-button");
-
-        this.settings.icon = () => (protectedSessionHolder.isProtectedSessionAvailable() ? "bx-check-shield" : "bx-shield-quarter");
-
-        this.settings.title = () => (protectedSessionHolder.isProtectedSessionAvailable() ? t("protected_session_status.active") : t("protected_session_status.inactive"));
-
-        this.settings.command = () => (protectedSessionHolder.isProtectedSessionAvailable() ? "leaveProtectedSession" : "enterProtectedSession");
-    }
-
-    protectedSessionStartedEvent() {
-        this.refreshIcon();
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 19a46fbf0..17707a171 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -1,5 +1,4 @@
 import CalendarWidget from "../buttons/calendar.js";
-import ProtectedSessionStatusWidget from "../buttons/protected_session_status.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import NoteLauncher from "../buttons/launcher/note_launcher.js";
@@ -14,6 +13,7 @@ import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
 import SpacerWidget from "../launch_bar/SpacerWidget.jsx";
 import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 import AiChatButton from "../launch_bar/AiChatButton.jsx";
+import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWidget.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -113,7 +113,7 @@ export default class LauncherWidget extends BasicWidget {
             case "bookmarks":
                 return <BookmarkButtons isHorizontalLayout={this.isHorizontalLayout} />
             case "protectedSession":
-                return new ProtectedSessionStatusWidget();
+                return <ProtectedSessionStatusWidget />
             case "syncStatus":
                 return new SyncStatusWidget();
             case "backInHistoryButton":
diff --git a/apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx b/apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx
new file mode 100644
index 000000000..539643d4f
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx
@@ -0,0 +1,33 @@
+import { useState } from "preact/hooks";
+import protected_session_holder from "../../services/protected_session_holder";
+import { LaunchBarActionButton } from "./launch_bar_widgets";
+import { useTriliumEvent } from "../react/hooks";
+import { t } from "../../services/i18n";
+
+export default function ProtectedSessionStatusWidget() {
+    const protectedSessionAvailable = useProtectedSessionAvailable();
+
+    return (
+        protectedSessionAvailable ? (
+            <LaunchBarActionButton
+                icon="bx bx-check-shield"
+                text={t("protected_session_status.active")}
+                triggerCommand="leaveProtectedSession"
+            />
+        ) : (
+            <LaunchBarActionButton
+                icon="bx bx-shield-quarter"
+                text={t("protected_session_status.inactive")}
+                triggerCommand="enterProtectedSession"
+            />
+        )
+    )
+}
+
+function useProtectedSessionAvailable() {
+    const [ protectedSessionAvailable, setProtectedSessionAvailable ] = useState(protected_session_holder.isProtectedSessionAvailable());
+    useTriliumEvent("protectedSessionStarted", () => {
+        setProtectedSessionAvailable(protected_session_holder.isProtectedSessionAvailable());
+    });
+    return protectedSessionAvailable;
+}