App Loader: Add dropdowns for sorting and filtering

[RKBoss6]

This stems from the discussion at #7920, where I had asked about having dropdowns for sorting and filtering, rather than a bunch of chips before. They got pretty messy with such a huge load of them on the screen, particularly for phones, so I made dropdowns instead. It's up on my app loader, and I have screenshots below. Any suggestions/feedback is very appreciated, check it out!
There is a JS component in appLoaderCore, which I'll try to get a PR for soon! Until then, I'm hoping we can discuss to make something everyone enjoys using.

Screenshots:

Before:

After:

[bobrippling]

Very nice!

[Copilot]

Pull request overview

This PR replaces the chip-based filtering and sorting UI with dropdown menus in the App Loader, aiming to reduce visual clutter especially on mobile devices. The changes introduce three new dropdowns for device type selection, app filtering, and sorting options, along with a relocated search form.

Changes:

• Replaced chip-based filter/sort controls with dropdown menus wrapped in a styled "pill" container
• Reorganized the search form to be inline with the dropdown controls
• Added CSS styling for dropdown menus, including positioning, z-index management, and the dropdowns-pill container
• Commented out the old chip-based UI implementation

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 14 comments.

File	Description
index.html	Restructured the app library interface to use three dropdown menus (device type, filter, sort) instead of chips, moved search form into the dropdown container, and commented out old chip UI
css/main.css	Added styling for dropdown menus, menu items, dropdowns-pill container, search form flexbox layout, and dropdown positioning with z-index controls

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gfwilliams]

I think we need to wait for espruino/EspruinoAppLoaderCore#87 to go in before we merge this? As we're just putting this in, please could you change <a sortid="explore">Random</a> to <a sortid="random">Random</a> (and the relevant bits in the EspruinoAppLoaderCore pr?)

... also the EspruinoAppLoaderCore pr still needs the indentation changing and that 'chips' is not defined error fixing

[RKBoss6]

Finally gave a chunk of my time to polish this up, I've added back all the tooltips and hiding of the sorts that have no data (modified/created), and I'd say this is good to go. I know you're on vacation Gordon, so feel free to look at this whenever you have time. I would like to get in #88 for AppLoaderCore first though, and then we can sort this out and get it merged in nicely ;)

[gfwilliams]

I noticed the changes does not seem to carry over to the android.html version yet.

Good point! Yes, android.html needs changing too - you'll just have to diff the two and copy the changes.

Also something looks a bit screwy on desktop now - pretty sure it didn't look like that before!

I've made it so menus close when you tap the header

The dropdown menus? Seems like a good idea!

[RKBoss6]

Also something looks a bit screwy on desktop now - pretty sure it didn't look like that before!

Should be fixed now! I'll get android.html changed as well. Just out of curiosity, what does android.html do? Is it a gadgetbridge override for connection on load or something similar?

[gfwilliams]

Thanks! Yes, it's what Gadgetbridge loads for its embedded app loader. Some options are removed/added, but also we change the scaling and have some extra code in there which handles sending all the IO to the Bangle through the Android app rather than using Web Bluetooth

[thyttan]

The 'My apps' and 'More' screens seem broken:

[RKBoss6]

Should be fixed now! 😅

[thyttan]

Yes - but not on the /android.html version 😉

[RKBoss6]

Ah yeah - fixed it as well - and I pushed the overall android changes from my demo branch to this branch as well, I had forgotten to do that originally

[thyttan]

Those pages look good on my end now for both versions :)

[thyttan]

I've made it so menus close when you tap the header,

Cool! But at least on android I need to tap twice on the header to dismiss where I'd expected once to be enough. Tried this in Brave browser and Firefox mobile.

This is still the case on Android for me. I see on my laptop it works as I expect - one click on header to open the menu and then the next click on header closes it.

But on Android it's currently (both the android.html and standard version):

• one touch on the header to open the menu,
• a second touch of the header does nothing,
• and then a third touch of the header closes the menu.

[RKBoss6]

Hmm, if it works fine on desktop, it might be a quirk with how phones handles interaction from touch, as it just uses the default button characteristics in the code. It looks like it taps once to open dropdown, second time deselects what was pressed in dropdown, and the third time closes it - I'm not sure if we really can do anything about that if that is the case, as it's a phone behavior to make websites compatible with hover/touch features. But you can also tap outside the dropdown to close it, and as you say, tapping twice still gets the expected result so it should be fine...
It works fine on desktop for me, but doesn't work on phone as well. Perhaps we leave this for a separate PR?

[thyttan]

Yes, I won't say it should be a blocker against merging. It would have been nice if it was achievable though :) Thanks for taking it this far!

[thyttan]

But you can also tap outside the dropdown to close it

The UI problem with this is one may happen to click a hyperlink (or something else) that was sitting in the background and opening it without meaning to. It's not a super big problem but annoying if it happens.

[RKBoss6]

Yeah, that's a thought I had as well. I'd say we try to get this PR merged, and then we can work on a dedicated PR to help out here :)

[gfwilliams]

Thanks - it's looking good! Please can you sort out the comments on https://github.com/espruino/BangleApps/pull/4150/changes#r3379415116 though

Mainly as I'd said in #4150 (comment) some features are added/removed when running in Gadgetbridge, so we need to make sure those stay the same as they were.

[RKBoss6]

All the buttons and discrepancies with android.html should be fixed now - I also added back those comments that I think were removed accidentally during a merge. I also changed the android.html button code's indents, as the old version had one too many indents.

[gfwilliams]

Great, thanks! Merging now, and I'll pull in the new core

[thyttan]

EDIT 2: I spoke to soon - I hadn't updated submodules on my computer. Sorry for the noise. It seems to work as expected.

I think we broke the app loader if served from localhost, in that the Library page no longer shows any apps.

If I revert to 9ad0c90 then serving on localhost seems to work fine. But current master at f37d830 shows no apps under Library. Also if I checkout RKBoss6/dropdown-chips-final I get the same thing.

The dev app loader at espruino.github.io/BangleApps seems to work as it should though.

EDIT: Or, and I will go look now, I may need to update submodules on my maching. Will report back. (Yes, that was it)

[gfwilliams]

Yes, confirmed here - all seems to work fine, although it looked a bit odd before I hit the 'refresh' button