Feature request: Muted post reasons. (contains rough styling solution)

[JamesKoenig]

Note this post discusses examples or topics of content a user might want to avoid

if you or someone you know is currently in a mental health crisis, and you have resources, like the suicide and crisis hotline.

Is your feature request related to a problem? Please describe.

As per the final paragraph of bug report #4707 (False Positives or otherwise inconsistent behaviors in Muted Tags/Words.) Whereas:

• Bluesky is a platform under active development, and giving users knowledge as to how and why a post is being muted may allow users to either refine their mutes, or to identify bugs in the implementation of mutes;

Whereas:

• Not all mute reasons are created equal. Opening up a show prompt to expand a post is an act of consent currently given without information as to what word caused the filter. A user who needs to be careful either due to a disabling phobia (ie. severe arachnophobia) or immediate psychiatric needs (ie. at risk of suicidal ideation), would at this point either need to use stronger features (ie. chrome addons that will affirmatively warn them of content). Alternatively, they would simply not use the muted posts for more minor annoyances (like muting an unwanted tv show title);

Whereas:

• A user who uses the mute topic and word list for both urgent or critical moderation requirements, as well as minor annoyances, runs the risk of developing a UX habit of expanding muted topics due to minor annoyances, which leads to the risk of having a negative user experience;

Describe the solution you'd like

The posts hidden by muted word should give a reason why either on hover or otherwise, and a rough idea of where the information lies. The users themselves have the knowledge of where their boundaries lie, so the granularity of scenarios should be up to the user to decide, like:

• 'post contains link with muted text: pinapple on pizza', may be something they want to expand, whereas the original post might not be.
• Posts which contain references to multiple blocked things. E.g. a user has blocked 'Jeopardy', a minor thing; 'SNL', also a minor thing; and 'eating disorder', a major thing, may give them contextual information as to whether they would want to expand the post or not; maybe the post is absurd, maybe they can deduce that it's about an SNL skit that they'd rather avoid. But this empowers them without risking them being exposed to material that they feel would put them at risk.

Describe alternatives you've considered

a disclaimer at the top of Muted Words that more critical muted information should use a given resource. Mobile application users would likely not benefit from this disclaimer.

Additional context

An example drilldown hover: An example drilldown prompt: rough concept showing it can be hovered and expanded: rough concept showing it can be expanded without hover:

Source of the above rough concept:

html:

<div dir="auto" class="css-146c3p1" style="font-size: 14px; letter-spacing: 0.25px; color: rgb(174, 187, 201); flex: 1 1 0%; text-align: left; font-weight: 500; line-height: 18px; margin-bottom: 1px;">Post hidden by Muted Text<span class="mute-details" style="padding-left: 7px;font-style: italic;display: inline-block;position: absolute;/*! background-color: gray; */"><span class="mute-details-prompt">(details)</span><div class="mute-details-dropdown">debate, chuck-e-cheeze. (in link preview)</div></span></div>

NB: the parent div above, is taken from inspect element of the existing show prompt. Also, when I was doing this quick draft I couldn't get rid of whitespace introduced by formatting before the deadline I gave myself, so it's all inline, sorry for that-- I'll post the non-oneline in a reply CSS:

.mute-details {
	padding-left: 7px;
	font-style: italic;
	display: inline-block;
	position: absolute;
}

.mute-details-prompt {
	position: relative;
}

.mute-details-dropdown {
	display: none;
	position: fixed;
	background-color: gray;
	z-index: 1;
}

.mute-details:hover .mute-details-prompt {
	display: none;
}

.mute-details:hover .mute-details-dropdown {
	display: block;
	border: 1px gray solid;
	border-radius: 2px;
	padding: 2px;
	font-style: initial;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

N.B. 'in link preview' in the above, is technically inaccurate, the child-linked-post has the muted term in the link preview, ALSO Note that Chuck-e-cheese is not in the content above, linked or otherwise, and is a fabrication.

Weaknesses of this rough implementation are that it has no overflow rules and its styling is ass. but it's a proof-of-concept.

Permission to use the post in the above screenshot was given here, and in private. This post, and the linked issue, may be edited if the permission is rescinded.