From 4cfe59271f6036713007be85383ab599ecf0617d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 08:12:39 +0200
Subject: [PATCH] feat(layout/note_actions): integrate switch split orientation

---
 .../widgets/FloatingButtonsDefinitions.tsx    |  2 +-
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index ce650aa70..644e87f5e 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -90,7 +90,7 @@ function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefault
 }
 
 function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: FloatingButtonContext) {
-    const isEnabled = note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
+    const isEnabled = !isNewLayout && note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
     const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
     const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
 
diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index dadfe9a3b..68f4ab1bd 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -8,7 +8,7 @@ import { t } from "../../services/i18n";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
 import ActionButton from "../react/ActionButton";
 import { FormFileUploadActionButton } from "../react/FormFileUpload";
-import { useNoteProperty } from "../react/hooks";
+import { useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
 import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
 import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab";
@@ -21,6 +21,7 @@ interface NoteActionsCustomProps {
 
 interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
     noteType: NoteType;
+    isReadOnly: boolean;
     isDefaultViewMode: boolean;
     parentComponent: Component;
 }
@@ -30,17 +31,21 @@ interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
  * from the rest of the note items and the buttons differ based on the note type.
  */
 export default function NoteActionsCustom(props: NoteActionsCustomProps) {
-    const noteType = useNoteProperty(props.note, "type");
+    const { note } = props;
+    const noteType = useNoteProperty(note, "type");
     const parentComponent = useContext(ParentComponent);
+    const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
     const innerProps: NoteActionsCustomInnerProps | null | undefined = noteType && parentComponent && {
         ...props,
         noteType,
         isDefaultViewMode: props.noteContext.viewScope?.viewMode === "default",
-        parentComponent
+        parentComponent,
+        isReadOnly
     };
 
     return (innerProps &&
         <div className="note-actions-custom">
+            <SwitchSplitOrientationButton {...innerProps} />
             <RefreshButton {...innerProps} />
             <CopyReferenceToClipboardButton {...innerProps} />
             <NoteActionsCustomInner {...innerProps} />
@@ -139,3 +144,15 @@ function RefreshButton({ note, noteType, isDefaultViewMode, parentComponent, not
         />
     );
 }
+
+function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: NoteActionsCustomInnerProps) {
+    const isEnabled = note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
+    const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
+    const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
+
+    return isEnabled && <ActionButton
+        text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
+        icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
+        onClick={() => setSplitEditorOrientation(upcomingOrientation)}
+    />;
+}