From 692d33bedf3109b8654b3f8ace6dac9fd43caf85 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 16:36:39 +0300
Subject: [PATCH] feat(options/appearance): add illustration for
 vertical/horizontal layout

---
 .../type_widgets/options/appearance.css       | 42 +++++++++++++-
 .../type_widgets/options/appearance.tsx       | 55 ++++++++++++++-----
 2 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css
index b0813bfc30..86fc83a0c6 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.css
+++ b/apps/client/src/widgets/type_widgets/options/appearance.css
@@ -8,6 +8,29 @@
     background: var(--root-background);
     overflow: hidden;
 
+    > .tab-bar.full-width {
+        height: 12px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: flex-end;
+        gap: 2px;
+        padding: 0 4px;
+        background: var(--launcher-pane-background-color);
+
+        .tab {
+            width: 24px;
+            height: 8px;
+            background: var(--main-background-color);
+            border-radius: 4px 4px 0 0;
+            opacity: 0.4;
+
+            &.active {
+                height: 10px;
+                opacity: 1;
+            }
+        }
+    }
+
     .launcher-bar {
         background: var(--launcher-pane-vert-background-color);
         display: flex;
@@ -65,8 +88,25 @@
         flex-direction: column;
 
         .tab-bar {
-            height: 10px;
+            height: 12px;
             flex-shrink: 0;
+            display: flex;
+            align-items: flex-end;
+            gap: 2px;
+            padding: 0 4px;
+
+            .tab {
+                width: 24px;
+                height: 8px;
+                background: var(--main-background-color);
+                border-radius: 4px 4px 0 0;
+                opacity: 0.4;
+
+                &.active {
+                    height: 10px;
+                    opacity: 1;
+                }
+            }
         }
 
         .note-content {
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index cc83ad545a..f92da1f4a2 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -92,8 +92,7 @@ export default function AppearanceSettings() {
 
     return (
         <div>
-            {!isMobile() && <LayoutSwitcher />}
-            {!isMobile() && <LayoutOrientation />}
+            {!isMobile() && <LayoutOptions />}
             <ApplicationTheme />
             {overrideThemeFonts === "true" && <Fonts />}
             {isElectron() && <ElectronIntegration /> }
@@ -114,22 +113,35 @@ export default function AppearanceSettings() {
     );
 }
 
-function LayoutSwitcher() {
+function LayoutOptions() {
     const [ newLayout, setNewLayout ] = useTriliumOptionBool("newLayout");
+    const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
 
     return (
         <OptionsSection title={t("settings_appearance.ui")}>
-            <RadioWithIllustration
-                currentValue={newLayout ? "new-layout" : "old-layout"}
-                onChange={async newValue => {
-                    await setNewLayout(newValue === "new-layout");
-                    reloadFrontendApp();
-                }}
-                values={[
-                    { key: "old-layout", text: t("settings_appearance.ui_old_layout"), illustration: <LayoutIllustration /> },
-                    { key: "new-layout", text: t("settings_appearance.ui_new_layout"), illustration: <LayoutIllustration isNewLayout /> }
-                ]}
-            />
+            <OptionsRow name="layout-style" label={t("settings_appearance.ui_layout_style")} stacked>
+                <RadioWithIllustration
+                    currentValue={newLayout ? "new-layout" : "old-layout"}
+                    onChange={async newValue => {
+                        await setNewLayout(newValue === "new-layout");
+                        reloadFrontendApp();
+                    }}
+                    values={[
+                        { key: "old-layout", text: t("settings_appearance.ui_old_layout"), illustration: <LayoutIllustration /> },
+                        { key: "new-layout", text: t("settings_appearance.ui_new_layout"), illustration: <LayoutIllustration isNewLayout /> }
+                    ]}
+                />
+            </OptionsRow>
+            <OptionsRow name="layout-orientation" label={t("settings_appearance.ui_layout_orientation")} stacked>
+                <RadioWithIllustration
+                    currentValue={layoutOrientation ?? "vertical"}
+                    onChange={setLayoutOrientation}
+                    values={[
+                        { key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
+                        { key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
+                    ]}
+                />
+            </OptionsRow>
         </OptionsSection>
     );
 }
@@ -248,6 +260,13 @@ function OrientationIllustration({ orientation }: { orientation: "vertical" | "h
 
     return (
         <div className={`orientation-illustration ${orientation}`}>
+            {isHorizontal && (
+                <div className="tab-bar full-width">
+                    <div className="tab active" />
+                    <div className="tab" />
+                    <div className="tab" />
+                </div>
+            )}
             {isHorizontal && (
                 <div className="launcher-bar horizontal">
                     <Icon icon="bx bx-menu" />
@@ -269,7 +288,13 @@ function OrientationIllustration({ orientation }: { orientation: "vertical" | "h
                     <div className="tree-content" />
                 </div>
                 <div className="content-pane">
-                    <div className="tab-bar" />
+                    {!isHorizontal && (
+                        <div className="tab-bar">
+                            <div className="tab active" />
+                            <div className="tab" />
+                            <div className="tab" />
+                        </div>
+                    )}
                     <div className="note-content" />
                 </div>
             </div>