Improve video playlist search UX

[kommunarr]

Improve video playlist search UX

Pull Request Type

• Feature Implementation

Related issue

None

Description

Clicking a button to enable/disable search has felt pretty arbitrary and cumbersome in my experience. This PR:

1. Removes the playlist video search button & makes the search bar appear alongside the other playlist-info controls by default, where playlistInVideoSearchMode is now true when the search bar is non-empty.
2. Focuses the playlist search bar on Ctrl+F. This is an experimental change testing how people like the convenience of Ctrl+F for a route with a prominent search bar. I, personally, have been pressing it in my personal usage on this page thinking it would focus this bar, to minor frustration.
3. Fixes subject/verb agreement on two search labels: There are no videos in this playlist that matches your search -> There are no videos in this playlist that match your search
4. Hides the search bar when there are <2 videos in the playlist

Screenshots

Testing

• (REG) Ensure search filter is populated when searching for a video from the User Playlists page
• Ensure search filter is active/inactive based on if trimmed search input is empty
• Try using the icons with search filter active (I thought this was a reason why we had this implemented like this, but it turns out all of the playlist options work just the same)

Desktop

• OS: OpenSUSE
• OS Version: TW

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

Removes the playlist video search button & makes the search bar appear alongside the other playlist-info controls by default, where playlistInVideoSearchMode is now true when the search bar is non-empty.

Please Hide search when there is 0 or 1 vids in the playlist. I see no reason for it to be there.

Focuses the playlist search bar on Ctrl+F. This is an experimental change testing how people like the convenience of Ctrl+F for a route with a prominent search bar. I, personally, have been pressing it in my personal usage on this page thinking it would focus this bar, to minor frustration.

Please list it in https://docs.freetubeapp.io/usage/keyboard-shortcuts/ after PR is merged.

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

This PR does not close #4924. That is about the add to playlist window.

[PikachuEXE]

No necessary in this PR
Maybe also add Ctrl+F to playlists view to be consistent?

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

This is an experimental change testing how people like the convenience of Ctrl+F for a route with a prominent search bar.

Thinking about this again and i think this should belong in the Experimental Settings with a toggle

[kommunarr]

Thinking about this again and i think this should belong in the Experimental Settings with a toggle

Honest q: why? This is something people will either type in or not type in.

[absidue]

Could you please update the CSS for the searchInputsRow class in ft-playlist-info.scss and remove the grid stuff, as that causes a wider margin on the right side than the left side, as there is a blank colum with an 8px gap.

[PikachuEXE]

@absidue 's comment about searchInputsRow addressed?

[kommunarr]

I somehow missed that comment. So many self-facepalms since coming back lol. Lemme check

[PikachuEXE]

Either no margin at all or have margin on both sides
Also I think there should be spacing between the input box and the buttons above (8px?)

SC after applying my suggested changes

[kommunarr]

@PikachuEXE Thank you for concealing my secret that I put inline instead of block and forgot to hit save 🤦‍♂️