bluesky-social / social-app

The Bluesky Social application for Web, iOS, and Android
https://bsky.app
MIT License
8.15k stars 1.08k forks source link

Feature request: reasons for posts matching muted-text moderation setting. (contains rough styling solution) #4708

Open JamesKoenig opened 2 months ago

JamesKoenig commented 2 months ago

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:

Whereas:

Whereas:

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:

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: example drilldown hover An example drilldown prompt: example drilldown prompt rough concept showing it can be hovered and expanded: drilldown hover, expanded rough concept showing it can be expanded without hover: prompt, showing expanded post 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.

JamesKoenig commented 2 months ago

The above example html, formatted to display nicely, this was not done above because I couldn't get the styling to work right within the deadline I set myself (lol). So it will not render the same result as the screenshots.

<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">
                <span class="mute-details-prompt">(details)</span>
                <div class="mute-details-dropdown">debate, chuck-e-cheeze. (in link preview)</div>
            </span>
</div>