gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 17:18:53 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

fix(ribbon): classic toolbar becoming empty sometimes

Browse Source
This commit is contained in:
Elian Doran 2025-09-18 13:39:30 +03:00
parent ba740eff9b
commit c4560c2bc8
No known key found for this signature in database
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/client/src/widgets/ribbon/Ribbon.tsx
View File

@ -164,22 +164,26 @@ export default function Ribbon() {
const noteType = useNoteProperty(note, "type");
const titleContext: TitleContext = { note };
const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
const filteredTabs = useMemo(
() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)),
const computedTabs = useMemo(
() => TAB_CONFIGURATION.map(tab => {
const shouldShow = typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext);
return {
...tab,
shouldShow
}
}),
[ titleContext, note, noteType ]);
// Automatically activate the first ribbon tab that needs to be activated whenever a note changes.
useEffect(() => {
const tabToActivate = filteredTabs.find(tab => typeof tab.activate === "boolean" ? tab.activate : tab.activate?.(titleContext));
if (tabToActivate) {
setActiveTabIndex(tabToActivate.index);
}
const tabToActivate = computedTabs.find(tab => tab.shouldShow && (typeof tab.activate === "boolean" ? tab.activate : tab.activate?.(titleContext)));
setActiveTabIndex(tabToActivate?.index);
}, [ note?.noteId ]);
// Register keyboard shortcuts.
const eventsToListenTo = useMemo(() => TAB_CONFIGURATION.filter(config => config.toggleCommand).map(config => config.toggleCommand) as EventNames[], []);
useTriliumEvents(eventsToListenTo, useCallback((e, toggleCommand) => {
const correspondingTab = filteredTabs.find(tab => tab.toggleCommand === toggleCommand);
const correspondingTab = computedTabs.find(tab => tab.toggleCommand === toggleCommand);
if (correspondingTab) {
if (activeTabIndex !== correspondingTab.index) {
setActiveTabIndex(correspondingTab.index);
@ -187,7 +191,7 @@ export default function Ribbon() {
setActiveTabIndex(undefined);
}
}
}, [ filteredTabs, activeTabIndex ]));
}, [ computedTabs, activeTabIndex ]));
return (
<div className="ribbon-container" style={{ contain: "none" }}>
@ -195,8 +199,8 @@ export default function Ribbon() {
<>
<div className="ribbon-top-row">
<div className="ribbon-tab-container">
{filteredTabs.map(({ title, icon, index, toggleCommand }) => (
<RibbonTab
{computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
shouldShow && <RibbonTab
icon={icon}
title={typeof title === "string" ? title : title(titleContext)}
active={index === activeTabIndex}
@ -218,7 +222,7 @@ export default function Ribbon() {
</div>
<div className="ribbon-body-container">
{filteredTabs.map(tab => {
{computedTabs.map(tab => {
const isActive = tab.index === activeTabIndex;
if (!isActive && !tab.stayInDom) {
return;