UI Changes #82
UI Changes #82
Conversation
Refactor changeAppFavourite to include optional refresh parameter and update favorite count handling.
|
Let's discuss on espruino/BangleApps#4078 |
|
Alright, I'll convert this to a draft for now, and try to figure out if I can use my fork in the other PR |
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Bangle.js App Loader UI with visual improvements and fixes favorites handling bugs. It works in tandem with BangleApps #4078 which provides the accompanying CSS changes.
Key changes:
- Refactored favorites display to show count beside the icon instead of inside it, preventing clipping issues
- Added optimistic UI updates with animation for favoriting/unfavoriting apps
- Restructured app tile HTML to use pill-shaped button containers
Comments suppressed due to low confidence (1)
js/index.js:505
- Unused variable inDatabase.
let inDatabase=SETTINGS.appsFavoritedThisSession.find(obj => obj.id === app.id);
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
… my apps Refactor favorite handling and improve display logic.
Co-authored-by: Copilot <[email protected]>
js/index.js
Outdated
| if (button.classList && button.classList.contains("btn-favourite")) { | ||
| let favourite = SETTINGS.favourites.find(e => e == app.id); | ||
| changeAppFavourite(!favourite, app); | ||
| changeAppFavourite(!favourite, app, false); |
There was a problem hiding this comment.
This seems like an exact copy of what's on line 866 - is that right? If so maybe you could pull it out into a function to remove code duplication?
There was a problem hiding this comment.
Just consolidated it into one handleAppFavorites function. For consistency, would it be preferable if I make 'favorite' 'favourite' to match the existing spelling of things, or does it not matter that much?
There was a problem hiding this comment.
Alright, I've just done it anyway, it will allow for easier debugging and more consistency in the future...
Refactor favorite handling into a separate function for better code organization and reusability.
|
Thanks! Sorry - one more - please can you change the indentation in handleFavotriteClick so we don't have all those lint warnings? https://github.com/espruino/EspruinoAppLoaderCore/pull/82/files |
|
Should be fixed now! |
|
That's great, thanks! just merging |
2 participants
Along with BangleApps #4078, changes the UI to feel cleaner and fixes bugs with how the favorites are displayed.
Description
As I was making a PR to improve favorites handling here, I noticed certain visual discrepancies and errors, such as a number above the 100s favorited 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 this updated script to go along with it, so it won't have the pills and updated favorite buttons yet. To see those, look in the screenshots section. What's up right now on my app loader is what the main. app loader will look like after BangleApps #4078 is merged. Anyone is welcome to pop in, take a look, and share what you think!
This PR, along with BangleApps #4078:
This PR addresses the favorites count and buttons being displayed in a pill, along with the favorites count beside the icon, which can now animate.
This PR must be merged after BangleApps #4078 is merged, this handles js, while BangleApps #4078 handles the CSS, and is necessary to be merged later for a smooth change.
Screenshots
Before
After
Before
After
Favorites Animations
Screen.Recording.2025-12-01.at.3.36.54.PM.mov