[CSS] Enhance UI, and add animations for an overall cleaner look

[RKBoss6]

There is a discussion for this where you can give your opinion to make this better here!

Description

As I was making a PR to improve favorites handling in AppLoaderCore, I noticed certain visual discrepancies and errors with the App Loader, such as a number in the 100s for favorites often clipping past the icon and becoming less readable as a result, so I decided to somewhat modernise the interface to feel fresh, as well as fix layout bugs and errors.

It is up on my personal app loader, if anyone wants to take a look. It doesn't have the updated AppLoaderCore to go along with it, so it won't have the pills and updated favorite buttons yet. What's up right now on my app loader is what the main. app loader will look like after this is merged. Anyone is welcome to pop in, take a look, and share what you think!

This PR, along with EspruinoAppLoaderCore #82:

• Adds more rounded edges
• Adds padding between app tiles
• Rounds the search bar and borders
• Moves the favorites count from inside the icon to beside it, for better readability
• Adds an animation when you favorite/unfavorite an app to help the UI feel more fluid
• Adds a pill-shaped background of the app buttons (favorite, install, open IDE, etc.)
• Adds rounded corners and more padding to modals
• Fixes alignment of device images in the select devices modal

This PR addresses all the stylistic changes, EspruinoAppLoaderCore #82 addresses the favorite animations and layout. These CSS changes are designed to work with the current version of AppLoaderCore, so both do not need to be merged at the same time, however, this needs to be merged first.

No user functionality was changed with this, this is purely a cosmetic upgrade to help the app loader feel fresh and fix bugs.

Screenshots

Before

After

Before

After

Favorites Animations

Screen.Recording.2025-12-01.at.3.36.54.PM.mov

[thyttan]

I like the look of this - round feels friendly.

tagging @gfwilliams

[gfwilliams]

Thanks! I like the look, but I do have a few reservations:

Can we remove the 'focus' border on the tabs when you click them? It just looks a bit odd now

The search box looks a bit odd. It's rounded loads on the left, but then the button on thr right is only rounded a little.

The 'Read more...' link has a load of padding top and bottom too.

In general there is a lot of padding now. In a large window on my 1440p monitor I now only see 8 apps whereas before I saw 12, on my phone I see only 2.5 apps when I first open the window.

On my phone I notice a lot of padding down the left and right - so much so that the app description probably only takes around 50% of the width of the display even though the text is quite small. The result is I just see an awful lot of blank space and not much actual data - there's going to be tons of scrolling and it'll make it even harder to find apps that aren't right at the top.

I think we could really do with some more input on this - I'll post on the main forum with a link here - but my feeling is I like the roundedness, but I think we should go a bit easier on the padding (maybe look at whether the description can be made to go all the way to the right of the tile rather than stopping at the buttons - that could help)

edit: it'd also be really good if you could set your personal app loader up with all the changes (I guess that would involve changing the URL of AppLoaderCore to your own personal one)

[RKBoss6]

Since I've made commits in here in order to bring my index.js changes, I'll mark this as a draft, and when everyone likes the new look, then I'll make a new PR with only code changes from this repository.

[thyttan]

Oops I suppose:

[RKBoss6]

Hmm, this is from a phone, right? What model? I think we can just adjust the pixel thresholds for it to become one list... What do you think of the tabs now? I added a bit of an animation, and tried to keep the existing style, while making it cleaner.