refactor: simplify filters components

[kurama]

Summary

This pull request restructures the monitor list header to improve the layout and responsiveness of the search bar and filter buttons.

• Foobar was changed to FooFoo, because ...

• Relates to #issue-number The filter looks weird in 2.1.0-beta.2 #6742
• Resolves #issue-number The filter looks weird in 2.1.0-beta.2 #6742 feat(dashboard): add expand/collapse all groups button #6743

Please follow this checklist to avoid unnecessary back and forth (click to expand)

• ⚠️ If there are Breaking change (a fix or feature that alters existing functionality in a way that could cause issues) I have called them out
• 🧠 I have disclosed any use of LLMs/AI in this contribution and reviewed all generated content.
  I understand that I am responsible for and able to explain every line of code I submit.
• 🔍 Any UI changes adhere to visual style of this project.
• 🛠️ I have self-reviewed and self-tested my code to ensure it works as expected.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• 🤖 I added or updated automated tests where appropriate.
• 📄 Documentation updates are included (if applicable).
• 🧰 Dependency updates are listed and explained.
• ⚠️ CI passes and is green.

Screenshots for Visual Changes

Before:

After:

• UI Modifications: Highlight any changes made to the user interface.
• Before & After: Include screenshots or comparisons (if applicable).

Event	Before	After
UP
DOWN
Certificate-expiry
Testing

[CommanderStorm]

I don't like how this is now always two lines now.

Instead, we should just allow the search bar to shrink a bit on the affected screen sizes.

Plus, on mobile this now looks kind of off.

[kurama]

I put it on two lines because, on mobile, the search bar becomes too small if it's to the right of the filters on some screens. The original design was also on two lines, btw. The filter buttons take up a lot of space. I'll try something else.

[kurama]

Quick question: why use a simple checkbox? Users don't understand its purpose when they first open the application. Furthermore, it's not possible to select just two groups directly; you have to check the checkbox, uncheck it, and then select the two groups. I find this quite cumbersome for a user. Also, having a "Cancel" button that removes the checkboxes doesn't make sense to me.

We should have: a "Select monitors" button that displays the checkboxes; if this button is not checked, nothing appears; if it is checked, it displays the checkboxes; a "select all" button; and an "actions" button.

[kurama]

What do you think about this design:

Step 1: Click the "Select monitors" button to display the checkboxes

option to select only 2 items for example

Step 2: Click the "Select all" to select all the monitors

You can perform actions by clicking the "Actions" button and/or deselecting all monitors and/or clicking the "Cancel" button to remove the checkboxes.

Is the decision not to select children from the groups intentional?

[CommanderStorm]

I think not having a "select all" button, but this be a checkbox is fairly normal.
It saves space in any sense, which is likely what we want.

Here is for example how github does this -> also just a checkbox

[kurama]

Yes, but the checkboxes are still there. We can't show/hide them on GitHub or even Gmail. I agree that it saves space.

[CommanderStorm]

How about we move the "Active" Status into the "Status" filter?

For users, these likely feel like the same thing..

[CommanderStorm]

Since this selection feature is fundamentally currently not very usefull (only pause, resume, delete) and does not provide an editing or tagging feature, I think it makes sense to not have it always on and robbing every monitor of vertical space..

[kurama]

How about we move the "Active" Status into the "Status" filter?

For users, these likely feel like the same thing..

That's a good idea, I also think that some people don't make the difference, we should choose a color for "running" and "paused" in this case.

[kurama]

Since this selection feature is fundamentally currently not very usefull (only pause, resume, delete) and does not provide an editing or tagging feature, I think it makes sense to not have it always on and robbing every monitor of vertical space..

I agree that it's a good idea not to have the checkboxes visible all the time. I simply modified the functionality to make it more user-friendly. When the user arrives, they see a simple checkbox with no information (knowing that no other checkboxes are displayed), which might confuse them.

[CommanderStorm]

I'd like to not have such a weirdly placed "select monitors" button that would mean we have to have 3 lines for this.

I would like to have 1 line and if we select something, we can have 2 lines.

[CommanderStorm]

And on the "users will find it harder", it would be really nice to have some data on this.
I some time ago did a thread on this, but I lost interest/got burried in other stuff:

• Can/should we add privacy-respecting usage metrics? #4456

Currently, I think we are both talking out of personal prefernce, which is not great.

[kurama]

I would like to have 1 line and if we select something, we can have 2 lines.

WDYT ?

[CommanderStorm]

That works!

I think for extra intuitiveness, we could add a divider and possibly small versions of the play/pause icons that we use elsewere, but I would be fine with it as-is.

[kurama]

That works!

I think for extra intuitiveness, we could add a divider and possibly small versions of the play/pause icons that we use elsewere, but I would be fine with it as-is.

Great! I'll push that.
I tried using the separator, but it didn't really convince me 😅

[kurama]

Updated !

[CommanderStorm]

This seems to work much nicer than previus work.

I have three changes:

• on mobile, this seems rather squished. I think we still need to place the search bar on top there.
• I think the way the play/pause is integrated needs a few items tewaked. For example, they cannot appear here
  
• selecting them makes the text of the Play/pause flicker

[kurama]

I've pushed two fixes, but I'm not seeing the text blinking. Could you retest and let me know?

[CommanderStorm]

Nice work, thank you ❤️

The issue that I was talking about with blinking is that in the light mode, the selection color is white.. on a background which is slightly off-white.

It is a pre-existing issue though, so lets merge this improvement.
Thank you ^^

[kurama]

Always a pleasure! Thank you! ❤️

[louislam]

Not sure if #6820 is related to this pull request.