small ui/ux improvments

src/App.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="app max-w-[900px] mx-auto p-10">
+  <main class="app h-screen max-w-[900px] mx-auto p-10">
-    <main>
     <router-view v-slot="{ Component }">
       <template v-if="Component">
         <div
@@ -27,7 +26,6 @@
     </router-view>
   </main>
   <modal-overlay />
-  </div>
 </template>
 <script setup lang="ts">
 import { onErrorCaptured, ref } from 'vue'

src/components/icons/IconNoGift.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M21 6h-3.17A3 3 0 0 0 18 5c0-1.66-1.34-3-3-3c-1 0-1.88.5-2.43 1.24v-.01L12 4l-.57-.77v.01A3.034 3.034 0 0 0 9 2c-1.03 0-1.94.5-2.5 1.32l1.53 1.51C8.12 4.36 8.5 4 9 4c.55 0 1 .45 1 1c0 .5-.36.88-.83.97L13 9.8V8h8v2h-7.8l2 2H20v4.8l2 2V12c.55 0 1-.45 1-1V8a2 2 0 0 0-2-2m-6 0c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1M1.11 3l3 3H3c-1.1 0-2 .9-2 2v3c0 .55.45 1 1 1v8a2 2 0 0 0 2 2h16.1l1.46 1.45l1.27-1.27L2.39 1.73L1.11 3M13 14.89L18.11 20H13v-5.11m-2-2V20H4v-8h6.11l.89.89M8.11 10H3V8h3.11l2 2z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

src/config/locales/de-DE.json

@@ -17,6 +17,11 @@
   },
   "pages": {
     "detail-view": {
+      "main": {
+        "empty-list": {
+          "text": "Diese Wunschliste ist leer."
+        }
+      },
       "confirmation-modal": {
         "title": {
           "text": "Möchten Sie den Gegenstand von der Liste nehmen?"

src/config/locales/en-US.json

@@ -17,6 +17,11 @@
   },
   "pages": {
     "detail-view": {
+      "main": {
+        "empty-list": {
+          "text": "This wishlist is empty."
+        }
+      },
       "confirmation-modal": {
         "title": {
           "text": "Do you want to remove the item from the list?"

src/views/DetailView.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router'
 import { useWishlistStore, useModal } from '@/composables'
 import Tile from '@/components/Tile.vue'
 import WishlistItem from '@/components/WishlistItem.vue'
+import IconNoGift from '../components/icons/IconNoGift.vue'
 
 const route = useRoute()
 const modal = useModal()
@@ -36,7 +37,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
 </script>
 
 <template>
-  <div v-if="list !== null">
+  <div v-if="list !== null" class="h-full">
     <div
       class="flex flex-col md:flex-row space-x-0 md:space-x-6 space-y-2 md:space-y-0 items-center"
     >
@@ -50,7 +51,10 @@ const bought = async (item: WishlistItemType): Promise<void> => {
         </p>
       </div>
     </div>
-    <div class="flex flex-col space-y-14 md:space-y-8 my-10">
+    <div
+      v-if="notBoughtItems && notBoughtItems.length > 0"
+      class="flex flex-col space-y-14 md:space-y-8 my-10"
+    >
       <WishlistItem
         v-for="(item, index) in notBoughtItems"
         :key="index"
@@ -61,5 +65,13 @@ const bought = async (item: WishlistItemType): Promise<void> => {
         @bought="bought(item)"
       />
     </div>
+    <div v-else class="h-1/2 w-full flex justify-center">
+      <div
+        class="flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl text-gray-600/75"
+      >
+        <IconNoGift class="h-10 w-10" />
+        <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
+      </div>
+    </div>
   </div>
 </template>