Styled book form and added an ux dropzone component.

assets/js/pages/book.vue

@@ -12,7 +12,7 @@
     <div v-if="selectedBook && selectedBook.cover_url.small">
       <img :src="selectedBook.cover_url.small" class="img-thumbnail"/>
     </div>
-    <div v-for="book in books">
+    <div v-if="books.length" v-for="book in books">
       <div class="d-flex flex-row border mb-3 cursor-pointer book-search-item" @click="getBookDetails(book.url)">
         <img :src="book.cover_url.small" class="img-fluid rounded-start">
         <div class="card-body">
@@ -21,8 +21,12 @@
         </div>
       </div>
     </div>
-    <slot></slot>
-    <BookForm></BookForm>
+    <h1 v-else>Oh no 😢</h1>
+
+    <div v-show="manualMode" >
+      <slot></slot>
+      <BookForm></BookForm>
+    </div>
   </div>
 </template>
 
@@ -37,7 +41,8 @@ export default {
     return {
       searchTerm: null,
       books: [],
-      selectedBook: null
+      selectedBook: null,
+      manualMode: false
     }
   },
   methods: {
@@ -48,7 +53,7 @@ export default {
       });
     },
     getBookDetails: function (url) {
-      console.info(url);
+      this.manualMode = true;
       axios.get('/book/info/' + btoa(url)).then(response => {
         const book = this.selectedBook = response.data;
         this.$el.querySelector('#book_title').value = book.title;