Make search page more intuitive

[krakan]

Most people who encounters the Pywb search page for the first time get thoroughly confused. And even after using the search page for a while it's inner workings remain a mystery to many users. This change tries to remedy that.

Description

• Change the "Advanced Search Options" label to just "Search Options", as "advanced" is misleading and discourages using these options.
• Skip the initial field validation as the only field that now can be invalid is an empty URL field and the green check marks clutter the UI unnecessarily. If trying to search without a URL the validation will still trigger.
• Add a "Default" match type to clarify that that options actually exists
• Change the timestamp inputs to a combination of a date and a time field to remove the possibility for inputing invalid timestamps. Keep the date and time fields separate so that users can input just a date if desired.
• Remove the empty filter-by option as it doesn't add any functionality.
• Move the "Add Filter" button to directly below the filter fields for clarity
• Move the "Clear Filters" button to directly below the individual filter clear buttons.
• Add a help button and corresponding popup with search instructions including search examples

The search instruction examples have two buttons each - one that fills in the appropriate fields and another that fills in the fields and performs the search. By filling in before searching, the fields are filled in if the user clicks the back button in the browser. The choice of the example URL is somewhat arbitrary - we happened to have the https://http.cat/206 image in both test and prod environments as well as in my local dev environment. (I suppose one could add the example URL:s as translatable strings for localization but that would be pointless for sites that haven't already implemented i18n ...)

We choose not to remove the placeholder texts "Enter a URL to search for" and "Enter an expression to filter by", although they're largely redundant and may even be considered harmful.

Also in this PR are a few strings that previously couldn't be translated.

Motivation and Context

The search page is rather hard to understand without a deep dive in various documentation.

Screenshots (if appropriate):

Search page with Search Options expanded:

Search page with Help button clicked:

Types of changes

• Replay fix (fixes a replay specific issue)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added or updated tests to cover my changes.
• All new and existing tests passed.

[tw4l]

Thanks for this @krakan ! The changes all make sense and the search instructions are very clear and helpful.

Since the Fill buttons in the help dialogue fill out multiple fields in the search form and some of them (e.g. the date fields) aren't easy to reset short of refreshing the page, I'm wondering if we should add a Reset/Clear All button. Would you mind adding an additional commit with that change?

[krakan]

Oops, I had missed to push the changes in search.js to support the new time-fields. Without this the time fields were ignored.
Also there now is a "Reset Options" button next to "Search Options".

[tw4l]

Great, thank you @krakan! We may modify the Reset buttons to be a more readable color but otherwise everything is looking great! Will merge into main and include in the next patch release shortly.