TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 21:07:05 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

feat(tab_navigation): reflect state of history by disabling the buttons

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 14:29:45 +02:00
parent 5a668ede01
commit 4b2a4b8f7b
No known key found for this signature in database
1 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/client/src/widgets/TabHistoryNavigationButtons.tsx
View File

@ -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 };
}