Update bring extension

[xilopaint]

Description

• Updated the rendering logic of grid items to show non-added items only when the user enters a search term.
• Added items are now grouped by categories or left ungrouped based on the user's preference set in the mobile app.
• Changed the action panel title from the extension name to the list name.
• Introduced an empty view for when the shopping list is empty.

Screenshot

Checklist

• I read the extension guidelines
• I read the documentation about publishing
• I ran npm run build and tested this distribution build in Raycast
• I checked that files in the assets folder are used by the extension itself
• I checked that assets used by the README are placed outside of the metadata folder

[raycastbot]

Thank you for your contribution! 🎉

🔔 @amuelli @maximilianzuern you might want to have a look.

You can use this guide to learn how to check out the Pull Request locally in order to test it.

You can expect an initial review within five business days.

[pernielsentikaer]

It looks good to me 🔥

@amuelli do you want to check this?

[maximilianzuern]

@xilopaint Thanks for your PR! I really like the improvements you've made.

One minor thing: what was the reason for removing the colored dot in ItemsGrid.tsx? I think using red and green is more in line with the bring! app and more user-friendly than the grey plus/minus.

[xilopaint]

@xilopaint Thanks for your PR! I really like the improvements you've made.

One minor thing: what was the reason for removing the colored dot in ItemsGrid.tsx? I think using red and green is more in line with the bring! app and more user-friendly than the grey plus/minus.

Hey, thanks for asking! There are a few reasons for the choice.

The Bring! app UI does not use colored dots but rather grids with red and green backgrounds for added and non-added items. The reason it uses different colors is that both added and non-added items are presented together. That's not the case here, as in the current implementation, added and non-added items are displayed separately. We only need to highlight the difference between the actions for adding and removing items, and for this matter, a circle with a plus sign and a circle with a minus sign are much more effective and universally recognizable for adding and removing actions than green and red solid dots with no signs. Some might argue we could still use colors for Icon.PlusCircleFilled and Icon.MinusCircleFilled anyway. However, the issue is that the item images lack colors. Using colors only on the icons would break design consistency and distract from the more important elements without providing any additional benefit. I believe the proposed visual aligns much better with the Raycast design concept.

[amuelli]

@xilopaint First of all, many thanks for your continuing contributions. It's very nice to see others also taking an interest in this little extension.
It would be nice to understand the motivation behind all these changes. Whether something is an improvement or not can be sometimes very subjective.

Updated the rendering logic of grid items to show non-added items only when the user enters a search term.

I can see how this makes it a bit cleaner when looking at already added items. I somehow liked the discoverability of the whole cataloge without any search term. This might be subjective and I'm generally fine with that change overall.

Added items are now grouped by sections.

In the mobile app, this is configurable in the list order menu. I personally prefer it ungrouped as it displays more items in a condensed way, and I don't get much value from the section names. It would actually be nice to have both options and make it configurable in the extension, or possibly even better, base it on the setting from the app. The setting is actually exposed through the API with userSettings.purchaseStyle.

Changed icons for the grid items to better represent the command actions for adding and removing items.

I share the same concerns as @maximilianzuern. My initial implementation aimed to stay as close as possible to the design language of the Bring! app itself, with the assumption that any user of the extension is probably already familiar with the app and should immediately understand the meaning of the colors. I would have actually recreated the tiles with colored backgrounds if that had been possible in a reasonable manner. The colored circles were a compromise.
You do have a point that this is potentially at odds with the Raycast design language, but personally, in the context of Bring!, I would weigh the familiarity with the app higher.

The reason it uses different colors is that both added and non-added items are presented together. That's not the case here, as in the current implementation, added and non-added items are displayed separately.

Thanks for sharing your motivation behind it. However, I don't fully agree with the statement above. When searching for items, the results might also contain already added items. Here, I think it's important to easily distinguish them from non-added items, and I believe the color-coded circles make it much easier than the plain plus and minus icons that look almost the same at a glance. The alternative of excluding already added items from the results could potentially also be quite confusing as it diverges from how the Bring! app behaves.
If you are still convinced that the plus/minus icons are generally an improvement, I'm totally fine with introducing this as a configuration option for the extension.

[xilopaint]

This might be subjective and I'm generally fine with that change overall.

Does it mean we can go with the new rendering logic?

or possibly even better, base it on the setting from the app. The setting is actually exposed through the API with userSettings.purchaseStyle.

I have implemented this suggestion.

When searching for items, the results might also contain already added items.

In my implementation you won't see already added items if you type anything in the search bar.

If you are still convinced that the plus/minus icons are generally an improvement, I'm totally fine with introducing this as a configuration option for the extension.

I'm convinced that the plus and minus signs are an improvement. They are universally recognized symbols for adding and removing actions and the primary color is consistent with the overall design. Additionally, the primary action titles, "Add to List" and "Remove from List," are always visible in the lower bar, so I don't see any room for confusion. I agree that using colored tiles would be ideal, but as you mentioned, it's not feasible with the current Raycast API. Using colors only for these icons would draw too much attention to a secondary UI element and distract from the main elements, which are the item icons. It would also break design consistency.

That said, I find it odd to introduce an option with different styles for this icons. There's a troubling trend in the extension ecosystem of adding options simply because people disagree. However, if you prefer, I can color the plus and minus icons green and red or revert to the original solid-colored circles. Just let me know your decision.

[raycastbot]

This pull request has been automatically marked as stale because it did not have any recent activity.

It will be closed if no further activity occurs in the next 7 days to keep our backlog clean 😊

[pernielsentikaer]

What's the status here, can we continue @amuelli

[raycastbot]

This pull request has been automatically marked as stale because it did not have any recent activity.

It will be closed if no further activity occurs in the next 7 days to keep our backlog clean 😊

[pernielsentikaer]

@amuelli can we continue?

[pernielsentikaer]

@amuelli are you still here?

[amuelli]

@pernielsentikaer sorry for the radio silence. I only now found the time to do a proper review.

or possibly even better, base it on the setting from the app. The setting is actually exposed through the API with userSettings.purchaseStyle.

I have implemented this suggestion.

Thank you @xilopaint, great job! It seems to work fine; however, I've noticed that with that change, the caching behavior seems to be broken. I've pointed out the possible cause below.

When searching for items, the results might also contain already added items.

In my implementation you won't see already added items if you type anything in the search bar.

I'm not fine with that change, as it diverges from the behavior in the Bring! app. I would argue that it's important to understand whether the item I'm searching for was already added to the list.

Regarding the design language for adding/removing items. As I said I prefer the solid-colored circles. And still stand by this:

If you are still convinced that the plus/minus icons are generally an improvement, I'm totally fine with introducing this as a configuration option for the extension.

[amuelli]

This change breaks the previous caching behaviour. You notice it when you run the command. Before it would immediately display the list based on the cached state from the previous run and then update it as soon as we get a response from the API. Now it will just stay empty during that period.

[pernielsentikaer]

Thanks for taking your time @amuelli 🙏

[xilopaint]

The suggestions have been implemented.

[github-actions]

Published to the Raycast Store:
https://raycast.com/amuelli/bring

[raycastbot]

🎉 🎉 🎉

We've rewarded your Raycast account with some credits. You will soon be able to exchange them for some swag.