From eff5b6459d2dfb412fd3357e65ef523e728258a7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 22 Aug 2025 15:11:12 +0300
Subject: [PATCH] chore(react/ribbon): fix event

---
 apps/client/src/widgets/react/hooks.tsx       | 27 +++++++++++++++++++
 .../src/widgets/ribbon/BasicPropertiesTab.tsx | 10 ++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 1e91c475a..66100105f 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -166,6 +166,33 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
     ]
 }
 
+export function useTriliumOptionBeta(name: OptionNames, needsRefresh?: boolean): [string, (newValue: OptionValue) => Promise<void>] {
+    const initialValue = options.get(name);
+    const [ value, setValue ] = useState(initialValue);
+
+    const wrappedSetValue = useMemo(() => {
+        return async (newValue: OptionValue) => {
+            await options.save(name, newValue);
+
+            if (needsRefresh) {
+                reloadFrontendApp(`option change: ${name}`);
+            }
+        }
+    }, [ name, needsRefresh ]);
+
+    useTriliumEventBeta("entitiesReloaded", useCallback(({ loadResults }) => {
+        if (loadResults.getOptionNames().includes(name)) {
+            const newValue = options.get(name);
+            setValue(newValue);
+        }
+     }, [ name ]));
+
+    return [
+        value,
+        wrappedSetValue
+    ]
+}
+
 /**
  * Similar to {@link useTriliumOption}, but the value is converted to and from a boolean instead of a string.
  * 
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index ab5c35011..f82223c0a 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -3,7 +3,7 @@ import Dropdown from "../react/Dropdown";
 import { NOTE_TYPES } from "../../services/note_types";
 import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormList";
 import { getAvailableLocales, t } from "../../services/i18n";
-import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption, useTriliumOptionJson } from "../react/hooks";
+import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption, useTriliumOptionBeta, useTriliumOptionJson } from "../react/hooks";
 import mime_types from "../../services/mime_types";
 import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
 import server from "../../services/server";
@@ -267,13 +267,13 @@ function SharedSwitch({ note }: { note?: FNote | null }) {
 }
 
 function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
-    const [ languages ] = useTriliumOption("languages");
+    const [ languages ] = useTriliumOptionBeta("languages");
     const DEFAULT_LOCALE = {
         id: "",
         name: t("note_language.not_set")
     };
 
-    const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language") ?? "";
+    const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
 
     const locales = useMemo(() => {
         const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
@@ -307,14 +307,16 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
         return locales;
     }, [ languages ]);
 
+    
     return (
         <div className="note-language-container">
             <Dropdown>
                 {locales.map(locale => {
                     if (typeof locale === "object") {
+                        const checked = locale.id === (currentNoteLanguage ?? "");
                         return <FormListItem
                             rtl={locale.rtl}
-                            selected={locale.id === currentNoteLanguage}
+                            checked={checked}
                             onClick={() => setCurrentNoteLanguage(locale.id)}
                         >{locale.name}</FormListItem>
                     } else {