From 4f305b52ebb86097d2c18b06ff3d51aa06557d67 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 23 Nov 2024 09:06:23 +0200
Subject: [PATCH] feat(client): allow user to change layout orientation

---
 .../type_widgets/options/appearance/theme.js  | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/type_widgets/options/appearance/theme.js b/src/public/app/widgets/type_widgets/options/appearance/theme.js
index 5948b373f..e9fc04b73 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/theme.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -5,6 +5,26 @@ import { t } from "../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
+    <h4>Layout</h4>
+
+    <div class="form-group row">
+        <div>
+            <label>
+                <input type="radio" name="layout-orientation" value="vertical" />
+                <strong>Vertical</strong>
+                - launcher bar is on the left (default)
+            </label>
+        </div>
+
+        <div>
+            <label>
+                <input type="radio" name="layout-orientation" value="horizontal" />
+                <strong>Horizontal</strong>
+                - launcher bar is underneath the tab bar, the tab bar is now full width.
+            </label>
+        </div>
+    </div>
+
     <h4>${t("theme.title")}</h4>
     
     <div class="form-group row">
@@ -19,7 +39,7 @@ const TPL = `
                 ${t("theme.override_theme_fonts_label")}
             </label>
         </div>
-    </div>
+    </div>    
 </div>`;
 
 export default class ThemeOptions extends OptionsWidget {
@@ -27,6 +47,11 @@ export default class ThemeOptions extends OptionsWidget {
         this.$widget = $(TPL);
         this.$themeSelect = this.$widget.find(".theme-select");
         this.$overrideThemeFonts = this.$widget.find(".override-theme-fonts");
+        this.$layoutOrientation = this.$widget.find(`input[name="layout-orientation"]`).on("change", async () => {
+            const newLayoutOrientation = this.$widget.find(`input[name="layout-orientation"]:checked`).val();
+            await this.updateOption("layoutOrientation", newLayoutOrientation);
+            utils.reloadFrontendApp("layout orientation change");
+        });
 
         this.$themeSelect.on('change', async () => {
             const newTheme = this.$themeSelect.val();
@@ -57,5 +82,8 @@ export default class ThemeOptions extends OptionsWidget {
         this.$themeSelect.val(options.theme);
 
         this.setCheckboxState(this.$overrideThemeFonts, options.overrideThemeFonts);
+
+        this.$widget.find(`input[name="layout-orientation"][value="${options.layoutOrientation}"]`)
+            .prop("checked", "true");
     }
 }