How restrict access to button pin/unpin

AI-generated summary

The discussion is about restricting access to the pin/unpin button on Discourse. HeadShot shared a code attempt using JavaScript and CSS to hide the pin/unpin buttons for users with a trust level below 4, but it did not work as expected. Arkshine suggested using CSS to hide the buttons and recommended installing a component to add the current user group names to the <body> element, allowing for targeting specific groups with CSS, such as :not(.group-trust_level_4) #topic-footer-buttons .pinned-button. CocoQuark noted that there are multiple places where a topic can be pinned/unpinned, including at the bottom of the topic, next to a topic’s title on a topic view, and next to a topic’s title on a topic list.

i try this code in header

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(() => {
        let userTrustLevel = parseInt(Discourse.User.current().trust_level);
        
        if (userTrustLevel < 4) {
            document.querySelectorAll(".pin-topic, .unpin-topic").forEach(button => {
                button.style.pointerEvents = "none"; 
                button.style.opacity = "0.5"; 
                button.title = "You don't have permission to pin topics"; 
            });
        }
    }, 1000);  complet
});

and in css

.d-header-icons .pin-topic, 
.d-header-icons .unpin-topic, 
.controls .pin-topic, 
.controls .unpin-topic {
    display: none !important;
}

but simple user with trust 1 or 0 can tap to pin button and can see it.

Automatically unpin topics when the user reaches the bottom by default. this is off
Automatically unpin topics when the user reaches the bottom. this is off

Hey, welcome! :wave:

Are you talking about these buttons?

You can hide the buttons with CSS only.

Install first this component: CSS Classes for Current User's Groups. It will add the current user group names, e.g., group-<name>, into the <body> element.

Then you can target anything:

:not(.group-trust_level_4) #topic-footer-buttons .pinned-button {
  display: none;
}

Also note there are several places a topic can be pinned/unpinned: