UI: various improvements

[adoriandoran]

No description provided.

[github-actions]

🖥️ App preview is ready!

🔗 Preview URL: https://pr-9758.trilium-app.pages.dev
📖 Production URL: https://app.triliumnotes.org

✅ All checks passed

This preview will be updated automatically with new commits.

[gemini-code-assist]

Code Review

This pull request introduces styling adjustments for tooltips and collapsible sections, and modifies the AttributeEditor to trigger help tooltips on click instead of focus. A review comment identifies a performance issue where the tooltip configuration object is recreated on every render, potentially causing UI flickering; it suggests memoizing the configuration and using a manual trigger to avoid event conflicts.

[gemini-code-assist]

The configuration object for useTooltip is created inline on every render. Since useTooltip uses this object as a dependency in its useEffect hook (as seen in apps/client/src/widgets/react/hooks.tsx), the tooltip will be disposed and re-initialized every time the AttributeEditor component re-renders. This happens on every keystroke in the editor due to the onChange handler calling setCurrentValue. This is inefficient and can cause UI flickering. Using useMemo ensures the configuration object remains stable across renders.

Additionally, since the tooltip visibility is already explicitly managed by the component's state and a separate useEffect (lines 119-125), you might consider setting the trigger to "manual" to avoid potential conflicts with Bootstrap's internal event listeners.

Suggested change

	const { showTooltip, hideTooltip } = useTooltip(wrapperRef, {
	trigger: "focus",
	trigger: "click",
	html: true,
	title: HELP_TEXT,
	placement: "bottom",
	offset: "0,30"
	offset: "0,30",
	});
	const tooltipConfig = useMemo(() => ({
	trigger: "click",
	html: true,
	title: HELP_TEXT,
	placement: "bottom",
	offset: "0,30"
	}), []);
	const { showTooltip, hideTooltip } = useTooltip(wrapperRef, tooltipConfig);