TL(그룹)별 안 읽은 항목 숨기는 CSS

일단 제가 하려는 일을 먼저 설명해 드리는 것이 좋겠습니다.

저희 포럼의 상위 TL(Trust Level) 사용자들은 unseen을 자주 사용합니다. 그래서 이를 top menu에 추가했습니다. 하지만 TL0/1 사용자에게는 이 기능이 필요하지 않습니다. 그들에게는 latest와/또는 categories가 정확히 동일한 내용을 보여주거든요. 따라서 그들에게 unseen은 그저 노이즈일 뿐입니다.

TL1 사용자에게는 이 기능이 필요할 수도 있지만, 그들은 활동성이 부족하여 TL1에 머무는 경우가 많습니다. 그리고 다시 한번 말씀드리지만, 활동성이 부족하기 때문에 latest에서도 동일한 결과를 얻을 수 있습니다.

그래서 저는 TL2 미만인 모든 사용자에게 unseen을 숨기기로 결정했습니다.

복붙(복사&붙여넣기) 박사인 저는 그룹별로 레이아웃과 표시되는 부분을 제한하고 변경할 수 있다는 것을 알고 있습니다. 하지만 필요한 검색어를 잘 모르다 보니 적합한 자료를 찾지 못하고 있습니다.

그러니… 누군가 올바른 방향을 알려주실 수 있을까요?

이상적인 세상이라면 그룹별로 top menu를 조정할 수 있는 컴포넌트가 있을 것입니다. 혹은 기본값을 설정해 두고 사용자가 보고 싶은 것만 선택할 수 있게 하는 것도 가능합니다. 하지만 우리는 이상적인 세상에 살고 있지는 않죠. 글쎄요, 같은 꿈의 세상이라면 CSS도 알 수 있을 텐데 말입니다 :joy:

제가 이 문제를 실제보다 크게 보고 있을 위험이 있습니다. 제 세상에서는 약 95%의 사용자가 모바일을 사용하며, 이들은 드롭다운 메뉴를 전혀 사용하지 않습니다 — 그래서 애초에 unseen을 보지조차 못하거든요.

음, 저는 이전에 그룹, TL, 또는 사용자를 대상으로 CSS를 삽입할 수 있는 테마 컴포넌트를 개발한 적이 있습니다.

메타에서 누군가 비슷한 컴포넌트를 개발해 봤는지 확실하지는 않지만… 만약 없다면 제가 올릴 겁니다

업데이트: 제 구현 방식이 매우 특이해서 일반 원리는 다음과 같습니다… 코드 자체는 올리지 않겠습니다

<script type="text/discourse-plugin" version="0.8">
try {
    let your_tl = -1; // -1 means anon
    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;}'; //Or some else
        document.head.appendChild(style);
    }
} catch(err) {
    // ...
}
</script>