Desktop: Resolves #12292: Add hover + expanded arrow behavior for Notebook/Tags header

[maggie897]

What does this PR do?

• Adds hover behavior for Notebook and Tags headers
• Changes header icon to arrow when hovered:
  • Expanded → down arrow
  • Collapsed → right arrow
• Changes header background color on hover to match app theme
• Matches the style and behavior of sidebar folders

How to test

1. Open the sidebar in the Desktop app.
2. Hover over "Notebook" and "Tags" headers.
3. Observe the following:
   • The header icon changes to an arrow.
     • Expanded → down arrow
     • Collapsed → right arrow
   • The header background color changes to match the app theme.
4. Click on the headers to expand/collapse and verify the arrow direction.
5. Make sure no other sidebar functionality is affected.

Notes

• No other functionality is changed
• Styling uses existing theme colors for hover

Related

• Related "Tags" have no hover effect #12292

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[maggie897]

I have read the CLA Document and I hereby sign the CLA

[personalizedrefrigerator]

Thank you for contributing!

For reference, the failing CI check seems unrelated to this pull request:

[@joplin/transcribe]: FAIL dist/src/api/handler/createJob.test.js
[@joplin/transcribe]:   ● createJob › should delete the original file after storing
[@joplin/transcribe]: 
[@joplin/transcribe]:     ENOENT: no such file or directory, rename './test_file.png' -> 'images/1757629668565_1e6d01d9aa1527b0b9fbf16a726621b9'
[@joplin/transcribe]: 
[@joplin/transcribe]: 
[@joplin/transcribe]: 

CC @pedr

[laurent22]

Hello, we need screenshots or video for this

[maggie897]

hover-effect.mov

Here is a quick demo of the new hover and expanded arrow behavior for the Notebook/Tags header. Please let me know if you need any further adjustments! thanks

[maggie897]

Rationale
Currently, when hovering over the NOTEBOOKS and TAGS headers, there is no visual feedback. However, clicking these headers will collapse/expand the sections. This can be confusing: if a user accidentally clicks the header, their items suddenly disappear (collapsed) and they might not know how to bring them back, since there is no visual hint that the header is clickable.

With this update, a hover background and an arrow are shown, similar to the behavior of collapsible folders. This makes it more intuitive for users to understand that the headers are clickable and expandable. The logo is preserved, but on hover it changes to an arrow, keeping the original style while adding clarity. Pls let me know if you think this makes sense, or if you prefer another solution. thank you

[laurent22]

Thank you for clarifying and providing the video, your change makes a lot of sense. I've left some comments in the PR and we can merge once they are fixed

[laurent22]

Generally event handlers should be defined using useCallback to avoid uncontrolled re-rendering issues.

[laurent22]

Please fix the indent

[maggie897]

Hi Laurent, I’ve pushed the updates you suggested — added useCallback for the hover handlers and fixed the indentation. The checks are running now. Please let me know if you’d like any further adjustments. Thanks!

[laurent22]

That looks good now, thank you for adding this @maggie897!

[tomasz1986]

Not sure if this comment under the already merged PR will be noticed, but I think that in the current form, this has accessibility issues. The problem is with the text jumping left and right when you hover and unhover the headers. Ideally, only the icon should change, but the text position should remain in the same place.

For myself, the jumping text causes physical dizziness.