Conversation
Added shuffling of apps in 'Explore' mode when not sorted by relevance.
|
Thanks - is the available for testing somewhere? Please can you sort out the lint warnings? The padding, but also Can you rename I'm also a little concerned about the |
|
Hi! This is available for testing on my app loader. As for auto align, I tried looking in a bunch of places to see about it, and there's just no way we can get something like that in pure css that works in all platforms. The align feature reacts to resizing the webpage, and has worked really well for all the times I've tested it, so I think it'll be fine. It's a good point about the explore option, I can change that! |
There was a problem hiding this comment.
Pull request overview
Updates the app loader library UI to use dropdown menus (instead of chip controls) for filtering/sorting, adds a new “explore”/randomized sorting mode, and introduces automatic dropdown menu alignment to avoid viewport overflow.
Changes:
- Switch filter/sort UI logic from chip-based selection to dropdown-based selection (anchors/menu items).
- Add a random shuffle sort mode for “Explore” browsing.
- Auto-align dropdown menus to the left/right depending on available viewport space.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
js/index.js
Outdated
| sortToggle.innerHTML = ''; | ||
| sortToggle.innerHTML += '<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"><path fill-rule="evenodd" d="M6.97 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.25 4.81V16.5a.75.75 0 0 1-1.5 0V4.81L3.53 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5Zm9.53 4.28a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V7.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" /></svg>'; |
There was a problem hiding this comment.
The injected SVG markup has duplicate class attributes (class="inline-icon" and class="size-6"). Duplicate attributes are invalid HTML and typically cause one of the class values to be dropped, which can break styling. Combine these into a single class attribute.
js/index.js
Outdated
| filterToggle.innerHTML = ''; | ||
| filterToggle.innerHTML += '<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"><path fill-rule="evenodd" d="M3.792 2.938A49.069 49.069 0 0 1 12 2.25c2.797 0 5.54.236 8.209.688a1.857 1.857 0 0 1 1.541 1.836v1.044a3 3 0 0 1-.879 2.121l-6.182 6.182a1.5 1.5 0 0 0-.439 1.061v2.927a3 3 0 0 1-1.658 2.684l-1.757.878A.75.75 0 0 1 9.75 21v-5.818a1.5 1.5 0 0 0-.44-1.06L3.13 7.938a3 3 0 0 1-.879-2.121V4.774c0-.897.64-1.683 1.542-1.836Z" clip-rule="evenodd" /></svg>'; | ||
| filterToggle.innerHTML += activeFilterAnchor.textContent; |
There was a problem hiding this comment.
The injected SVG markup has duplicate class attributes (class="inline-icon" and class="size-6"). Duplicate attributes are invalid HTML and typically cause one of the class values to be dropped, which can break styling. Combine these into a single class attribute.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Adds dropdowns instead of chips as per BangleApps #4150. Also adds a new sort method, 'explore', which is a random shuffle so users can explore new apps that are otherwise buried beneath more installed apps. The PR also implements dropdown menu aligning, so if it goes over the edge, it aligns to the other side instead for seamless UX