Feature: Show tags on filtered posts

[marcustyphoon]

Concept

One thing that New XKit's Blacklist has which we don't is the ability to show the tags on filtered posts (not just the one that's filtered). This would probably be quite simple to add.

[marcustyphoon]

Not sure if the plan is to make a project board for features, but if it is this should probably be on it; there are a lot of comments on the recent New XKit blog post wishing for it.

[marcustyphoon]

Ehhh.

import { keyToCss } from '../../utils/css_map.js';
import { postSelector, buildStyle } from '../../utils/interface.js';
import { pageModifications } from '../../utils/mutations.js';
import { timelineObject } from '../../utils/react_props.js';

const tagsAttribute = 'data-filtered-post-show-tags';

const filteredScreenSelector = `${postSelector} ${keyToCss('filteredScreen')}`;

export const styleElement = buildStyle(`
[${tagsAttribute}]:has(> ${keyToCss('filteredScreen')})::after {
  content: attr(${tagsAttribute});

  display: block;
  padding: var(--post-padding);
  padding-top: 0;

  font-size: 0.9em;
  line-height: normal;
  white-space: pre-wrap;
  background-color: rgba(var(--black), 0.07);
  color: rgba(var(--black), 0.65);
}
`);

export const main = async () =>
  pageModifications.register(filteredScreenSelector, filteredScreens =>
    filteredScreens.forEach(async filteredScreen => {
      const { tags } = await timelineObject(filteredScreen);
      if (tags.length) {
        filteredScreen.parentElement.setAttribute(tagsAttribute, tags.map(tag => `#${tag}`).join(' '.repeat(3)));
      }
    })
  );

export const clean = () => $(`[${tagsAttribute}]`).removeAttr(tagsAttribute);

[AprilSylph]

I think this would be good as a Tweaks option! I can play with the CSS to make it feel more native, too, if you want. PR it!