Refactor UI elements to custom web components for reusability

[civilblur]

About
Refactor the current UI elements, such as buttons, boxes, input fields, to web components.

I want to avoid using larger libraries/frameworks for this, to avoid bloat. Currently considering Alpine.js or pure js/native web components.

Why
Refactoring to web components would allow for reusing each element while only having one source of truth, making it easy to update and maintain.

Currently, all the UI elements are hardcoded in pure HTML/CSS as it was fast to implement, and at the beginning, the project didn't have a clear goal of feature expansion.

As there are now plans to provide post-processing options, many UI elements will be reused. It will also make it easier to maintain i18n when utilizing component attributes.
I.e.:

• File renaming: [Feature Request] File renaming #9
• Basic image editing: [Feature Request] Add basic image manipulation for obfuscation purposes #21
• i18n: Add translations #26 中文汉化 Chinese Translation / Localization #29
• Cropping: [Feature Request] Image Cropping #1
• A/B comparison: [Feature Request] Add a/b image compare with slider and zoom when doing single image compression #30
• Discussion of post-processing: Minor UX change -> big impact #39 (comment)

[civilblur]

Currently contemplating switching to Svelte.

I was hoping to keep the project as pure vanilla JavaScript without any build step, as I wanted to challenge myself to work without frameworks, but I'm starting to see the limitations (mainly concerning maintainability).