From 346ad1e8a34a70c67258d6eb2aae551962e17866 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 14:06:57 +0200
Subject: [PATCH] feat(tab_navigation): add the buttons on vertical layout

---
 apps/client/src/layouts/desktop_layout.tsx            |  8 +++++++-
 .../src/widgets/TabHistoryNavigationButtons.css       |  7 +++++++
 .../src/widgets/TabHistoryNavigationButtons.tsx       | 11 +++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/widgets/TabHistoryNavigationButtons.css
 create mode 100644 apps/client/src/widgets/TabHistoryNavigationButtons.tsx

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 41a6bb68f..f446ef25a 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -45,6 +45,7 @@ import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
 import Breadcrumb from "../widgets/Breadcrumb.jsx";
+import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 
 export default class DesktopLayout {
 
@@ -102,7 +103,12 @@ export default class DesktopLayout {
                         new FlexContainer("column")
                             .id("rest-pane")
                             .css("flex-grow", "1")
-                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, <TitleBarButtons />).css("height", "40px"))
+                            .optChild(!fullWidthTabBar,
+                                new FlexContainer("row")
+                                    .child(<TabHistoryNavigationButtons />)
+                                    .child(new TabRowWidget())
+                                    .optChild(customTitleBarButtons, <TitleBarButtons />)
+                                    .css("height", "40px"))
                             .child(
                                 new FlexContainer("row")
                                     .filling()
diff --git a/apps/client/src/widgets/TabHistoryNavigationButtons.css b/apps/client/src/widgets/TabHistoryNavigationButtons.css
new file mode 100644
index 000000000..4d040b9a5
--- /dev/null
+++ b/apps/client/src/widgets/TabHistoryNavigationButtons.css
@@ -0,0 +1,7 @@
+.component.tab-history-navigation-buttons {
+    contain: none;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    margin-inline-end: 0.5em;
+}
diff --git a/apps/client/src/widgets/TabHistoryNavigationButtons.tsx b/apps/client/src/widgets/TabHistoryNavigationButtons.tsx
new file mode 100644
index 000000000..cac468c2d
--- /dev/null
+++ b/apps/client/src/widgets/TabHistoryNavigationButtons.tsx
@@ -0,0 +1,11 @@
+import ActionButton from "./react/ActionButton";
+import "./TabHistoryNavigationButtons.css";
+
+export default function TabHistoryNavigationButtons() {
+    return (
+        <div className="tab-history-navigation-buttons">
+            <ActionButton icon="bx bx-left-arrow-alt" />
+            <ActionButton icon="bx bx-right-arrow-alt" />
+        </div>
+    )
+}