* Implement divider for video "more dropdown menu"

[PikachuEXE]

Pull Request Type
Please select what type of pull request this is:

• Feature Implementation

Related issue
IRC chat:

Non-pressing question: if we were to ever have breakout sections on hover of the three dots video section dropdown, would the better organization be "Open >" & "Copy >" or "YouTube >" & "Invidious >"?

Description

• Update the dropdown opened by a button with title "More Options",
  located on video card/box rendered in views like search result/history/trending,
  so that the options are reordered and group together.
  Dividers are used for grouping.
• Menu item spacing reduced slightly.

Screenshots (if appropriate)
New screenshots (all dropdown updated by this PR, too lazy to take for all themes)

Old screenshots (before divider opacity reduced):

Testing (for code that is not small enough to be easily understandable)
A: More Options

• Visit Trending
• Click "More Options" button
• Click on each item to if works as labeled

B: Download Video

• View a video (e.g. https://youtu.be/vyuJRJ6GQ5k)
• Click "Download Video" button
• Click on each item to if works as labeled (I only tested limited options)

C: Change Video Formats

• View a video (e.g. https://youtu.be/vyuJRJ6GQ5k)
• Click "Change Video Formats" button
• Click on each item to if works as labeled

Desktop (please complete the following information):

• OS: MacOS
• OS Version: 11.6
• FreeTube version: 732b2d6

Additional context
Add any other context about the problem here.

[PikachuEXE]

dropdownValues & dropdownNames should be removed eventually
Just not sure if you want me to update the other 2 places using ft-icon-button to use the new API (i.e. more code changes to review)

Edit: This probably won't make into 0.15 release, no need to rush

[efb4f5ff-1298-471a-8973-3d47447115dc]

IIRC there is only one more dropdown like this

[PikachuEXE]

2 more

• The download one you shown
• The video format one (DASH/Legacy/Audio) on the right of download button you pressed

[PikachuEXE]

Updated all existing ft-icon-button users to use new API, updated PR description & screenshots about that
Not tested in all themes after divider style fix

[efb4f5ff-1298-471a-8973-3d47447115dc]

found another dropdown https://youtube.com/playlist?list=PLF1CC814A59FF59DE

[PikachuEXE]

@efb4f5ff-1298-471a-8973-3d47447115dc
I assume you are referring to the button shown in the following screenshot
And it's using ft-list-dropdown instead of ft-icon-button thus there is no need to update it

[peepo5]

I feel like this is an improvement, but it is a workaround for universal new share menu implimentation:
#1450

[PikachuEXE]

But #1450 does not mention anything for "Mark as Watched"

[peepo5]

that could be a seperate button centered at the top

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM! Only thing i might change is in Dark mode it is hard to that an option is highlighted when u hover over it.

[PikachuEXE]

Well I don't have good idea to fix that and that problem is not specific to this PR

[PikachuEXE]

In progress (just restarted today)
Will take some time
Those code conflicts~~~
Well those actually resolved but now it's bugged lol

[PikachuEXE]

Merge conflict fixed and whatever bug(s) I found fixed
But I have only tested the dropdown in screenshots (and I only test them briefly)
So please see if there are any more dropdowns that should be tested

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM

[absidue]

The reduction of the vertical padding around the menu options combined with the dividers make the longer options look quite cramped.

I think 8px might be a good comprimise that still looks quite good without taking up too much space:

Here is what it looks like with 10px:

[PikachuEXE]

@absidue
8px now
Any functionality related bug found?

[absidue]

I didn't find any functionality issues, thanks for updating the padding.

[ChunkyProgrammer]

LGTM