From 3d5b319eb25512016b20eb8913dd6aad346063c5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 20 Sep 2025 12:30:01 +0300
Subject: [PATCH] chore(react/type_widget): bring back split orientation

---
 .../type_widgets/helpers/SplitEditor.tsx      | 20 ++++++++++++++-----
 .../abstract_split_type_widget.ts             |  3 ---
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
index f065a702c..62c1b8161 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -1,3 +1,5 @@
+import { isMobile } from "../../../services/utils";
+import { useTriliumOption } from "../../react/hooks";
 import { TypeWidgetProps } from "../type_widget";
 import "./SplitEditor.css";
 
@@ -11,16 +13,24 @@ import "./SplitEditor.css";
  * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
  */
 export default function SplitEditor({ }: TypeWidgetProps) {
+    const splitEditorOrientation = useSplitOrientation();
     return (
-        <div className="note-detail-split note-detail-printable">
+        <div className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation}`}>
             <div className="note-detail-split-editor-col">
-                <div className="note-detail-split-editor"></div>
-                <div className="admonition caution note-detail-error-container hidden-ext"></div>
+                <div className="note-detail-split-editor">Detail goes here.</div>
+                <div className="admonition caution note-detail-error-container hidden-ext">Errors go here.</div>
             </div>
             <div className="note-detail-split-preview-col">
-                <div className="note-detail-split-preview"></div>
-                <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group"></div>
+                <div className="note-detail-split-preview">Preview goes here</div>
+                <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">Buttons go here</div>
             </div>
         </div>
     )
 }
+
+function useSplitOrientation() {
+    const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
+    if (isMobile()) return "vertical";
+    if (!splitEditorOrientation) return "horizontal";
+    return splitEditorOrientation;
+}
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
index 80e7c3c15..bd2b3b567 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
@@ -92,11 +92,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
         }
 
         // Vertical vs horizontal layout
-        const layoutOrientation = (!utils.isMobile() ? options.get("splitEditorOrientation") ?? "horizontal" : "vertical");
         if (this.layoutOrientation !== layoutOrientation || this.isReadOnly !== isReadOnly) {
             this.$widget
-                .toggleClass("split-horizontal", !isReadOnly && layoutOrientation === "horizontal")
-                .toggleClass("split-vertical", !isReadOnly && layoutOrientation === "vertical")
                 .toggleClass("split-read-only", isReadOnly);
             this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
             this.isReadOnly = isReadOnly;