Shows more specific message when there are no results

README.md

@@ -12,7 +12,8 @@
 
 ## Features 🌈
 
-- Instant search and full keyboard shortcuts
+- Instant search by name, domain and tags - just start typing
+- Full keyboard shortcuts for navigation, searching and launching
 - Multiple color themes, with easy method for adding more themes
 - Customizable layout options and item sizes
 - Preferences stored in local storage and applied on load

src/styles/color-themes.scss

@@ -204,4 +204,4 @@ html[data-theme='colorful'] {
     svg path { fill: #05070e; }
     i.fas, i.fab, i.far, i.fal, i.fad { color: #05070e; }
   }
-}
+}

src/views/Home.vue

@@ -26,7 +26,10 @@
          :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
       />
     </div>
-    <div v-else class="no-data">No Data Found Yet</div>
+    <!-- Show message when there's no data to show -->
+    <div v-if="checkIfResults()" class="no-data">
+      {{searchValue ? 'No Search Results' : 'No Data Configured'}}
+    </div>
   </div>
 </template>
 
@@ -150,6 +153,17 @@ export default {
         document.head.appendChild(fontAwesomeScript);
       }
     },
+    /* Returns true if there is more than 1 sub-result visible during searching */
+    checkIfResults() {
+      if (!this.sections) return false;
+      else {
+        let itemsFound = true;
+        this.sections.forEach((section) => {
+          if (this.filterTiles(section.items).length > 0) itemsFound = false;
+        });
+        return itemsFound;
+      }
+    },
   },
   mounted() {
     this.initiateFontAwesome();