From b54603b7d7e682b37c27ae963b35083a6c77fe78 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Mar 2025 10:43:24 +0200
Subject: [PATCH] feat(mermaid): change icon based on new layout

---
 .../floating_buttons/switch_layout_button.ts  | 21 +++++++++++++++++--
 .../abstract_split_type_widget.ts             |  5 +++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/public/app/widgets/floating_buttons/switch_layout_button.ts b/src/public/app/widgets/floating_buttons/switch_layout_button.ts
index 6dc2cfde2..612c66d1f 100644
--- a/src/public/app/widgets/floating_buttons/switch_layout_button.ts
+++ b/src/public/app/widgets/floating_buttons/switch_layout_button.ts
@@ -1,3 +1,4 @@
+import type { EventData } from "../../components/app_context.js";
 import options from "../../services/options.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
@@ -5,7 +6,7 @@ const TPL = `
 <button type="button"
     class="switch-layout-button"
     title="Switch layout">
-    <span class="bx bxs-dock-bottom"></span>
+    <span class="bx"></span>
 </button>
 `;
 
@@ -19,14 +20,30 @@ export default class SwitchSplitOrientationButton extends NoteContextAwareWidget
 
     doRender(): void {
         super.doRender();
-
         this.$widget = $(TPL);
         this.$widget.on("click", () => {
             const currentOrientation = options.get("splitEditorOrientation");
             options.save("splitEditorOrientation", toggleOrientation(currentOrientation));
         });
+        this.#adjustIcon();
         this.contentSized();
     }
+
+    #adjustIcon() {
+        const currentOrientation = options.get("splitEditorOrientation");
+        const upcomingOrientation = toggleOrientation(currentOrientation);
+        const $icon = this.$widget.find("span.bx");
+        $icon
+            .toggleClass("bxs-dock-bottom", upcomingOrientation === "vertical")
+            .toggleClass("bxs-dock-left", upcomingOrientation === "horizontal");
+    }
+
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
+        if (loadResults.isOptionReloaded("splitEditorOrientation")) {
+            this.#adjustIcon();
+        }
+    }
+
 }
 
 function toggleOrientation(orientation: string) {
diff --git a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
index 7e008ba7d..2bd4d3e1a 100644
--- a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
@@ -153,8 +153,9 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
             return;
         }
 
-        this.$widget.toggleClass("split-horizontal", layoutOrientation === "horizontal");
-        this.$widget.toggleClass("split-vertical", layoutOrientation === "vertical");
+        this.$widget
+            .toggleClass("split-horizontal", layoutOrientation === "horizontal")
+            .toggleClass("split-vertical", layoutOrientation === "vertical");
         this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
         this.#setupResizer();
     }