Shopping list - choose from a list of most commonly used items

I am using the regular shopping list integration and displaying in with a To-Do card, which works nicely:

However, it is repetitive to type in manually the same items each time, when they actually are added over and over again. What I would love to do is have a pop up card whenever I edit the “Add item” box. From this pop-up box I would like to be able to select from a list of previously added items, which are sorted according to how many times they’ve previously been used, i.e. most common at the top.

I am looking for guidance with where to start with adding such functionality. On a high level, I want to do this:

  1. Whenever an item is typed in, add it to some data structure to be remembered.
  2. If the item already exists in the previously added, then instead of creating a new entry, simply increment a counter for that item, to represent how many times it’s been used before. e.g.
    remembered_items = {'Bananas': 6, 'Milk': 8, 'Apples': 1}
  3. Order the list according to the counter.
  4. Implement a pop-up in the dashboard, to allow selecting items from the remembered items list.

Can anyone help with this? I know that I can react to the shopping_list_updated event, as described here. But I’m not sure about how to maintain this data structure of remembered items.

(I’ve seen that there is an advanced shopping list here, but it looks like the items are hard-coded. Instead I want a dynamically updating list of previously used items, which builds up over time. This is also partly to learn something new for myself).

If you’re asking about making changes to the core todo card, I once started a (now aborted) PR where I was trying to do something similar. Feel free to look at it for inspiration or borrow any code that is useful to you.

https://github.com/home-assistant/frontend/pull/20958

Not really making change to the core card. More about how do you maintain a variable where you can keep counters , etc, and access them by other cards.