CSS для скрытия невидимых элементов согласно TL, то есть по группе

Разработка
1

Возможно, мне стоит сначала описать, что я пытаюсь сделать.

Пользователи форума с более высоким уровнем (TL) любят использовать unseen. Поэтому я добавил эту ссылку в top menu. Но для TL0/1 она не нужна, поскольку для них latest и/или categories показывают ровно то же самое. Для них unseen — просто лишний шум.

Пользователи TL1 могли бы в ней нуждаться, но они остаются на уровне TL1, потому что недостаточно активны. И снова: из-за их низкой активности latest даёт тот же результат.

Поэтому я решил скрыть unseen от всех пользователей ниже уровня TL2.

Как доктор наук в области копипаста, я знаю, что могу ограничивать и изменять макет и видимые части для каждой группы. Но я не могу найти подходящий ресурс, так как не знаю нужных поисковых терминов.

Так… не мог бы кто-нибудь указать мне правильное направление?

В идеальном мире у нас был бы компонент для настройки top menu в зависимости от группы. Или же мы могли бы установить значения по умолчанию и позволить пользователю решать, что ему показывать, а что нет. Но мы ведь не живём в идеальном мире, верно? Кстати, в том же мире мечты я бы ещё и CSS знал :joy:

Возможно, я преувеличиваю значимость этой проблемы. В моём случае около 95 % пользователей используют мобильные устройства и вообще не открывают выпадающие меню — так что они даже не видят unseen.

2

Ну, я ранее разработал компонент темы, который может вставлять CSS для групп, уровней доверия (TL) или пользователей.

Не уверен, разрабатывал ли кто-то на meta аналогичный компонент ранее… но если нет, я опубликую его

Обновление: Общий принцип выглядит так, учитывая, что моя реализация довольно странная… я не буду её публиковать.

<script type="text/discourse-plugin" version="0.8">
try {
    let your_tl = -1; // -1 означает аноним
    if (api.getCurrentUser()?.trust_level) {
        your_tl = api.getCurrentUser().trust_level;
    }
    if (your_tl < 1) {
        var style = document.createElement('style');
        style.innerHTML = '#tl1-only{display:none;}'; // Или что-то другое
        document.head.appendChild(style);
    }
} catch(err) {
    // ...
}
</script>