diff --git a/apps/client/src/widgets/buttons/left_pane_toggle.ts b/apps/client/src/widgets/buttons/left_pane_toggle.ts index 80725a3e8..99fa0530b 100644 --- a/apps/client/src/widgets/buttons/left_pane_toggle.ts +++ b/apps/client/src/widgets/buttons/left_pane_toggle.ts @@ -19,10 +19,10 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget { return "bx-sidebar"; } - return options.is("leftPaneVisible") ? "bx-chevrons-left" : "bx-chevrons-right"; + return this.currentLeftPaneVisible ? "bx-chevrons-left" : "bx-chevrons-right"; }; - this.settings.title = () => (options.is("leftPaneVisible") ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel")); + this.settings.title = () => (this.currentLeftPaneVisible ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel")); this.settings.command = () => (this.currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane"); @@ -38,7 +38,9 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget { entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { if (loadResults.isOptionReloaded("leftPaneVisible") && document.hasFocus()) { - this.currentLeftPaneVisible = options.is("leftPaneVisible"); + // options.is("leftPaneVisible") changed — it may or may not be the same as currentLeftPaneVisible, but as long as the window is focused, the left pane visibility should be toggled. + // See PR description for detailed explanation of multi-window edge cases: https://github.com/TriliumNext/Notes/pull/1962 + this.currentLeftPaneVisible = !this.currentLeftPaneVisible; this.refreshIcon(); } } diff --git a/apps/client/src/widgets/containers/left_pane_container.ts b/apps/client/src/widgets/containers/left_pane_container.ts index 2b8221553..c9016b8ae 100644 --- a/apps/client/src/widgets/containers/left_pane_container.ts +++ b/apps/client/src/widgets/containers/left_pane_container.ts @@ -4,20 +4,26 @@ import appContext, { type EventData } from "../../components/app_context.js"; import type Component from "../../components/component.js"; export default class LeftPaneContainer extends FlexContainer { + private currentLeftPaneVisible: boolean; + constructor() { super("column"); + this.currentLeftPaneVisible = options.is("leftPaneVisible"); + this.id("left-pane"); this.css("height", "100%"); this.collapsible(); } isEnabled() { - return super.isEnabled() && options.is("leftPaneVisible"); + return super.isEnabled() && this.currentLeftPaneVisible; } entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { if (loadResults.isOptionReloaded("leftPaneVisible") && document.hasFocus()) { + // options.is("leftPaneVisible") changed — it may or may not be the same as currentLeftPaneVisible, but as long as the window is focused, the left pane visibility should be toggled. + this.currentLeftPaneVisible = !this.currentLeftPaneVisible; const visible = this.isEnabled(); this.toggleInt(visible);