Mark-up of the federation dropdown

[nclm]

Hi, I wanted to do some simple custom CSS on the federation dropdown, but it turns out it is not built with classes and data-indexes that are unique enough for selecting simply with CSS (I can use some :last-of-type and :not(), but I’d rather not).

This is the general structure of the Mastodon privacy options with a specific data-index for each option and classes that are specific to this dropdown:

.privacy-dropdown__dropdown
    > .privacy-dropdown__option[data-index="public"]
    > .privacy-dropdown__option[data-index="unlisted"]
    > .privacy-dropdown__option[data-index="private"]
    > .privacy-dropdown__option[data-index="direct"]

And this is Hometown federation options, with a data-index for only one option and the same classes as the privacy dropdown:

.privacy-dropdown__dropdown
    > .privacy-dropdown__option[data-index="true"]
    > .privacy-dropdown__option

Ideally it could be something like:

.federation-dropdown__dropdown
    > .federation-dropdown__option[data-index="true"]
    > .federation-dropdown__option[data-index="false"]

or even:

.federation-dropdown__dropdown
    > .federation-dropdown__option[data-index="federated"]
    > .federation-dropdown__option[data-index="local"]

But I do understand that you might want to use the existing CSS for .privacy-dropdown, so it could be something like:

.privacy-dropdown__dropdown.federation-dropdown
    > .privacy-dropdown__option[data-index="federated"]
    > .privacy-dropdown__option[data-index="local"]

Not really that important, but could make it easier to style and it’s a more meaningful markup :)

[johnholdun]

I opened a PR that gets this some of the way there: it explicitly adds data-index="false" to the local-only dropdown. The classes all still reference privacy instead of federation, because this whole component relies on preëxisting styles that I didn't want to touch, but you should be able to target the fields now by exploiting the fact that there are no true or false values in the actual privacy dropdown. Hope this helps!