From 8135fa09c35f7c83e0285f9fd02fae285a97d686 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 1 Dec 2024 21:06:01 +0200
Subject: [PATCH] feat(native-buttons): differentiate background based on
 layout

---
 src/public/app/desktop.js             | 12 ++++++++----
 src/public/stylesheets/style.css      | 11 ++++++++---
 src/public/stylesheets/theme-next.css | 12 ++++++------
 src/routes/index.ts                   |  1 +
 src/views/desktop.ejs                 |  2 +-
 5 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js
index e72471c86..6d558c55e 100644
--- a/src/public/app/desktop.js
+++ b/src/public/app/desktop.js
@@ -57,10 +57,14 @@ function initTitleBarButtons() {
     function applyTitleBarOverlaySettings() {
         const electronRemote = utils.dynamicRequire("@electron/remote");    
         const currentWindow = electronRemote.getCurrentWindow();
-        const documentStyle = window.getComputedStyle(document.documentElement);
-        const color = documentStyle.getPropertyValue("--native-titlebar-background");
-        const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground");
-        currentWindow.setTitleBarOverlay({ color, symbolColor });
+        
+        const style = window.getComputedStyle(document.body);
+        const color = style.getPropertyValue("--native-titlebar-background");
+        const symbolColor = style.getPropertyValue("--native-titlebar-foreground");
+
+        if (color && symbolColor) {
+            currentWindow.setTitleBarOverlay({ color, symbolColor });
+        }
     }
     
     // Update the native title bar buttons.
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 19e6ae470..f9b06ab77 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -20,9 +20,7 @@
 }
 
 :root {
-    --submenu-opening-delay: 300ms;
-    --native-titlebar-background: var(--left-pane-background-color);
-    --native-titlebar-foreground: var(--main-text-color);
+    --submenu-opening-delay: 300ms;    
 }
 
 html {
@@ -40,6 +38,13 @@ body {
     color: var(--main-text-color);
     font-family: var(--main-font-family);
     font-size: var(--main-font-size);
+
+    --native-titlebar-background: var(--main-background-color);
+    --native-titlebar-foreground: var(--main-text-color);
+}
+
+body.layout-horizontal {
+    --native-titlebar-background: var(--left-pane-background-color);
 }
 
 body.mobile .desktop-only {
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index efce67b9d..79ccc59b2 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -347,7 +347,7 @@
     background-color: var(--root-background);
 }
 
-#root-widget.horizontal-layout {
+body.layout-horizontal {
     --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color);
     --launcher-pane-size: var(--launcher-pane-horizontal-size);
     --active-tab-background-color: var(--launcher-pane-background-color);
@@ -369,7 +369,7 @@
  *  Launcher pane
  */
 #launcher-container,
-#root-widget.horizontal-layout > .horizontal {
+body.layout-horizontal > .horizontal {
     align-items: center;
 }
 
@@ -687,7 +687,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     position: relative;
 }
 
-#root-widget.horizontal-layout .tab-row-container:after {
+body.layout-horizontal .tab-row-container:after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -702,11 +702,11 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     height: var(--tab-height) !important;    
 }
 
-#root-widget.horizontal-layout .tab-row-container {
+body.layout-horizontal .tab-row-container {
     padding-top: calc((var(--tab-bar-height) - var(--tab-height)));    
 }
 
-#root-widget.horizontal-layout .tab-row-widget-container {
+body.layout-horizontal .tab-row-widget-container {
     margin-top: 0;
     position: relative;
     overflow: hidden;
@@ -722,7 +722,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     transition: none;
 }
 
-#root-widget.horizontal-layout .tab-row-widget .note-tab .note-tab-wrapper {
+body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;   
 }
diff --git a/src/routes/index.ts b/src/routes/index.ts
index f5951d3c6..3590e6627 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -32,6 +32,7 @@ function index(req: Request, res: Response) {
         csrfToken: csrfToken,
         themeCssUrl: getThemeCssUrl(options.theme),
         headingStyle: options.headingStyle,
+        layoutOrientation: options.layoutOrientation,
         mainFontSize: parseInt(options.mainFontSize),
         treeFontSize: parseInt(options.treeFontSize),
         detailFontSize: parseInt(options.detailFontSize),
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 59a4b2b4f..a2c9aa401 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -6,7 +6,7 @@
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
     <title>TriliumNext Notes</title>
 </head>
-<body class="desktop heading-style-<%= headingStyle %>">
+<body class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %>">
 <noscript><%= t("javascript-required") %></noscript>
 
 <script>