Draft: UI Revamp

[Jor02]

This draft PR introduces the initial concept for a major UI revamp of the application.

Currently this PR only has the a low-fidelity wireframe for gathering thoughts and feedback.

The goal of this version of the PR is to:

• Share the proposed direction early
• Gather feedback on layout, UX flow, and structure

Next Steps

• Incorporate feedback from this review
• Produce high-fidelity mockups

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

[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

[headquarter8302]

Formats can now be searched for and selected.

No, actual conversion hasn't been implemented yet

[headquarter8302]

I would like to suggest you enable GitHub pages in the fork, that way some people can try it without needing to clone the repo.

That depends on @Jor02's discretion

[SPLATPLAYS]

I'll give some criticism,
I find it annoying that I can't search for formats to convert from and am required to upload a file before selecting possible formats to convert to. Perhaps a button next to advanced mode that lets you see input formats?

This does not seem obvious enough, it could be difficult for users to understand:

Perhaps definitions could be incoroporated into different file formats (seperate pages explaining them could also be useful but that seems out of the scope of this revamp)

Perhaps there could also be some kind of conversion menu split like the current ui but with these improvements?

[headquarter8302]

Thank you for the suggestions! I was starting to doubt if there are going to be any feedback from other users.

@SPLATPLAYS
I'm busy at the moment. I'll get back to you as soon as possible

Edit: Oh god, I received your criticism comment as an email way later than your GH pages suggestion, my apologies for the confusion

[headquarter8302]

Formats are now distinguished by their handlers, which is a step closer to achieving the conversion process

[BewilderedDuck]

Cool UI, I would be very glad if this was added!