gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 15:49:00 +02:00
Code Issues Actions 17 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

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

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