chore(status_bar): address requested changes

apps/client/src/widgets/layout/StatusBar.tsx

@@ -4,7 +4,7 @@ import { Locale } from "@triliumnext/commons";
 import clsx from "clsx";
 import { type ComponentChildren } from "preact";
 import { createPortal } from "preact/compat";
-import { useContext, useMemo, useRef, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import { CommandNames } from "../../components/app_context";
 import NoteContext from "../../components/note_context";
@@ -263,6 +263,11 @@ interface AttributesProps extends StatusBarContext {
 function AttributesButton({ note, attributesShown, setAttributesShown }: AttributesProps) {
     const [ count, setCount ] = useState(note.attributes.length);
 
+    // React to note changes.
+    useEffect(() => {
+        setCount(note.attributes.length);
+    }, [ note ]);
+
     // React to changes in count.
     useTriliumEvent("entitiesReloaded", (({loadResults}) => {
         if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {

apps/client/src/widgets/react/hooks.tsx

@@ -349,9 +349,9 @@ export function useActiveNoteContext() {
 
     useEffect(() => {
         setNote(noteContext?.note);
-    }, [ notePath ]);
+    }, [ noteContext ]);
 
-    useTriliumEvents([ "setNoteContext", "activeContextChanged", "noteSwitchedAndActivated", "noteSwitched" ], ({}) => {
+    useTriliumEvents([ "setNoteContext", "activeContextChanged", "noteSwitchedAndActivated", "noteSwitched" ], () => {
         const noteContext = appContext.tabManager.getActiveContext() ?? undefined;
         setNoteContext(noteContext);
         setNotePath(noteContext?.notePath);

apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx

@@ -17,19 +17,20 @@ export function LocaleSelector({ id, locales, currentValue, onChange, defaultLoc
     const { activeLocale, processedLocales } = useProcessedLocales(locales, defaultLocale, currentValueWithDefault);
     return (
         <Dropdown id={id} text={activeLocale?.name}>
-            {processedLocales.map(locale => {
+            {processedLocales.map((locale, index) => (
-                if (typeof locale === "object") {
+                (typeof locale === "object") ? (
-                    return <FormListItem
+                    <FormListItem
+                        key={locale.id}
                         rtl={locale.rtl}
                         checked={locale.id === currentValue}
                         onClick={() => {
                             onChange(locale.id);
                         }}
                     >{locale.name}</FormListItem>
-                } else {
+                ) : (
-                    return <FormDropdownDivider />
+                    <FormDropdownDivider key={`divider-${index}`} />
-                }
+                )
-            })}
+            ))}
             {extraChildren && (
                 <>
                     <FormDropdownDivider />