feat: add landing message to search page

src/.vuepress/components/SearchPage.vue

@@ -12,10 +12,23 @@
       <code class="font-weight-black">{{ distinctManuscripts }}</code> {{ 'Manuscript' | numerus(distinctManuscripts) }}.
     </p>
 
+    <v-alert
+      v-if="showPlaceholder"
+      border="left"
+      colored-border
+      color="secondary accent-4"
+      elevation="1"
+    >
+      <!-- TODO: provide translation -->
+      Please use the form above to enter a and search for a term of your choice.
+    </v-alert>
+
+    <SearchResultEmpty v-if="showNoResult" :message="message" />
+
     <div
       v-if="loading"
       class="loading-wrapper py-10"
-      >
+    >
       <v-progress-circular
         color="primary"
         indeterminate
@@ -67,6 +80,8 @@ export default {
       query: null,
       size: 20,
       total: 0,
+      showPlaceholder: false,
+      showNoResult: false,
     };
   },
   watch:{
@@ -80,6 +95,8 @@ export default {
   mounted(){
     if(this.$route.query?.searchTerm) {
       this.onSearchInput(this.$route.query.searchTerm);
+    } else {
+      this.showPlaceholder = true;
     }
   },
   computed: {
@@ -103,21 +120,21 @@ export default {
     onSearchInput(query) {
       this.query = query;
       this.page = 1;
+      this.resetList();
+
+      this.showPlaceholder = false;
+      this.showNoResult = false;
 
       this.search(this.query.trim(), 0, this.size);
 
       if (this.$route.query.searchTerm !== query) {
         this.$router.push({ query: { ...this.$route.query, searchTerm:query } });
-      };
+      }
     },
     async search(value, from, size) {
       this.hitCounter = from + 1;
 
       try {
-        this.items = [];
-        this.total = 0;
-        this.distinctSheets = 0;
-
         this.loading = true;
 
         const searchResponse = await apiService.search(value, from, size);
@@ -132,13 +149,14 @@ export default {
           this.total = searchResponse.hits?.total?.matches || 0;
         }
 
+        // Toggle no result message on top of result list
+        this.showNoResult = this.total === 0;
+
         // TODO: make string translable
         if (!this.invalid) this.message = `No search results found for <code>${this.query}</code>.`;
       } catch(error) {
-          this.items = [];
-          this.distinctSheets = 0;
-          this.total = 0;
-
+          this.resetList();
+          this.showNoResult = true;
           this.message = 'Please enter a valid search term.';
       } finally {
         this.loading = false;
@@ -151,6 +169,11 @@ export default {
         behavior: 'smooth',
       });
     },
+    resetList() {
+      this.items = [];
+      this.distinctSheets = 0;
+      this.total = 0;
+    }
   },
 };
 </script>

src/.vuepress/components/SearchResultList.vue

@@ -27,8 +27,6 @@
         </v-list-item-content>
       </v-list-item>
     </v-list>
-
-    <SearchResultEmpty :message="message" v-else-if="query !== null" />
   </div>
 </template>
 
@@ -47,11 +45,6 @@ export default {
   mixins: [
     pathUrl,
   ],
-  computed: {
-    viewerBaseUrl() {
-      return process.env.VUE_APP_BASE_URL_VIEWER;
-    },
-  },
   props: {
     hitCounter: {
       type: Number,
@@ -61,14 +54,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    message: {
-      type: String,
-      default: () => '',
-    },
-    query: {
-      type: String,
-      default: () => null,
-    },
   },
   computed: {
     viewerBaseUrl() {