Add review deletion functionality and UI enhancements

- Implemented delete functionality for reviews in both the ReviewModal and ReviewsTable components.
- Added confirmation prompts for review deletion actions.
- Updated ReviewController to allow deletion of reviews by admins or the review owner.
- Enhanced event handling to refresh the review list upon deletion.
- Improved UI to include delete buttons for admins in the ratings page and reviews table.

client/components/modals/ReviewModal.vue

@@ -23,6 +23,10 @@
       </div>
 
       <div class="flex justify-end gap-2">
+        <ui-btn v-if="selectedReviewItem?.review" color="bg-error" class="mr-auto" :loading="processingDelete" @click="deleteReview">
+          <span class="material-symbols text-base mr-1">delete</span>
+          {{ $strings.ButtonDelete }}
+        </ui-btn>
         <ui-btn @click="show = false">{{ $strings.ButtonCancel }}</ui-btn>
         <ui-btn color="bg-success" :loading="processing" @click="submit">{{ $strings.ButtonSubmit }}</ui-btn>
       </div>
@@ -36,13 +40,15 @@
  * Managed via the 'globals' Vuex store.
  * 
  * @emit review-updated - Emits the new/updated review object on the root event bus.
+ * @emit review-deleted - Emits the libraryItemId of the deleted review on the root event bus.
  */
 export default {
   data() {
     return {
       rating: 0,
       reviewText: '',
-      processing: false
+      processing: false,
+      processingDelete: false
     }
   },
   watch: {
@@ -78,6 +84,22 @@ export default {
     }
   },
   methods: {
+    async deleteReview() {
+      if (!confirm('Are you sure you want to delete this review?')) return
+
+      this.processingDelete = true
+      try {
+        await this.$axios.$delete(`/api/items/${this.libraryItem.id}/review`)
+        this.$root.$emit('review-deleted', { libraryItemId: this.libraryItem.id, reviewId: this.selectedReviewItem.review.id })
+        this.$toast.success('Review deleted')
+        this.show = false
+      } catch (error) {
+        console.error('Failed to delete review', error)
+        this.$toast.error('Failed to delete review')
+      } finally {
+        this.processingDelete = false
+      }
+    },
     async submit() {
       if (!this.rating) {
         this.$toast.error('Please select a rating')

client/components/tables/ReviewsTable.vue

@@ -31,7 +31,12 @@
                 <p class="font-semibold text-gray-100 mr-3">{{ review.user.username }}</p>
                 <ui-star-rating :value="review.rating" readonly :size="16" />
               </div>
-              <p class="text-xs text-gray-400">{{ $formatDate(review.createdAt, dateFormat) }}</p>
+              <div class="flex items-center gap-2">
+                <p class="text-xs text-gray-400">{{ $formatDate(review.createdAt, dateFormat) }}</p>
+                <button v-if="isAdmin && review.userId !== user.id" class="p-1 rounded hover:bg-white/10 text-gray-400 hover:text-error transition-colors" title="Delete Review" @click.stop="deleteReviewAdmin(review)">
+                  <span class="material-symbols text-base">delete</span>
+                </button>
+              </div>
             </div>
             <p v-if="review.reviewText" class="text-gray-200 whitespace-pre-wrap text-sm leading-relaxed">{{ review.reviewText }}</p>
           </div>
@@ -44,7 +49,7 @@
 <script>
 /**
  * A table component to display reviews for a specific library item.
- * Listens for global 'review-updated' events to refresh the view locally.
+ * Listens for global 'review-updated' and 'review-deleted' events to refresh the view locally.
  */
 export default {
   props: {
@@ -65,6 +70,9 @@ export default {
     user() {
       return this.$store.state.user.user
     },
+    isAdmin() {
+      return this.user.type === 'admin' || this.user.type === 'root'
+    },
     userReview() {
       return this.reviews.find((r) => r.userId === this.user.id)
     },
@@ -97,6 +105,18 @@ export default {
         review: this.userReview
       })
     },
+    async deleteReviewAdmin(review) {
+      if (!confirm(`Are you sure you want to delete ${review.user.username}'s review?`)) return
+      
+      try {
+        await this.$axios.$delete(`/api/reviews/${review.id}`)
+        this.reviews = this.reviews.filter(r => r.id !== review.id)
+        this.$toast.success('Review deleted')
+      } catch (error) {
+        console.error('Failed to delete review', error)
+        this.$toast.error('Failed to delete review')
+      }
+    },
     onReviewUpdated(review) {
       const index = this.reviews.findIndex((r) => r.id === review.id)
       if (index !== -1) {
@@ -113,9 +133,15 @@ export default {
         this.onReviewUpdated(review)
       }
     })
+    this.$root.$on('review-deleted', ({ libraryItemId, reviewId }) => {
+      if (libraryItemId === this.libraryItem.id) {
+        this.reviews = this.reviews.filter(r => r.id !== reviewId)
+      }
+    })
   },
   beforeDestroy() {
     this.$root.$off('review-updated')
+    this.$root.$off('review-deleted')
   }
 }
 </script>

client/pages/library/_library/ratings.vue

@@ -101,10 +101,13 @@
           </div>
 
           <!-- Edit button -->
-          <div class="flex-shrink-0 w-7">
+          <div class="flex-shrink-0 w-7 flex flex-col gap-1">
             <button v-if="isReviewAuthor(review)" class="p-0.5 rounded hover:bg-white/10 text-gray-400 hover:text-gray-200" @click.stop="editReview(review)">
               <span class="material-symbols text-base">edit</span>
             </button>
+            <button v-if="isAdmin && !isReviewAuthor(review)" class="p-0.5 rounded hover:bg-white/10 text-gray-400 hover:text-error transition-colors" title="Delete Review" @click.stop="deleteReviewAdmin(review)">
+              <span class="material-symbols text-base">delete</span>
+            </button>
           </div>
         </div>
       </div>
@@ -121,7 +124,7 @@
       </div>
     </div>
     
-    <modals-review-modal @review-updated="fetchReviews" />
+    <modals-review-modal @review-updated="fetchReviews" @review-deleted="fetchReviews" />
   </div>
 </template>
 
@@ -160,6 +163,9 @@ export default {
     currentUser() {
       return this.$store.state.user.user
     },
+    isAdmin() {
+      return this.currentUser.type === 'admin' || this.currentUser.type === 'root'
+    },
     sortItems() {
       return [
         { value: 'newest', text: this.$strings.LabelSortNewestFirst },
@@ -259,6 +265,18 @@ export default {
     isReviewAuthor(review) {
       return review.userId === this.currentUser.id
     },
+    async deleteReviewAdmin(review) {
+      if (!confirm(`Are you sure you want to delete ${review.user?.username || 'this'}'s review?`)) return
+
+      try {
+        await this.$axios.$delete(`/api/reviews/${review.id}`)
+        this.fetchReviews()
+        this.$toast.success('Review deleted')
+      } catch (error) {
+        console.error('Failed to delete review', error)
+        this.$toast.error('Failed to delete review')
+      }
+    },
     editReview(review) {
       this.$store.commit('globals/setReviewModal', {
         libraryItem: review.libraryItem,