[Feature] Add more id and data attributes

[echo6ix]

Synopsis

Now that the project has fully embraced third-party customization with plugins, please make the markup more accessible to styling. We can start by simply adding id and data attributes wherever relevant.

id attribute

Lets use the id attribute to define unique structural sections on each page. This would make styling more accessible (requiring less convoluted selector declarations) and help to determine particular pages.

I propose something like a #pageName-section format for ID attribute names.

/* Declares the "main" container of scene grid view page
  i.e. <div class="main container ..." id="scenes_gridview-main"> */
#scenes_gridview-main

/* Other sample declarations... */
#scenes_detailview-main
#scenes_detailview-sidebar
#scenes_detailview-video
#images_detailview-main
#images_detailview-sidebar
#images_detailview-video

data-* attribute

Lets add more data-* attributes where relevant. Some of these might be redundant or overly simple, but I'm just spitballing. I welcome people to provide feedback for more pragmatic examples

• every rating containers -> data-value="$rating"
• watch container -> data-value="$count"
• o-count container -> data-value="$count"
• organized container -> data-value=boolean
• where image placeholders exist for performer image, studio image, etc -> data-value=boolean etc

[xx790]

• any tag representation -> data-tag-id="$id"

I would also love to have data-parent-tag-ids, but that would require more work to expose those.

Purpose - to simulate tag namespaces with differently styled tags.

[xx790]

I'd argue that "value" in every data-value= should be replaced with something descriptive for each case.

If I were the one adding data attributes, I'd try to add them to the highest-level element that contains the entity whose properties are in the attributes (or the one that best describes the entity, in case it has some boilerplate wrappers). That would mean, for example, that watch counter, o-counter, etc. all will be added to the same element.

I don't know what the most common approach is - adding data attributes to most specific element or highest-level element. I guess it might depend on what selectors are most expected. (Before introduction of :has() selectors, having attributes higher in the tree was obviously beneficial.)