From f3302b4014f642ff8ea4b21027246f58ddf5f2cb Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 11 Oct 2025 09:02:10 +0200
Subject: [PATCH] fixed start page and ingredient templater

---
 vue3/src/components/inputs/StepEditor.vue         |  6 +++---
 vue3/src/components/inputs/StepMarkdownEditor.vue |  8 ++++----
 vue3/src/pages/StartPage.vue                      | 12 ++++++------
 vue3/src/vuetify.ts                               |  6 +++++-
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/vue3/src/components/inputs/StepEditor.vue b/vue3/src/components/inputs/StepEditor.vue
index 7fd62df30..555f71d04 100644
--- a/vue3/src/components/inputs/StepEditor.vue
+++ b/vue3/src/components/inputs/StepEditor.vue
@@ -67,13 +67,13 @@
                                 </div>
                                 <div class="d-flex flex-nowrap">
                                     <div class="flex-col flex-grow-0 ma-1" style="min-width: 15%" v-if="!ingredient.isHeader">
-                                        <v-text-field :id="`id_input_amount_${props.stepIndex}_${index}`" :label="$t('Amount')" type="number" v-model="ingredient.amount" density="compact"
-                                                      hide-details :disabled="ingredient.noAmount">
+                                        <v-number-input :id="`id_input_amount_${props.stepIndex}_${index}`" :label="$t('Amount')" type="number" v-model="ingredient.amount" density="compact"
+                                                      hide-details control-variant="hidden" :disabled="ingredient.noAmount">
 
                                             <template #prepend>
                                                 <v-icon icon="$dragHandle" class="drag-handle cursor-grab"></v-icon>
                                             </template>
-                                        </v-text-field>
+                                        </v-number-input>
                                     </div>
                                     <div class="flex-col flex-grow-0  ma-1" style="min-width: 15%" v-if="!ingredient.isHeader ">
                                         <model-select model="Unit" v-model="ingredient.unit" density="compact" allow-create hide-details :disabled="ingredient.noAmount"></model-select>
diff --git a/vue3/src/components/inputs/StepMarkdownEditor.vue b/vue3/src/components/inputs/StepMarkdownEditor.vue
index f7fcd3f66..c0cf066e1 100644
--- a/vue3/src/components/inputs/StepMarkdownEditor.vue
+++ b/vue3/src/components/inputs/StepMarkdownEditor.vue
@@ -17,10 +17,10 @@
                     <v-list density="compact">
                         <v-list-subheader>{{$t('Ingredients')}}</v-list-subheader>
                         <v-list-item
-                            v-for="template in templates"
-                            @click="insertTextAtPosition(template.template + ' ')"
+                            v-for="t in templates"
+                            @click="insertTextAtPosition(t.template + ' ')"
                         >
-                            <ingredient-string :ingredient="template.ingredient"></ingredient-string>
+                            <ingredient-string :ingredient="t.ingredient"></ingredient-string>
                         </v-list-item>
                     </v-list>
                 </v-menu>
@@ -65,7 +65,7 @@ const templates = computed(() => {
 function insertTextAtPosition(text: string){
     let textarea = markdownEditor.value.getTextareaDom()
     let position = textarea.selectionStart
-    if (step.value.instruction){
+    if (step.value.instruction != undefined){
         step.value.instruction = step.value.instruction.slice(0, position) + text + step.value.instruction.slice(position)
 
         nextTick(() => {
diff --git a/vue3/src/pages/StartPage.vue b/vue3/src/pages/StartPage.vue
index 8935a5499..b06b7e99b 100644
--- a/vue3/src/pages/StartPage.vue
+++ b/vue3/src/pages/StartPage.vue
@@ -34,13 +34,13 @@
             </v-card-text>
         </v-card>
         <template v-if="totalRecipes > 0">
-            <horizontal-recipe-scroller :skeletons="4" mode="recent" v-if="totalRecipes > 5"></horizontal-recipe-scroller>
-            <horizontal-recipe-scroller :skeletons="4" mode="new" v-if="totalRecipes > 1"></horizontal-recipe-scroller>
+            <horizontal-recipe-scroller :skeletons="4" mode="recent" v-if="totalRecipes > 0"></horizontal-recipe-scroller>
+            <horizontal-recipe-scroller :skeletons="4" mode="new" v-if="totalRecipes > 10"></horizontal-recipe-scroller>
             <horizontal-recipe-scroller :skeletons="4" mode="keyword" v-if="totalRecipes > 10"></horizontal-recipe-scroller>
-            <horizontal-recipe-scroller :skeletons="4" mode="random" v-if="totalRecipes > 1"></horizontal-recipe-scroller>
-            <horizontal-recipe-scroller :skeletons="4" mode="created_by" v-if="totalRecipes > 5"></horizontal-recipe-scroller>
-            <horizontal-recipe-scroller :skeletons="2" mode="rating" v-if="totalRecipes > 5"></horizontal-recipe-scroller>
-            <horizontal-recipe-scroller :skeletons="4" mode="keyword" v-if="totalRecipes > 5"></horizontal-recipe-scroller>
+            <horizontal-recipe-scroller :skeletons="4" mode="random" v-if="totalRecipes >= 5"></horizontal-recipe-scroller>
+            <horizontal-recipe-scroller :skeletons="4" mode="created_by" v-if="totalRecipes > 10"></horizontal-recipe-scroller>
+            <horizontal-recipe-scroller :skeletons="2" mode="rating" v-if="totalRecipes > 10"></horizontal-recipe-scroller>
+            <horizontal-recipe-scroller :skeletons="4" mode="keyword" v-if="totalRecipes > 25"></horizontal-recipe-scroller>
             <horizontal-recipe-scroller :skeletons="4" mode="random" v-if="totalRecipes > 25"></horizontal-recipe-scroller>
 
             <v-row>
diff --git a/vue3/src/vuetify.ts b/vue3/src/vuetify.ts
index 67371ad95..55d21e570 100644
--- a/vue3/src/vuetify.ts
+++ b/vue3/src/vuetify.ts
@@ -23,7 +23,7 @@ export default createVuetify({
         },
         // always localize the date display of DateInputs
         VDateInput: {
-            displayFormat : (date: Date) => DateTime.fromJSDate(date).toLocaleString()
+            displayFormat: (date: Date) => DateTime.fromJSDate(date).toLocaleString()
         },
         // always use color for switches to properly see if enabled or not
         VSwitch: {
@@ -34,6 +34,10 @@ export default createVuetify({
             decimalSeparator: 0.1.toLocaleString().replace(/\d/g, '')
         }
     },
+    // locale: {
+    //     locale: 'de',
+    //     fallback: 'en',
+    // },
     theme: {
         defaultTheme: 'light',
         themes: {