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

[headquarter8302]

Format category and search term filtering is now fully functional.

[headquarter8302]

Advanced/Simple Mode is still a bit broken, the list still shows every format the conversion backend reported on Simple Mode, but it's better than showing less

[Coleisforrobot]

For options, it would be quite useful if it would be possible to add a secondary file upload. I'm sure there are other instances where it could be useful, but in APF conversion, the APF file format supports basic 1-bit colour, but the colour values are stored in a separate .AMF file which also stores some other information for the image viewer. But this was not implemented in the conversion, as there's no way to add a secondary file for the converter without requiring the user to put it in some sort of archive and then decompress that in the converter, which wouldn't be ideal.

If a user could also attach the relevant AMF it would be trivial to implement this but no such way exists as of now.

[headquarter8302]

The conversion backend is also designed to accept singular files and process just one for every operation, at the moment. The PR will adapt accordingly if there are changes upstream

[WFlyToTheSky]

on firefox it gives the following errors and just displays a white screen:

Script from “https://jor02.github.io/convert/src/ui/scripts/theme-detection.ts” was blocked because of a disallowed MIME type (“video/mp2t”). convert
Loading failed for the module with source “https://jor02.github.io/convert/src/ui/scripts/theme-detection.ts”. convert:7:67
Loading module from “https://jor02.github.io/convert/src/ui/index.tsx” was blocked because of a disallowed MIME type (“application/octet-stream”). convert
Loading failed for the module with source “https://jor02.github.io/convert/src/ui/index.tsx”. convert:18:46
Script from “https://jor02.github.io/convert/src/main.new.ts” was blocked because of a disallowed MIME type (“video/mp2t”). convert
Loading failed for the module with source “https://jor02.github.io/convert/src/main.new.ts”. convert:17:45
Unknown property ‘interpolate-size’. Declaration dropped. base.css:16:22

[headquarter8302]

on firefox it gives the following errors and just displays a white screen:

Script from “https://jor02.github.io/convert/src/ui/scripts/theme-detection.ts” was blocked because of a disallowed MIME type (“video/mp2t”). convert Loading failed for the module with source “https://jor02.github.io/convert/src/ui/scripts/theme-detection.ts”. convert:7:67 Loading module from “https://jor02.github.io/convert/src/ui/index.tsx” was blocked because of a disallowed MIME type (“application/octet-stream”). convert Loading failed for the module with source “https://jor02.github.io/convert/src/ui/index.tsx”. convert:18:46 Script from “https://jor02.github.io/convert/src/main.new.ts” was blocked because of a disallowed MIME type (“video/mp2t”). convert Loading failed for the module with source “https://jor02.github.io/convert/src/main.new.ts”. convert:17:45 Unknown property ‘interpolate-size’. Declaration dropped. base.css:16:22

Please refer to this: #73 (comment)

[Explosion-Scratch]

I really don't love this frontend - it is unnecessarily bubbly, looks very vibe-coded, the logo is super generic, and it overall makes the style of the project look way more like one of those sketchy online file converters than the cool hacked together anything-anything converter it's supposed to be. I'm very much in favor of adding new functionality (e.g. progress or whatever) but imho this makes the project take a huge step back in terms of quality.

[headquarter8302]

looks very vibe-coded,

For transparency's sake, some of the UI design were either generated or designed with AI assistance. However, the concrete implementation of it is entirely handwritten.

the logo is super generic,

It is the favicon used by the current live site: https://p2r3.github.io/convert, we took the logo from there, which is a FontAwesome icon: https://fontawesome.com/icons/arrows-spin.

As for the other points, this is the design that was greenlit by Portalrunner. If you have grieviances regarding the entire revamp as it is, you can discuss it with them. We'll always adapt and modify the PR according to any upstream changes or higher discussion results, no hard feelings from this part.

For the reason why this choice of UI was chosen, the current UI is very inconvenient to use for the average user. No search function, no dark mode, and a terrible mobile view. The PR resolves all of the aforementioned concers, and then some. It's also very familiar ("look way more like one of those sketchy online file converters")

[Explosion-Scratch]

Some comments:

1. It's useful to see which formats are supported before conversion- the current UI does this, yours does not
2. Advanced mode toggle doesn't mean anything to the user until the formats are visible - did you implement advanced mode?
3. The sidebar makes no sense - sidebars divide everything up into concrete categories, in many cases we are converting from one category to another so the user would have to realize this, click all, then do the conversion.
4. The cards for the format are huge, they show way less information than the size they take up
5. When the user has uploaded a file and it enters the screen shown in the search screenshot, how is it obvious to the user to change which file they've uploaded? Do they click the file chip in the header? Why is the file in the header? The file is the main item here
6. Where are you sourcing output settings from? Is there some schema that you created that plugins can provide settings to? The UI shown seems very hardcoded, e.g. width and height next to each other, I doubt you implemented some sort of {type: "input", name: "Width", layout: "side-by-side", side: "left", linkedWith: "height", id: "width"} to dynamically render this.
7. The icons are all over the place and don't help anyone with anything - Choose a specific icon theme, size, make all margins around them consistent, use icons when they help and don't when they don't. - For instance what does the large A button do? As a user of the site I would never know, font size? Why would I want that? Browsers implement those controls natively - similarly for dark mode, just follow user theme.
8. Remove spellcheck and autocomplete on the input

[neko782]

1, 4, 8. agree
2, 6. these are planned
3. categories help find and browse through formats
5. yeh you guessed it. the file isnt important in this screen too, why show verbose info about the file the user just gave us for half the screen? (except for advanced mode)
7. your solution on how to put advanced mode there?