From 4b2a4b8f7be414d0b375dc4a74e7135df23de969 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 14:29:45 +0200
Subject: [PATCH] feat(tab_navigation): reflect state of history by disabling
 the buttons

---
 .../widgets/TabHistoryNavigationButtons.tsx   | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/TabHistoryNavigationButtons.tsx b/apps/client/src/widgets/TabHistoryNavigationButtons.tsx
index d0e6afced..76fa80b6e 100644
--- a/apps/client/src/widgets/TabHistoryNavigationButtons.tsx
+++ b/apps/client/src/widgets/TabHistoryNavigationButtons.tsx
@@ -1,14 +1,16 @@
 import "./TabHistoryNavigationButtons.css";
 
+import { useEffect, useMemo, useState } from "preact/hooks";
+
 import { t } from "../services/i18n";
-import ActionButton from "./react/ActionButton";
-import { useCallback, useMemo } from "preact/hooks";
-import { handleHistoryContextMenu } from "./launch_bar/HistoryNavigation";
 import { dynamicRequire } from "../services/utils";
+import { handleHistoryContextMenu } from "./launch_bar/HistoryNavigation";
+import ActionButton from "./react/ActionButton";
 
 export default function TabHistoryNavigationButtons() {
     const webContents = useMemo(() => dynamicRequire("@electron/remote").getCurrentWebContents(), []);
     const onContextMenu = handleHistoryContextMenu(webContents);
+    const { canGoBack, canGoForward } = useBackForwardState(webContents);
 
     return (
         <div className="tab-history-navigation-buttons">
@@ -17,13 +19,37 @@ export default function TabHistoryNavigationButtons() {
                 text={t("tab_history_navigation_buttons.go-back")}
                 triggerCommand="backInNoteHistory"
                 onContextMenu={onContextMenu}
+                disabled={!canGoBack}
             />
             <ActionButton
                 icon="bx bx-right-arrow-alt"
                 text={t("tab_history_navigation_buttons.go-forward")}
                 triggerCommand="forwardInNoteHistory"
                 onContextMenu={onContextMenu}
+                disabled={!canGoForward}
             />
         </div>
     );
 }
+
+function useBackForwardState(webContents: Electron.WebContents) {
+    const [ canGoBack, setCanGoBack ] = useState(webContents.navigationHistory.canGoBack());
+    const [ canGoForward, setCanGoForward ] = useState(webContents.navigationHistory.canGoForward());
+
+    useEffect(() => {
+        const updateNavigationState = () => {
+            setCanGoBack(webContents.navigationHistory.canGoBack());
+            setCanGoForward(webContents.navigationHistory.canGoForward());
+        };
+
+        webContents.on("did-navigate", updateNavigationState);
+        webContents.on("did-navigate-in-page", updateNavigationState);
+
+        return () => {
+            webContents.removeListener("did-navigate", updateNavigationState);
+            webContents.removeListener("did-navigate-in-page", updateNavigationState);
+        };
+    }, [ webContents ]);
+
+    return { canGoBack, canGoForward };
+}