Update bookmark modal scrollable with create always visible, make UI consistent, hide create when bookmark already exists

client/components/modals/BookmarksModal.vue

@@ -5,24 +5,26 @@
         <p class="text-3xl text-white truncate">{{ $strings.LabelYourBookmarks }}</p>
       </div>
     </template>
-    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
-      <div v-if="show" class="w-full h-full">
+    <div class="w-full rounded-lg bg-bg box-shadow-md relative" style="max-height: 80vh">
+      <div v-if="bookmarks.length" class="h-full max-h-[calc(80vh-60px)] w-full relative overflow-y-auto overflow-x-hidden">
         <template v-for="bookmark in bookmarks">
-          <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @update="submitUpdateBookmark" @delete="deleteBookmark" />
+          <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @delete="deleteBookmark" />
         </template>
-        <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
-          <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
-        </div>
-        <div v-if="!hideCreate" class="w-full h-px bg-white bg-opacity-10" />
-        <form v-if="!hideCreate" @submit.prevent="submitCreateBookmark">
-          <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
+      </div>
+      <div v-else class="flex h-32 items-center justify-center">
+        <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
+      </div>
+
+      <div v-if="canCreateBookmark" class="w-full border-t border-white/10">
+        <form @submit.prevent="submitCreateBookmark">
+          <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
             <div class="w-16 max-w-16 text-center">
               <p class="text-sm font-mono text-gray-400">
                 {{ this.$secondsToTimestamp(currentTime) }}
               </p>
             </div>
             <div class="flex-grow px-2">
-              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
+              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full h-10" />
             </div>
             <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">add</span></ui-btn>
           </div>
@@ -44,8 +46,7 @@ export default {
       type: Number,
       default: 0
     },
-    libraryItemId: String,
-    hideCreate: Boolean
+    libraryItemId: String
   },
   data() {
     return {
@@ -57,6 +58,7 @@ export default {
   watch: {
     show(newVal) {
       if (newVal) {
+        this.selectedBookmark = null
         this.showBookmarkTitleInput = false
         this.newBookmarkTitle = ''
       }
@@ -72,7 +74,7 @@ export default {
       }
     },
     canCreateBookmark() {
-      return !this.bookmarks.find((bm) => bm.time === this.currentTime)
+      return !this.bookmarks.find((bm) => Math.abs(this.currentTime - bm.time) < 1)
     },
     dateFormat() {
       return this.$store.state.serverSettings.dateFormat
@@ -102,19 +104,6 @@ export default {
     clickBookmark(bm) {
       this.$emit('select', bm)
     },
-    submitUpdateBookmark(updatedBookmark) {
-      var bookmark = { ...updatedBookmark }
-      this.$axios
-        .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
-        .then(() => {
-          this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
-        })
-        .catch((error) => {
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
-          console.error(error)
-        })
-      this.show = false
-    },
     submitCreateBookmark() {
       if (!this.newBookmarkTitle) {
         this.newBookmarkTitle = this.$formatDatetime(Date.now(), this.dateFormat, this.timeFormat)

client/components/modals/bookmarks/BookmarkItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center px-4 py-4 justify-start relative bg-primary hover:bg-opacity-25" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
+  <div class="flex items-center px-4 py-4 justify-start relative hover:bg-primary/10" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
     <div class="w-16 max-w-16 text-center">
       <p class="text-sm font-mono text-gray-400">
         {{ this.$secondsToTimestamp(bookmark.time) }}
@@ -10,7 +10,7 @@
         <form @submit.prevent="submitUpdate">
           <div class="flex items-center">
             <div class="flex-grow pr-2">
-              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
+              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full h-10" />
             </div>
             <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">forward</span></ui-btn>
             <div class="pl-2 flex items-center">
@@ -83,11 +83,19 @@ export default {
       if (this.newBookmarkTitle === this.bookmark.title) {
         return this.cancelEditing()
       }
-      var bookmark = { ...this.bookmark }
+      const bookmark = { ...this.bookmark }
       bookmark.title = this.newBookmarkTitle
-      this.$emit('update', bookmark)
+
+      this.$axios
+        .$patch(`/api/me/item/${bookmark.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.isEditing = false
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          console.error(error)
+        })
     }
-  },
-  mounted() {}
+  }
 }
 </script>

client/strings/bg.json

@@ -725,7 +725,6 @@
   "ToastBookmarkCreateFailed": "Неуспешно създаване на отметка",
   "ToastBookmarkCreateSuccess": "Отметката е създадена",
   "ToastBookmarkRemoveSuccess": "Отметката е премахната",
-  "ToastBookmarkUpdateSuccess": "Отметката е обновена",
   "ToastChaptersHaveErrors": "Главите имат грешки",
   "ToastChaptersMustHaveTitles": "Главите трябва да имат заглавия",
   "ToastCollectionRemoveSuccess": "Колекцията е премахната",

client/strings/bn.json

@@ -952,7 +952,6 @@
   "ToastBookmarkCreateFailed": "বুকমার্ক তৈরি করতে ব্যর্থ",
   "ToastBookmarkCreateSuccess": "বুকমার্ক যোগ করা হয়েছে",
   "ToastBookmarkRemoveSuccess": "বুকমার্ক সরানো হয়েছে",
-  "ToastBookmarkUpdateSuccess": "বুকমার্ক আপডেট করা হয়েছে",
   "ToastCachePurgeFailed": "ক্যাশে পরিষ্কার করতে ব্যর্থ হয়েছে",
   "ToastCachePurgeSuccess": "ক্যাশে সফলভাবে পরিষ্কার করা হয়েছে",
   "ToastChaptersHaveErrors": "অধ্যায়ে ত্রুটি আছে",

client/strings/ca.json

@@ -898,7 +898,6 @@
   "ToastBookmarkCreateFailed": "Error en crear marcador",
   "ToastBookmarkCreateSuccess": "Marcador afegit",
   "ToastBookmarkRemoveSuccess": "Marcador eliminat",
-  "ToastBookmarkUpdateSuccess": "Marcador actualitzat",
   "ToastCachePurgeFailed": "Error en purgar la memòria cau",
   "ToastCachePurgeSuccess": "Memòria cau purgada amb èxit",
   "ToastChaptersHaveErrors": "Els capítols tenen errors",

client/strings/cs.json

@@ -947,7 +947,6 @@
   "ToastBookmarkCreateFailed": "Vytvoření záložky se nezdařilo",
   "ToastBookmarkCreateSuccess": "Přidána záložka",
   "ToastBookmarkRemoveSuccess": "Záložka odstraněna",
-  "ToastBookmarkUpdateSuccess": "Záložka aktualizována",
   "ToastCachePurgeFailed": "Nepodařilo se vyčistit mezipaměť",
   "ToastCachePurgeSuccess": "Vyrovnávací paměť úspěšně vyčištěna",
   "ToastChaptersHaveErrors": "Kapitoly obsahují chyby",

client/strings/da.json

@@ -636,7 +636,6 @@
   "ToastBookmarkCreateFailed": "Mislykkedes oprettelse af bogmærke",
   "ToastBookmarkCreateSuccess": "Bogmærke tilføjet",
   "ToastBookmarkRemoveSuccess": "Bogmærke fjernet",
-  "ToastBookmarkUpdateSuccess": "Bogmærke opdateret",
   "ToastChaptersHaveErrors": "Kapitler har fejl",
   "ToastChaptersMustHaveTitles": "Kapitler skal have titler",
   "ToastCollectionRemoveSuccess": "Samling fjernet",

client/strings/de.json

@@ -953,7 +953,6 @@
   "ToastBookmarkCreateFailed": "Lesezeichen konnte nicht erstellt werden",
   "ToastBookmarkCreateSuccess": "Lesezeichen hinzugefügt",
   "ToastBookmarkRemoveSuccess": "Lesezeichen entfernt",
-  "ToastBookmarkUpdateSuccess": "Lesezeichen aktualisiert",
   "ToastCachePurgeFailed": "Cache leeren fehlgeschlagen",
   "ToastCachePurgeSuccess": "Cache geleert",
   "ToastChaptersHaveErrors": "Kapitel sind fehlerhaft",

client/strings/en-us.json

@@ -954,7 +954,6 @@
   "ToastBookmarkCreateFailed": "Failed to create bookmark",
   "ToastBookmarkCreateSuccess": "Bookmark added",
   "ToastBookmarkRemoveSuccess": "Bookmark removed",
-  "ToastBookmarkUpdateSuccess": "Bookmark updated",
   "ToastCachePurgeFailed": "Failed to purge cache",
   "ToastCachePurgeSuccess": "Cache purged successfully",
   "ToastChaptersHaveErrors": "Chapters have errors",

client/strings/es.json

@@ -953,7 +953,6 @@
   "ToastBookmarkCreateFailed": "Error al crear marcador",
   "ToastBookmarkCreateSuccess": "Marcador Agregado",
   "ToastBookmarkRemoveSuccess": "Marcador eliminado",
-  "ToastBookmarkUpdateSuccess": "Marcador actualizado",
   "ToastCachePurgeFailed": "Error al purgar el caché",
   "ToastCachePurgeSuccess": "Caché purgado de manera exitosa",
   "ToastChaptersHaveErrors": "Los capítulos tienen errores",

client/strings/et.json

@@ -709,7 +709,6 @@
   "ToastBookmarkCreateFailed": "Järjehoidja loomine ebaõnnestus",
   "ToastBookmarkCreateSuccess": "Järjehoidja lisatud",
   "ToastBookmarkRemoveSuccess": "Järjehoidja eemaldatud",
-  "ToastBookmarkUpdateSuccess": "Järjehoidja värskendatud",
   "ToastChaptersHaveErrors": "Peatükkidel on vigu",
   "ToastChaptersMustHaveTitles": "Peatükkidel peab olema pealkiri",
   "ToastCollectionRemoveSuccess": "Kogum eemaldatud",

client/strings/fr.json

@@ -944,7 +944,6 @@
   "ToastBookmarkCreateFailed": "Échec de la création de signet",
   "ToastBookmarkCreateSuccess": "Signet ajouté",
   "ToastBookmarkRemoveSuccess": "Signet supprimé",
-  "ToastBookmarkUpdateSuccess": "Signet mis à jour",
   "ToastCachePurgeFailed": "Échec de la purge du cache",
   "ToastCachePurgeSuccess": "Cache purgé avec succès",
   "ToastChaptersHaveErrors": "Les chapitres contiennent des erreurs",

client/strings/he.json

@@ -740,7 +740,6 @@
   "ToastBookmarkCreateFailed": "יצירת סימניה נכשלה",
   "ToastBookmarkCreateSuccess": "הסימניה נוספה בהצלחה",
   "ToastBookmarkRemoveSuccess": "הסימניה הוסרה בהצלחה",
-  "ToastBookmarkUpdateSuccess": "הסימניה עודכנה בהצלחה",
   "ToastChaptersHaveErrors": "פרקים מכילים שגיאות",
   "ToastChaptersMustHaveTitles": "פרקים חייבים לכלול כותרות",
   "ToastCollectionRemoveSuccess": "האוסף הוסר בהצלחה",

client/strings/hr.json

@@ -953,7 +953,6 @@
   "ToastBookmarkCreateFailed": "Izrada knjižne oznake nije uspjela",
   "ToastBookmarkCreateSuccess": "Knjižna oznaka dodana",
   "ToastBookmarkRemoveSuccess": "Knjižna oznaka uklonjena",
-  "ToastBookmarkUpdateSuccess": "Knjižna oznaka ažurirana",
   "ToastCachePurgeFailed": "Čišćenje predmemorije nije uspjelo",
   "ToastCachePurgeSuccess": "Predmemorija uspješno očišćena",
   "ToastChaptersHaveErrors": "Poglavlja imaju pogreške",

client/strings/hu.json

@@ -949,7 +949,6 @@
   "ToastBookmarkCreateFailed": "Könyvjelző létrehozása sikertelen",
   "ToastBookmarkCreateSuccess": "Könyvjelző hozzáadva",
   "ToastBookmarkRemoveSuccess": "Könyvjelző eltávolítva",
-  "ToastBookmarkUpdateSuccess": "Könyvjelző frissítve",
   "ToastCachePurgeFailed": "A gyorsítótár törlése sikertelen",
   "ToastCachePurgeSuccess": "A gyorsítótár sikeresen törölve",
   "ToastChaptersHaveErrors": "A fejezetek hibákat tartalmaznak",

client/strings/it.json

@@ -941,7 +941,6 @@
   "ToastBookmarkCreateFailed": "Creazione segnalibro fallita",
   "ToastBookmarkCreateSuccess": "Segnalibro creato",
   "ToastBookmarkRemoveSuccess": "Segnalibro Rimosso",
-  "ToastBookmarkUpdateSuccess": "Segnalibro aggiornato",
   "ToastCachePurgeFailed": "Impossibile eliminare la cache",
   "ToastCachePurgeSuccess": "Cache eliminata correttamente",
   "ToastChaptersHaveErrors": "I capitoli contengono errori",

client/strings/lt.json

@@ -660,7 +660,6 @@
   "ToastBookmarkCreateFailed": "Žymos sukurti nepavyko",
   "ToastBookmarkCreateSuccess": "Žyma pridėta",
   "ToastBookmarkRemoveSuccess": "Žyma pašalinta",
-  "ToastBookmarkUpdateSuccess": "Žyma atnaujinta",
   "ToastChaptersHaveErrors": "Skyriai turi klaidų",
   "ToastChaptersMustHaveTitles": "Skyriai turi turėti pavadinimus",
   "ToastChaptersRemoved": "Skyriai pašalinti",

client/strings/nl.json

@@ -937,7 +937,6 @@
   "ToastBookmarkCreateFailed": "Aanmaken boekwijzer mislukt",
   "ToastBookmarkCreateSuccess": "boekwijzer toegevoegd",
   "ToastBookmarkRemoveSuccess": "Boekwijzer verwijderd",
-  "ToastBookmarkUpdateSuccess": "Boekwijzer bijgewerkt",
   "ToastCachePurgeFailed": "Cache wissen is mislukt",
   "ToastCachePurgeSuccess": "Cache succesvol verwijderd",
   "ToastChaptersHaveErrors": "Hoofdstukken bevatten fouten",

client/strings/no.json

@@ -904,7 +904,6 @@
   "ToastBookmarkCreateFailed": "Misslykkes å opprette bokmerke",
   "ToastBookmarkCreateSuccess": "Bokmerke lagt til",
   "ToastBookmarkRemoveSuccess": "Bokmerke fjernet",
-  "ToastBookmarkUpdateSuccess": "Bokmerke oppdatert",
   "ToastCachePurgeFailed": "Kunne ikke å slette mellomlager",
   "ToastCachePurgeSuccess": "Mellomlager slettet",
   "ToastChaptersHaveErrors": "Kapittel har feil",

client/strings/pl.json

@@ -771,7 +771,6 @@
   "ToastBookmarkCreateFailed": "Nie udało się utworzyć zakładki",
   "ToastBookmarkCreateSuccess": "Dodano zakładkę",
   "ToastBookmarkRemoveSuccess": "Zakładka została usunięta",
-  "ToastBookmarkUpdateSuccess": "Zaktualizowano zakładkę",
   "ToastCollectionRemoveSuccess": "Kolekcja usunięta",
   "ToastCollectionUpdateSuccess": "Zaktualizowano kolekcję",
   "ToastItemCoverUpdateSuccess": "Zaktualizowano okładkę",

client/strings/pt-br.json

@@ -729,7 +729,6 @@
   "ToastBookmarkCreateFailed": "Falha ao criar marcador",
   "ToastBookmarkCreateSuccess": "Marcador adicionado",
   "ToastBookmarkRemoveSuccess": "Marcador removido",
-  "ToastBookmarkUpdateSuccess": "Marcador atualizado",
   "ToastCachePurgeFailed": "Falha ao apagar o cache",
   "ToastCachePurgeSuccess": "Cache apagado com sucesso",
   "ToastChaptersHaveErrors": "Capítulos com erro",

client/strings/ru.json

@@ -954,7 +954,6 @@
   "ToastBookmarkCreateFailed": "Не удалось создать закладку",
   "ToastBookmarkCreateSuccess": "Добавлена закладка",
   "ToastBookmarkRemoveSuccess": "Закладка удалена",
-  "ToastBookmarkUpdateSuccess": "Закладка обновлена",
   "ToastCachePurgeFailed": "Не удалось очистить кэш",
   "ToastCachePurgeSuccess": "Кэш успешно очищен",
   "ToastChaptersHaveErrors": "Главы имеют ошибки",

client/strings/sl.json

@@ -954,7 +954,6 @@
   "ToastBookmarkCreateFailed": "Zaznamka ni bilo mogoče ustvariti",
   "ToastBookmarkCreateSuccess": "Zaznamek dodan",
   "ToastBookmarkRemoveSuccess": "Zaznamek odstranjen",
-  "ToastBookmarkUpdateSuccess": "Zaznamek posodobljen",
   "ToastCachePurgeFailed": "Čiščenje predpomnilnika ni uspelo",
   "ToastCachePurgeSuccess": "Predpomnilnik je bil uspešno očiščen",
   "ToastChaptersHaveErrors": "Poglavja imajo napake",

client/strings/sv.json

@@ -707,7 +707,6 @@
   "ToastBookmarkCreateFailed": "Det gick inte att skapa bokmärket",
   "ToastBookmarkCreateSuccess": "Bokmärket har adderats",
   "ToastBookmarkRemoveSuccess": "Bokmärket har raderats",
-  "ToastBookmarkUpdateSuccess": "Bokmärket har uppdaterats",
   "ToastChaptersHaveErrors": "Kapitlen har fel",
   "ToastChaptersMustHaveTitles": "Kapitel måste ha titlar",
   "ToastCollectionRemoveSuccess": "Samlingen har raderats",

client/strings/uk.json

@@ -954,7 +954,6 @@
   "ToastBookmarkCreateFailed": "Не вдалося створити закладку",
   "ToastBookmarkCreateSuccess": "Закладку додано",
   "ToastBookmarkRemoveSuccess": "Закладку видалено",
-  "ToastBookmarkUpdateSuccess": "Закладку оновлено",
   "ToastCachePurgeFailed": "Не вдалося очистити кеш",
   "ToastCachePurgeSuccess": "Кеш очищено",
   "ToastChaptersHaveErrors": "Глави містять помилки",

client/strings/vi-vn.json

@@ -679,7 +679,6 @@
   "ToastBookmarkCreateFailed": "Tạo đánh dấu thất bại",
   "ToastBookmarkCreateSuccess": "Đã thêm đánh dấu",
   "ToastBookmarkRemoveSuccess": "Đánh dấu đã được xóa",
-  "ToastBookmarkUpdateSuccess": "Đánh dấu đã được cập nhật",
   "ToastChaptersHaveErrors": "Các chương có lỗi",
   "ToastChaptersMustHaveTitles": "Các chương phải có tiêu đề",
   "ToastCollectionRemoveSuccess": "Bộ sưu tập đã được xóa",

client/strings/zh-cn.json

@@ -950,7 +950,6 @@
   "ToastBookmarkCreateFailed": "创建书签失败",
   "ToastBookmarkCreateSuccess": "书签已添加",
   "ToastBookmarkRemoveSuccess": "书签已删除",
-  "ToastBookmarkUpdateSuccess": "书签已更新",
   "ToastCachePurgeFailed": "清除缓存失败",
   "ToastCachePurgeSuccess": "缓存清除成功",
   "ToastChaptersHaveErrors": "章节有错误",

client/strings/zh-tw.json

@@ -723,7 +723,6 @@
   "ToastBookmarkCreateFailed": "創建書簽失敗",
   "ToastBookmarkCreateSuccess": "書籤已新增",
   "ToastBookmarkRemoveSuccess": "書籤已刪除",
-  "ToastBookmarkUpdateSuccess": "書籤已更新",
   "ToastChaptersHaveErrors": "章節有錯誤",
   "ToastChaptersMustHaveTitles": "章節必須有標題",
   "ToastCollectionRemoveSuccess": "收藏夾已刪除",