Message if no titles

frontend/src/pages/index.vue

@@ -32,7 +32,22 @@
         <TitleCard v-for="title in titles" :key="title.codename" :title="title" @update-title="updateByCodename" @delete-title="deleteByCodename" />
     
     </main>
-    <main class="responsive middle-align center-align" v-else>
+    <main class="responsive middle-align center-align" v-if="isEmpty">
+        <div class="padding absolute center middle">
+            <article class="medium middle-align center-align">
+                <div>
+                    <i class="extra">sentiment_sad</i>
+                    <h5 class="primary-text">Тайтлів нема :(</h5>
+                    <p class="secondary-text">Щоб додати, перейдіть до <i>add</i> Додати</p>
+                    <div class="space"></div>
+                    <nav class="center-align">
+                        <RouterLink to="/add"><i class="chip circle">add</i></RouterLink>
+                    </nav>
+                </div>
+            </article>
+        </div>
+    </main>
+    <main class="responsive middle-align center-align" v-if="titles.length == 0 && !isEmpty">
         <progress class="circle extra"></progress>
     </main>
 
@@ -62,7 +77,8 @@ export default {
             titles: [], // Titles list
             search: '', // Search bar
             update: {}, // Update stuff, notif
-            isUpdated: false // Update notif
+            isUpdated: false, // Update notif
+            isEmpty: false,
         };
     },
     created() {
@@ -73,6 +89,10 @@ export default {
         async fetchTorrents() {
             void await axios.get(`/api/titles`).then(response => {
                 this.titles = response.data
+
+                if (this.titles.length == 0){
+                    this.isEmpty = true
+                }
             })
         },
         filterTitles() {