From 2b238cccaf4f8997e9aeb6d9027cb82e82ac9717 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 28 Jul 2023 16:03:06 +0800
Subject: [PATCH] feat(webui): oneshots handling

---
 komga-webui/src/components/FileImportRow.vue  |    2 +-
 komga-webui/src/components/ItemCard.vue       |   20 +-
 .../src/components/ReusableDialogs.vue        |   21 +-
 komga-webui/src/components/SearchBox.vue      |    9 +-
 .../src/components/bars/MultiSelectBar.vue    |    8 +-
 .../components/dialogs/EditOneshotDialog.vue  | 1128 +++++++++++++++++
 .../components/dialogs/LibraryEditDialog.vue  |   19 +
 .../components/dialogs/SeriesPickerDialog.vue |    6 +-
 .../components/menus/OneshotActionsMenu.vue   |  111 ++
 komga-webui/src/locales/en.json               |    4 +
 komga-webui/src/router.ts                     |    6 +
 .../src/services/komga-libraries.service.ts   |    2 +-
 .../src/services/komga-series.service.ts      |   20 +-
 komga-webui/src/store.ts                      |   22 +-
 komga-webui/src/types/items.ts                |   95 +-
 komga-webui/src/types/komga-books.ts          |    1 +
 komga-webui/src/types/komga-libraries.ts      |    3 +
 komga-webui/src/types/komga-series.ts         |    8 +-
 komga-webui/src/views/BookReader.vue          |   13 +-
 komga-webui/src/views/BrowseBook.vue          |   19 +-
 komga-webui/src/views/BrowseCollection.vue    |   30 +-
 komga-webui/src/views/BrowseLibraries.vue     |   46 +-
 komga-webui/src/views/BrowseOneshot.vue       |  796 ++++++++++++
 komga-webui/src/views/BrowseReadList.vue      |   26 +-
 komga-webui/src/views/BrowseSeries.vue        |    6 +-
 komga-webui/src/views/DashboardView.vue       |   49 +-
 komga-webui/src/views/DuplicateFiles.vue      |    5 +-
 komga-webui/src/views/ImportBooks.vue         |    2 +-
 komga-webui/src/views/MediaAnalysis.vue       |    5 +-
 komga-webui/src/views/SearchView.vue          |   44 +-
 30 files changed, 2414 insertions(+), 112 deletions(-)
 create mode 100644 komga-webui/src/components/dialogs/EditOneshotDialog.vue
 create mode 100644 komga-webui/src/components/menus/OneshotActionsMenu.vue
 create mode 100644 komga-webui/src/views/BrowseOneshot.vue

diff --git a/komga-webui/src/components/FileImportRow.vue b/komga-webui/src/components/FileImportRow.vue
index 8bebfee3..a3758521 100644
--- a/komga-webui/src/components/FileImportRow.vue
+++ b/komga-webui/src/components/FileImportRow.vue
@@ -31,7 +31,7 @@
       <template v-else>
         <div style="height: 2em" class="missing"></div>
       </template>
-      <series-picker-dialog v-model="modalSeriesPicker" :series.sync="selectedSeries"></series-picker-dialog>
+      <series-picker-dialog v-model="modalSeriesPicker" :series.sync="selectedSeries" :include-oneshots="false"/>
     </td>
 
     <!--  Book number chooser  -->
diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
index ec19c3eb..efea3b8c 100644
--- a/komga-webui/src/components/ItemCard.vue
+++ b/komga-webui/src/components/ItemCard.vue
@@ -20,7 +20,7 @@
           <div class="unread" v-if="isUnread"/>
 
           <!-- unread count for series -->
-          <span v-if="unreadCount"
+          <span v-else-if="unreadCount"
                 class="white--text pa-1 px-2 text-subtitle-2"
                 :style="{background: 'orange', position: 'absolute', right: 0}"
           >
@@ -72,11 +72,19 @@
               <div v-if="!selected && !preselect && actionMenu"
                    :style="'position: absolute; bottom: 5px; ' + ($vuetify.rtl ? 'left' : 'right') +': 5px'"
               >
-                <book-actions-menu v-if="computedItem.type() === ItemTypes.BOOK"
+                <one-shot-actions-menu v-if="computedItem.type() === ItemTypes.BOOK && item.oneshot"
+                                       :book="item"
+                                       :menu.sync="actionMenuState"
+                />
+                <book-actions-menu v-if="computedItem.type() === ItemTypes.BOOK && !item.oneshot"
                                    :book="item"
                                    :menu.sync="actionMenuState"
                 />
-                <series-actions-menu v-if="computedItem.type() === ItemTypes.SERIES"
+                <one-shot-actions-menu v-if="computedItem.type() === ItemTypes.SERIES && item.oneshot"
+                                       :series="item"
+                                       :menu.sync="actionMenuState"
+                />
+                <series-actions-menu v-if="computedItem.type() === ItemTypes.SERIES && !item.oneshot"
                                      :series="item"
                                      :menu.sync="actionMenuState"
                 />
@@ -128,7 +136,7 @@
               </router-link>
             </v-card-subtitle>
           </template>
-          <v-card-text class="px-2 font-weight-light" v-html="body">
+          <v-card-text class="px-2 pt-0 font-weight-light" v-html="body">
           </v-card-text>
         </template>
       </v-card>
@@ -166,10 +174,11 @@ import {
 } from '@/types/komga-sse'
 import {coverBase64} from '@/types/image'
 import {ReadListDto} from '@/types/komga-readlists'
+import OneShotActionsMenu from '@/components/menus/OneshotActionsMenu.vue'
 
 export default Vue.extend({
   name: 'ItemCard',
-  components: {BookActionsMenu, SeriesActionsMenu, CollectionActionsMenu, ReadListActionsMenu},
+  components: {OneShotActionsMenu, BookActionsMenu, SeriesActionsMenu, CollectionActionsMenu, ReadListActionsMenu},
   props: {
     item: {
       type: Object as () => BookDto | SeriesDto | CollectionDto | ReadListDto,
@@ -291,6 +300,7 @@ export default Vue.extend({
     },
     isUnread(): boolean {
       if (this.computedItem.type() === ItemTypes.BOOK) return getReadProgress(this.item as BookDto) === ReadStatus.UNREAD
+      if (this.computedItem.type() === ItemTypes.SERIES && (this.item as SeriesDto).oneshot) return (this.item as SeriesDto).booksUnreadCount + (this.item as SeriesDto).booksInProgressCount > 0
       return false
     },
     unreadCount(): number | undefined {
diff --git a/komga-webui/src/components/ReusableDialogs.vue b/komga-webui/src/components/ReusableDialogs.vue
index ef5f1ebe..8b68924a 100644
--- a/komga-webui/src/components/ReusableDialogs.vue
+++ b/komga-webui/src/components/ReusableDialogs.vue
@@ -65,6 +65,11 @@
       :books="updateBulkBooks"
     />
 
+    <edit-oneshot-dialog
+      v-model="updateOneshotsDialog"
+      :oneshots="updateOneshots"
+    />
+
     <edit-series-dialog
       v-model="updateSeriesDialog"
       :series="updateSeries"
@@ -103,16 +108,18 @@ import Vue from 'vue'
 import ReadListAddToDialog from '@/components/dialogs/ReadListAddToDialog.vue'
 import ReadListEditDialog from '@/components/dialogs/ReadListEditDialog.vue'
 import {BookDto} from '@/types/komga-books'
-import {SeriesDto} from '@/types/komga-series'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
 import {ERROR} from '@/types/events'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 import {LibraryDto} from '@/types/komga-libraries'
 import BulkEditBooksDialog from '@/components/dialogs/BulkEditBooksDialog.vue'
 import {ReadListDto} from '@/types/komga-readlists'
+import EditOneshotDialog from '@/components/dialogs/EditOneshotDialog.vue'
 
 export default Vue.extend({
   name: 'ReusableDialogs',
   components: {
+    EditOneshotDialog,
     BulkEditBooksDialog,
     ConfirmationDialog,
     CollectionAddToDialog,
@@ -259,6 +266,18 @@ export default Vue.extend({
     booksToDeleteSingle(): boolean {
       return !Array.isArray(this.booksToDelete)
     },
+    // oneshots
+    updateOneshotsDialog: {
+      get(): boolean {
+        return this.$store.state.updateOneshotsDialog
+      },
+      set(val) {
+        this.$store.dispatch('dialogUpdateOneshotsDisplay', val)
+      },
+    },
+    updateOneshots(): Oneshot | Oneshot[] {
+      return this.$store.state.updateOneshots
+    },
     // series
     updateSeriesDialog: {
       get(): boolean {
diff --git a/komga-webui/src/components/SearchBox.vue b/komga-webui/src/components/SearchBox.vue
index 639ccd50..4e15e0de 100644
--- a/komga-webui/src/components/SearchBox.vue
+++ b/komga-webui/src/components/SearchBox.vue
@@ -76,7 +76,10 @@
 
           <v-list-item-content>
             <v-list-item-title>{{ data.item.metadata.title }}</v-list-item-title>
-            <v-list-item-subtitle>{{ data.item.seriesTitle }} - {{ data.item.metadata.number }}</v-list-item-subtitle>
+            <v-list-item-subtitle v-if="!data.item.oneshot">{{ data.item.seriesTitle }} - {{
+                data.item.metadata.number
+              }}
+            </v-list-item-subtitle>
             <v-list-item-subtitle>{{
                 $t('searchbox.in_library', {library: getLibraryName(data.item)})
               }}
@@ -144,6 +147,10 @@ export default Vue.extend({
         })
 
         if (val.type === 'series') this.$router.push({name: 'browse-series', params: {seriesId: val.id}})
+        else if (val.type === 'book' && val.oneshot) this.$router.push({
+          name: 'browse-oneshot',
+          params: {seriesId: val.seriesId},
+        })
         else if (val.type === 'book') this.$router.push({name: 'browse-book', params: {bookId: val.id}})
         else if (val.type === 'collection') this.$router.push({
           name: 'browse-collection',
diff --git a/komga-webui/src/components/bars/MultiSelectBar.vue b/komga-webui/src/components/bars/MultiSelectBar.vue
index aeed951b..7596f653 100644
--- a/komga-webui/src/components/bars/MultiSelectBar.vue
+++ b/komga-webui/src/components/bars/MultiSelectBar.vue
@@ -43,7 +43,7 @@
         </v-tooltip>
       </v-btn>
 
-      <v-btn icon @click="addToCollection" v-if="isAdmin && kind === 'series'">
+      <v-btn icon @click="addToCollection" v-if="isAdmin && (kind === 'series' || (kind === 'books' && oneshots))">
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
             <v-icon v-on="on">mdi-playlist-plus</v-icon>
@@ -52,7 +52,7 @@
         </v-tooltip>
       </v-btn>
 
-      <v-btn icon @click="addToReadList" v-if="isAdmin && kind === 'books'">
+      <v-btn icon @click="addToReadList" v-if="isAdmin && (kind === 'books' || (kind === 'series' && oneshots))">
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
             <v-icon v-on="on">mdi-book-plus-multiple</v-icon>
@@ -114,6 +114,10 @@ export default Vue.extend({
       type: String,
       required: true,
     },
+    oneshots: {
+      type: Boolean,
+      default: false,
+    },
     showSelectAll: {
       type: Boolean,
       default: false,
diff --git a/komga-webui/src/components/dialogs/EditOneshotDialog.vue b/komga-webui/src/components/dialogs/EditOneshotDialog.vue
new file mode 100644
index 00000000..c8b364c8
--- /dev/null
+++ b/komga-webui/src/components/dialogs/EditOneshotDialog.vue
@@ -0,0 +1,1128 @@
+<template>
+  <v-dialog v-model="modal"
+            :fullscreen="$vuetify.breakpoint.xsOnly"
+            max-width="800"
+            @keydown.esc="dialogCancel"
+  >
+    <form novalidate>
+      <v-card>
+        <v-toolbar class="hidden-sm-and-up">
+          <v-btn icon @click="dialogCancel">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+          <v-toolbar-title>{{ dialogTitle }}</v-toolbar-title>
+          <v-spacer/>
+          <v-toolbar-items>
+            <v-btn text color="primary" @click="dialogConfirm">{{ $t('dialog.edit_books.button_confirm') }}</v-btn>
+          </v-toolbar-items>
+        </v-toolbar>
+
+        <v-card-title class="hidden-xs-only">
+          <v-icon class="mx-4">mdi-pencil</v-icon>
+          {{ dialogTitle }}
+        </v-card-title>
+
+        <v-tabs :vertical="$vuetify.breakpoint.smAndUp" v-model="tab">
+          <v-tab class="justify-start">
+            <v-icon left class="hidden-xs-only">mdi-format-align-center</v-icon>
+            {{ $t('dialog.edit_books.tab_general') }}
+          </v-tab>
+          <v-tab class="justify-start">
+            <v-icon left class="hidden-xs-only">mdi-account-multiple</v-icon>
+            {{ $t('dialog.edit_books.tab_authors') }}
+          </v-tab>
+          <v-tab class="justify-start">
+            <v-icon left class="hidden-xs-only">mdi-tag-multiple</v-icon>
+            {{ $t('dialog.edit_books.tab_tags') }}
+          </v-tab>
+          <v-tab class="justify-start" v-if="single">
+            <v-icon left class="hidden-xs-only">mdi-link</v-icon>
+            {{ $t('dialog.edit_books.tab_links') }}
+          </v-tab>
+          <v-tab class="justify-start" v-if="single">
+            <v-icon left class="hidden-xs-only">mdi-image</v-icon>
+            {{ $t('dialog.edit_books.tab_poster') }}
+          </v-tab>
+          <v-tab class="justify-start">
+            <v-icon left class="hidden-xs-only">mdi-account-multiple</v-icon>
+            {{ $t('dialog.edit_series.tab_sharing') }}
+          </v-tab>
+
+          <!--  Tab: General  -->
+          <v-tab-item>
+            <v-card flat>
+              <v-container fluid>
+
+                <!--  Title  -->
+                <v-row v-if="single">
+                  <v-col cols="12">
+                    <v-text-field v-model="form.book.title"
+                                  :label="$t('dialog.edit_books.field_title')"
+                                  filled
+                                  dense
+                                  :error-messages="requiredBookErrors('title')"
+                                  @input="$v.form.book.title.$touch()"
+                                  @blur="$v.form.book.title.$touch()"
+                                  @change="form.book.titleLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.book.titleLock ? 'secondary' : ''"
+                                @click="form.book.titleLock = !form.book.titleLock"
+                        >
+                          {{ form.book.titleLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+                </v-row>
+
+                <!--  Sort Title  -->
+                <v-row v-if="single">
+                  <v-col cols="12">
+                    <v-text-field v-model="form.series.titleSort"
+                                  :label="$t('dialog.edit_series.field_sort_title')"
+                                  filled
+                                  dense
+                                  :error-messages="requiredSeriesErrors('titleSort')"
+                                  @input="$v.form.series.titleSort.$touch()"
+                                  @blur="$v.form.series.titleSort.$touch()"
+                                  @change="form.series.titleSortLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.titleSortLock ? 'secondary' : ''"
+                                @click="form.series.titleSortLock = !form.series.titleSortLock"
+                        >
+                          {{ form.series.titleSortLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+                </v-row>
+
+                <!--  Summary  -->
+                <v-row v-if="single">
+                  <v-col cols="12">
+                    <v-textarea v-model="form.book.summary"
+                                :label="$t('dialog.edit_books.field_summary')"
+                                filled
+                                dense
+                                @input="$v.form.book.summary.$touch()"
+                                @change="form.book.summaryLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.book.summaryLock ? 'secondary' : ''"
+                                @click="form.book.summaryLock = !form.book.summaryLock"
+                        >
+                          {{ form.book.summaryLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-textarea>
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <!--  Reading Direction  -->
+                  <v-col cols="6">
+                    <v-select v-model="form.series.readingDirection"
+                              :items="readingDirections"
+                              :label="$t('dialog.edit_series.field_reading_direction')"
+                              clearable
+                              filled
+                              :placeholder="!single && mixed.readingDirection ? $t('dialog.edit_series.mixed') : ''"
+                              @input="$v.form.series.readingDirection.$touch()"
+                              @change="form.series.readingDirectionLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.readingDirectionLock ? 'secondary' : ''"
+                                @click="form.series.readingDirectionLock = !form.series.readingDirectionLock"
+                        >
+                          {{ form.series.readingDirectionLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-select>
+                  </v-col>
+
+                  <!--  Language  -->
+                  <v-col cols="6">
+                    <v-text-field v-model="form.series.language"
+                                  :label="$t('dialog.edit_series.field_language')"
+                                  filled
+                                  dense
+                                  :placeholder="!single && mixed.language ? $t('dialog.edit_series.mixed') : ''"
+                                  :error-messages="languageErrors"
+                                  :hint="$t('dialog.edit_series.field_language_hint')"
+                                  @input="$v.form.series.language.$touch()"
+                                  @change="form.series.languageLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.languageLock ? 'secondary' : ''"
+                                @click="form.series.languageLock = !form.series.languageLock"
+                        >
+                          {{ form.series.languageLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <!--  Publisher  -->
+                  <v-col cols="6">
+                    <v-text-field v-model="form.series.publisher"
+                                  :label="$t('dialog.edit_series.field_publisher')"
+                                  filled
+                                  dense
+                                  :placeholder="!single && mixed.publisher ? $t('dialog.edit_series.mixed') : ''"
+                                  @input="$v.form.series.publisher.$touch()"
+                                  @change="form.series.publisherLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.publisherLock ? 'secondary' : ''"
+                                @click="form.series.publisherLock = !form.series.publisherLock"
+                        >
+                          {{ form.series.publisherLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+
+                  <!--  Age Rating  -->
+                  <v-col cols="6">
+                    <v-text-field v-model="form.series.ageRating"
+                                  :label="$t('dialog.edit_series.field_age_rating')"
+                                  clearable
+                                  filled
+                                  dense
+                                  type="number"
+                                  :placeholder="!single && mixed.ageRating ? $t('dialog.edit_series.mixed') : ''"
+                                  :error-messages="ageRatingErrors"
+                                  @input="$v.form.series.ageRating.$touch()"
+                                  @blur="$v.form.series.ageRating.$touch()"
+                                  @change="form.series.ageRatingLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.ageRatingLock ? 'secondary' : ''"
+                                @click="form.series.ageRatingLock = !form.series.ageRatingLock"
+                        >
+                          {{ form.series.ageRatingLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+                </v-row>
+
+                <v-row v-if="single">
+                  <!--  Release Date  -->
+                  <v-col cols="6">
+                    <v-menu
+                      v-model="menuDate"
+                      :close-on-content-click="false"
+                      transition="scale-transition"
+                      offset-y
+                      min-width="auto"
+                    >
+                      <template v-slot:activator="{on, attrs}">
+                        <v-text-field v-model="form.book.releaseDate"
+                                      :label="$t('dialog.edit_books.field_release_date')"
+                                      filled
+                                      dense
+                                      placeholder="YYYY-MM-DD"
+                                      clearable
+                                      :error-messages="releaseDateErrors"
+                                      @blur="$v.form.book.releaseDate.$touch()"
+                                      @change="form.book.releaseDateLock = true"
+                                      v-bind="attrs"
+                                      v-on="on"
+                        >
+                          <template v-slot:prepend>
+                            <v-icon :color="form.book.releaseDateLock ? 'secondary' : ''"
+                                    @click="form.book.releaseDateLock = !form.book.releaseDateLock"
+                            >
+                              {{ form.book.releaseDateLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                            </v-icon>
+                          </template>
+                        </v-text-field>
+                      </template>
+                      <v-date-picker v-model="form.book.releaseDate"
+                                     :show-current="true"
+                                     :show-adjacent-months="true"
+                                     :locale="$i18n.locale"
+                                     :first-day-of-week="$store.getters.getLocaleFirstDay()"
+                                     @input="menuDate = false"
+                                     @change="form.book.releaseDateLock = true"
+                      />
+                    </v-menu>
+                  </v-col>
+
+                  <!--  ISBN  -->
+                  <v-col cols="6">
+                    <v-text-field v-model.trim="form.book.isbn"
+                                  :label="$t('dialog.edit_books.field_isbn')"
+                                  filled
+                                  dense
+                                  placeholder="978-2-20-504375-4"
+                                  clearable
+                                  :error-messages="isbnErrors"
+                                  @blur="$v.form.book.isbn.$touch()"
+                                  @change="form.book.isbnLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.book.isbnLock ? 'secondary' : ''"
+                                @click="form.book.isbnLock = !form.book.isbnLock"
+                        >
+                          {{ form.book.isbnLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+                </v-row>
+
+              </v-container>
+            </v-card>
+          </v-tab-item>
+
+          <!--  Tab: Authors  -->
+          <v-tab-item>
+            <v-card flat>
+              <v-container fluid>
+                <v-alert v-if="!single"
+                         type="warning"
+                         outlined
+                         dense
+                >{{ $t('dialog.edit_books.authors_notice_multiple_edit') }}
+                </v-alert>
+                <v-row v-for="(role, i) in authorRoles"
+                       :key="i"
+                >
+                  <v-col cols="12">
+                    <span class="text-body-2">{{ $_.capitalize(role.name) }}</span>
+                    <v-combobox v-model="form.book.authors[role.value]"
+                                :items="authorSearchResultsFull"
+                                :search-input.sync="authorSearch[i]"
+                                @keydown.esc="authorSearch[i] = null"
+                                @input="$v.form.book.authors.$touch()"
+                                @change="form.book.authorsLock = true"
+                                hide-selected
+                                chips
+                                deletable-chips
+                                multiple
+                                filled
+                                dense
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.book.authorsLock ? 'secondary' : ''"
+                                @click="form.book.authorsLock = !form.book.authorsLock"
+                        >
+                          {{ form.book.authorsLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-combobox>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="12" md="6">
+                    <v-form
+                      v-model="customRoleValid"
+                      ref="customRoleForm"
+                      @submit.prevent="addRole"
+                    >
+                      <v-text-field
+                        label="Add custom role"
+                        append-outer-icon="mdi-plus"
+                        v-model.trim="customRole"
+                        @click:append-outer="addRole"
+                        :rules="customRoleRules"
+                      ></v-text-field>
+                    </v-form>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-tab-item>
+
+          <!--  Tab: Tags  -->
+          <v-tab-item>
+            <v-card flat>
+              <v-container fluid>
+                <v-alert v-if="!single"
+                         type="warning"
+                         outlined
+                         dense
+                >{{ $t('dialog.edit_books.tags_notice_multiple_edit') }}
+                </v-alert>
+
+                <!-- Genres -->
+                <v-row>
+                  <v-col cols="12">
+                    <span class="text-body-2">{{ $t('dialog.edit_series.field_genres') }}</span>
+                    <v-combobox v-model="form.series.genres"
+                                :items="genresAvailable"
+                                @input="$v.form.series.genres.$touch()"
+                                @change="form.series.genresLock = true"
+                                hide-selected
+                                chips
+                                deletable-chips
+                                multiple
+                                filled
+                                dense
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.genresLock ? 'secondary' : ''"
+                                @click="form.series.genresLock = !form.series.genresLock"
+                        >
+                          {{ form.series.genresLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-combobox>
+                  </v-col>
+                </v-row>
+
+                <!-- Tags -->
+                <v-row>
+                  <v-col cols="12">
+                    <span class="text-body-2">{{ $t('dialog.edit_books.field_tags') }}</span>
+                    <v-combobox v-model="form.book.tags"
+                                :items="tagsAvailable"
+                                @input="$v.form.book.tags.$touch()"
+                                @change="form.book.tagsLock = true"
+                                hide-selected
+                                chips
+                                deletable-chips
+                                multiple
+                                filled
+                                dense
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.book.tagsLock ? 'secondary' : ''"
+                                @click="form.book.tagsLock = !form.book.tagsLock"
+                        >
+                          {{ form.book.tagsLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-combobox>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-tab-item>
+
+          <!--  Tab: Links  -->
+          <v-tab-item v-if="single">
+            <v-card flat min-height="100">
+              <v-container fluid>
+                <!-- Links -->
+                <v-form
+                  v-model="linksValid"
+                  ref="linksForm"
+                >
+                  <v-row
+                    v-for="(link, i) in form.book.links"
+                    :key="i"
+                  >
+                    <v-col cols="4" class="py-0">
+                      <v-text-field v-model="form.book.links[i].label"
+                                    :label="$t('dialog.edit_books.field_link_label')"
+                                    filled
+                                    dense
+                                    :rules="[linksLabelRules]"
+                                    @input="$v.form.book.links.$touch()"
+                                    @blur="$v.form.book.links.$touch()"
+                                    @change="form.book.linksLock = true"
+                      >
+                        <template v-slot:prepend>
+                          <v-icon :color="form.book.linksLock ? 'secondary' : ''"
+                                  @click="form.book.linksLock = !form.book.linksLock"
+                          >
+                            {{ form.book.linksLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                          </v-icon>
+                        </template>
+                      </v-text-field>
+                    </v-col>
+
+                    <v-col cols="8" class="py-0">
+                      <v-text-field v-model="form.book.links[i].url"
+                                    :label="$t('dialog.edit_books.field_link_url')"
+                                    filled
+                                    dense
+                                    :rules="[linksUrlRules]"
+                                    @input="$v.form.book.links.$touch()"
+                                    @blur="$v.form.book.links.$touch()"
+                                    @change="form.book.linksLock = true"
+                      >
+                        <template v-slot:append-outer>
+                          <v-icon @click="form.book.links.splice(i, 1)">mdi-delete</v-icon>
+                        </template>
+                      </v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-form>
+
+                <v-row>
+                  <v-spacer/>
+                  <v-col cols="auto">
+                    <v-btn
+                      elevation="2"
+                      fab
+                      small
+                      bottom
+                      right
+                      color="primary"
+                      @click="form.book.links.push({label:'', url:''})"
+                    >
+                      <v-icon>mdi-plus</v-icon>
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-tab-item>
+
+          <!--  Tab: Thumbnails  -->
+          <v-tab-item v-if="single">
+            <v-card flat>
+              <v-container fluid>
+                <!-- Upload -->
+                <v-row>
+                  <v-col class="pa-1">
+                    <drop-zone ref="thumbnailsUpload" @on-input-change="addThumbnail" class="pa-8"/>
+                  </v-col>
+                </v-row>
+
+                <!-- Gallery -->
+                <v-row>
+                  <v-col
+                    cols="6" sm="4" lg="3" class="pa-1"
+                    v-for="(item, index) in [...poster.uploadQueue, ...poster.bookThumbnails]"
+                    :key="index"
+                  >
+                    <thumbnail-card
+                      :item="item"
+                      :selected="isThumbnailSelected(item)"
+                      :toBeDeleted="isThumbnailToBeDeleted(item)"
+                      @on-select-thumbnail="selectThumbnail"
+                      @on-delete-thumbnail="deleteThumbnail"
+                    />
+                  </v-col>
+                </v-row>
+
+              </v-container>
+            </v-card>
+          </v-tab-item>
+
+          <!--  Tab: Sharing  -->
+          <v-tab-item>
+            <v-card flat>
+              <v-container fluid>
+                <v-alert v-if="!single"
+                         type="warning"
+                         outlined
+                         dense
+                >{{ $t('dialog.edit_books.tags_notice_multiple_edit') }}
+                </v-alert>
+
+                <!-- Sharing Labels -->
+                <v-row>
+                  <v-col cols="12">
+                    <span class="text-body-2">{{ $t('dialog.edit_series.field_labels') }}</span>
+                    <v-combobox v-model="form.series.sharingLabels"
+                                :items="sharingLabelsAvailable"
+                                @input="$v.form.series.sharingLabels.$touch()"
+                                @change="form.series.sharingLabelsLock = true"
+                                hide-selected
+                                chips
+                                deletable-chips
+                                multiple
+                                filled
+                                dense
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.series.sharingLabelsLock ? 'secondary' : ''"
+                                @click="form.series.sharingLabelsLock = !form.series.sharingLabelsLock"
+                        >
+                          {{ form.series.sharingLabelsLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-combobox>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-tab-item>
+        </v-tabs>
+
+        <v-card-actions class="hidden-xs-only">
+          <v-spacer/>
+          <v-btn text @click="dialogCancel">{{ $t('dialog.edit_books.button_cancel') }}</v-btn>
+          <v-btn color="primary" @click="dialogConfirm">{{ $t('dialog.edit_books.button_confirm') }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </form>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {helpers, minValue, requiredIf} from 'vuelidate/lib/validators'
+import {ReadingDirection} from '@/types/enum-books'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
+import {ERROR, ErrorEvent} from '@/types/events'
+import DropZone from '@/components/DropZone.vue'
+import ThumbnailCard from '@/components/ThumbnailCard.vue'
+import {BookDto, BookThumbnailDto} from '@/types/komga-books'
+import {isMatch} from 'date-fns'
+import IsbnVerify from '@saekitominaga/isbn-verify'
+import {debounce} from 'lodash'
+import {authorRoles} from '@/types/author-roles'
+import {groupAuthorsByRole} from '@/functions/authors'
+
+const tags = require('language-tags')
+
+const validLanguage = (value: string) => !helpers.req(value) || tags.check(value)
+const validDate = (value: string) => !helpers.req(value) || isMatch(value, 'yyyy-MM-dd')
+const validIsbn = (value: string) => !helpers.req(value) || new IsbnVerify(value).isIsbn13({check_digit: true})
+
+export default Vue.extend({
+  name: 'EditOneshotDialog',
+  components: {ThumbnailCard, DropZone},
+  data: () => {
+    return {
+      modal: false,
+      tab: 0,
+      menuDate: false,
+      customRole: '',
+      customRoles: [] as string[],
+      customRoleValid: false,
+      linksValid: false,
+      form: {
+        series: {
+          titleSort: '',
+          titleSortLock: false,
+          readingDirection: '',
+          readingDirectionLock: false,
+          publisher: '',
+          publisherLock: false,
+          ageRating: undefined as number | undefined,
+          ageRatingLock: false,
+          language: '',
+          languageLock: false,
+          genres: [],
+          genresLock: false,
+          sharingLabels: [],
+          sharingLabelsLock: false,
+        },
+        book: {
+          title: '',
+          titleLock: false,
+          summary: '',
+          summaryLock: false,
+          releaseDate: '',
+          releaseDateLock: false,
+          authors: {},
+          authorsLock: false,
+          tags: [],
+          tagsLock: false,
+          isbn: '',
+          isbnLock: false,
+          links: [],
+          linksLock: false,
+        },
+      },
+      mixed: {
+        readingDirection: false,
+        publisher: false,
+        ageRating: false,
+        language: false,
+      },
+      poster: {
+        selectedThumbnail: '',
+        uploadQueue: [] as File[],
+        deleteQueue: [] as BookThumbnailDto[],
+        bookThumbnails: [] as BookThumbnailDto[],
+      },
+      authorSearch: [],
+      authorSearchResults: [] as string[],
+      genresAvailable: [] as string[],
+      tagsAvailable: [] as string[],
+      sharingLabelsAvailable: [] as string[],
+    }
+  },
+  props: {
+    value: Boolean,
+    oneshots: {
+      type: [Object as () => Oneshot, Array as () => Oneshot[]],
+      required: true,
+    },
+  },
+  watch: {
+    value(val) {
+      this.modal = val
+    },
+    modal(val) {
+      if (val) {
+        this.getThumbnails(this.books)
+        this.loadAvailableTags()
+        this.loadAvailableGenres()
+        this.loadAvailableSharingLabels()
+      } else {
+        this.dialogCancel()
+      }
+    },
+    oneshots: {
+      immediate: true,
+      handler(val) {
+        this.dialogReset(val)
+      },
+    },
+    authorSearch: {
+      deep: true,
+      handler: debounce(async function (this: any, val: []) {
+        const index = val.findIndex(x => x !== null)
+        this.authorSearchResults = await this.$komgaReferential.getAuthorsNames(val[index])
+      }, 500),
+    },
+  },
+  validations: {
+    form: {
+      series: {
+        titleSort: {
+          required: requiredIf(function (this: any, model: any) {
+            return this.single
+          }),
+        },
+        language: {
+          validLanguage: validLanguage,
+        },
+        genres: {},
+        sharingLabels: {},
+        ageRating: {minValue: minValue(0)},
+        readingDirection: {},
+        publisher: {},
+      },
+      book: {
+        title: {
+          required: requiredIf(function (this: any, model: any) {
+            return this.single
+          }),
+        },
+        summary: {},
+        tags: {},
+        releaseDate: {validDate},
+        links: {},
+        authors: {},
+        isbn: {validIsbn},
+      },
+    },
+  },
+  computed: {
+    series(): SeriesDto | SeriesDto[] {
+      return this.single ? (this.oneshots as Oneshot).series : (this.oneshots as Oneshot[]).map(x => x.series)
+    },
+    books(): BookDto | BookDto[] {
+      return this.single ? (this.oneshots as Oneshot).book : (this.oneshots as Oneshot[]).map(x => x.book)
+    },
+    single(): boolean {
+      return !Array.isArray(this.oneshots)
+    },
+    authorRoles(): NameValue[] {
+      let remoteRoles = [] as string[]
+      if (Array.isArray(this.books))
+        remoteRoles = this.books.flatMap(b => b.metadata.authors).map(a => a.role)
+      else if (this.books?.metadata?.authors)
+        remoteRoles = this.books.metadata.authors.map(a => a.role)
+      const allRoles = this.$_.uniq([...authorRoles, ...remoteRoles, ...this.customRoles])
+      return allRoles.map((role: string) => ({
+        name: this.$te(`author_roles.${role}`) ? this.$t(`author_roles.${role}`).toString() : role,
+        value: role,
+      }))
+    },
+    authorSearchResultsFull(): string[] {
+      // merge local values with server search, so that already input value is available
+      const local = (this.$_.values(this.form.book.authors).flat()) as unknown as string[]
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      return this.$_.sortBy(this.$_.union(local, this.authorSearchResults), x => x.toLowerCase())
+    },
+    readingDirections(): any[] {
+      return Object.keys(ReadingDirection).map(x => (
+        {
+          text: this.$t(`enums.reading_direction.${x}`),
+          value: x,
+        }),
+      )
+    },
+    ageRatingErrors(): string[] {
+      const errors = [] as string[]
+      if (!this.$v.form?.series?.ageRating?.$dirty) return errors
+      !this.$v?.form?.series?.ageRating?.minValue && errors.push(this.$t('dialog.edit_series.field_age_rating_error').toString())
+      return errors
+    },
+    languageErrors(): string[] {
+      if (!this.$v.form?.series?.language?.$dirty) return []
+      if (!this.$v?.form?.series?.language?.validLanguage) return tags(this.form.series.language).errors().map((x: any) => x.message)
+      return []
+    },
+    dialogTitle(): string {
+      return this.single
+        ? this.$t('dialog.edit_books.dialog_title_single', {book: this.$_.get(this.books, 'metadata.title')}).toString()
+        : this.$tc('dialog.edit_books.dialog_title_multiple', (this.books as BookDto[]).length)
+    },
+    releaseDateErrors(): string[] {
+      const errors = [] as string[]
+      if (!this.$v.form?.book?.releaseDate?.$dirty) return errors
+      !this.$v?.form?.book?.releaseDate?.validDate && errors.push(this.$t('dialog.edit_books.field_release_date_error').toString())
+      return errors
+    },
+    isbnErrors(): string[] {
+      const errors = [] as string[]
+      if (!this.$v.form?.book?.isbn?.$dirty) return errors
+      !this.$v?.form?.book?.isbn?.validIsbn && errors.push(this.$t('dialog.edit_books.field_isbn_error').toString())
+      return errors
+    },
+    customRoleRules(): any[] {
+      if (this.customRole === '') return [this.$t('common.required').toString()]
+      if (this.authorRoles.map(n => n.value.toLowerCase()).includes(this.customRole?.toLowerCase())) return [this.$t('dialog.edit_books.add_author_role_error_duplicate').toString()]
+      return [true]
+    },
+  },
+  methods: {
+    linksLabelRules(label: string): boolean | string {
+      if (!!this.$_.trim(label)) return true
+      return this.$t('common.required').toString()
+    },
+    linksUrlRules(value: string): boolean | string {
+      let url
+      try {
+        url = new URL(value)
+      } catch (_) {
+        return this.$t('dialog.edit_books.field_link_url_error_url').toString()
+      }
+      if (url.protocol === 'http:' || url.protocol === 'https:') return true
+      return this.$t('dialog.edit_books.field_link_url_error_protocol').toString()
+    },
+    addRole() {
+      if ((this.$refs.customRoleForm as any).validate()) {
+        this.customRoles.push(this.customRole.toLowerCase());
+        (this.$refs.customRoleForm as any).reset()
+      }
+    },
+    async loadAvailableTags() {
+      this.tagsAvailable = await this.$komgaReferential.getTags()
+    },
+    async loadAvailableGenres() {
+      this.genresAvailable = await this.$komgaReferential.getGenres()
+    },
+    async loadAvailableSharingLabels() {
+      this.sharingLabelsAvailable = await this.$komgaReferential.getSharingLabels()
+    },
+    requiredBookErrors(fieldName: string): string[] {
+      const errors = [] as string[]
+      const formField = this.$v.form.book!![fieldName] as any
+      if (!formField.$dirty) return errors
+      !formField.required && errors.push(this.$t('common.required').toString())
+      return errors
+    },
+    requiredSeriesErrors(fieldName: string): string[] {
+      const errors = [] as string[]
+      const formField = this.$v.form.series!![fieldName] as any
+      if (!formField.$dirty) return errors
+      !formField.required && errors.push(this.$t('common.required').toString())
+      return errors
+    },
+    dialogReset(oneshots: Oneshot | Oneshot[]) {
+      this.tab = 0;
+      (this.$refs.customRoleForm as any)?.reset();
+      (this.$refs.linksForm as any)?.resetValidation()
+      this.customRoles = []
+      this.$v.$reset()
+      if (Array.isArray(oneshots) && oneshots.length === 0) return
+      else if (this.$_.isEmpty(oneshots)) return
+      if (Array.isArray(oneshots) && oneshots.length > 0) {
+        const readingDirection = this.$_.uniq(oneshots.map(x => x.series.metadata.readingDirection))
+        this.form.series.readingDirection = readingDirection.length > 1 ? '' : readingDirection[0]
+        this.mixed.readingDirection = readingDirection.length > 1
+
+        const readingDirectionLock = this.$_.uniq(oneshots.map(x => x.series.metadata.readingDirectionLock))
+        this.form.series.readingDirectionLock = readingDirectionLock.length > 1 ? false : readingDirectionLock[0]
+
+        const ageRating = this.$_.uniq(oneshots.map(x => x.series.metadata.ageRating))
+        this.form.series.ageRating = ageRating.length > 1 ? undefined : ageRating[0]
+        this.mixed.ageRating = ageRating.length > 1
+
+        const ageRatingLock = this.$_.uniq(oneshots.map(x => x.series.metadata.ageRatingLock))
+        this.form.series.ageRatingLock = ageRatingLock.length > 1 ? false : ageRatingLock[0]
+
+        const publisher = this.$_.uniq(oneshots.map(x => x.series.metadata.publisher))
+        this.form.series.publisher = publisher.length > 1 ? '' : publisher[0]
+        this.mixed.publisher = publisher.length > 1
+
+        const publisherLock = this.$_.uniq(oneshots.map(x => x.series.metadata.publisherLock))
+        this.form.series.publisherLock = publisherLock.length > 1 ? false : publisherLock[0]
+
+        const language = this.$_.uniq(oneshots.map(x => x.series.metadata.language))
+        this.form.series.language = language.length > 1 ? '' : language[0]
+        this.mixed.language = language.length > 1
+
+        const languageLock = this.$_.uniq(oneshots.map(x => x.series.metadata.languageLock))
+        this.form.series.languageLock = languageLock.length > 1 ? false : languageLock[0]
+
+        this.form.series.genres = []
+
+        const genresLock = this.$_.uniq(oneshots.map(x => x.series.metadata.genresLock))
+        this.form.series.genresLock = genresLock.length > 1 ? false : genresLock[0]
+
+        this.form.book.tags = []
+
+        const tagsLock = this.$_.uniq(oneshots.map(x => x.book.metadata.tagsLock))
+        this.form.book.tagsLock = tagsLock.length > 1 ? false : tagsLock[0]
+
+        this.form.series.sharingLabels = []
+
+        const sharingLabelsLock = this.$_.uniq(oneshots.map(x => x.series.metadata.sharingLabelsLock))
+        this.form.series.sharingLabelsLock = sharingLabelsLock.length > 1 ? false : sharingLabelsLock[0]
+
+        this.form.book.links = []
+        this.form.book.authors = {}
+
+        const authorsLock = this.$_.uniq(oneshots.map(x => x.book.metadata.authorsLock))
+        this.form.book.authorsLock = authorsLock.length > 1 ? false : authorsLock[0]
+      } else {
+        this.form.series.genres = []
+        this.form.series.sharingLabels = []
+        this.form.book.tags = []
+        this.form.book.links = []
+        const oneshot = oneshots as Oneshot
+        this.$_.merge(this.form.series, oneshot.series.metadata)
+        this.$_.merge(this.form.book, oneshot.book.metadata)
+        this.form.book.authors = groupAuthorsByRole(oneshot.book.metadata.authors)
+        this.poster.selectedThumbnail = ''
+        this.poster.deleteQueue = []
+        this.poster.uploadQueue = []
+        this.poster.bookThumbnails = []
+      }
+    },
+    dialogCancel() {
+      this.$emit('input', false)
+      this.dialogReset(this.oneshots)
+    },
+    async dialogConfirm() {
+      if (await this.editOneShots()) {
+        this.$emit('input', false)
+      }
+    },
+    validateForm(): any {
+      if (!this.$v.$invalid
+        && (!this.single || !this.$refs.linksForm || (this.$refs.linksForm as any).validate())
+      ) {
+        const metadataSeries = {
+          readingDirectionLock: this.form.series.readingDirectionLock,
+          ageRatingLock: this.form.series.ageRatingLock,
+          publisherLock: this.form.series.publisherLock,
+          languageLock: this.form.series.languageLock,
+          genresLock: this.form.series.genresLock,
+          sharingLabelsLock: this.form.series.sharingLabelsLock,
+        }
+        const metadataBook = {
+          authorsLock: this.form.book.authorsLock,
+          tagsLock: this.form.book.tagsLock,
+        }
+
+        if (this.$v.form?.book?.authors?.$dirty) {
+          this.$_.merge(metadataBook, {
+            authors: this.$_.keys(this.form.book.authors).flatMap((role: string) =>
+              this.$_.get(this.form.book.authors, role).map((name: string) => ({name: name, role: role})),
+            ),
+          })
+        }
+
+        if (this.$v.form?.book?.tags?.$dirty) {
+          this.$_.merge(metadataBook, {tags: this.form.book.tags})
+        }
+
+        if (this.$v.form?.series?.readingDirection?.$dirty) {
+          this.$_.merge(metadataSeries, {readingDirection: this.form.series.readingDirection ? this.form.series.readingDirection : null})
+        }
+
+        if (this.$v.form?.series?.ageRating?.$dirty) {
+          this.$_.merge(metadataSeries, {ageRating: this.form.series.ageRating})
+        }
+
+        if (this.$v.form?.series?.publisher?.$dirty) {
+          this.$_.merge(metadataSeries, {publisher: this.form.series.publisher})
+        }
+
+        if (this.$v.form?.series?.genres?.$dirty) {
+          this.$_.merge(metadataSeries, {genres: this.form.series.genres})
+        }
+
+        if (this.$v.form?.series?.language?.$dirty) {
+          this.$_.merge(metadataSeries, {language: this.form.series.language})
+        }
+
+        if (this.$v.form?.series?.sharingLabels?.$dirty) {
+          this.$_.merge(metadataSeries, {sharingLabels: this.form.series.sharingLabels})
+        }
+
+        if (this.single) {
+          this.$_.merge(metadataSeries, {
+            titleLock: this.form.book.titleLock,
+            titleSortLock: this.form.series.titleSortLock,
+            summaryLock: this.form.book.summaryLock,
+          })
+
+          this.$_.merge(metadataBook, {
+            titleLock: this.form.book.titleLock,
+            summaryLock: this.form.book.summaryLock,
+            releaseDateLock: this.form.book.releaseDateLock,
+            isbnLock: this.form.book.isbnLock,
+            linksLock: this.form.book.linksLock,
+          })
+
+          if (this.$v.form?.series?.titleSort?.$dirty) {
+            this.$_.merge(metadataSeries, {titleSort: this.form.series.titleSort})
+          }
+
+          if (this.$v.form?.book?.title?.$dirty) {
+            this.$_.merge(metadataBook, {title: this.form.book.title})
+            this.$_.merge(metadataSeries, {title: this.form.book.title})
+          }
+
+          if (this.$v.form?.book?.summary?.$dirty) {
+            this.$_.merge(metadataBook, {summary: this.form.book.summary})
+            this.$_.merge(metadataSeries, {summary: this.form.book.summary})
+          }
+
+          if (this.$v.form?.book?.releaseDate?.$dirty) {
+            this.$_.merge(metadataBook, {releaseDate: this.form.book.releaseDate ? this.form.book.releaseDate : null})
+          }
+
+          if (this.$v.form?.book?.isbn?.$dirty) {
+            this.$_.merge(metadataBook, {isbn: this.form.book.isbn})
+          }
+
+          if (this.$v.form?.book?.links?.$dirty || this.form.book.links.length != (this.books as BookDto).metadata.links?.length) {
+            this.$_.merge(metadataBook, {links: this.form.book.links})
+          }
+        }
+
+        return {series: metadataSeries, book: metadataBook}
+      }
+      return null
+    },
+    async editOneShots(): Promise<boolean> {
+      if (this.single && this.poster.uploadQueue.length > 0) {
+        const book = this.books as BookDto
+        let hadErrors = false
+        for (const file of this.poster.uploadQueue.slice()) {
+          try {
+            await this.$komgaBooks.uploadThumbnail(book.id, file, file.name === this.poster.selectedThumbnail)
+            this.deleteThumbnail(file)
+          } catch (e) {
+            this.$eventHub.$emit(ERROR, {message: e.message} as ErrorEvent)
+            hadErrors = true
+          }
+        }
+        if (hadErrors) {
+          await this.getThumbnails(book)
+          return false
+        }
+      }
+
+      if (this.single && this.poster.selectedThumbnail !== '') {
+        const id = this.poster.selectedThumbnail
+        const book = this.books as BookDto
+        if (this.poster.bookThumbnails.find(value => value.id === id)) {
+          await this.$komgaBooks.markThumbnailAsSelected(book.id, id)
+        }
+      }
+
+      if (this.single && this.poster.deleteQueue.length > 0) {
+        this.poster.deleteQueue.forEach(toDelete => this.$komgaBooks.deleteThumbnail(toDelete.bookId, toDelete.id))
+      }
+
+      const metadata = this.validateForm()
+      if (metadata) {
+        const toUpdate = (this.single ? [this.oneshots] : this.oneshots) as Oneshot[]
+        for (const o of toUpdate) {
+          try {
+            await this.$komgaSeries.updateMetadata(o.series.id, metadata.series)
+            await this.$komgaBooks.updateMetadata(o.book.id, metadata.book)
+          } catch (e) {
+            this.$eventHub.$emit(ERROR, {message: e.message} as ErrorEvent)
+          }
+        }
+        return true
+      } else return false
+    },
+    addThumbnail(files: File[]) {
+      let hasSelected = false
+      for (const file of files) {
+        if (!this.poster.uploadQueue.find(value => value.name === file.name)) {
+          this.poster.uploadQueue.push(file)
+          if (!hasSelected) {
+            this.selectThumbnail(file)
+            hasSelected = true
+          }
+        }
+      }
+
+      (this.$refs.thumbnailsUpload as any).reset()
+    },
+    async getThumbnails(book: BookDto | BookDto[]) {
+      if (Array.isArray(book)) return
+
+      const thumbnails = await this.$komgaBooks.getThumbnails(book.id)
+
+      this.selectThumbnail(thumbnails.find(x => x.selected))
+
+      this.poster.bookThumbnails = thumbnails
+    },
+    isThumbnailSelected(item: File | BookThumbnailDto): boolean {
+      return item instanceof File ? item.name === this.poster.selectedThumbnail : item.id === this.poster.selectedThumbnail
+    },
+    selectThumbnail(item: File | BookThumbnailDto | undefined) {
+      if (!item) {
+        return
+      } else if (item instanceof File) {
+        this.poster.selectedThumbnail = item.name
+      } else {
+        const index = this.poster.deleteQueue.indexOf(item, 0)
+        if (index > -1) this.poster.deleteQueue.splice(index, 1)
+
+        this.poster.selectedThumbnail = item.id
+      }
+    },
+    isThumbnailToBeDeleted(item: File | BookThumbnailDto) {
+      if (item instanceof File) {
+        return false
+      } else {
+        return this.poster.deleteQueue.includes(item)
+      }
+    },
+    deleteThumbnail(item: File | BookThumbnailDto) {
+      if (item instanceof File) {
+        const index = this.poster.uploadQueue.indexOf(item, 0)
+        if (index > -1) {
+          this.poster.uploadQueue.splice(index, 1)
+        }
+        if (item.name === this.poster.selectedThumbnail) {
+          this.poster.selectedThumbnail = ''
+        }
+      } else {
+        // if thumbnail was marked for deletion, unmark it
+        if (this.isThumbnailToBeDeleted(item)) {
+          const index = this.poster.deleteQueue.indexOf(item, 0)
+          if (index > -1) {
+            this.poster.deleteQueue.splice(index, 1)
+          }
+        } else {
+          this.poster.deleteQueue.push(item)
+          if (item.id === this.poster.selectedThumbnail) this.poster.selectedThumbnail = ''
+        }
+      }
+    },
+  },
+})
+</script>
+
+<style lang="sass" scoped>
+@import 'src/styles/tabbed-dialog'
+</style>
diff --git a/komga-webui/src/components/dialogs/LibraryEditDialog.vue b/komga-webui/src/components/dialogs/LibraryEditDialog.vue
index a97a1c5a..8cff1d12 100644
--- a/komga-webui/src/components/dialogs/LibraryEditDialog.vue
+++ b/komga-webui/src/components/dialogs/LibraryEditDialog.vue
@@ -108,6 +108,22 @@
                           </v-tooltip>
                         </template>
                       </v-checkbox>
+
+                      <v-text-field v-model="form.oneshotsDirectory"
+                                    clearable
+                                    :label="$t('dialog.edit_library.field_oneshotsdirectory')"
+                                    :error-messages="getErrors('oneshotsDirectory')"
+                                    class="mx-4 mt-4"
+                      >
+                        <template v-slot:append-outer>
+                          <v-tooltip bottom>
+                            <template v-slot:activator="{ on }">
+                              <v-icon v-on="on" color="info">mdi-help-circle-outline</v-icon>
+                            </template>
+                            {{ $t('dialog.edit_library.tooltip_oneshotsdirectory') }}
+                          </v-tooltip>
+                        </template>
+                      </v-text-field>
                     </v-col>
                   </v-row>
                   <v-row>
@@ -392,6 +408,7 @@ export default Vue.extend({
         hashFiles: true,
         hashPages: false,
         analyzeDimensions: true,
+        oneshotsDirectory: '',
       },
       validationFieldNames: new Map([]),
     }
@@ -524,6 +541,7 @@ export default Vue.extend({
       this.form.hashFiles = library ? library.hashFiles : true
       this.form.hashPages = library ? library.hashPages : false
       this.form.analyzeDimensions = library ? library.analyzeDimensions : true
+      this.form.oneshotsDirectory = library ? library.oneshotsDirectory : ''
       this.$v.$reset()
     },
     validateLibrary() {
@@ -551,6 +569,7 @@ export default Vue.extend({
           hashFiles: this.form.hashFiles,
           hashPages: this.form.hashPages,
           analyzeDimensions: this.form.analyzeDimensions,
+          oneshotsDirectory: this.form.oneshotsDirectory,
         }
       }
       return null
diff --git a/komga-webui/src/components/dialogs/SeriesPickerDialog.vue b/komga-webui/src/components/dialogs/SeriesPickerDialog.vue
index 374a8874..68c49d0a 100644
--- a/komga-webui/src/components/dialogs/SeriesPickerDialog.vue
+++ b/komga-webui/src/components/dialogs/SeriesPickerDialog.vue
@@ -100,6 +100,10 @@ export default Vue.extend({
       type: Object as PropType<SeriesDto>,
       required: false,
     },
+    includeOneshots: {
+      type: Boolean,
+      default: true,
+    },
   },
   watch: {
     value(val) {
@@ -119,7 +123,7 @@ export default Vue.extend({
     searchItems: debounce(async function (this: any, query: string) {
       if (query) {
         this.showResults = false
-        this.results = (await this.$komgaSeries.getSeries(undefined, {unpaged: true}, query)).content
+        this.results = (await this.$komgaSeries.getSeries(undefined, {unpaged: true}, query, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, this.includeOneshots)).content
         this.showResults = true
       } else {
         this.clear()
diff --git a/komga-webui/src/components/menus/OneshotActionsMenu.vue b/komga-webui/src/components/menus/OneshotActionsMenu.vue
new file mode 100644
index 00000000..0773e56a
--- /dev/null
+++ b/komga-webui/src/components/menus/OneshotActionsMenu.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <v-menu offset-y v-model="menuState">
+      <template v-slot:activator="{ on }">
+        <v-btn icon v-on="on" @click.prevent="">
+          <v-icon>mdi-dots-vertical</v-icon>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item @click="analyze" v-if="isAdmin">
+          <v-list-item-title>{{ $t('menu.analyze') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="refreshMetadata" v-if="isAdmin">
+          <v-list-item-title>{{ $t('menu.refresh_metadata') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="addToCollection" v-if="isAdmin">
+          <v-list-item-title>{{ $t('menu.add_to_collection') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="addToReadList" v-if="isAdmin">
+          <v-list-item-title>{{ $t('menu.add_to_readlist') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="markRead" v-if="!isRead">
+          <v-list-item-title>{{ $t('menu.mark_read') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="markUnread" v-if="!isUnread">
+          <v-list-item-title>{{ $t('menu.mark_unread') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="promptDelete" class="list-danger" v-if="isAdmin">
+          <v-list-item-title>{{ $t('menu.delete') }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+<script lang="ts">
+import {getReadProgress} from '@/functions/book-progress'
+import {ReadStatus} from '@/types/enum-books'
+import Vue from 'vue'
+import {BookDto} from '@/types/komga-books'
+import {SeriesDto} from '@/types/komga-series'
+
+export default Vue.extend({
+  name: 'OneShotActionsMenu',
+  data: () => {
+    return {
+      menuState: false,
+      localBookId: undefined as unknown as string,
+    }
+  },
+  props: {
+    book: {
+      type: Object as () => BookDto,
+      required: false,
+    },
+    series: {
+      type: Object as () => SeriesDto,
+      required: false,
+    },
+    menu: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    menuState(val) {
+      this.$emit('update:menu', val)
+    },
+  },
+  computed: {
+    isAdmin(): boolean {
+      return this.$store.getters.meAdmin
+    },
+    isRead(): boolean {
+      return this.series ? this.series.booksReadCount === this.series.booksCount : getReadProgress(this.book) === ReadStatus.READ
+    },
+    isUnread(): boolean {
+      return this.series ? this.series.booksUnreadCount === this.series.booksCount : getReadProgress(this.book) === ReadStatus.UNREAD
+    },
+    seriesId(): string {
+      return this.series ? this.series.id : this.book?.seriesId
+    },
+  },
+  methods: {
+    analyze() {
+      if (this.book) this.$komgaBooks.analyzeBook(this.book)
+      else this.$komgaSeries.analyzeSeries(this.series)
+    },
+    refreshMetadata() {
+      if (this.book) this.$komgaBooks.refreshMetadata(this.book)
+      this.$komgaSeries.refreshMetadata(this.series)
+    },
+    addToCollection() {
+      this.$store.dispatch('dialogAddSeriesToCollection', [this.seriesId])
+    },
+    async addToReadList() {
+      if (!this.book && !this.localBookId) this.localBookId = (await this.$komgaSeries.getBooks(this.seriesId)).content[0].id
+      this.$store.dispatch('dialogAddBooksToReadList', [this.book?.id || this.localBookId])
+    },
+    async markRead() {
+      await this.$komgaSeries.markAsRead(this.seriesId)
+    },
+    async markUnread() {
+      await this.$komgaSeries.markAsUnread(this.seriesId)
+    },
+    promptDelete() {
+      if (this.book) this.$store.dispatch('dialogDeleteBook', this.book)
+      else this.$store.dispatch('dialogDeleteSeries', this.series)
+    },
+  },
+})
+</script>
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index 70a42de1..d9deaa39 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -222,6 +222,7 @@
     "lock_all": "Lock all",
     "n_selected": "{count} selected",
     "nothing_to_show": "Nothing to show",
+    "oneshot": "One-shot",
     "outdated": "Outdated",
     "page": "Page",
     "page_number": "Page number",
@@ -428,6 +429,7 @@
       "field_import_local_artwork": "Local artwork",
       "field_import_mylar_series": "Series metadata",
       "field_name": "Name",
+      "field_oneshotsdirectory": "One-Shots directory",
       "field_repair_extensions": "Automatically repair incorrect file extensions",
       "field_root_folder": "Root folder",
       "field_scanner_empty_trash_after_scan": "Empty trash automatically after every scan",
@@ -447,6 +449,7 @@
       "tab_general": "General",
       "tab_metadata": "Metadata",
       "tab_options": "Options",
+      "tooltip_oneshotsdirectory": "Leave empty to disable",
       "tooltip_scanner_force_modified_time": "Enable if the library is on a Google Drive",
       "tooltip_use_resources": "Can consume lots of resources on large libraries or slow hardware"
     },
@@ -698,6 +701,7 @@
     "in_progress": "In Progress",
     "language": "language",
     "library": "library",
+    "oneshot": "One-shot",
     "publisher": "publisher",
     "read": "Read",
     "release_date": "release date",
diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts
index d9d870b5..8886e9e2 100644
--- a/komga-webui/src/router.ts
+++ b/komga-webui/src/router.ts
@@ -213,6 +213,12 @@ const router = new Router({
           component: () => import(/* webpackChunkName: "browse-book" */ './views/BrowseBook.vue'),
           props: (route) => ({bookId: route.params.bookId}),
         },
+        {
+          path: '/oneshot/:seriesId',
+          name: 'browse-oneshot',
+          component: () => import(/* webpackChunkName: "browse-oneshot" */ './views/BrowseOneshot.vue'),
+          props: (route) => ({seriesId: route.params.seriesId}),
+        },
         {
           path: '/search',
           name: 'search',
diff --git a/komga-webui/src/services/komga-libraries.service.ts b/komga-webui/src/services/komga-libraries.service.ts
index ff6c7203..85188906 100644
--- a/komga-webui/src/services/komga-libraries.service.ts
+++ b/komga-webui/src/services/komga-libraries.service.ts
@@ -48,7 +48,7 @@ export default class KomgaLibrariesService {
 
   async updateLibrary(libraryId: string, library: LibraryUpdateDto) {
     try {
-      await this.http.put(`${API_LIBRARIES}/${libraryId}`, library)
+      await this.http.patch(`${API_LIBRARIES}/${libraryId}`, library)
     } catch (e) {
       let msg = `An error occurred while trying to update library '${libraryId}'`
       if (e.response.data.message) {
diff --git a/komga-webui/src/services/komga-series.service.ts b/komga-webui/src/services/komga-series.service.ts
index dae82bcb..49989adc 100644
--- a/komga-webui/src/services/komga-series.service.ts
+++ b/komga-webui/src/services/komga-series.service.ts
@@ -16,7 +16,7 @@ export default class KomgaSeriesService {
   async getSeries(libraryId?: string, pageRequest?: PageRequest, search?: string, status?: string[],
                   readStatus?: string[], genre?: string[], tag?: string[], language?: string[],
                   publisher?: string[], ageRating?: string[], releaseDate?: string[], authors?: AuthorDto[],
-                  searchRegex?: string, complete?: boolean, sharingLabel?: string[]): Promise<Page<SeriesDto>> {
+                  searchRegex?: string, complete?: boolean, sharingLabel?: string[], oneshot?: boolean): Promise<Page<SeriesDto>> {
     try {
       const params = {...pageRequest} as any
       if (libraryId) params.library_id = libraryId
@@ -33,6 +33,7 @@ export default class KomgaSeriesService {
       if (authors) params.author = authors.map(a => `${a.name},${a.role}`)
       if (complete !== undefined) params.complete = complete
       if (sharingLabel) params.sharing_label = sharingLabel
+      if (oneshot !== undefined) params.oneshot = oneshot
 
       return (await this.http.get(API_SERIES, {
         params: params,
@@ -50,7 +51,7 @@ export default class KomgaSeriesService {
   async getAlphabeticalGroups(libraryId?: string, search?: string, status?: string[],
                               readStatus?: string[], genre?: string[], tag?: string[], language?: string[],
                               publisher?: string[], ageRating?: string[], releaseDate?: string[], authors?: AuthorDto[],
-                              complete?: boolean, sharingLabel?: string[]): Promise<GroupCountDto[]> {
+                              complete?: boolean, sharingLabel?: string[], oneshot?: boolean): Promise<GroupCountDto[]> {
     try {
       const params = {} as any
       if (libraryId) params.library_id = libraryId
@@ -66,6 +67,7 @@ export default class KomgaSeriesService {
       if (authors) params.author = authors.map(a => `${a.name},${a.role}`)
       if (complete !== undefined) params.complete = complete
       if (sharingLabel) params.sharing_label = sharingLabel
+      if (oneshot !== undefined) params.oneshot = oneshot
 
       return (await this.http.get(`${API_SERIES}/alphabetical-groups`, {
         params: params,
@@ -80,12 +82,11 @@ export default class KomgaSeriesService {
     }
   }
 
-  async getNewSeries(libraryId?: string, pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
+  async getNewSeries(libraryId?: string, oneshot?: boolean, pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
     try {
       const params = {...pageRequest} as any
-      if (libraryId) {
-        params.library_id = libraryId
-      }
+      if (libraryId) params.library_id = libraryId
+      if (oneshot !== undefined) params.oneshot = oneshot
       return (await this.http.get(`${API_SERIES}/new`, {
         params: params,
       })).data
@@ -98,12 +99,11 @@ export default class KomgaSeriesService {
     }
   }
 
-  async getUpdatedSeries(libraryId?: string, pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
+  async getUpdatedSeries(libraryId?: string, oneshot?: boolean, pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
     try {
       const params = {...pageRequest} as any
-      if (libraryId) {
-        params.library_id = libraryId
-      }
+      if (libraryId) params.library_id = libraryId
+      if (oneshot !== undefined) params.oneshot = oneshot
       return (await this.http.get(`${API_SERIES}/updated`, {
         params: params,
       })).data
diff --git a/komga-webui/src/store.ts b/komga-webui/src/store.ts
index f286fe7d..fccf71ef 100644
--- a/komga-webui/src/store.ts
+++ b/komga-webui/src/store.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import {BookDto} from '@/types/komga-books'
-import {SeriesDto} from '@/types/komga-series'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
 import createPersistedState from 'vuex-persistedstate'
 import {persistedModule} from './plugins/persisted-state'
 import {LibraryDto} from '@/types/komga-libraries'
@@ -44,6 +44,10 @@ export default new Vuex.Store({
     updateBulkBooks: [] as BookDto[],
     updateBulkBooksDialog: false,
 
+    // oneshots
+    updateOneshots: {} as Oneshot | Oneshot[],
+    updateOneshotsDialog: false,
+
     // series
     updateSeries: {} as SeriesDto | SeriesDto[],
     updateSeriesDialog: false,
@@ -133,6 +137,13 @@ export default new Vuex.Store({
     setUpdateBulkBooksDialog(state, dialog) {
       state.updateBulkBooksDialog = dialog
     },
+    // One-shots
+    setUpdateOneshots(state, oneshots) {
+      state.updateOneshots = oneshots
+    },
+    setUpdateOneshotsDialog(state, dialog) {
+      state.updateOneshotsDialog = dialog
+    },
     // Series
     setUpdateSeries(state, series) {
       state.updateSeries = series
@@ -240,6 +251,15 @@ export default new Vuex.Store({
     dialogUpdateBulkBooksDisplay({commit}, value) {
       commit('setUpdateBulkBooksDialog', value)
     },
+    // oneshots
+    dialogUpdateOneshots({commit}, oneshots) {
+      commit('setUpdateOneshots', oneshots)
+      commit('setUpdateOneshotsDialog', true)
+    },
+    dialogUpdateOneshotsDisplay({commit}, value) {
+      commit('setUpdateOneshotsDialog', value)
+    },
+
     // series
     dialogUpdateSeries({commit}, series) {
       commit('setUpdateSeries', series)
diff --git a/komga-webui/src/types/items.ts b/komga-webui/src/types/items.ts
index 6b81a7e0..08aa0e37 100644
--- a/komga-webui/src/types/items.ts
+++ b/komga-webui/src/types/items.ts
@@ -77,6 +77,11 @@ export class BookItem extends Item<BookDto> {
 
 
   title(context: ItemContext[]): ItemTitle | ItemTitle[] {
+    if (this.item.oneshot)
+      return {
+        title: this.item.metadata.title,
+        to: this.to(),
+      }
     if (context.includes(ItemContext.SHOW_SERIES))
       return [
         {
@@ -107,16 +112,23 @@ export class BookItem extends Item<BookDto> {
         let text
         let title
         if (context.includes(ItemContext.RELEASE_DATE))
-          text = this.item.metadata.releaseDate ? new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium', timeZone: 'UTC'} as Intl.DateTimeFormatOptions).format(new Date(this.item.metadata.releaseDate)) : i18n.t('book_card.no_release_date')
-        else if (context.includes(ItemContext.DATE_ADDED))
-          {
-            text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created)
-            title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created)
-          }
-        else if (context.includes(ItemContext.READ_DATE)) {
+          text = this.item.metadata.releaseDate ? new Intl.DateTimeFormat(i18n.locale, {
+            dateStyle: 'medium',
+            timeZone: 'UTC',
+          } as Intl.DateTimeFormatOptions).format(new Date(this.item.metadata.releaseDate)) : i18n.t('book_card.no_release_date')
+        else if (context.includes(ItemContext.DATE_ADDED)) {
+          text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created)
+          title = new Intl.DateTimeFormat(i18n.locale, {
+            dateStyle: 'long',
+            timeStyle: 'medium',
+          } as Intl.DateTimeFormatOptions).format(this.item.created)
+        } else if (context.includes(ItemContext.READ_DATE)) {
           if (this.item.readProgress?.readDate) {
             text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.readProgress?.readDate)
-            title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.readProgress?.readDate)
+            title = new Intl.DateTimeFormat(i18n.locale, {
+              dateStyle: 'long',
+              timeStyle: 'medium',
+            } as Intl.DateTimeFormatOptions).format(this.item.readProgress?.readDate)
           } else {
             text = i18n.t('book_card.unread')
           }
@@ -124,23 +136,35 @@ export class BookItem extends Item<BookDto> {
           text = getFileSize(this.item.sizeBytes)
         else
           text = i18n.tc('common.pages_n', this.item.media.pagesCount)
-        return `<div class="text-truncate" title="${title}">${text}</div>`
+        return `<div class="text-truncate" title="${title ? title : ''}">${text}</div>`
     }
   }
 
   to(): RawLocation {
-    return {
-      name: 'browse-book',
-      params: {bookId: this.item.id},
-      query: {context: this.item?.context?.origin, contextId: this.item?.context?.id},
-    }
+    return this.item.oneshot ?
+      {
+        name: 'browse-oneshot',
+        params: {seriesId: this.item.seriesId},
+        query: {context: this.item?.context?.origin, contextId: this.item?.context?.id},
+      } :
+      {
+        name: 'browse-book',
+        params: {bookId: this.item.id},
+        query: {context: this.item?.context?.origin, contextId: this.item?.context?.id},
+      }
   }
 
   seriesTo(): RawLocation {
-    return {
-      name: 'browse-series',
-      params: {seriesId: this.item.seriesId},
-    }
+    return this.item.oneshot ?
+      {
+        name: 'browse-oneshot',
+        params: {seriesId: this.item.seriesId},
+        query: {context: this.item?.context?.origin, contextId: this.item?.context?.id},
+      } :
+      {
+        name: 'browse-series',
+        params: {seriesId: this.item.seriesId},
+      }
   }
 
   fabTo(): RawLocation {
@@ -174,25 +198,32 @@ export class SeriesItem extends Item<SeriesDto> {
     let text
     let title
     if (context.includes(ItemContext.RELEASE_DATE))
-      text = this.item.booksMetadata.releaseDate ? new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium', timeZone: 'UTC'} as Intl.DateTimeFormatOptions).format(new Date(this.item.booksMetadata.releaseDate)) : i18n.t('book_card.no_release_date')
-    else if (context.includes(ItemContext.DATE_ADDED))
-      {
-        text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created)
-        title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created)
-      }
-    else if (context.includes(ItemContext.DATE_UPDATED))
-      {
-        text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.lastModified)
-        title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.lastModified)
-      }
-    else
+      text = this.item.booksMetadata.releaseDate ? new Intl.DateTimeFormat(i18n.locale, {
+        dateStyle: 'medium',
+        timeZone: 'UTC',
+      } as Intl.DateTimeFormatOptions).format(new Date(this.item.booksMetadata.releaseDate)) : i18n.t('book_card.no_release_date')
+    else if (context.includes(ItemContext.DATE_ADDED)) {
+      text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created)
+      title = new Intl.DateTimeFormat(i18n.locale, {
+        dateStyle: 'long',
+        timeStyle: 'medium',
+      } as Intl.DateTimeFormatOptions).format(this.item.created)
+    } else if (context.includes(ItemContext.DATE_UPDATED)) {
+      text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.lastModified)
+      title = new Intl.DateTimeFormat(i18n.locale, {
+        dateStyle: 'long',
+        timeStyle: 'medium',
+      } as Intl.DateTimeFormatOptions).format(this.item.lastModified)
+    } else if (this.item.oneshot) {
+      text = i18n.t('common.oneshot')
+    } else
       text = i18n.tc('common.books_n', this.item.booksCount)
-    return `<div class="text-truncate" title="${title}">${text}</div>`
+    return `<div class="text-truncate" title="${title ? title : ''}">${text}</div>`
   }
 
   to(): RawLocation {
     return {
-      name: 'browse-series', params: {seriesId: this.item.id.toString()},
+      name: this.item.oneshot ? 'browse-oneshot' : 'browse-series', params: {seriesId: this.item.id.toString()},
       query: {context: this.item?.context?.origin, contextId: this.item?.context?.id},
     }
   }
diff --git a/komga-webui/src/types/komga-books.ts b/komga-webui/src/types/komga-books.ts
index 0e308a96..a478fa94 100644
--- a/komga-webui/src/types/komga-books.ts
+++ b/komga-webui/src/types/komga-books.ts
@@ -17,6 +17,7 @@ export interface BookDto {
   metadata: BookMetadataDto,
   readProgress?: ReadProgressDto,
   deleted: boolean,
+  oneshot: boolean,
 
   // custom fields
   context: Context
diff --git a/komga-webui/src/types/komga-libraries.ts b/komga-webui/src/types/komga-libraries.ts
index 69dacef0..907378c3 100644
--- a/komga-webui/src/types/komga-libraries.ts
+++ b/komga-webui/src/types/komga-libraries.ts
@@ -21,6 +21,7 @@ export interface LibraryCreationDto {
   hashFiles: boolean,
   hashPages: boolean,
   analyzeDimensions: boolean,
+  oneshotsDirectory: string,
 }
 
 export interface LibraryUpdateDto {
@@ -44,6 +45,7 @@ export interface LibraryUpdateDto {
   hashFiles: boolean,
   hashPages: boolean,
   analyzeDimensions: boolean,
+  oneshotsDirectory: string,
 }
 
 export interface LibraryDto {
@@ -68,5 +70,6 @@ export interface LibraryDto {
   hashFiles: boolean,
   hashPages: boolean,
   analyzeDimensions: boolean,
+  oneshotsDirectory: string,
   unavailable: boolean,
 }
diff --git a/komga-webui/src/types/komga-series.ts b/komga-webui/src/types/komga-series.ts
index f3669251..dfea1b47 100644
--- a/komga-webui/src/types/komga-series.ts
+++ b/komga-webui/src/types/komga-series.ts
@@ -1,4 +1,4 @@
-import {AuthorDto, WebLinkDto} from '@/types/komga-books'
+import {AuthorDto, BookDto, WebLinkDto} from '@/types/komga-books'
 import {Context} from '@/types/context'
 
 export interface SeriesDto {
@@ -15,6 +15,7 @@ export interface SeriesDto {
   metadata: SeriesMetadataDto,
   booksMetadata: SeriesBooksMetadataDto,
   deleted: boolean,
+  oneshot: boolean,
 
   // custom fields
   context: Context
@@ -110,3 +111,8 @@ export interface AlternateTitleDto {
   label: string,
   title: string
 }
+
+export interface Oneshot {
+  series: SeriesDto,
+  book: BookDto,
+}
diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
index 7b080339..624071aa 100644
--- a/komga-webui/src/views/BookReader.vue
+++ b/komga-webui/src/views/BookReader.vue
@@ -69,7 +69,7 @@
               <v-list-item @click="setCurrentPageAsPoster(ItemTypes.SERIES)">
                 <v-list-item-title>{{ $t('bookreader.set_current_page_as_series_poster') }}</v-list-item-title>
               </v-list-item>
-              <v-list-item v-if="contextReadList"  @click="setCurrentPageAsPoster(ItemTypes.READLIST)">
+              <v-list-item v-if="contextReadList" @click="setCurrentPageAsPoster(ItemTypes.READLIST)">
                 <v-list-item-title>{{ $t('bookreader.set_current_page_as_readlist_poster') }}</v-list-item-title>
               </v-list-item>
             </v-list>
@@ -780,11 +780,12 @@ export default Vue.extend({
       } as Location)
     },
     closeBook() {
-      this.$router.push({
-        name: 'browse-book',
-        params: {bookId: this.bookId.toString()},
-        query: {context: this.context.origin, contextId: this.context.id},
-      })
+      this.$router.push(
+          {
+            name: this.book.oneshot ? 'browse-oneshot' : 'browse-book',
+            params: {bookId: this.bookId.toString(), seriesId: this.book.seriesId},
+            query: {context: this.context.origin, contextId: this.context.id},
+          })
     },
     changeReadingDir(dir: ReadingDirection) {
       this.readingDirection = dir
diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index a29e8382..0c706573 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -40,7 +40,7 @@
       <v-btn
         icon
         :disabled="$_.isEmpty(siblingPrevious)"
-        :to="{ name: 'browse-book', params: { bookId: previousId }, query: { context: context.origin, contextId: context.id}  }"
+        :to="{ name: siblingPrevious.oneshot ? 'browse-oneshot' : 'browse-book', params: { seriesId: siblingPrevious.seriesId, bookId: previousId }, query: { context: context.origin, contextId: context.id}  }"
       >
         <rtl-icon icon="mdi-chevron-left" rtl="mdi-chevron-right"/>
       </v-btn>
@@ -64,12 +64,13 @@
             <v-list-item
               v-for="(book, i) in siblings"
               :key="i"
-              :to="{ name: 'browse-book', params: { bookId: book.id }, query: { context: context.origin, contextId: context.id} }"
+              :to="{ name: book.oneshot ? 'browse-oneshot' : 'browse-book', params: { seriesId: book.seriesId, bookId: book.id }, query: { context: context.origin, contextId: context.id}  }"
             >
               <v-list-item-title class="text-wrap text-body-2">
-                <template v-if="contextReadList">{{ book.seriesTitle }} {{ book.metadata.number }}:
+                <template v-if="contextReadList && !book.oneshot">{{ book.seriesTitle }} {{ book.metadata.number }}:
                   {{ book.metadata.title }}
                 </template>
+                <template v-else-if="contextReadList && book.oneshot">{{ book.metadata.title }}</template>
                 <template v-else>{{ book.metadata.number }} - {{ book.metadata.title }}</template>
               </v-list-item-title>
             </v-list-item>
@@ -81,7 +82,7 @@
       <v-btn
         icon
         :disabled="$_.isEmpty(siblingNext)"
-        :to="{ name: 'browse-book', params: { bookId: nextId }, query: { context: context.origin, contextId: context.id}  }"
+        :to="{ name: siblingNext.oneshot ? 'browse-oneshot' : 'browse-book', params: { seriesId: siblingNext.seriesId, bookId: nextId }, query: { context: context.origin, contextId: context.id}  }"
       >
         <rtl-icon icon="mdi-chevron-right" rtl="mdi-chevron-left"/>
       </v-btn>
@@ -159,7 +160,10 @@
 
               <v-col cols="auto" v-if="book.metadata.releaseDate">
                 {{
-                  new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long', timeZone: 'UTC'}).format(new Date(book.metadata.releaseDate))
+                  new Intl.DateTimeFormat($i18n.locale, {
+                    dateStyle: 'long',
+                    timeZone: 'UTC'
+                  }).format(new Date(book.metadata.releaseDate))
                 }}
               </v-col>
 
@@ -581,6 +585,11 @@ export default Vue.extend({
     },
     async loadBook(bookId: string) {
       this.book = await this.$komgaBooks.getBook(bookId)
+      // for the cases where we can't change the origin target route because we don't have the full BookDto
+      if (this.book.oneshot) await this.$router.replace({
+        name: 'browse-oneshot',
+        params: {seriesId: this.book.seriesId},
+      })
 
       // parse query params to get context and contextId
       if (this.$route.query.contextId && this.$route.query.context
diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue
index 9e56d9ab..1571e5de 100644
--- a/komga-webui/src/views/BrowseCollection.vue
+++ b/komga-webui/src/views/BrowseCollection.vue
@@ -47,12 +47,14 @@
     <multi-select-bar
       v-model="selectedSeries"
       kind="series"
+      :oneshots="selectedOneshots"
       show-select-all
       @unselect-all="selectedSeries = []"
       @select-all="selectedSeries = series"
       @mark-read="markSelectedRead"
       @mark-unread="markSelectedUnread"
       @add-to-collection="addToCollection"
+      @add-to-readlist="addToReadList"
       @edit="editMultipleSeries"
       @delete="deleteSeries"
     />
@@ -154,9 +156,9 @@ import FilterPanels from '@/components/FilterPanels.vue'
 import FilterList from '@/components/FilterList.vue'
 import {Location} from 'vue-router'
 import EmptyState from '@/components/EmptyState.vue'
-import {SeriesDto} from '@/types/komga-series'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
 import {authorRoles} from '@/types/author-roles'
-import {AuthorDto, BookDto} from '@/types/komga-books'
+import {AuthorDto} from '@/types/komga-books'
 import {CollectionSseDto, ReadProgressSeriesSseDto, SeriesSseDto} from '@/types/komga-sse'
 import {throttle} from 'lodash'
 import {LibraryDto} from '@/types/komga-libraries'
@@ -322,6 +324,9 @@ export default Vue.extend({
     filterActive(): boolean {
       return Object.keys(this.filters).some(x => this.filters[x].length !== 0)
     },
+    selectedOneshots(): boolean {
+      return this.selectedSeries.every(s => s.oneshot)
+    },
   },
   methods: {
     resetFilters() {
@@ -503,11 +508,20 @@ export default Vue.extend({
       this.$router.replace(loc).catch((_: any) => {
       })
     },
-    editSingleSeries(series: SeriesDto) {
-      this.$store.dispatch('dialogUpdateSeries', series)
+    async editSingleSeries(series: SeriesDto) {
+      if (series.oneshot) {
+        const book = (await this.$komgaSeries.getBooks(series.id)).content[0]
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateSeries', series)
     },
-    editMultipleSeries() {
-      this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
+    async editMultipleSeries() {
+      if (this.selectedSeries.every(s => s.oneshot)) {
+        const books = await Promise.all(this.selectedSeries.map(s => this.$komgaSeries.getBooks(s.id)))
+        const oneshots = this.selectedSeries.map((s, index) => ({series: s, book: books[index].content[0]} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
     },
     deleteSeries() {
       this.$store.dispatch('dialogDeleteSeries', this.selectedSeries)
@@ -527,6 +541,10 @@ export default Vue.extend({
     addToCollection() {
       this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries.map(s => s.id))
     },
+    async addToReadList() {
+      const books = await Promise.all(this.selectedSeries.map(s => this.$komgaSeries.getBooks(s.id)))
+      this.$store.dispatch('dialogAddBooksToReadList', books.map(b => b.content[0].id))
+    },
     async startEditElements() {
       this.filters = {}
       this.unpaged = true
diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue
index 72b07214..7f17d116 100644
--- a/komga-webui/src/views/BrowseLibraries.vue
+++ b/komga-webui/src/views/BrowseLibraries.vue
@@ -28,12 +28,14 @@
     <multi-select-bar
       v-model="selectedSeries"
       kind="series"
+      :oneshots="selectedOneshots"
       show-select-all
       @unselect-all="selectedSeries = []"
       @select-all="selectedSeries = series"
       @mark-read="markSelectedRead"
       @mark-unread="markSelectedUnread"
       @add-to-collection="addToCollection"
+      @add-to-readlist="addToReadList"
       @edit="editMultipleSeries"
       @delete="deleteSeries"
     />
@@ -149,7 +151,7 @@ import SortList from '@/components/SortList.vue'
 import FilterPanels from '@/components/FilterPanels.vue'
 import FilterList from '@/components/FilterList.vue'
 import {mergeFilterParams, sortOrFilterActive, toNameValue} from '@/functions/filter'
-import {GroupCountDto, SeriesDto} from '@/types/komga-series'
+import {GroupCountDto, Oneshot, SeriesDto} from '@/types/komga-series'
 import {AuthorDto} from '@/types/komga-books'
 import {authorRoles} from '@/types/author-roles'
 import {LibrarySseDto, ReadProgressSeriesSseDto, SeriesSseDto} from '@/types/komga-sse'
@@ -265,9 +267,9 @@ export default Vue.extend({
   },
   computed: {
     searchRegex(): string | undefined {
-        if (this.selectedSymbol === 'ALL') return undefined
-        if (this.selectedSymbol === '#') return '^[^a-z],title_sort'
-        return `^${this.selectedSymbol},title_sort`
+      if (this.selectedSymbol === 'ALL') return undefined
+      if (this.selectedSymbol === '#') return '^[^a-z],title_sort'
+      return `^${this.selectedSymbol},title_sort`
     },
     itemContext(): ItemContext[] {
       if (this.sortActive.key === 'booksMetadata.releaseDate') return [ItemContext.RELEASE_DATE]
@@ -297,6 +299,9 @@ export default Vue.extend({
         complete: {
           values: [{name: this.$t('filter.complete').toString(), value: 'true', nValue: 'false'}],
         },
+        oneshot: {
+          values: [{name: this.$t('filter.oneshot').toString(), value: 'true', nValue: 'false'}],
+        },
       } as FiltersOptions
     },
     filterOptionsPanel(): FiltersOptions {
@@ -348,6 +353,9 @@ export default Vue.extend({
     sortOrFilterActive(): boolean {
       return sortOrFilterActive(this.sortActive, this.sortDefault, this.filters)
     },
+    selectedOneshots(): boolean {
+      return this.selectedSeries.every(s => s.oneshot)
+    },
   },
   methods: {
     filterByStarting(symbol: string) {
@@ -393,7 +401,7 @@ export default Vue.extend({
 
       // get filter from query params or local storage and validate with available filter values
       let activeFilters: any
-      if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating || route.query.publisher || authorRoles.some(role => role in route.query) || route.query.complete || route.query.sharingLabel) {
+      if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating || route.query.publisher || authorRoles.some(role => role in route.query) || route.query.complete || route.query.oneshot || route.query.sharingLabel) {
         activeFilters = {
           status: route.query.status || [],
           readStatus: route.query.readStatus || [],
@@ -404,6 +412,7 @@ export default Vue.extend({
           ageRating: route.query.ageRating || [],
           releaseDate: route.query.releaseDate || [],
           complete: route.query.complete || [],
+          oneshot: route.query.oneshot || [],
           sharingLabel: route.query.sharingLabel || [],
         }
         authorRoles.forEach((role: string) => {
@@ -425,6 +434,7 @@ export default Vue.extend({
         ageRating: filters.ageRating?.filter(x => this.filterOptions.ageRating.map(n => n.value).includes(x)) || [],
         releaseDate: filters.releaseDate?.filter(x => this.filterOptions.releaseDate.map(n => n.value).includes(x)) || [],
         complete: filters.complete?.filter(x => x === 'true' || x === 'false') || [],
+        oneshot: filters.oneshot?.filter(x => x === 'true' || x === 'false') || [],
         sharingLabel: filters.sharingLabel?.filter(x => this.filterOptions.sharingLabel.map(n => n.value).includes(x)) || [],
       } as any
       authorRoles.forEach((role: string) => {
@@ -532,13 +542,14 @@ export default Vue.extend({
 
       const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined
       const complete = parseBooleanFilter(this.filters.complete)
-      const seriesPage = await this.$komgaSeries.getSeries(requestLibraryId, pageRequest, undefined, this.filters.status, replaceCompositeReadStatus(this.filters.readStatus), this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating, this.filters.releaseDate, authorsFilter, searchRegex, complete, this.filters.sharingLabel)
+      const oneshot = parseBooleanFilter(this.filters.oneshot)
+      const seriesPage = await this.$komgaSeries.getSeries(requestLibraryId, pageRequest, undefined, this.filters.status, replaceCompositeReadStatus(this.filters.readStatus), this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating, this.filters.releaseDate, authorsFilter, searchRegex, complete, this.filters.sharingLabel, oneshot)
 
       this.totalPages = seriesPage.totalPages
       this.totalElements = seriesPage.totalElements
       this.series = seriesPage.content
 
-      const seriesGroups = await this.$komgaSeries.getAlphabeticalGroups(requestLibraryId, undefined, this.filters.status, replaceCompositeReadStatus(this.filters.readStatus), this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating, this.filters.releaseDate, authorsFilter, complete, this.filters.sharingLabel)
+      const seriesGroups = await this.$komgaSeries.getAlphabeticalGroups(requestLibraryId, undefined, this.filters.status, replaceCompositeReadStatus(this.filters.readStatus), this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating, this.filters.releaseDate, authorsFilter, complete, this.filters.sharingLabel, oneshot)
       const nonAlpha = seriesGroups
         .filter((g) => !(/[a-zA-Z]/).test(g.group))
         .reduce((a, b) => a + b.count, 0)
@@ -571,11 +582,24 @@ export default Vue.extend({
     addToCollection() {
       this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries.map(s => s.id))
     },
-    editSingleSeries(series: SeriesDto) {
-      this.$store.dispatch('dialogUpdateSeries', series)
+    async addToReadList() {
+      const books = await Promise.all(this.selectedSeries.map(s => this.$komgaSeries.getBooks(s.id)))
+      this.$store.dispatch('dialogAddBooksToReadList', books.map(b => b.content[0].id))
     },
-    editMultipleSeries() {
-      this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
+    async editSingleSeries(series: SeriesDto) {
+      if (series.oneshot) {
+        const book = (await this.$komgaSeries.getBooks(series.id)).content[0]
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateSeries', series)
+    },
+    async editMultipleSeries() {
+      if (this.selectedOneshots) {
+        const books = await Promise.all(this.selectedSeries.map(s => this.$komgaSeries.getBooks(s.id)))
+        const oneshots = this.selectedSeries.map((s, index) => ({series: s, book: books[index].content[0]} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
     },
     deleteSeries() {
       this.$store.dispatch('dialogDeleteSeries', this.selectedSeries)
diff --git a/komga-webui/src/views/BrowseOneshot.vue b/komga-webui/src/views/BrowseOneshot.vue
new file mode 100644
index 00000000..728b850b
--- /dev/null
+++ b/komga-webui/src/views/BrowseOneshot.vue
@@ -0,0 +1,796 @@
+<template>
+  <div v-if="!$_.isEmpty(book) && !$_.isEmpty(series)">
+    <toolbar-sticky>
+      <v-tooltip bottom :disabled="!isAdmin">
+        <template v-slot:activator="{ on }">
+          <v-btn icon
+                 v-on="on"
+                 :to="parentLocation"
+          >
+            <rtl-icon icon="mdi-arrow-left" rtl="mdi-arrow-right"/>
+          </v-btn>
+        </template>
+        <span v-if="context.origin === ContextOrigin.READLIST">{{ $t('common.go_to_readlist') }}</span>
+        <span v-else-if="context.origin === ContextOrigin.COLLECTION">{{ $t('common.go_to_collection') }}</span>
+        <span v-else>{{ $t('common.go_to_library') }}</span>
+      </v-tooltip>
+
+      <!--   Action menu   -->
+      <oneshot-actions-menu v-if="book"
+                             :book="book"
+                             :series="series"
+      />
+
+      <v-btn icon @click="editBook" v-if="isAdmin">
+        <v-icon>mdi-pencil</v-icon>
+      </v-btn>
+
+      <v-spacer/>
+
+      <!--   Context notification for navigation   -->
+      <v-alert
+        v-if="context.origin === ContextOrigin.READLIST && $vuetify.breakpoint.mdAndUp"
+        type="info"
+        text
+        dense
+        border="right"
+        class="mb-0"
+      >{{ $t('browse_book.navigation_within_readlist', {name: contextName}) }}
+      </v-alert>
+
+      <!--   Navigate to previous book   -->
+      <v-btn
+        v-if="context.origin === ContextOrigin.READLIST"
+        icon
+        :disabled="$_.isEmpty(siblingPrevious)"
+        :to="{ name: siblingPrevious.oneshot ? 'browse-oneshot' : 'browse-book', params: { seriesId: siblingPrevious.seriesId, bookId: previousId }, query: { context: context.origin, contextId: context.id}  }"
+      >
+        <rtl-icon icon="mdi-chevron-left" rtl="mdi-chevron-right"/>
+      </v-btn>
+
+      <!--   List of all books in context (series/readlist) for navigation   -->
+      <v-menu
+        v-if="context.origin === ContextOrigin.READLIST"
+        bottom
+        offset-y
+        :max-height="$vuetify.breakpoint.height * .7"
+        :max-width="250"
+      >
+        <template v-slot:activator="{ on }">
+          <v-btn icon v-on="on">
+            <v-icon>mdi-menu</v-icon>
+          </v-btn>
+        </template>
+
+        <v-list
+          flat
+        >
+          <v-list-item-group color="primary">
+            <v-list-item
+              v-for="(book, i) in siblings"
+              :key="i"
+              :to="{ name: book.oneshot ? 'browse-oneshot' : 'browse-book', params: { seriesId: book.seriesId, bookId: book.id }, query: { context: context.origin, contextId: context.id}  }"
+            >
+              <v-list-item-title class="text-wrap text-body-2">
+                <template v-if="context.origin === ContextOrigin.READLIST && !book.oneshot">{{ book.seriesTitle }}
+                  {{ book.metadata.number }}:
+                  {{ book.metadata.title }}
+                </template>
+                <template v-else-if="context.origin === ContextOrigin.READLIST && book.oneshot">{{
+                    book.metadata.title
+                  }}
+                </template>
+                <template v-else>{{ book.metadata.number }} - {{ book.metadata.title }}</template>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list-item-group>
+        </v-list>
+      </v-menu>
+
+      <!--   Navigate to next book   -->
+      <v-btn
+        v-if="context.origin === ContextOrigin.READLIST"
+        icon
+        :disabled="$_.isEmpty(siblingNext)"
+        :to="{ name: siblingNext.oneshot ? 'browse-oneshot' : 'browse-book', params: { seriesId: siblingNext.seriesId, bookId: nextId }, query: { context: context.origin, contextId: context.id}  }"
+      >
+        <rtl-icon icon="mdi-chevron-right" rtl="mdi-chevron-left"/>
+      </v-btn>
+    </toolbar-sticky>
+
+    <v-container fluid class="pa-6">
+      <!--   Context notification for navigation   -->
+      <v-row>
+        <v-alert
+          v-if="context.origin === ContextOrigin.READLIST && $vuetify.breakpoint.smAndDown"
+          type="info"
+          text
+          dense
+          border="right"
+          class="mb-0"
+        >{{ $t('browse_book.navigation_within_readlist', {name: contextName}) }}
+        </v-alert>
+      </v-row>
+
+      <v-row>
+        <v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
+          <item-card
+            v-if="book.hasOwnProperty('id')"
+            width="212"
+            :item="book"
+            thumbnail-only
+            no-link
+            :action-menu="false"
+          ></item-card>
+          <div v-if="isInProgress"
+               class="text-caption text-center mt-1"
+               :title="$t('common.read_on', {date: readProgressDate})"
+          >
+            {{ $tc('common.pages_left', pagesLeft) }}
+          </div>
+          <div v-else-if="isRead"
+               class="text-caption text-center mt-1"
+          >
+            {{ $t('common.read_on', {date: readProgressDate}) }}
+          </div>
+        </v-col>
+
+        <v-col cols="8">
+          <v-container>
+            <v-row>
+              <v-col class="py-1">
+                <span class="text-h6">{{ book.metadata.title }}</span>
+                <router-link
+                  class="caption link-underline"
+                  :class="$vuetify.breakpoint.smAndUp ? 'mx-1' : ''"
+                  :style="$vuetify.breakpoint.xsOnly ? 'display: block' : ''"
+                  :to="{name:'browse-libraries', params: {libraryId: book.libraryId }}"
+                >{{ $t('searchbox.in_library', {library: getLibraryName(book)}) }}
+                </router-link>
+              </v-col>
+            </v-row>
+
+            <v-row class="text-body-2">
+              <v-col class="py-1 pe-0" cols="auto" v-if="series.metadata && series.metadata.ageRating">
+                <v-chip label small link
+                        :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {ageRating: [series.metadata.ageRating]}}"
+                >
+                  {{ series.metadata.ageRating }}+
+                </v-chip>
+              </v-col>
+              <v-col class="py-1 pe-0" cols="auto" v-if="series.metadata.language">
+                <v-chip label small link
+                        :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {language: [series.metadata.language]}}"
+                >
+                  {{ languageDisplay }}
+                </v-chip>
+              </v-col>
+              <v-col class="py-1 pe-0" cols="auto"
+                     v-if="series.metadata.readingDirection">
+                <v-chip label small>
+                  {{ $t(`enums.reading_direction.${series.metadata.readingDirection}`) }}
+                </v-chip>
+              </v-col>
+              <v-col class="py-1 pe-0" cols="auto" v-if="unavailable">
+                <v-chip label small color="error">
+                  {{ $t('common.unavailable') }}
+                </v-chip>
+              </v-col>
+            </v-row>
+
+            <v-row class="text-caption" align="center">
+              <v-col cols="auto" v-if="book.media.status === MediaStatus.UNKNOWN">
+                {{ $t('book_card.unknown') }}
+              </v-col>
+
+              <v-col cols="auto" v-else>
+                {{ $tc('common.pages_n', book.media.pagesCount) }}
+              </v-col>
+
+              <v-col cols="auto" v-if="book.metadata.releaseDate">
+                {{
+                  new Intl.DateTimeFormat($i18n.locale, {
+                    dateStyle: 'long',
+                    timeZone: 'UTC'
+                  }).format(new Date(book.metadata.releaseDate))
+                }}
+              </v-col>
+
+              <v-col class="py-1 pe-0"
+                     cols="auto"
+                     v-if="book.media.status === MediaStatus.OUTDATED">
+                <v-tooltip bottom :disabled="!isAdmin">
+                  <template v-slot:activator="{ on }">
+                    <v-chip label small color="warning" v-on="on">
+                      {{ $t('common.outdated') }}
+                    </v-chip>
+                  </template>
+                  {{ $t('browse_book.outdated_tooltip') }}
+                </v-tooltip>
+              </v-col>
+
+              <v-col class="py-1 pe-0" cols="auto" v-if="unavailable">
+                <v-chip label small color="error">
+                  {{ $t('common.unavailable') }}
+                </v-chip>
+              </v-col>
+            </v-row>
+
+            <template v-if="$vuetify.breakpoint.smAndUp">
+              <v-row class="align-center">
+                <v-col cols="auto">
+                  <v-btn color="accent"
+                         small
+                         :title="$t('browse_book.read_book')"
+                         :to="{name: 'read-book', params: { bookId: book.id}, query: { context: context.origin, contextId: context.id}}"
+                         :disabled="!canRead"
+                  >
+                    <v-icon left small>mdi-book-open-page-variant</v-icon>
+                    {{ $t('common.read') }}
+                  </v-btn>
+                </v-col>
+
+                <v-col cols="auto">
+                  <v-btn small
+                         :title="$t('browse_book.read_incognito')"
+                         :to="{name: 'read-book', params: { bookId: book.id}, query: { context: context.origin, contextId: context.id, incognito: true}}"
+                         :disabled="!canRead"
+                  >
+                    <v-icon left small>mdi-incognito</v-icon>
+                    {{ $t('common.read') }}
+                  </v-btn>
+                </v-col>
+
+                <v-col cols="auto">
+                  <v-btn :title="$t('browse_book.download_file')"
+                         small
+                         :disabled="!canDownload"
+                         :href="fileUrl">
+                    <v-icon left small>mdi-file-download</v-icon>
+                    {{ $t('common.download') }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+              <v-row v-if="book.metadata.summary">
+                <v-col>
+                  <read-more>{{ book.metadata.summary }}</read-more>
+                </v-col>
+              </v-row>
+            </template>
+          </v-container>
+        </v-col>
+      </v-row>
+
+      <template v-if="$vuetify.breakpoint.xsOnly">
+        <v-row class="align-center">
+          <v-col cols="auto">
+            <v-btn color="accent"
+                   small
+                   :title="$t('browse_book.read_book')"
+                   :to="{name: 'read-book', params: { bookId: book.id}, query: { context: context.origin, contextId: context.id}}"
+                   :disabled="!canRead"
+            >
+              <v-icon left small>mdi-book-open-page-variant</v-icon>
+              {{ $t('common.read') }}
+            </v-btn>
+          </v-col>
+
+          <v-col cols="auto">
+            <v-btn small
+                   :title="$t('browse_book.read_incognito')"
+                   :to="{name: 'read-book', params: { bookId: book.id}, query: { context: context.origin, contextId: context.id, incognito: true}}"
+                   :disabled="!canRead"
+            >
+              <v-icon left small>mdi-incognito</v-icon>
+              {{ $t('common.read') }}
+            </v-btn>
+          </v-col>
+
+          <v-col cols="auto">
+            <v-btn :title="$t('browse_book.download_file')"
+                   small
+                   :disabled="!canDownload"
+                   :href="fileUrl">
+              <v-icon left small>mdi-file-download</v-icon>
+              {{ $t('common.download') }}
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-row v-if="book.metadata.summary">
+          <v-col>
+            <read-more>{{ book.metadata.summary }}</read-more>
+          </v-col>
+        </v-row>
+      </template>
+
+      <!--  Publisher    -->
+      <v-row v-if="series.metadata.publisher" class="align-center text-caption">
+        <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t('common.publisher') }}</v-col>
+        <v-col cols="8" sm="9" md="10" xl="11" class="py-1">
+          <v-chip
+            class="me-2"
+            :title="series.metadata.publisher"
+            :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {publisher: [series.metadata.publisher]}}"
+            label
+            small
+            outlined
+            link
+          >{{ series.metadata.publisher }}
+          </v-chip>
+        </v-col>
+      </v-row>
+
+      <!--  Genres    -->
+      <v-row v-if="series.metadata.genres.length > 0" class="align-center text-caption">
+        <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t('common.genre') }}</v-col>
+        <v-col cols="8" sm="9" md="10" xl="11" class="py-1 text-capitalize">
+          <vue-horizontal>
+            <template v-slot:btn-prev>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-left</v-icon>
+              </v-btn>
+            </template>
+
+            <template v-slot:btn-next>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-right</v-icon>
+              </v-btn>
+            </template>
+            <v-chip v-for="(t, i) in $_.sortBy(series.metadata.genres)"
+                    :key="i"
+                    class="me-2"
+                    :title="t"
+                    :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {genre: [t]}}"
+                    label
+                    small
+                    outlined
+                    link
+            >{{ t }}
+            </v-chip>
+          </vue-horizontal>
+        </v-col>
+      </v-row>
+
+      <v-row v-for="role in displayedRoles"
+             :key="role"
+             class="align-center text-caption"
+      >
+        <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">
+          {{ $te(`author_roles.${role}`) ? $t(`author_roles.${role}`) : role }}
+        </v-col>
+        <v-col cols="8" sm="9" md="10" xl="11" class="py-1">
+          <vue-horizontal>
+            <template v-slot:btn-prev>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-left</v-icon>
+              </v-btn>
+            </template>
+
+            <template v-slot:btn-next>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-right</v-icon>
+              </v-btn>
+            </template>
+            <v-chip v-for="(name, i) in authorsByRole[role]"
+                    :key="i"
+                    class="me-2"
+                    :title="name"
+                    :to="{name:'browse-libraries', params: {libraryId: book.libraryId }, query: {[role]: [name]}}"
+                    label
+                    small
+                    outlined
+                    link
+            >{{ name }}
+            </v-chip>
+          </vue-horizontal>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="book.metadata.tags.length > 0" class="align-center text-caption">
+        <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $i18n.t('common.tags') }}</v-col>
+        <v-col cols="8" sm="9" md="10" xl="11" class="py-1 text-capitalize">
+          <vue-horizontal>
+            <template v-slot:btn-prev>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-left</v-icon>
+              </v-btn>
+            </template>
+
+            <template v-slot:btn-next>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-right</v-icon>
+              </v-btn>
+            </template>
+            <v-chip v-for="(t, i) in book.metadata.tags"
+                    :key="i"
+                    class="me-2"
+                    :title="t"
+                    :to="{name:'browse-libraries', params: {libraryId: book.libraryId}, query: {tag: [t]}}"
+                    label
+                    small
+                    outlined
+                    link
+            >{{ t }}
+            </v-chip>
+          </vue-horizontal>
+        </v-col>
+      </v-row>
+
+
+      <v-row>
+        <v-col cols="12" class="pb-1">
+          <collections-expansion-panels :collections="collections"/>
+        </v-col>
+        <v-col cols="12" class="pt-1">
+          <read-lists-expansion-panels :read-lists="readLists"/>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="book.metadata.links.length > 0" class="align-center text-caption">
+        <v-col class="py-1 text-uppercase" cols="4" sm="3" md="2" xl="1">{{ $t('browse_book.links') }}</v-col>
+        <v-col class="py-1" cols="8" sm="9" md="10" xl="11">
+          <v-chip
+            v-for="(link, i) in book.metadata.links"
+            :href="link.url"
+            target="_blank"
+            class="me-2"
+            label
+            small
+            outlined
+            link
+            :key="i"
+          >
+            {{ link.label }}
+            <v-icon
+              x-small
+              color="grey"
+              class="ps-1"
+            >
+              mdi-open-in-new
+            </v-icon>
+          </v-chip>
+        </v-col>
+      </v-row>
+
+      <v-row class="align-center text-caption">
+        <v-col class="py-1 text-uppercase" cols="4" sm="3" md="2" xl="1">{{ $t('browse_book.size') }}</v-col>
+        <v-col class="py-1" cols="8" sm="9" md="10" xl="11">{{ book.size }}</v-col>
+      </v-row>
+
+      <v-row v-if="book.media.comment" class="align-center text-caption">
+        <v-col class="py-1 text-uppercase" cols="4" sm="3" md="2" xl="1">{{ $t('browse_book.comment') }}</v-col>
+        <v-col class="py-1 error--text font-weight-bold" cols="8" sm="9" md="10" xl="11">{{ mediaComment }}</v-col>
+      </v-row>
+
+      <v-row class="align-center text-caption">
+        <v-col class="py-1 text-uppercase" cols="4" sm="3" md="2" xl="1">{{ $t('browse_book.format') }}</v-col>
+        <v-col class="py-1" cols="8" sm="9" md="10" xl="11">{{ format.type }}</v-col>
+      </v-row>
+
+      <v-row v-if="book.metadata.isbn" class="align-center text-caption">
+        <v-col class="py-1 text-uppercase" cols="4" sm="3" md="2" xl="1">{{ $t('browse_book.isbn') }}</v-col>
+        <v-col class="py-1" cols="8" sm="9" md="10" xl="11">{{ book.metadata.isbn }}</v-col>
+      </v-row>
+
+      <v-row class="align-center text-caption">
+        <v-col class="py-1 text-uppercase" cols="4" sm="3" md="2" xl="1">{{ $t('browse_book.file') }}</v-col>
+        <v-col class="py-1" cols="8" sm="9" md="10" xl="11">{{ book.url }}</v-col>
+      </v-row>
+
+    </v-container>
+
+  </div>
+</template>
+
+<script lang="ts">
+import BookActionsMenu from '@/components/menus/BookActionsMenu.vue'
+import ItemCard from '@/components/ItemCard.vue'
+import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
+import {groupAuthorsByRole} from '@/functions/authors'
+import {getBookFormatFromMediaType} from '@/functions/book-format'
+import {getPagesLeft, getReadProgress, getReadProgressPercentage} from '@/functions/book-progress'
+import {getBookTitleCompact} from '@/functions/book-title'
+import {bookFileUrl, seriesThumbnailUrl} from '@/functions/urls'
+import {MediaStatus, ReadStatus} from '@/types/enum-books'
+import {
+  BOOK_CHANGED,
+  BOOK_DELETED,
+  COLLECTION_ADDED,
+  COLLECTION_CHANGED,
+  COLLECTION_DELETED,
+  LIBRARY_DELETED,
+  READLIST_ADDED,
+  READLIST_CHANGED,
+  READLIST_DELETED,
+  READPROGRESS_CHANGED,
+  READPROGRESS_DELETED,
+  SERIES_CHANGED,
+  SERIES_DELETED,
+} from '@/types/events'
+import Vue from 'vue'
+import ReadListsExpansionPanels from '@/components/ReadListsExpansionPanels.vue'
+import {BookDto, BookFormat} from '@/types/komga-books'
+import {Context, ContextOrigin} from '@/types/context'
+import ReadMore from '@/components/ReadMore.vue'
+import VueHorizontal from 'vue-horizontal'
+import {authorRoles} from '@/types/author-roles'
+import {convertErrorCodes} from '@/functions/error-codes'
+import RtlIcon from '@/components/RtlIcon.vue'
+import {
+  BookSseDto,
+  CollectionSseDto,
+  LibrarySseDto,
+  ReadListSseDto,
+  ReadProgressSseDto,
+  SeriesSseDto,
+} from '@/types/komga-sse'
+import {RawLocation} from 'vue-router/types/router'
+import {ReadListDto} from '@/types/komga-readlists'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
+import CollectionsExpansionPanels from '@/components/CollectionsExpansionPanels.vue'
+import OneshotActionsMenu from '@/components/menus/OneshotActionsMenu.vue'
+
+const tags = require('language-tags')
+
+export default Vue.extend({
+  name: 'BrowseOneshot',
+  components: {
+    OneshotActionsMenu,
+    CollectionsExpansionPanels,
+    ReadMore, ToolbarSticky, ItemCard, ReadListsExpansionPanels, VueHorizontal, RtlIcon,
+  },
+  data: () => {
+    return {
+      MediaStatus,
+      ContextOrigin,
+      book: {} as BookDto,
+      series: {} as SeriesDto,
+      context: {} as Context,
+      siblings: [] as BookDto[],
+      siblingPrevious: {} as BookDto,
+      siblingNext: {} as BookDto,
+      contextName: '',
+      collections: [] as CollectionDto[],
+      readLists: [] as ReadListDto[],
+    }
+  },
+  async created() {
+    this.loadSeries(this.seriesId)
+    this.$eventHub.$on(SERIES_CHANGED, this.seriesChanged)
+    this.$eventHub.$on(SERIES_DELETED, this.seriesDeleted)
+    this.$eventHub.$on(BOOK_CHANGED, this.bookChanged)
+    this.$eventHub.$on(BOOK_DELETED, this.bookDeleted)
+    this.$eventHub.$on(READPROGRESS_CHANGED, this.readProgressChanged)
+    this.$eventHub.$on(READPROGRESS_DELETED, this.readProgressChanged)
+    this.$eventHub.$on(LIBRARY_DELETED, this.libraryDeleted)
+    this.$eventHub.$on(READLIST_ADDED, this.readListChanged)
+    this.$eventHub.$on(READLIST_CHANGED, this.readListChanged)
+    this.$eventHub.$on(READLIST_DELETED, this.readListChanged)
+    this.$eventHub.$on(COLLECTION_ADDED, this.collectionChanged)
+    this.$eventHub.$on(COLLECTION_CHANGED, this.collectionChanged)
+    this.$eventHub.$on(COLLECTION_DELETED, this.collectionChanged)
+  },
+  beforeDestroy() {
+    this.$eventHub.$off(SERIES_CHANGED, this.seriesChanged)
+    this.$eventHub.$off(SERIES_DELETED, this.seriesDeleted)
+    this.$eventHub.$off(BOOK_CHANGED, this.bookChanged)
+    this.$eventHub.$off(BOOK_DELETED, this.bookDeleted)
+    this.$eventHub.$off(READPROGRESS_CHANGED, this.readProgressChanged)
+    this.$eventHub.$off(READPROGRESS_DELETED, this.readProgressChanged)
+    this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted)
+    this.$eventHub.$off(READLIST_ADDED, this.readListChanged)
+    this.$eventHub.$off(READLIST_CHANGED, this.readListChanged)
+    this.$eventHub.$off(READLIST_DELETED, this.readListChanged)
+    this.$eventHub.$off(COLLECTION_ADDED, this.collectionChanged)
+    this.$eventHub.$off(COLLECTION_CHANGED, this.collectionChanged)
+    this.$eventHub.$off(COLLECTION_DELETED, this.collectionChanged)
+  },
+  props: {
+    seriesId: {
+      type: String,
+      required: true,
+    },
+  },
+  async beforeRouteUpdate(to, from, next) {
+    if (to.params.seriesId !== from.params.seriesId) {
+      this.loadSeries(to.params.seriesId)
+    }
+
+    next()
+  },
+  computed: {
+    isAdmin(): boolean {
+      return this.$store.getters.meAdmin
+    },
+    unavailable(): boolean {
+      return this.book.deleted || this.$store.getters.getLibraryById(this.book.libraryId).unavailable
+    },
+    canRead(): boolean {
+      return this.book.media.status === 'READY' && this.$store.getters.mePageStreaming && !this.unavailable
+    },
+    canDownload(): boolean {
+      return this.$store.getters.meFileDownload && !this.unavailable
+    },
+    thumbnailUrl(): string {
+      return seriesThumbnailUrl(this.seriesId)
+    },
+    fileUrl(): string {
+      return bookFileUrl(this.book.id)
+    },
+    format(): BookFormat {
+      return getBookFormatFromMediaType(this.book.media.mediaType)
+    },
+    authorsByRole(): any {
+      return groupAuthorsByRole(this.book.metadata.authors)
+    },
+    isRead(): boolean {
+      return getReadProgress(this.book) === ReadStatus.READ
+    },
+    isUnread(): boolean {
+      return getReadProgress(this.book) === ReadStatus.UNREAD
+    },
+    isInProgress(): boolean {
+      return getReadProgress(this.book) === ReadStatus.IN_PROGRESS
+    },
+    pagesLeft(): number {
+      return getPagesLeft(this.book)
+    },
+    readProgressPercentage(): number {
+      return getReadProgressPercentage(this.book)
+    },
+    readProgressDate(): string | undefined {
+      if (this.book.readProgress)
+        return new Intl.DateTimeFormat(this.$i18n.locale, {
+          dateStyle: 'medium',
+          timeStyle: 'short',
+        } as Intl.DateTimeFormatOptions).format(this.book.readProgress.readDate)
+      return undefined
+    },
+    previousId(): string {
+      return this.siblingPrevious?.id?.toString() || '0'
+    },
+    nextId(): string {
+      return this.siblingNext?.id?.toString() || '0'
+    },
+    mediaComment(): string {
+      return convertErrorCodes(this.book.media.comment)
+    },
+    parentLocation(): RawLocation {
+      if (this.context.origin === ContextOrigin.READLIST)
+        return {name: 'browse-readlist', params: {readListId: this.context.id}}
+      else if (this.context.origin === ContextOrigin.COLLECTION)
+        return {name: 'browse-collection', params: {collectionId: this.context.id}}
+      else
+        return {name: 'browse-libraries', params: {libraryId: this.book.libraryId}}
+    },
+    displayedRoles(): string[] {
+      const allRoles = this.$_.uniq([...authorRoles, ...(this.book.metadata.authors.map(x => x.role))])
+      return allRoles.filter(x => this.authorsByRole[x])
+    },
+    languageDisplay(): string {
+      return tags(this.series.metadata.language).language().descriptions()[0]
+    },
+  },
+  methods: {
+    getLibraryName(item: BookDto): string {
+      return this.$store.getters.getLibraryById(item.libraryId).name
+    },
+    libraryDeleted(event: LibrarySseDto) {
+      if (event.libraryId === this.book.libraryId) {
+        this.$router.push({name: 'home'})
+      }
+    },
+    readListChanged(event: ReadListSseDto) {
+      if (event.bookIds.includes(this.book.id) || this.readLists.map(x => x.id).includes(event.readListId)) {
+        this.$komgaBooks.getReadLists(this.book.id)
+          .then(v => this.readLists = v)
+      }
+    },
+    collectionChanged(event: CollectionSseDto) {
+      if (event.seriesIds.includes(this.seriesId) || this.collections.map(x => x.id).includes(event.collectionId)) {
+        this.$komgaSeries.getCollections(this.seriesId)
+          .then(v => this.collections = v)
+      }
+    },
+    seriesChanged(event: SeriesSseDto) {
+      if (event.seriesId === this.seriesId)
+        this.$komgaSeries.getOneSeries(this.seriesId)
+          .then(v => this.series = v)
+    },
+    seriesDeleted(event: SeriesSseDto) {
+      if (event.seriesId === this.seriesId) {
+        this.$router.push({name: 'browse-libraries', params: {libraryId: this.series.libraryId}})
+      }
+    },
+    bookChanged(event: BookSseDto) {
+      if (event.bookId === this.book.id) this.loadBook(this.seriesId)
+    },
+    bookDeleted(event: BookSseDto) {
+      if (event.bookId === this.book.id) {
+        this.$router.push({name: 'browse-libraries', params: {libraryId: this.book.libraryId}})
+      }
+    },
+    readProgressChanged(event: ReadProgressSseDto) {
+      if (event.bookId === this.book.id) this.loadBook(this.seriesId)
+    },
+    async loadSeries(seriesId: string) {
+      this.$komgaSeries.getOneSeries(seriesId)
+        .then(v => this.series = v)
+      this.$komgaSeries.getCollections(seriesId)
+        .then(v => this.collections = v)
+
+      // parse query params to get context and contextId
+      if (this.$route.query.contextId && this.$route.query.context
+        && Object.values(ContextOrigin).includes(this.$route.query.context as ContextOrigin)) {
+        this.context = {
+          origin: this.$route.query.context as ContextOrigin,
+          id: this.$route.query.contextId as string,
+        }
+        this.series.context = this.context
+      }
+
+      await this.loadBook(seriesId)
+    },
+    async loadBook(seriesId: string) {
+      this.book = (await this.$komgaSeries.getBooks(seriesId)).content[0]
+
+      // parse query params to get context and contextId
+      if (this.$route.query.contextId && this.$route.query.context
+        && Object.values(ContextOrigin).includes(this.$route.query.context as ContextOrigin)) {
+        this.context = {
+          origin: this.$route.query.context as ContextOrigin,
+          id: this.$route.query.contextId as string,
+        }
+        this.book.context = this.context
+        if (this.context.origin === ContextOrigin.READLIST)
+          this.$komgaReadLists.getOneReadList(this.context.id)
+            .then(v => this.contextName = v.name)
+      }
+
+      // Get siblings depending on origin
+      if (this?.context.origin === ContextOrigin.READLIST) {
+        this.$komgaReadLists.getBooks(this.context.id, {unpaged: true} as PageRequest)
+          .then(v => this.siblings = v.content)
+      } else {
+        this.siblings = {} as BookDto[]
+      }
+
+      this.$komgaBooks.getReadLists(this.book.id)
+        .then(v => this.readLists = v)
+
+      if (this.$_.has(this.book, 'metadata.title')) {
+        document.title = `Komga - ${getBookTitleCompact(this.book.metadata.title, this.book.seriesTitle)}`
+      }
+
+      if (this?.context.origin === ContextOrigin.READLIST) {
+        this.$komgaReadLists.getBookSiblingNext(this.context.id, this.book.id)
+          .then(v => this.siblingNext = v)
+          .catch(e => this.siblingNext = {} as BookDto)
+      } else {
+        this.siblingNext = {} as BookDto
+      }
+      if (this?.context.origin === ContextOrigin.READLIST) {
+        this.$komgaReadLists.getBookSiblingPrevious(this.context.id, this.book.id)
+          .then(v => this.siblingPrevious = v)
+          .catch(e => this.siblingPrevious = {} as BookDto)
+      } else {
+        this.siblingPrevious = {} as BookDto
+      }
+    },
+    analyze() {
+      this.$komgaBooks.analyzeBook(this.book)
+    },
+    refreshMetadata() {
+      this.$komgaBooks.refreshMetadata(this.book)
+    },
+    editBook() {
+      this.$store.dispatch('dialogUpdateOneshots', {series: this.series, book: this.book} as Oneshot)
+    },
+  },
+})
+</script>
+
+<style scoped>
+</style>
diff --git a/komga-webui/src/views/BrowseReadList.vue b/komga-webui/src/views/BrowseReadList.vue
index 7d9f19df..458d1757 100644
--- a/komga-webui/src/views/BrowseReadList.vue
+++ b/komga-webui/src/views/BrowseReadList.vue
@@ -47,11 +47,13 @@
     <multi-select-bar
       v-model="selectedBooks"
       kind="books"
+      :oneshots="selectedOneshots"
       show-select-all
       @unselect-all="selectedBooks = []"
       @select-all="selectedBooks = books"
       @mark-read="markSelectedRead"
       @mark-unread="markSelectedUnread"
+      @add-to-collection="addToCollection"
       @add-to-readlist="addToReadList"
       @edit="editMultipleBooks"
       @bulk-edit="bulkEditMultipleBooks"
@@ -186,6 +188,7 @@ import {ItemContext} from '@/types/items'
 import PageSizeSelect from '@/components/PageSizeSelect.vue'
 import EmptyState from '@/components/EmptyState.vue'
 import {ReadListDto, ReadListUpdateDto} from '@/types/komga-readlists'
+import {Oneshot} from '@/types/komga-series'
 
 export default Vue.extend({
   name: 'BrowseReadList',
@@ -336,6 +339,9 @@ export default Vue.extend({
     filterActive(): boolean {
       return Object.keys(this.filters).some(x => this.filters[x].length !== 0)
     },
+    selectedOneshots(): boolean {
+      return this.selectedBooks.every(b => b.oneshot)
+    },
   },
   methods: {
     resetFilters() {
@@ -472,11 +478,20 @@ export default Vue.extend({
     reloadPage: throttle(function (this: any) {
       this.loadPage(this.readListId, this.page)
     }, 1000),
-    editSingleBook(book: BookDto) {
-      this.$store.dispatch('dialogUpdateBooks', book)
+    async editSingleBook(book: BookDto) {
+      if (book.oneshot) {
+        const series = (await this.$komgaSeries.getOneSeries(book.seriesId))
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateBooks', book)
     },
-    editMultipleBooks() {
-      this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
+    async editMultipleBooks() {
+      if (this.selectedBooks.every(b => b.oneshot)) {
+        const series = await Promise.all(this.selectedBooks.map(b => this.$komgaSeries.getOneSeries(b.seriesId)))
+        const oneshots = this.selectedBooks.map((b, index) => ({series: series[index], book: b} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
     },
     bulkEditMultipleBooks() {
       this.$store.dispatch('dialogUpdateBulkBooks', this.selectedBooks)
@@ -496,6 +511,9 @@ export default Vue.extend({
       ))
       this.selectedBooks = []
     },
+    addToCollection() {
+      this.$store.dispatch('dialogAddSeriesToCollection', this.selectedBooks.map(b => b.seriesId))
+    },
     addToReadList() {
       this.$store.dispatch('dialogAddBooksToReadList', this.selectedBooks.map(b => b.id))
     },
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 8ae684a6..419b7750 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -821,7 +821,11 @@ export default Vue.extend({
     }, 1000),
     async loadSeries(seriesId: string) {
       this.$komgaSeries.getOneSeries(seriesId)
-        .then(v => this.series = v)
+        .then(v => {
+          this.series = v
+          // for the cases where we can't change the origin target route because we don't have the full BookDto
+          if (this.series.oneshot) this.$router.replace({name: 'browse-oneshot', params: {seriesId: this.seriesId}})
+        })
       this.$komgaSeries.getCollections(seriesId)
         .then(v => this.collections = v)
 
diff --git a/komga-webui/src/views/DashboardView.vue b/komga-webui/src/views/DashboardView.vue
index c7a810c2..f889cf07 100644
--- a/komga-webui/src/views/DashboardView.vue
+++ b/komga-webui/src/views/DashboardView.vue
@@ -34,10 +34,12 @@
     <multi-select-bar
       v-model="selectedBooks"
       kind="books"
+      :oneshots="selectedOneshots"
       @unselect-all="selectedBooks = []"
       @mark-read="markSelectedBooksRead"
       @mark-unread="markSelectedBooksUnread"
       @add-to-readlist="addToReadList"
+      @add-to-collection="addOneshotsToCollection"
       @edit="editMultipleBooks"
       @bulk-edit="bulkEditMultipleBooks"
       @delete="deleteBooks"
@@ -222,7 +224,7 @@ import {
   SERIES_DELETED,
 } from '@/types/events'
 import Vue from 'vue'
-import {SeriesDto} from '@/types/komga-series'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
 import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library'
 import {throttle} from 'lodash'
 import {subMonths} from 'date-fns'
@@ -327,6 +329,9 @@ export default Vue.extend({
     individualLibrary(): boolean {
       return this.libraryId !== LIBRARIES_ALL
     },
+    selectedOneshots(): boolean {
+      return this.selectedBooks.every(b => b.oneshot)
+    },
   },
   methods: {
     async scrollChanged(loader: PageLoader<any>, percent: number) {
@@ -383,11 +388,11 @@ export default Vue.extend({
 
       this.loaderNewSeries = new PageLoader<SeriesDto>(
         {},
-        (pageable: PageRequest) => this.$komgaSeries.getNewSeries(this.getRequestLibraryId(libraryId), pageable),
+        (pageable: PageRequest) => this.$komgaSeries.getNewSeries(this.getRequestLibraryId(libraryId), false, pageable),
       )
       this.loaderUpdatedSeries = new PageLoader<SeriesDto>(
         {},
-        (pageable: PageRequest) => this.$komgaSeries.getUpdatedSeries(this.getRequestLibraryId(libraryId), pageable),
+        (pageable: PageRequest) => this.$komgaSeries.getUpdatedSeries(this.getRequestLibraryId(libraryId), false, pageable),
       )
     },
     loadAll(libraryId: string, reload: boolean = false) {
@@ -422,11 +427,19 @@ export default Vue.extend({
         })
       }
     },
-    singleEditSeries(series: SeriesDto) {
-      this.$store.dispatch('dialogUpdateSeries', series)
+    async singleEditSeries(series: SeriesDto) {
+      if (series.oneshot) {
+        let book = (await this.$komgaSeries.getBooks(series.id)).content[0]
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateSeries', series)
     },
-    singleEditBook(book: BookDto) {
-      this.$store.dispatch('dialogUpdateBooks', book)
+    async singleEditBook(book: BookDto) {
+      if (book.oneshot) {
+        const series = (await this.$komgaSeries.getOneSeries(book.seriesId))
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateBooks', book)
     },
     async markSelectedSeriesRead() {
       await Promise.all(this.selectedSeries.map(s =>
@@ -444,11 +457,25 @@ export default Vue.extend({
       this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries.map(s => s.id))
       this.selectedSeries = []
     },
-    editMultipleSeries() {
-      this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
+    addOneshotsToCollection() {
+      this.$store.dispatch('dialogAddSeriesToCollection', this.selectedBooks.map(b => b.seriesId))
+      this.selectedBooks = []
     },
-    editMultipleBooks() {
-      this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
+    async editMultipleSeries() {
+      if (this.selectedSeries.every(s => s.oneshot)) {
+        const books = await Promise.all(this.selectedSeries.map(s => this.$komgaSeries.getBooks(s.id)))
+        const oneshots = this.selectedSeries.map((s, index) => ({series: s, book: books[index].content[0]} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
+    },
+    async editMultipleBooks() {
+      if (this.selectedBooks.every(b => b.oneshot)) {
+        const series = await Promise.all(this.selectedBooks.map(b => this.$komgaSeries.getOneSeries(b.seriesId)))
+        const oneshots = this.selectedBooks.map((b, index) => ({series: series[index], book: b} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
     },
     deleteSeries() {
       this.$store.dispatch('dialogDeleteSeries', this.selectedSeries)
diff --git a/komga-webui/src/views/DuplicateFiles.vue b/komga-webui/src/views/DuplicateFiles.vue
index 1ae71cf7..b786215b 100644
--- a/komga-webui/src/views/DuplicateFiles.vue
+++ b/komga-webui/src/views/DuplicateFiles.vue
@@ -16,7 +16,10 @@
       }"
     >
       <template v-slot:item.url="{ item }">
-        <router-link :to="{name:'browse-book', params: {bookId: item.id}}">{{ item.url }}</router-link>
+        <router-link
+          :to="{name: item.oneshot ? 'browse-oneshot' : 'browse-book', params: {bookId: item.id, seriesId: item.seriesId}}">
+          {{ item.url }}
+        </router-link>
       </template>
 
       <template v-slot:item.deleted="{ item }">
diff --git a/komga-webui/src/views/ImportBooks.vue b/komga-webui/src/views/ImportBooks.vue
index dd554bdf..1a60fa90 100644
--- a/komga-webui/src/views/ImportBooks.vue
+++ b/komga-webui/src/views/ImportBooks.vue
@@ -82,7 +82,7 @@
           <v-btn @click="modalSeriesPicker = true" :disabled="globalSelect === 0">
             {{ $t('book_import.button_select_series') }}
           </v-btn>
-          <series-picker-dialog v-model="modalSeriesPicker" :series.sync="selectedSeries"></series-picker-dialog>
+          <series-picker-dialog v-model="modalSeriesPicker" :series.sync="selectedSeries" :include-oneshots="false"/>
         </v-col>
         <v-spacer/>
 
diff --git a/komga-webui/src/views/MediaAnalysis.vue b/komga-webui/src/views/MediaAnalysis.vue
index 7b312157..26328260 100644
--- a/komga-webui/src/views/MediaAnalysis.vue
+++ b/komga-webui/src/views/MediaAnalysis.vue
@@ -14,7 +14,10 @@
       }"
     >
       <template v-slot:item.name="{ item }">
-        <router-link :to="{name:'browse-book', params: {bookId: item.id}}">{{ item.name }}</router-link>
+        <router-link
+          :to="{name: item.oneshot ? 'browse-oneshot' : 'browse-book', params: {bookId: item.id, seriesId: item.seriesId}}">
+          {{ item.name }}
+        </router-link>
       </template>
 
       <template v-slot:item.deleted="{ item }">
diff --git a/komga-webui/src/views/SearchView.vue b/komga-webui/src/views/SearchView.vue
index 89616f07..98bcf6e1 100644
--- a/komga-webui/src/views/SearchView.vue
+++ b/komga-webui/src/views/SearchView.vue
@@ -20,10 +20,12 @@
     <multi-select-bar
       v-model="selectedBooks"
       kind="books"
+      :oneshots="selectedOneshots"
       @unselect-all="selectedBooks = []"
       @mark-read="markSelectedBooksRead"
       @mark-unread="markSelectedBooksUnread"
       @add-to-readlist="addToReadList"
+      @add-to-collection="addOneshotsToCollection"
       @edit="editMultipleBooks"
       @bulk-edit="bulkEditMultipleBooks"
       @delete="deleteBooks"
@@ -165,7 +167,7 @@ import {
   SERIES_DELETED,
 } from '@/types/events'
 import Vue from 'vue'
-import {SeriesDto} from '@/types/komga-series'
+import {Oneshot, SeriesDto} from '@/types/komga-series'
 import {
   BookSseDto,
   CollectionSseDto,
@@ -264,6 +266,9 @@ export default Vue.extend({
         this.loaderCollections?.items.length === 0 &&
         this.loaderReadLists?.items.length === 0
     },
+    selectedOneshots(): boolean {
+      return this.selectedBooks.every(b => b.oneshot)
+    },
   },
   methods: {
     async scrollChanged(loader: PageLoader<any>, percent: number) {
@@ -299,11 +304,19 @@ export default Vue.extend({
         this.reloadResults()
       }
     },
-    singleEditSeries(series: SeriesDto) {
-      this.$store.dispatch('dialogUpdateSeries', series)
+    async singleEditSeries(series: SeriesDto) {
+      if (series.oneshot) {
+        let book = (await this.$komgaSeries.getBooks(series.id)).content[0]
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateSeries', series)
     },
-    singleEditBook(book: BookDto) {
-      this.$store.dispatch('dialogUpdateBooks', book)
+    async singleEditBook(book: BookDto) {
+      if (book.oneshot) {
+        const series = (await this.$komgaSeries.getOneSeries(book.seriesId))
+        this.$store.dispatch('dialogUpdateOneshots', {series: series, book: book})
+      } else
+        this.$store.dispatch('dialogUpdateBooks', book)
     },
     singleEditCollection(collection: CollectionDto) {
       this.$store.dispatch('dialogEditCollection', collection)
@@ -333,11 +346,24 @@ export default Vue.extend({
     addToReadList() {
       this.$store.dispatch('dialogAddBooksToReadList', this.selectedBooks.map(b => b.id))
     },
-    editMultipleSeries() {
-      this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
+    addOneshotsToCollection() {
+      this.$store.dispatch('dialogAddSeriesToCollection', this.selectedBooks.map(b => b.seriesId))
     },
-    editMultipleBooks() {
-      this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
+    async editMultipleSeries() {
+      if (this.selectedSeries.every(s => s.oneshot)) {
+        const books = await Promise.all(this.selectedSeries.map(s => this.$komgaSeries.getBooks(s.id)))
+        const oneshots = this.selectedSeries.map((s, index) => ({series: s, book: books[index].content[0]} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
+    },
+    async editMultipleBooks() {
+      if (this.selectedBooks.every(b => b.oneshot)) {
+        const series = await Promise.all(this.selectedBooks.map(b => this.$komgaSeries.getOneSeries(b.seriesId)))
+        const oneshots = this.selectedBooks.map((b, index) => ({series: series[index], book: b} as Oneshot))
+        this.$store.dispatch('dialogUpdateOneshots', oneshots)
+      } else
+        this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
     },
     bulkEditMultipleBooks() {
       this.$store.dispatch('dialogUpdateBulkBooks', this.selectedBooks)