[Feature] New Web UI

[redraskal]

Greetings all! I come with a UI overhaul (in development). Let me know what you think.

1667954605463.mp4

The UI is not complete (see below), but I intend on finishing this fairly soon and wanted to show everyone a sneak peak. The indexers, logs, and settings pages are mostly finalized. Everything else is TBD.

My goal is to create minimal, fast, convenient UI and bring all of the current features as well as resolve the open issues.

I figured this workflow would be more convenient if C# developers did not need to setup npm/yarn/next.js, so I included the static build folder that replaces the previous frontend Content folder.

TODO:

• Implement Cache page
• Implement Search page
• Implement tag/category autocomplete in indexer settings
• Implement table sorting
• Frontend code cleanup

Later:

• Better text search
• Add a results per page option
• Add Sonarr/Radarr/CouchPotato/RSS client instructions
• Optimize tables for mobile
• Light mode button
• Live UI dev edits

My questions for any C# developers here:

1. How could we implement a 404 page? The html file is present, but I have no clue how a 404 page would work in this environment.
2. Is there a better way of re-writing the paths of these html files (ex. /search.html -> /search) without making a route for each one and sending a PhysicalFileResult?
3. Why is an API key required on the search results route but cookies work elsewhere?

[ilike2burnthing]

Thanks for this fairly massive contribution.

I'll leave the C# questions for a C# dev, but from looking at the video I can say I like it a lot. Obviously it's a WIP, but I'll make a few notes to expand your todo list:

• I noticed a couple of settings missing - Base path override and Base URL override. Also, FlareSolverr API URL has been changed to FlareSolverr API key.
• Users are currently able to filter configured indexers by type and tag; this would need to be added.
• I would want separate tabs for configured indexers and adding new indexers, or at least a way to hide non-configured indexers. Something which is lost with this overhaul is the ability to add multiple public indexers at once (currently achieved with checkboxes). This would likely be more cleanly implemented here with separate tabs.
• To save a little space/look cleaner, I don't think the 'infotip' and 'open in new tab' icons are needed beside the indexer name and a few other places.
• Subjectively, the dark theme is a little too dark. You could soften this completely (e.g. GitHub's 'dark dimmed' theme), or partially by making the centre panel lighter as we do now (but obviously not white) or the surround lighter. As I said though, this is subjective, so we'll see if the other maintainers hold a similar view.
• There's some really subjective things to do with colours and fonts, but I'm going to put my issues with them down to 'it is different' rather than 'it is bad'.

Well as if you didn't already have enough to do, there's a few more things. 😉

[redraskal]

Thank you for the review, you bring up great points.

I definitely agree with colors. The dark theme could be lighter and I think the colors on the public/private/semi-private badges should stay similar to the current implementation.

I don't exactly know what the purpose of Base path override and Base URL override is for? I thought it was maybe to rewrite the previous /UI/... routes but I did not end up figuring that out.

I think the infotips make sense on settings to help decrease the amount you need to refer back to the README.

My theory is the flow is better if you keep all of the possible indexers on the same page. This reduces friction. The difference is configured indexers are bubbled up. I think omitting the unused trackers will make the user think that the search will not yield unconfigured results (a toggle makes sense in my mind). Do you prefer the other (current) flow because you can more easily focus on the indexers you use?

And yes, I will think about fitting in the bulk add feature. This might make a new page for adding indexers necessary, but I have not yet thought about the options.

[redraskal]

And regarding the fonts, are you not a fan of either or don't like a font in a particular spot? What about one of these below variations?

[ilike2burnthing]

Base path override is for reverse proxies - https://github.com/Jackett/Jackett/wiki/Reverse-Proxy

Base URL override is for Docker users who want to replace the local IP or domain of Copy * Feed buttons and download links with internal Docker IPs or container names - #12882

The infotips themselves are very useful, definitely keep them, I'm just wondering if we needed the icons.

One benefit I can see with having all indexers on one page: when a private tracker opens signups, and I can't remember if I've already got an account, I only have to search in one place (rather than two) to find out. As you said, there's also less friction with them all being in one place. You hit the nail on the head though, having them either separate or hidden allows for better focus.

I prefer the font in the second screenshot.

One thing potentially to take off your list - Add Sonarr/Radarr/CouchPotato/RSS client instructions. We could just move this to the README.

[ilike2burnthing]

No rush on any of this, but just wanted to check in after a month to see if you need any further help or feedback.

[ngosang]

I think the UI needs a big re-write using modern technologies, more user-friendly, responsive, more features... I even did my try long time ago => #8180 (comment)
I'm in favor of changing it but we don't have maintainers with Front Dev skills. The user has to be committed to fixing bugs and providing long-term support. If not it is better to leave things as they are. The UI is ugly as fuck but at least it works.