In the code column — state as it is now: ten loose variables at the top of main.js. There's no module that "owns" them; they just sit side by side.

And toggleFavorite — the action that changes favorites when you click ♡. Notice the end:

function toggleFavorite(pic) {
  const i = favorites.findIndex(f => f.date === pic.date);
  if (i >= 0) favorites.splice(i, 1);
  else favorites.push({ ...pic, rating: 0, notes: '', tags: [] });

  renderGallery({ isLoading, error, pictures: visiblePictures() });   // the ♡ fill
  renderCollection();                                                 // the row
  renderHome();                                                       // the counter
}

The data change itself is two lines. And then — three re-renders, one for each view that shows favorites. It works. But look at what it demands of you: every time you change favorites, you must remember all three. And so with every action that touches favorites — and there will be more (rating, tags, removal).

This is the "correct but fragile" version. It works only because someone remembered to call all three. Nothing enforces it.

Tip. Notice how render depends on a pile of loose variables (isLoading, error, visiblePictures() which reads searchQuery…). When state is scattered, even a "simple" re-render has to gather pieces from everywhere. The next step shows what happens when you forget one piece.