From ce7779607fa501a07c614826353aac9cd96d84e8 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Sep 2023 09:28:43 -0500
Subject: [PATCH] Update:Bookmarks modal UI #876

---
 components/modals/BookmarksModal.vue         | 16 +++++++-------
 components/modals/bookmarks/BookmarkItem.vue | 22 +++++++++++---------
 plugins/nativeHttp.js                        |  3 +++
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/components/modals/BookmarksModal.vue b/components/modals/BookmarksModal.vue
index 675758cf..1c4e0615 100644
--- a/components/modals/BookmarksModal.vue
+++ b/components/modals/BookmarksModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" :width="300" height="100%">
+  <modals-modal v-model="show" :width="400" height="100%">
     <template #outer>
       <div class="absolute top-8 left-4 z-40">
         <p class="text-white text-2xl truncate">Bookmarks</p>
@@ -102,8 +102,8 @@ export default {
       })
       if (!value) return
 
-      this.$axios
-        .$delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
+      this.$nativeHttp
+        .delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
         .then(() => {
           this.$toast.success('Bookmark removed')
         })
@@ -119,8 +119,8 @@ export default {
     },
     submitUpdateBookmark(updatedBookmark) {
       var bookmark = { ...updatedBookmark }
-      this.$axios
-        .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+      this.$nativeHttp
+        .patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
         .then(() => {
           this.$toast.success('Bookmark updated')
         })
@@ -134,12 +134,12 @@ export default {
       if (!this.newBookmarkTitle) {
         this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
       }
-      var bookmark = {
+      const bookmark = {
         title: this.newBookmarkTitle,
         time: Math.floor(this.currentTime)
       }
-      this.$axios
-        .$post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+      this.$nativeHttp
+        .post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
         .then(() => {
           this.$toast.success('Bookmark added')
         })
diff --git a/components/modals/bookmarks/BookmarkItem.vue b/components/modals/bookmarks/BookmarkItem.vue
index ffb1e1ee..7ec4dd44 100644
--- a/components/modals/bookmarks/BookmarkItem.vue
+++ b/components/modals/bookmarks/BookmarkItem.vue
@@ -1,15 +1,17 @@
 <template>
-  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-3 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
-    <span class="material-icons text-xl" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span>
-    <div class="flex-grow overflow-hidden">
-      <p class="pl-2 pr-2 truncate text-sm">{{ bookmark.title }}</p>
+  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-1 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
+    <div class="flex-grow overflow-hidden px-2">
+      <div class="flex items-center mb-0.5">
+        <i class="material-icons text-lg pr-1 -mb-1" :class="highlight ? 'text-success' : 'text-white/60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</i>
+        <p class="truncate text-sm">
+          {{ bookmark.title }}
+        </p>
+      </div>
+      <p class="text-sm font-mono text-gray-300 flex items-center"><span class="material-icons text-base text-white/60 pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time) }}</p>
     </div>
-    <div class="h-full flex items-center w-14 justify-end">
-      <span class="font-mono text-xs text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span>
-    </div>
-    <div class="h-full flex items-center justify-end transform w-16">
-      <span class="material-icons text-lg mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
-      <span class="material-icons text-lg text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
+    <div class="h-full flex items-center justify-end transform w-16 pr-2" @click.stop>
+      <span class="material-icons text-2xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-icons text-2xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
     </div>
   </div>
 </template>
diff --git a/plugins/nativeHttp.js b/plugins/nativeHttp.js
index 09f284e6..d1983dce 100644
--- a/plugins/nativeHttp.js
+++ b/plugins/nativeHttp.js
@@ -37,6 +37,9 @@ export default function ({ store }, inject) {
     },
     patch(url, data, options = {}) {
       return this.request('PATCH', url, data, options)
+    },
+    delete(url, options = {}) {
+      return this.request('DELETE', url, undefined, options)
     }
   }
   inject('nativeHttp', nativeHttp)