Draft: UI Revamp

[Jor02]

This PR introduces a major UI revamp of the converter application application.

Progress

• Create initial low-fidelity wireframes
• Turn low-fidelity wireframes into high-fidelity ones (using Figma).
• Turn high-fidelity wireframes into actual TSX + CSS.
• Add dark/light theme toggle, make colors reactive
• Split big TSX files into smaller reusable and maintainable components.
• Cleanup main.ts for better maintainability
• Port all functionality of the existing application to the new buttons/components.

Anyone is free to provide any feedback on the design or implementation (even small nitpicks are appreciated) as we want to develop the best possible experience for users!

Current version:

Initial draft wireframe:

This PR should:

• resolve Add Dark Mode to the website #138
• resolve Add a link to the repository and/or the Youtube video #166
• resolve [Feature] Improved Accessibility #235
• resolve [Bug] Unexpected behavior when clicking the convert button on mobile. #310
• resolve [Bug] Multiple file input not supported in file picker #419
• resolve [feature request, webUi] dividing the supported file format buttons by catagory #21

[Jor02]

Anyone's free to provide feedback and thoughts on this design, I wouldn't want to create something that people wouldn't like to use or navigate.

[Version33]

I would like to propose a dark mode toggle

[AL1L]

It'd be very nice if the new UI showed progress of what it was doing. Downloading converters/scripts/binaries/etc and what step of the conversion route its on.

Would also be nice if you could pick the path it takes.

Also, options. If converting from SVG to PNG, would be nice to specify the resolution/dpi. Or if a converter which takes a ppt to mp4 and you have the option to specify the frame rate.

[Jor02]

It'd be very nice if the new UI showed progress of what it was doing. Downloading converters/scripts/binaries/etc and what step of the conversion route its on.

Oh, that's a good idea, I'll check if this could be implemented nicely.

Would also be nice if you could pick the path it takes.

Also, options. If converting from SVG to PNG, would be nice to specify the resolution/dpi. Or if a converter which takes a ppt to mp4 and you have the option to specify the frame rate.

I do agree that these features would be great to have, but I think that these might be outside of the scope of the UI revamp as these would require bigger backend changes.

[p2r3]

I like this UI proposal. Concerning "options", I do feel like we should have some kind of "settings" menu, even if it would be underutilized at the moment. We'll likely want that stuff later, so having a space for it is a good idea.

[Jor02]

Okay, I've added a dark mode toggle button and a dropdown/accordion for additional options for if the converter would allow for it.

[foxdefox-wq]

i wanna see a treeview of the path it took to convert the file

[p2r3]

i wanna see a treeview of the path it took to convert the file

That's a bit ambitious for now. Let's keep this to just a redesign with room for more features in the future.

[Cactys12]

I think we should make the github link on the bottom corner into a proper link with a logo beside it to make people more likely to notice it and contribute to the project?

[headquarter8302]

Hi. I'd like to work on a prototype of this design on a fork in collaboration with @Jor02 : https://github.com/headquarter8302/convert/tree/73-ui-revamp We're doing it in Jor's repo

Before I begin, as we're using Bun+Vite, would it be fine if I begin to divide and compartmentalize each component? Currently everything is just lumped in main.ts, making the redesign harder to do

[p2r3]

Yeah, sure. Restructuring is fine.

[Jor02]

I've turned the low fidelity wireframes into higher fidelity ones:

Like before, any feedback from anyone (even small nitpicks) would be appreciated!

[KobieEllis]

Really love this project!
I made a mock up of this with Gemini. I added a couple of things like a separate settings page and multi file upload.

I also have the code that was generated, not sure if that's okay or would be better to do from scratch for compatibility anyways.

Edit: Sorry for the XL no effort images that I added to this the rest of this hard work. My apologies

[pixelkat5]

[index.html](https://github.com/user-attachments/files/25356614/index.html)

Does this work?

[Casinii-it]

Minor suggestion, it would be great if you could cancel the current conversion without having to refresh the page

[amythiz]

There is full info for the file you are converting to ( PNG Portable Network Graphics (image/png) ) but the drop-down for the input file format just says PNG. If there are more than one format with the same mime type and extension, it will be harder to choose the correct one. Maybe make it show full info when the drop-down menu is opened, and go to short info when it is closed

[p2r3]

I'm not a fan of all the LLM-generated frontend stuff. I'm glad that y'all are eager to help, but vibecoding a frontend is not a sustainable idea. As I understand it, the people who authored this PR are working on their own implementation. Let them finish what they started, we don't need to rush this by sloppinating a prompt.

[WFlyToTheSky]

it would be nice if there was also a swap button to swap which you were converting to vs from

[headquarter8302]

Small update, the UI mock for the upload page has been finalized. 0 AI, just all-natural, free range, handwritten CSS and HTML/JSX :)

[headquarter8302]

Dark mode

[neko782]

should really ping @headquarter8302 not me :p looks great!! much better imo

[headquarter8302]

Hi. Yes. I'll be participating actively once I've fully migrated my setup to my new laptop. In the mean time, I'll be ready to integrate the PR!

[Explosion-Scratch]

The PR to the repo is here - The UI upgrades are relatively in place (all conversion aspects working fine) but I'll add some more things today or so

[headquarter8302]

Awesome. When you're done with the additions, just let us know here

[Explosion-Scratch]

@headquarter8302 I'm all done!

[headquarter8302]

Awesome. I'll pull the changes locally and review it in a few hours. I'm currently at work and I won't be free until 20:00 to 21:00 AST 21:00-22:00 EDT, darn daylight saving

[headquarter8302]

I've merged your branch, and as such I can proudly proclaim:

Conversion has been implemented!

This PR is ready to be marked as ready to review and merge @p2r3

[Explosion-Scratch]

@headquarter8302 I implemented a few other misc. things that would be good to bundle with this revamp, allowing handlers to suggest routes. More details are in the PR here. If this is outside of the scope of this PR lmk, but essentially this drastically improves EPUB and PPTX and allows handlers to do something like this:

public suggestedRoutes = [["html", "typ", "pdf"], ["html", "typ"]];

Which means that for said handler, it essentially looks to the graph like it directly outputs PDF but in reality it goes html -> typ -> pdf (the format is file extensions or fileext:plugin in the array). Graph routing still works the same but this prevents greedy only next format aware routing from taking over superior routes.

[headquarter8302]

It looks like it's outside of the scope of this PR (src/ui/**). This PR is already a tad bit bloated due to needing an overhaul of the entire front end system, so I think it's best to leave that for a separate PR targeting the upstream repo and not this fork