fallback text for no wishlist

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/config/locales/de-DE.json

@@ -32,6 +32,13 @@
         }
       }
     },
+    "home-view": {
+      "main": {
+        "empty-list": {
+          "text": "Keine Wunschlisten verfügbar."
+        }
+      }
+    },
     "detail-view": {
       "main": {
         "empty-list": {

src/config/locales/en-US.json

@@ -32,6 +32,13 @@
         }
       }
     },
+    "home-view": {
+      "main": {
+        "empty-list": {
+          "text": "No wishlists available."
+        }
+      }
+    },
     "detail-view": {
       "main": {
         "empty-list": {

src/views/HomeView.vue

@@ -12,7 +12,10 @@ await fetch()
   <h1 class="text-semibold text-center text-3xl">
     {{ t('common.app-title.text') }}
   </h1>
-  <div v-if="wishlists" class="flex flex-row flex-wrap justify-around p-10">
+  <div
+    v-if="wishlists.length > 0"
+    class="flex flex-row flex-wrap justify-around p-10"
+  >
     <router-link
       v-for="(item, index) in wishlists"
       :key="index"
@@ -21,4 +24,11 @@ await fetch()
       <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />
     </router-link>
   </div>
+  <div v-else class="flex h-1/2 w-full justify-center">
+    <div
+      class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
+    >
+      <span>{{ t('pages.home-view.main.empty-list.text') }}</span>
+    </div>
+  </div>
 </template>