added show/hide for ingrediens form

frontend/src/views/IngredientsView.vue

@@ -8,6 +8,7 @@ import type { Ingredient } from '@/types/domain'
 const ingredientsStore = useIngredientsStore()
 const editingId = ref<number | null>(null)
 const saving = ref(false)
+const formMode = ref<'hidden' | 'create' | 'edit'>('hidden')
 const { t } = useI18n()
 
 onMounted(async () => {
@@ -25,14 +26,17 @@ const editingIngredient = computed<Ingredient | null>(() => {
 
 const startCreate = () => {
 	editingId.value = null
+	formMode.value = 'create'
 }
 
 const startEdit = (ingredientId: number) => {
 	editingId.value = ingredientId
+	formMode.value = 'edit'
 }
 
 const cancelEdit = () => {
 	editingId.value = null
+	formMode.value = 'hidden'
 }
 
 const saveIngredient = async (payload: {
@@ -52,6 +56,7 @@ const saveIngredient = async (payload: {
 			await ingredientsStore.createIngredient(payload)
 		}
 		editingId.value = null
+		formMode.value = 'hidden'
 	} finally {
 		saving.value = false
 	}
@@ -61,6 +66,7 @@ const removeIngredient = async (ingredientId: number) => {
 	await ingredientsStore.deleteIngredient(ingredientId)
 	if (editingId.value === ingredientId) {
 		editingId.value = null
+		formMode.value = 'hidden'
 	}
 }
 </script>
@@ -68,6 +74,7 @@ const removeIngredient = async (ingredientId: number) => {
 <template>
 	<section class="page">
 		<IngredientForm
+			v-if="formMode !== 'hidden'"
 			:initial="editingIngredient"
 			:submit-label="saving ? t('common.saving') : t('common.save')"
 			@save="saveIngredient"