Highlight dangerous filters in the user interface

[Sergey-Lyapin]

Issue Details

Some filters break popular services, we should warn users about it by highlighting these filters in the UI.
For example 1Hosts (Pro) breaks Facebook services.
AdguardTeam/HostlistsRegistry#50

Proposed solution

Highlight the filter with a color, text warning, etc.

Alternative solution

No response

[ameshkov]

@Chinaski1
The idea is that we'd like to label some blocklists as problematic in HostlistsRegistry.

When a blocklist is labeled with this tag:

1. It should be clear from the dashboard interface that the blocklist is problematic.
2. When the user tries to enable it, we should warn them that this blocklist is known to be breaking stuff.

[Chinaski1]

Internal ID: AGDNS-2041/42

[KnightmareVIIVIIXC]

Here are some considerations:

Icon Choice

• Informational Icon: A simple information icon is a good choice as it's universally understood and easily recognizable.
• Shield Icon: While a shield icon might be visually appealing, it might not be as intuitive for indicating a warning. Users might associate it with protection rather than a caution.

Placement of the Icon

After the List Name: This is a logical placement as it directly associates the warning with the specific list.

Hover Behavior

Tooltip: A tooltip that appears when the user hovers over the icon or list name is a clean and efficient way to display the warning.

Warning Message Content

• Conciseness: Keep the warning message brief and to the point. Avoid technical jargon and use clear language.
• Actionable Advice: If possible, provide a specific recommendation or course of action based on the issue.

Alternative: Advisory Link

• Clear Indication: An advisory link placed next to the homepage link is a good visual cue.
• Hover Behavior: A tooltip or a window can be used to display the detailed warning when the user hovers over or clicks the link.

Example

• Informational Icon: 1Hosts Pro ⓘ
• Advisory Link: 1Hosts Pro | Advisory Homepage Source
• Tooltip Message:

Strict: Prioritizes privacy & safety over functionality,
e.g, ||graph.facebook.com^