From cd0763e8071e38ca17a2d425976f7e5c29b2760e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 16:32:37 +0300
Subject: [PATCH] feat(options/text): add visual representation for layout

---
 .../type_widgets/options/appearance.css       | 80 +++++++++++++++++++
 .../type_widgets/options/appearance.tsx       | 53 ++++++++----
 2 files changed, 119 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css
index 70a0c9a695..b0813bfc30 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.css
+++ b/apps/client/src/widgets/type_widgets/options/appearance.css
@@ -1,3 +1,83 @@
+.orientation-illustration {
+    width: 170px;
+    height: 130px;
+    border: 1px solid var(--main-border-color);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    background: var(--root-background);
+    overflow: hidden;
+
+    .launcher-bar {
+        background: var(--launcher-pane-vert-background-color);
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+
+        .tn-icon {
+            font-size: 12px;
+            opacity: 0.5;
+        }
+
+        &.horizontal {
+            flex-direction: row;
+            height: 14px;
+            padding: 0 4px;
+            gap: 6px;
+        }
+
+        &.vertical {
+            flex-direction: column;
+            width: 24px;
+            padding: 4px 0;
+            gap: 4px;
+        }
+    }
+
+    .main-area {
+        display: flex;
+        flex-grow: 1;
+        min-height: 0;
+    }
+
+    .tree-pane {
+        width: 40px;
+        flex-shrink: 0;
+        padding: 8px 4px;
+
+        .tree-content {
+            height: 100%;
+            background: repeating-linear-gradient(
+                180deg,
+                var(--main-text-color) 0px,
+                var(--main-text-color) 4px,
+                transparent 4px,
+                transparent 8px
+            );
+            opacity: 0.15;
+            border-radius: 2px;
+        }
+    }
+
+    .content-pane {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        .tab-bar {
+            height: 10px;
+            flex-shrink: 0;
+        }
+
+        .note-content {
+            flex-grow: 1;
+            background: var(--main-background-color);
+            border-top-left-radius: 6px;
+            margin: 0;
+        }
+    }
+}
+
 .old-layout-illustration {
     width: 170px;
     height: 130px;
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index dc4a3bdc26..cc83ad545a 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -12,7 +12,6 @@ import Button from "../../react/Button";
 import Column from "../../react/Column";
 import FormCheckbox from "../../react/FormCheckbox";
 import FormGroup from "../../react/FormGroup";
-import FormRadioGroup from "../../react/FormRadioGroup";
 import FormSelect, { FormSelectWithGroups } from "../../react/FormSelect";
 import FormText from "../../react/FormText";
 import { FormTextBoxWithUnit } from "../../react/FormTextBox";
@@ -232,26 +231,52 @@ function LayoutOrientation() {
 
     return (
         <OptionsSection title={t("theme.layout")}>
-            <FormRadioGroup
-                name="layout-orientation"
+            <RadioWithIllustration
+                currentValue={layoutOrientation ?? "vertical"}
+                onChange={setLayoutOrientation}
                 values={[
-                    {
-                        label: t("theme.layout-vertical-title"),
-                        inlineDescription: t("theme.layout-vertical-description"),
-                        value: "vertical"
-                    },
-                    {
-                        label: t("theme.layout-horizontal-title"),
-                        inlineDescription: t("theme.layout-horizontal-description"),
-                        value: "horizontal"
-                    }
+                    { key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
+                    { key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
                 ]}
-                currentValue={layoutOrientation} onChange={setLayoutOrientation}
             />
         </OptionsSection>
     );
 }
 
+function OrientationIllustration({ orientation }: { orientation: "vertical" | "horizontal" }) {
+    const isHorizontal = orientation === "horizontal";
+
+    return (
+        <div className={`orientation-illustration ${orientation}`}>
+            {isHorizontal && (
+                <div className="launcher-bar horizontal">
+                    <Icon icon="bx bx-menu" />
+                    <Icon icon="bx bx-send" />
+                    <Icon icon="bx bx-file-blank" />
+                    <Icon icon="bx bx-search" />
+                </div>
+            )}
+            <div className="main-area">
+                {!isHorizontal && (
+                    <div className="launcher-bar vertical">
+                        <Icon icon="bx bx-menu" />
+                        <Icon icon="bx bx-send" />
+                        <Icon icon="bx bx-file-blank" />
+                        <Icon icon="bx bx-search" />
+                    </div>
+                )}
+                <div className="tree-pane">
+                    <div className="tree-content" />
+                </div>
+                <div className="content-pane">
+                    <div className="tab-bar" />
+                    <div className="note-content" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
 function ApplicationTheme() {
     const [ theme, setTheme ] = useTriliumOption("theme", true);
     const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");