added transalations for UI texts

frontend/src/components/meals/MealItemsEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { Ingredient, MealItem } from '@/types/domain'
 
 const props = defineProps<{
@@ -13,6 +14,8 @@ const emit = defineEmits<{
 	(event: 'remove-item', mealItemId: number): void
 }>()
 
+const { t } = useI18n()
+
 const addIngredientId = ref<number | null>(null)
 const addGrams = ref<number>(100)
 
@@ -48,25 +51,25 @@ const addItem = () => {
 
 <template>
 	<section class="card meal-items-editor">
-		<h3>Položky jedálnička</h3>
+		<h3>{{ t('meals.itemsTitle') }}</h3>
 
 		<div class="meal-items-editor__add-row">
 			<select v-model.number="addIngredientId" class="input-select">
-				<option :value="null">Vyber surovinu</option>
+				<option :value="null">{{ t('meals.selectIngredient') }}</option>
 				<option v-for="ingredient in props.ingredients" :key="ingredient.ingredient_id" :value="ingredient.ingredient_id">
 					{{ ingredient.name }}
 				</option>
 			</select>
 			<input v-model.number="addGrams" type="number" min="1" class="input-number" />
-			<button class="btn btn-primary" type="button" @click="addItem">Pridať</button>
+			<button class="btn btn-primary" type="button" @click="addItem">{{ t('meals.addItem') }}</button>
 		</div>
 
 		<table class="table" v-if="props.items.length > 0">
 			<thead>
 				<tr>
-					<th>Surovina</th>
-					<th>Gramáž</th>
-					<th>Akcia</th>
+					<th>{{ t('ingredients.name') }}</th>
+					<th>{{ t('meals.grams') }}</th>
+					<th>{{ t('common.actions') }}</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -97,12 +100,12 @@ const addItem = () => {
 					</td>
 					<td>
 						<button class="btn btn-danger" type="button" @click="emit('remove-item', item.meal_item_id)">
-							Zmazať
+							{{ t('common.delete') }}
 						</button>
 					</td>
 				</tr>
 			</tbody>
 		</table>
-		<p v-else class="empty-state">Tento jedálniček zatiaľ nemá položky.</p>
+		<p v-else class="empty-state">{{ t('meals.noItems') }}</p>
 	</section>
 </template>

frontend/src/components/meals/MealTypeFilter.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import type { MealType } from '@/types/domain'
 
 const props = defineProps<{
@@ -8,20 +9,22 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(event: 'update:modelValue', value: MealType | ''): void
 }>()
+
+const { t } = useI18n()
 </script>
 
 <template>
 	<label class="filter-control">
-		<span>Typ jedla</span>
+		<span>{{ t('meals.mealTypeFilter') }}</span>
 		<select
 			class="input-select"
 			:value="props.modelValue"
 			@change="emit('update:modelValue', ($event.target as HTMLSelectElement).value as MealType | '')"
 		>
-			<option value="">Všetky</option>
-			<option value="breakfast">Raňajky</option>
-			<option value="lunch">Obed</option>
-			<option value="dinner">Večera</option>
+			<option value="">{{ t('common.all') }}</option>
+			<option value="breakfast">{{ t('mealTypes.breakfast') }}</option>
+			<option value="lunch">{{ t('mealTypes.lunch') }}</option>
+			<option value="dinner">{{ t('mealTypes.dinner') }}</option>
 		</select>
 	</label>
 </template>