fix(webui): show empty state if there's not books to import

komga-webui/src/locales/en.json

@@ -51,6 +51,7 @@
     "field_import_path": "Import from folder",
     "info_part1": "This screen lets you import files that are outside your existing libraries. You can only import files into existing Series, in which case Komga will move or copy the files into the directory of the chosen Series.",
     "info_part2": "If you choose a number for a book, and a book already exists with that number, then you will be able to compare the 2 books. If you decide to import the book, Komga will upgrade the existing book with the new one, effectively replacing the old file with the new.",
+    "no_files_found": "No files found",
     "notification": {
       "go_to_book": "Go to book",
       "import_failure": "Failed to import book: {file}",
@@ -69,7 +70,8 @@
       "number": "Number",
       "series": "Series"
     },
-    "title": "Import"
+    "title": "Import",
+    "try_another_directory": "Try searching another directory"
   },
   "bookreader": {
     "beginning_of_book": "You're at the beginning of the book.",

komga-webui/src/views/BookImport.vue

@@ -32,6 +32,14 @@
       </v-col>
     </v-row>
 
+    <empty-state
+      v-if="scanned && transientBooks.length === 0"
+      :title="$t('book_import.no_files_found')"
+      :sub-title="$t('book_import.try_another_directory')"
+      icon-color="secondary"
+      icon="mdi-book-search"
+      />
+
     <template v-if="transientBooks.length > 0">
       <v-divider/>
 
@@ -104,10 +112,11 @@ import {BookImportBatchDto, BookImportDto} from "@/types/komga-books";
 import {CopyMode} from "@/types/enum-books";
 import {convertErrorCodes} from "@/functions/error-codes";
 import {ERROR} from "@/types/events";
+import EmptyState from "@/components/EmptyState.vue";
 
 export default Vue.extend({
   name: 'BookImport',
-  components: {FileBrowserDialog, FileImportRow, SeriesPickerDialog},
+  components: {EmptyState, FileBrowserDialog, FileImportRow, SeriesPickerDialog},
   data: () => ({
     modalFileBrowser: false,
     modalSeriesPicker: false,
@@ -115,6 +124,7 @@ export default Vue.extend({
     selectedSeries: undefined as SeriesDto | undefined,
     payloads: [] as BookImportDto[],
     transientBooks: [] as TransientBookDto[],
+    scanned: false,
     copyMode: CopyMode.HARDLINK,
     importFinished: false,
   }),
@@ -161,8 +171,10 @@ export default Vue.extend({
   methods: {
     async scanBooks() {
       this.transientBooks = []
+      this.scanned = false
       try {
         this.transientBooks = await this.$komgaTransientBooks.scanForTransientBooks(this.importPath)
+        this.scanned = true
       } catch (e) {
         this.$eventHub.$emit(ERROR, {message: convertErrorCodes(e.message)} as ErrorEvent)
       }