Display generated tags separately

[obulat]

Fixes

Fixes #4192 by @fcoveram

Description

This PR adds a separate display of machine-generated tags and tags provided by sources on the single result page following the Figma mockups.

Based on @fcoveram's suggestion, if the item only has source tags, the tags section doesn't have a visible heading.

I started to write the implementation plan for the frontend feature, but realized that this can be done in a single PR. As the project lead, do you think we need a frontend IP, @AetherUnbound?

This PR is blocked on #4379 because it has a link to the "About tags" page, but the page is not ready.
Another blocker is the text for this link. Currently, the link says "What is this?"; suggestions for the text are welcome.

The PR can be reviewed but should not be merged before #4379 is done.

Testing instructions

Run the app using just frontend/run dev (running dev:only would not update the English strings, so you would need to run dev at least once)
Go to http://localhost:8443/image/a487f4eb-ce05-43e1-acae-73c4ab090cc9 to see how machine-generated and source tags are displayed.

[zackkrida]

@obulat this looks great with the exception of an (existing) spacing issue that becomes more apparent when we add a text label above the tags.

Observe that the "Source" and "Source Tags" text labels are not in alignment. "Source" is 0.25rem to the right of "Source Tags".

I think we just need to remove horizontal padding from the dd and dt elements, and that this will fix the pages to match the mockups.

[AetherUnbound]

I started to write the implementation plan for the frontend feature, but realized that this can be done in a single PR. As the project lead, do you think we need a frontend IP, @AetherUnbound?

I think an IP would still be good, even just as a decision log for some of the questions/points that were made in the project proposal. It would not have to be a big document IMO!

[AetherUnbound]

This looks good when I run it locally! One question about some other information we have available for the generated tags.

[AetherUnbound]

Since we have accuracy and provider information available on the tags, one of the thoughts I had when thinking about how these results would manifest in the frontend was how we might be able to convey that information too. I mentioned it in the initial design issue, but I'm wondering - could the individual tags (at least for the generated section) maybe also have Source: <provider>, Accuracy: <accuracy>% tooltips available on them?

[zackkrida]

I like the idea of a tooltip. That should probably be decided on in the IP though 🤔

This PR is simple enough as is, and improves the current frontend (we disclose the clarifai tags) that maybe we should get it merged as is? Alternatively, we draft it and wait for the IP.

[AetherUnbound]

I think drafting and waiting for the IP is the best move IMO!

[fcoveram]

I don't fully understand the idea. Would you mind sharing an example or making a quick draw?

[AetherUnbound]

Forgive the poor design quality, but this is the sort of thing I had in mind when I wrote this comment:

I imagine there might be some way to include this information in an accessible way, like perhaps as part of the item's label? But this felt like a good way to still surface that information without visual overload.

[fcoveram]

Very clear mockup. Thanks @AetherUnbound

[fcoveram]

To @zackkrida's point

Observe that the "Source" and "Source Tags" text labels are not in alignment. "Source" is 0.25rem to the right of "Source Tags".

If I recall correctly, we intentionally added this spacing to avoid cropping links' focus ring. In this case, the flickr label.

We can add the same spacing in this section to make it look align. Or perhaps, and correct me if I'm wrong, investigate how to fix this site-wise issue and stop us from adding empty spacings that could break the layout.

[obulat]

We can add the same spacing in this section to make it look align. Or perhaps, and correct me if I'm wrong, investigate how to fix this site-wise issue and stop us from adding empty spacings that could break the layout.

I added a negative margin to the "Source" or "Provider" (whichever comes first) to fix this. You can see in the snapshots that they are aligned now.

Now, I looked at the snapshots again, and I feel like the tags headings are fine when there are both source and generated tags. However, when there are only source tags, the "Source tags" heading is not very clear. Why are they called "source" tags? And since the "What it is?" link is only available on the Generated tags, it is not possible to navigate to the explanation page. What do you think, @fcoveram?

[fcoveram]

I think we can safely remove the "Source tags" heading when there are no machine-generated tags. The pill set in the media details area is common content in stock and other similar services and does not need further explanation.

[obulat]

I think we can safely remove the "Source tags" heading when there are no machine-generated tags. The pill set in the media details area is common content in stock and other similar services and does not need further explanation.

Updated in 15cb517. I also added a screen-reader-only "Tags" heading.