fix(frontend): 🐛 fix section titles carrying over on deleted items (#765)

* fix(frontend): 🐛 fix section titles carrying over on deleted items

Added a UUID generator to generate unique id's and prevent list changes from causing proper virtual dom re-renders.

* lazy load json editor

* fix ingredient rendering error

* move text to input

* update settings styling

* improve mobile view

Co-authored-by: Hayden <hay-kot@pm.me>

mealie/schema/recipe/recipe_ingredient.py

@@ -1,7 +1,11 @@
 import enum
 from typing import Optional, Union
+from uuid import UUID, uuid4
 
 from fastapi_camelcase import CamelModel
+from pydantic import Field
+
+uuid4()
 
 
 class CreateIngredientFood(CamelModel):
@@ -36,6 +40,11 @@ class RecipeIngredient(CamelModel):
     disable_amount: bool = True
     quantity: float = 1
 
+    # Ref is used as a way to distinguish between an individual ingredient on the frontend
+    # It is required for the reorder and section titles to function properly because of how
+    # Vue handles reactivity. ref may serve another purpose in the future.
+    ref: UUID = Field(default_factory=uuid4)
+
     class Config:
         orm_mode = True