"Low visual stimulation" plugin/setting to fade out semi-transparently the sidebar opacity when not in use

[nekohayo]

Especially at night (with dark themes), but also in daytime (to an extent), the sidebar, with its gazillion tags, emojis/colors, and task counts, can be a bit visually overloading and distract from the currently selected list of tasks.

I think some users (at least me :) may appreciate having GTG automatically reduce visual overload by fading out (maybe even with an animation?) the sidebar 5 seconds after the mouse has last been over it; and instantly (no animation) set the opacity back to 100% when the mouse moves over it again.

---

Possible technical gotcha: you might need to also take into account keyboard navigation (if some people use the keyboard, with the Tab key, to navigatue the UI) or the focused state of the sidebar or its children. And check for the presence of the sidebar (if it's displayed/activated) of course.

P.s.: whoever wishes to implement this as a plugin (or core feature) could take some inspiration from Liferea's "get focus" plugin, detailed in this ticket. That ticket also has some screenshots that illustrate the transparency in action. Though I wouldn't suggest we call this feature "Get focus" in GTG, maybe something like "Zen sidebar" or "Auto-fade sidebar" to avoid collision with a potential "Focus mode" plugin/feature for GTG (whatever it might be, if someday there is one).

[Neui]

Quick test since I remembered GTK has basic CSS support and CSS has animations: Start with environment variable GTK_DEBUG=interactive, go to the CSS tab and insert:

@keyframes makevisible {
    from {
        opacity: 0.5; /* Something sets it to 1.0 instantly */
    }
    to {
        opacity: 1.0;
    }
}

@keyframes makedimmed {
    to {
        opacity: 0.5;
    }
}

scrolledwindow.sidebar treeview {
    animation-name: makedimmed;
    animation-delay: 3s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

scrolledwindow.sidebar treeview:focus,
scrolledwindow.sidebar treeview:hover /* Hover doesn't work yet */ {
    animation-name: makevisible;
    animation-delay: 0;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

https://user-images.githubusercontent.com/1196130/150338519-919e4abd-8bcf-4daa-af70-25af6206edaa.mp4

[diegogangl]

The fact that we can do this with css is unbelievably cool. Just to add another hint, we can build css in strings and load them into widgets. You need to get a css provider and register it in the style context of MainWindow (the string has to be encoded in bytes tho).

This is a great issue for someone looking to get started. I think it'd be best as a plugin though, just register the provider when the plugin loads and then remove it when it unloads.