feat(mealplan): Allow planning meals without date

[rovo89]

What this PR does / why we need it:

When we plan our meals, we often look through the list of recipes, select some and buy the ingredients. Which meal exactly we cook on a particular day is often spontaneous. With the existing implementation, the easiest way to remember the selected meals is adding them to favorites. But that's per-user and doesn't seem to be made for this. On the other hand, the meal planner requires a date and time.

So here's a suggestion to add a "without date" section to the meal planner. It also has the "Add all to shopping list" command.

Additionally, recipe cards get a new badge to quickly add it to the meal planner without date, making it fast like marking as favorite:

The badge shows when the meal is already in the plan (without date, today or in the future). Clicking again will remove it - immediately if planned without date, or with confirmation if with date:

The goal is to make it really fast and frictionless to plan, then in a second step assign to dates.

Testing

Tested it manually. task py:check is fine: 2261 passed, 18 skipped, 209 warnings in 783.39s (0:13:03)

Further info

The UX for assigning dates to unspecific meal plans could be improved as a follow-up. The "Add to meal planner" menu item which is available in the meal planner itself would add the same meal again, so we have to go to edit mode and then click on the meal... maybe that menu item should be replaced with a "change date" action which brings up the edit dialog for that one planned meal.

[noxhirsch]

I personally find this idea too specific to justify the UI clutter (I especially dislike the switch in the dialog).

I have two alternative suggestions:

• Plan all meals at the end of the week (always sunday for example) and then move them later when you need them - this works right now.
• Add the option to share favorites with your household instead of this.

If the maintainers like the idea, I have two alternative suggestions to optimize it (from my point of view):

• Put this in the menu only (not next to the heart icon and not in the date selector dialog box). When you click it, you can select the meal type. The “No date” field in the meal planner should only appear if recipes are stored in it (I haven't checked if this is currently the case). It could look something like this:
  
• Put it in the date selector dialog only, but as a third button that doesn't take up additional space and looks cleaner. Something like this but with a plus icon and a shorter label:
  

Either way, this is my personal opinion - I am not a Mealie maintainer, so let's wait and see what they say.

[rovo89]

Thanks for your comments, but obviously I disagree. 😉

• Plan all meals at the end of the week (always sunday for example) and then move them later when you need them - this works right now.

That requires 4 clicks per meal instead of one, the meals will just vanish after that day has passed and it clearly screams "this is a workaround", as obviously we won't be cooking 10 meals that day.

• Add the option to share favorites with your household instead of this.

I considered that, but I guess the idea of favorites wasn't planning meals - in contrast to the meal planner. It's also missing the "add all to shopping list" option and an easy way to move (not copy) the meal to a specific day, although the latter could still be improved for my approach.

---

I'm wondering what kind of UI clutter you mean. Generally, the space is available everywhere, even on mobile. In the dialog... well yeah, it's a big taller, but the switch is on by default and clearly says what it's going to do, so I don't think it distracts. The additional button might work too for the initial adding, but a similar dialog is also used in edit mode, where you could switch between "no date" and a specific day. What could work is using your suggestion for adding, and in the meal planner context menu (even in non-edit mode) have a "move to specific day" option for items without date and "remove date" for those with date. That would be better UX in general and it could work without the switch.

Showing the section only if necessary - fair enough. You're losing the ability to roll the dice for a random meal, but that's not critical.

The badge next to the heart icon is the most imporant one from my point of view. It's not only a one-click button to add items to the plan while scrolling through the list, it also servers as an indicator of meals which are already planned. That works even if you always pick a date. And the card doesn't grow in any way. If you want to get rid of something, remove the rating. I mean, does anyone have 2-star recipes in their personal cookbook? And if someone wants to mark recipes as their favorite, they can, well, use the favorite button, which therefore shouldn't be misused as "planned in the next few days". 😉

[noxhirsch]

Thanks for your comments, but obviously I disagree. 😉

That's what I thought 😄

and it clearly screams "this is a workaround"

Yes, I agree with you - it's a workaround. But I don't think it's a bad alternative, which is why I wanted to mention it. "Add all to shopping list" also works this way.

I considered that, but I guess the idea of favorites wasn't planning meals - in contrast to the meal planner. It's also missing the "add all to shopping list" option and an easy way to move (not copy) the meal to a specific day, although the latter could still be improved for my approach.

I understand the disadvantages you mentioned - it was just a spontaneous thought because you mentioned that you had used the function for that purpose before, and I was thinking about how it could be optimized for that.

I'm wondering what kind of UI clutter you mean.

I've thought about it again and I think my main problem is that the button just looks randomly positioned (and also makes the dialog look strangely left-leaning). That's why I thought about inserting it as a “no date” button at the bottom, so you have the option to add with or without a date (also it's more discreet).
Perhaps an alternative would be something along the lines of an accordion box (like the categories in the shopping list) with a checkbox in the title and the calendar as content? This would visually link it to the calendar.
When the accordion box is open (and the calendar is visible), the checkbox is empty; when you close the accordion box, the checkbox is checked. This makes the connection between the button and the calendar much clearer. Here's a quick & dirty mockup (with room to improve 😉):

Maybe you have another design idea for how to place the button more elegantly and visually link it to the calendar?

If you want to get rid of something, remove the rating. I mean, does anyone have 2-star recipes in their personal cookbook?

I actually think that would be a very good idea to display the button instead of the Rating - I'm just afraid that it would probably annoy way more people than if you just added the button ;)