From 8c245e85b5ed521216479e09ce13f1d8b41466cf Mon Sep 17 00:00:00 2001
From: ra939 <ra939@students.waikato.ac.nz>
Date: Sun, 5 Oct 2025 08:51:29 +0000
Subject: [PATCH] Git commit UI changes for recommandation feature

---
 client/components/AbsSelect.vue           |  63 ++++++
 client/components/app/Appbar.vue          |  28 ++-
 client/pages/item/_id/index.vue           | 263 +++++++++++++---------
 client/pages/me/recommendations/inbox.vue |  70 ++++++
 client/pages/me/recommendations/sent.vue  |  85 +++++++
 5 files changed, 389 insertions(+), 120 deletions(-)
 create mode 100644 client/components/AbsSelect.vue
 create mode 100644 client/pages/me/recommendations/inbox.vue
 create mode 100644 client/pages/me/recommendations/sent.vue

diff --git a/client/components/AbsSelect.vue b/client/components/AbsSelect.vue
new file mode 100644
index 000000000..5c0e1cd50
--- /dev/null
+++ b/client/components/AbsSelect.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="relative" @keydown.stop>
+    <button ref="btn" type="button" class="flex w-full items-center justify-between rounded-md border px-3 py-2 text-left"
+      :class="triggerClasses" :aria-expanded="open?'true':'false'" aria-haspopup="listbox"
+      @click="toggle()" @keydown.down.prevent="openAndMove(1)" @keydown.up.prevent="openAndMove(-1)"
+      @keydown.enter.prevent="commitActive()" @keydown.esc.prevent="open=false">
+      <span class="truncate">{{ currentLabel || placeholder }}</span>
+      <svg class="ml-2 h-4 w-4 opacity-70" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/>
+      </svg>
+    </button>
+
+    <transition name="fade">
+      <ul v-if="open" ref="list" role="listbox"
+          class="absolute z-[10000] mt-1 max-h-64 w-full overflow-auto rounded-md border shadow-2xl focus:outline-none"
+          :class="listClasses" :aria-activedescendant="activeId" tabindex="0"
+          @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)"
+          @keydown.enter.prevent="commitActive()" @keydown.esc.prevent="open=false">
+        <li v-for="(opt,i) in options" :key="opt.value ?? opt.slug ?? i" :id="optionId(i)" role="option"
+            :aria-selected="isSelected(opt)"
+            class="cursor-pointer px-3 py-2 text-sm" :class="optionClasses(i)"
+            @mouseenter="activeIndex=i" @mouseleave="activeIndex=-1" @click="select(opt)">
+          {{ opt.label }}
+        </li>
+        <li v-if="!options?.length" class="px-3 py-2 text-sm opacity-70">No options</li>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AbsSelect',
+  props: { modelValue: [String, Number, null], options: { type:Array, default:()=>[] }, placeholder: { type:String, default:'Select…' }, theme: { type:String, default:'auto' } },
+  emits: ['update:modelValue','change'],
+  data:()=>({ open:false, activeIndex:-1 }),
+  computed:{
+    isDark(){ if(this.theme==='dark') return true; if(this.theme==='light') return false; const el=document.documentElement, bd=document.body; return el.classList.contains('dark')||bd.classList.contains('dark') },
+    currentLabel(){ const v=this.modelValue; return (this.options.find(o=>(o.value??o.slug)===v)?.label)||'' },
+    activeId(){ return this.activeIndex>=0?this.optionId(this.activeIndex):null },
+    triggerClasses(){ return this.isDark?'border-gray-600 bg-gray-800 text-gray-100':'border-gray-300 bg-white text-gray-900' },
+    listClasses(){ return this.isDark?'bg-[#111827] text-[#e5e7eb] border-gray-700':'bg-white text-gray-900 border-gray-300' }
+  },
+  mounted(){ window.addEventListener('click',this.onOutside,true) },
+  beforeUnmount(){ window.removeEventListener('click',this.onOutside,true) },
+  methods:{
+    optionId(i){ return `abs-opt-${i}` },
+    isSelected(opt){ return (opt.value??opt.slug)===this.modelValue },
+    toggle(){ this.open=!this.open; if(this.open){ const idx=Math.max(this.options.findIndex(o=>this.isSelected(o)),0); this.activeIndex=idx; this.$nextTick(()=>this.$refs.list?.focus()) }},
+    onOutside(e){ if(this.open && !this.$el.contains(e.target)) this.open=false },
+    openAndMove(d){ if(!this.open) this.toggle(); this.move(d) },
+    move(d){ if(!this.options.length) return; const n=this.options.length; this.activeIndex=(((this.activeIndex===-1?0:this.activeIndex)+d)%n+n)%n },
+    commitActive(){ if(this.activeIndex>=0) this.select(this.options[this.activeIndex]) },
+    optionClasses(i){ return i===this.activeIndex?'bg-[#2563eb] text-white':(this.isDark?'hover:bg-[#1f2937]':'hover:bg-gray-100') },
+    select(opt){ const v=opt.value??opt.slug; this.$emit('update:modelValue',v); this.$emit('change',v); this.open=false; this.$nextTick(()=>this.$refs.btn?.focus()) }
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active,.fade-leave-active{transition:opacity .12s ease}
+.fade-enter-from,.fade-leave-to{opacity:0}
+</style>
diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index f74134041..98d1904e7 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -42,15 +42,31 @@
           </ui-tooltip>
         </nuxt-link>
 
+        <!-- Recommendations-->
+        <nuxt-link to="/me/recommendations/inbox" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
+          <ui-tooltip text="Recommendations Inbox" direction="bottom" class="flex items-center">
+            <span class="material-symbols text-2xl" aria-label="Recommendations Inbox" role="button">inbox</span>
+          </ui-tooltip>
+        </nuxt-link>
+
+        <nuxt-link to="/me/recommendations/sent" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
+          <ui-tooltip text="Recommendations Sent" direction="bottom" class="flex items-center">
+            <span class="material-symbols text-2xl" aria-label="Recommendations Sent" role="button">send</span>
+          </ui-tooltip>
+        </nuxt-link>
+        <!-- /Recommendations -->
+
         <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded-sm shadow-xs ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left sm:text-sm cursor-pointer hover:bg-bg/40" aria-haspopup="listbox" aria-expanded="true">
           <span class="items-center hidden md:flex">
             <span class="block truncate">{{ username }}</span>
           </span>
+
           <span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
             <span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
           </span>
         </nuxt-link>
       </div>
+
       <div v-show="numMediaItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
         <h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numMediaItemsSelected]) }}</h1>
         <div class="grow" />
@@ -58,17 +74,20 @@
           <span class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
           {{ $strings.ButtonPlay }}
         </ui-btn>
+
         <ui-tooltip v-if="isBookLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
           <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
         </ui-tooltip>
         <ui-tooltip v-if="userCanUpdate && isBookLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
           <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
         </ui-tooltip>
+
         <template v-if="userCanUpdate">
           <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
             <ui-icon-btn :disabled="processingBatch" icon="edit" bg-color="bg-warning" class="mx-1.5" @click="batchEditClick" />
           </ui-tooltip>
         </template>
+
         <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
           <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="bg-error" class="mx-1.5" @click="batchDeleteClick" />
         </ui-tooltip>
@@ -160,26 +179,22 @@ export default {
     },
     contextMenuItems() {
       if (!this.userIsAdminOrUp) return []
-
       const options = [
         {
           text: this.$strings.ButtonQuickMatch,
           action: 'quick-match'
         }
       ]
-
       if (!this.isPodcastLibrary && this.selectedMediaItemsArePlayable) {
         options.push({
           text: this.$strings.ButtonQuickEmbedMetadata,
           action: 'quick-embed'
         })
       }
-
       options.push({
         text: this.$strings.ButtonReScan,
         action: 'rescan'
       })
-
       // The limit of 50 is introduced because of the URL length. Each id has 36 chars, so 36 * 40 = 1440
       // + 40 , separators = 1480 chars + base path 280 chars = 1760 chars. This keeps the URL under 2000 chars even with longer domains
       if (this.selectedMediaItems.length <= 40) {
@@ -188,7 +203,6 @@ export default {
           action: 'download'
         })
       }
-
       return options
     }
   },
@@ -259,7 +273,6 @@ export default {
     },
     async playSelectedItems() {
       this.$store.commit('setProcessingBatch', true)
-
       const libraryItemIds = this.selectedMediaItems.map((i) => i.id)
       const libraryItems = await this.$axios
         .$post(`/api/items/batch/get`, { libraryItemIds })
@@ -308,6 +321,7 @@ export default {
     toggleBatchRead() {
       this.$store.commit('setProcessingBatch', true)
       const newIsFinished = !this.selectedIsFinished
+
       const updateProgressPayloads = this.selectedMediaItems.map((item) => {
         return {
           libraryItemId: item.id,
@@ -339,9 +353,7 @@ export default {
         callback: (confirmed, hardDelete) => {
           if (confirmed) {
             localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
             this.$store.commit('setProcessingBatch', true)
-
             this.$axios
               .$post(`/api/items/batch/delete?hard=${hardDelete ? 1 : 0}`, {
                 libraryItemIds: this.selectedMediaItems.map((i) => i.id)
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 1d8f0f20b..47c6b7ae6 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -21,6 +21,7 @@
             </div>
           </div>
         </div>
+
         <div class="grow px-2 py-6 lg:py-0 md:px-10">
           <div class="flex justify-center">
             <div class="mb-4">
@@ -41,7 +42,8 @@
 
               <p v-if="isPodcast" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">{{ $getString('LabelByAuthor', [podcastAuthor]) }}</p>
               <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden text-ellipsis">
-                {{ $getString('LabelByAuthor', ['']) }}<nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
+                {{ $getString('LabelByAuthor', ['']) }}
+                <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline"> {{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span> </nuxt-link>
               </p>
               <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
 
@@ -54,7 +56,6 @@
           <div v-if="episodeDownloadsQueued.length" class="px-4 py-2 mt-4 bg-info/40 text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0">
             <div class="flex items-center">
               <p class="text-sm py-1">{{ $getString('MessageEpisodesQueuedForDownload', [episodeDownloadsQueued.length]) }}</p>
-
               <span v-if="userIsAdminOrUp" class="material-symbols hover:text-error text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
             </div>
           </div>
@@ -70,9 +71,11 @@
           <!-- Progress -->
           <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p v-if="progressPercent < 1" class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
-            <p v-else class="text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
-            <p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
-            <p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
+            <p v-else class="text-xs">{{ $strings.LabelFinished }} {{ fmtDate(userProgressFinishedAt) }}</p>
+            <p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">
+              {{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}
+            </p>
+            <p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ fmtDate(userProgressStartedAt) }}</p>
 
             <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
               <span class="material-symbols text-sm">&#xe5cd;</span>
@@ -96,6 +99,12 @@
               {{ $strings.ButtonRead }}
             </ui-btn>
 
+            <!-- Recommend button -->
+            <ui-btn v-if="isBook" color="bg-info" :padding-x="3" small class="flex items-center h-9 mr-2" @click="openRecommendModal">
+              <span class="material-symbols text-xl -ml-1 pr-1 text-white">sell</span>
+              Recommend
+            </ui-btn>
+
             <ui-tooltip v-if="showQueueBtn" :text="isQueued ? $strings.ButtonQueueRemoveItem : $strings.ButtonQueueAddItem" direction="top">
               <ui-icon-btn :icon="isQueued ? 'playlist_add_check' : 'playlist_play'" :bg-color="isQueued ? 'bg-primary' : 'bg-success/60'" class="mx-0.5" :class="isQueued ? 'text-success' : ''" @click="queueBtnClick" />
             </ui-tooltip>
@@ -124,25 +133,70 @@
 
           <div class="my-4 w-full">
             <div ref="description" id="item-description" dir="auto" role="paragraph" class="default-style less-spacing text-base text-gray-100 whitespace-pre-line mb-1" :class="{ 'show-full': showFullDescription }" v-html="description" />
-
-            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">{{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }} <span class="material-symbols text-xl pl-1" v-html="showFullDescription ? 'expand_less' : '&#xe313;'" /></button>
+            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">
+              {{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }}
+              <span class="material-symbols text-xl pl-1" v-html="showFullDescription ? 'expand_less' : '&#xe313;'" />
+            </button>
           </div>
 
+          <!-- (Removed Community Recommendations list) -->
+
           <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" class="mt-6" />
-
           <tables-tracks-table v-if="tracks.length" :title="$strings.LabelStatsAudioTracks" :tracks="tracksWithAudioFile" :is-file="isFile" :library-item-id="libraryItemId" class="mt-6" />
-
           <tables-podcast-lazy-episodes-table ref="episodesTable" v-if="isPodcast" :library-item="libraryItem" />
-
           <tables-ebook-files-table v-if="ebookFiles.length" :library-item="libraryItem" class="mt-6" />
-
           <tables-library-files-table v-if="libraryFiles.length" :library-item="libraryItem" class="mt-6" />
         </div>
       </div>
     </div>
 
+    <!-- Existing modals -->
     <modals-podcast-episode-feed v-model="showPodcastEpisodeFeed" :library-item="libraryItem" :episodes="podcastFeedEpisodes" :download-queue="episodeDownloadsQueued" :episodes-downloading="episodesDownloading" />
     <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :playback-rate="1" :library-item-id="libraryItemId" hide-create @select="selectBookmark" />
+
+    <!-- Recommend modal -->
+    <div v-if="showRecModal" class="fixed inset-0 z-50">
+      <div class="absolute inset-0 bg-black/60" @click="closeRecommendModal" />
+      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-bg border border-gray-700 rounded-xl p-4">
+        <h3 class="text-lg font-semibold mb-3">Recommend this book</h3>
+
+        <div class="mb-3">
+          <label class="block text-sm mb-1">Tag <span class="text-error">*</span></label>
+          <select v-model="recForm.tagId" class="w-full bg-fg border border-gray-600 rounded px-3 py-2">
+            <option disabled value="">Select a tag…</option>
+            <option v-for="t in recTags" :value="t.id" :key="t.id">{{ t.label }}</option>
+          </select>
+        </div>
+
+        <div class="mb-3">
+          <label class="block text-sm mb-1">Recipient User ID (optional)</label>
+          <input v-model.trim="recForm.recipientUserId" type="text" placeholder="User ID (UUID) or leave blank" class="w-full bg-fg border border-gray-600 rounded px-3 py-2" />
+          <p class="text-xs text-gray-400 mt-1">If left empty, this will be a public recommendation.</p>
+        </div>
+
+        <div class="mb-3">
+          <label class="block text-sm mb-1">Note (optional)</label>
+          <textarea v-model.trim="recForm.note" rows="3" maxlength="1000" class="w-full bg-fg border border-gray-600 rounded px-3 py-2" />
+          <p class="text-xs text-gray-400 mt-1">{{ recForm.note.length }}/1000</p>
+        </div>
+
+        <div class="mb-3">
+          <label class="block text-sm mb-1">Visibility</label>
+          <div class="flex items-center space-x-4 text-sm">
+            <label class="inline-flex items-center"> <input type="radio" value="public" v-model="recForm.visibility" class="mr-2" /> Public </label>
+            <label class="inline-flex items-center"> <input type="radio" value="recipient-only" v-model="recForm.visibility" class="mr-2" /> Recipient only </label>
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2">
+          <ui-btn :disabled="postingRec" color="bg-fg" small class="h-9" @click="closeRecommendModal">Cancel</ui-btn>
+          <ui-btn :disabled="postingRec || !recForm.tagId" color="bg-success" small class="h-9" @click="submitRecommendation">
+            <span v-if="postingRec" class="material-symbols mr-1">hourglass_empty</span>
+            Submit
+          </ui-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -153,8 +207,7 @@ export default {
       return redirect(`/login?redirect=${route.path}`)
     }
 
-    // Include episode downloads for podcasts
-    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed,share`).catch((error) => {
+    const item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed,share`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -182,7 +235,18 @@ export default {
       episodeDownloadsQueued: [],
       showBookmarksModal: false,
       isDescriptionClamped: false,
-      showFullDescription: false
+      showFullDescription: false,
+
+      // Recommend modal state
+      showRecModal: false,
+      postingRec: false,
+      recTags: [],
+      recForm: {
+        tagId: '',
+        recipientUserId: '',
+        note: '',
+        visibility: 'public'
+      }
     }
   },
   computed: {
@@ -287,10 +351,7 @@ export default {
       return this.series.map((se) => {
         let text = se.name
         if (se.sequence) text += ` #${se.sequence}`
-        return {
-          ...se,
-          text
-        }
+        return { ...se, text }
       })
     },
     duration() {
@@ -353,9 +414,7 @@ export default {
       return this.$store.getters['user/getUserCanDownload']
     },
     showRssFeedBtn() {
-      if (!this.rssFeed && !this.podcastEpisodes.length && !this.tracks.length) return false // Cannot open RSS feed with no episodes/tracks
-
-      // If rss feed is open then show feed url to users otherwise just show to admins
+      if (!this.rssFeed && !this.podcastEpisodes.length && !this.tracks.length) return false
       return this.userIsAdminOrUp || this.rssFeed
     },
     showQueueBtn() {
@@ -367,86 +426,86 @@ export default {
     },
     contextMenuItems() {
       const items = []
-
-      if (this.showCollectionsButton) {
-        items.push({
-          text: this.$strings.LabelCollections,
-          action: 'collections'
-        })
-      }
-
-      if (!this.isPodcast && this.tracks.length) {
-        items.push({
-          text: this.$strings.LabelYourPlaylists,
-          action: 'playlists'
-        })
-      }
-
-      if (this.bookmarks.length) {
-        items.push({
-          text: this.$strings.LabelYourBookmarks,
-          action: 'bookmarks'
-        })
-      }
-
-      if (this.showRssFeedBtn) {
-        items.push({
-          text: this.$strings.LabelOpenRSSFeed,
-          action: 'rss-feeds'
-        })
-      }
-
-      if (this.userCanDownload) {
-        items.push({
-          text: this.$strings.LabelDownload,
-          action: 'download'
-        })
-      }
-
+      if (this.showCollectionsButton) items.push({ text: this.$strings.LabelCollections, action: 'collections' })
+      if (!this.isPodcast && this.tracks.length) items.push({ text: this.$strings.LabelYourPlaylists, action: 'playlists' })
+      if (this.bookmarks.length) items.push({ text: this.$strings.LabelYourBookmarks, action: 'bookmarks' })
+      if (this.showRssFeedBtn) items.push({ text: this.$strings.LabelOpenRSSFeed, action: 'rss-feeds' })
+      if (this.userCanDownload) items.push({ text: this.$strings.LabelDownload, action: 'download' })
       if (this.ebookFile && this.$store.state.libraries.ereaderDevices?.length) {
         items.push({
           text: this.$strings.LabelSendEbookToDevice,
-          subitems: this.$store.state.libraries.ereaderDevices.map((d) => {
-            return {
-              text: d.name,
-              action: 'sendToDevice',
-              data: d.name
-            }
-          })
+          subitems: this.$store.state.libraries.ereaderDevices.map((d) => ({ text: d.name, action: 'sendToDevice', data: d.name }))
         })
       }
-
-      if (this.userIsAdminOrUp && !this.isPodcast && this.tracks.length) {
-        items.push({
-          text: this.$strings.LabelShare,
-          action: 'share'
-        })
-      }
-
-      if (this.userCanDelete) {
-        items.push({
-          text: this.$strings.ButtonDelete,
-          action: 'delete'
-        })
-      }
-
+      if (this.userIsAdminOrUp && !this.isPodcast && this.tracks.length) items.push({ text: this.$strings.LabelShare, action: 'share' })
+      if (this.userCanDelete) items.push({ text: this.$strings.ButtonDelete, action: 'delete' })
       return items
     }
   },
   methods: {
+    // ---- Safe date formatter ----
+    fmtDate(value) {
+      if (!value) return ''
+      if (typeof value === 'number') {
+        const ms = value < 1e12 ? value * 1000 : value
+        return this.$formatDate(ms, this.dateFormat)
+      }
+      const ts = Date.parse(value)
+      if (!Number.isNaN(ts)) return this.$formatDate(ts, this.dateFormat)
+      return ''
+    },
+
+    // --- Recommendations helpers ---
+    async openRecommendModal() {
+      this.showRecModal = true
+      if (!this.recTags.length) {
+        try {
+          this.recTags = await this.$axios.$get('/api/recommendations/tags')
+        } catch (e) {
+          console.error('Fetch tags failed', e)
+          this.$toast?.error?.('Failed to load tags')
+        }
+      }
+    },
+    closeRecommendModal() {
+      if (this.postingRec) return
+      this.showRecModal = false
+      this.recForm = { tagId: '', recipientUserId: '', note: '', visibility: 'public' }
+    },
+    async submitRecommendation() {
+      if (!this.recForm.tagId) return
+      this.postingRec = true
+      try {
+        const payload = {
+          bookId: this.libraryItemId,
+          tagId: this.recForm.tagId,
+          note: this.recForm.note || undefined,
+          visibility: this.recForm.visibility,
+          recipientUserId: this.recForm.recipientUserId || undefined
+        }
+        await this.$axios.$post('/api/recommendations', payload)
+        this.$toast?.success?.('Recommendation saved')
+        this.closeRecommendModal()
+      } catch (e) {
+        const msg = e?.response?.data?.message || 'Failed to save recommendation'
+        this.$toast?.error?.(msg)
+        console.error('Create recommendation failed', e)
+      } finally {
+        this.postingRec = false
+      }
+    },
+
+    // --- existing methods below ---
     selectBookmark(bookmark) {
       if (!bookmark) return
       if (this.isStreaming) {
         this.$eventBus.$emit('playback-seek', bookmark.time)
       } else if (this.streamLibraryItem) {
         this.showBookmarksModal = false
-        console.log('Already streaming library item so ask about it')
         const payload = {
           message: `Start playback for "${this.title}" at ${this.$secondsToTimestamp(bookmark.time)}?`,
           callback: (confirmed) => {
-            if (confirmed) {
-              this.playItem(bookmark.time)
-            }
+            if (confirmed) this.playItem(bookmark.time)
           },
           type: 'yesNo'
         }
@@ -475,7 +534,7 @@ export default {
         return this.$toast.error(this.$strings.ToastNoRSSFeed)
       }
       this.fetchingRSSFeed = true
-      var payload = await this.$axios.$post(`/api/podcasts/feed`, { rssFeed: this.mediaMetadata.feedUrl }).catch((error) => {
+      const payload = await this.$axios.$post(`/api/podcasts/feed`, { rssFeed: this.mediaMetadata.feedUrl }).catch((error) => {
         console.error('Failed to get feed', error)
         this.$toast.error(this.$strings.ToastPodcastGetFeedFailed)
         return null
@@ -483,7 +542,6 @@ export default {
       this.fetchingRSSFeed = false
       if (!payload) return
 
-      console.log('Podcast feed', payload)
       const podcastfeed = payload.podcast
       if (!podcastfeed.episodes || !podcastfeed.episodes.length) {
         this.$toast.info(this.$strings.ToastPodcastNoEpisodesInFeed)
@@ -504,10 +562,8 @@ export default {
       if (!this.userIsFinished && this.progressPercent > 0 && !confirmed) {
         const payload = {
           message: this.$getString('MessageConfirmMarkItemFinished', [this.title]),
-          callback: (confirmed) => {
-            if (confirmed) {
-              this.toggleFinished(true)
-            }
+          callback: (c) => {
+            if (c) this.toggleFinished(true)
           },
           type: 'yesNo'
         }
@@ -515,9 +571,7 @@ export default {
         return
       }
 
-      var updatePayload = {
-        isFinished: !this.userIsFinished
-      }
+      const updatePayload = { isFinished: !this.userIsFinished }
       this.isProcessingReadUpdate = true
       this.$axios
         .$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload)
@@ -534,15 +588,12 @@ export default {
       let episodeId = null
       const queueItems = []
       if (this.isPodcast) {
-        // Uses the sorting and filtering from the episode table component
         const episodesInListeningOrder = this.$refs.episodesTable?.episodesList || []
 
-        // Find the first unplayed episode from the table
         let episodeIndex = episodesInListeningOrder.findIndex((ep) => {
           const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, ep.id)
           return !podcastProgress || !podcastProgress.isFinished
         })
-        // If all episodes are played, use the first episode
         if (episodeIndex < 0) episodeIndex = 0
 
         episodeId = episodesInListeningOrder[episodeIndex].id
@@ -557,14 +608,14 @@ export default {
               episodeId: episode.id,
               title: episode.title,
               subtitle: this.title,
-              caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(episode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate,
+              caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.fmtDate(episode.publishedAt)]) : this.$strings.LabelUnknownPublishDate,
               duration: episode.audioFile.duration || null,
               coverPath: this.libraryItem.media.coverPath || null
             })
           }
         }
       } else {
-        const queueItem = {
+        queueItems.push({
           libraryItemId: this.libraryItemId,
           libraryId: this.libraryId,
           episodeId: null,
@@ -573,8 +624,7 @@ export default {
           caption: '',
           duration: this.duration || null,
           coverPath: this.media.coverPath || null
-        }
-        queueItems.push(queueItem)
+        })
       }
 
       this.$eventBus.$emit('play-item', {
@@ -594,20 +644,16 @@ export default {
     },
     libraryItemUpdated(libraryItem) {
       if (libraryItem.id === this.libraryItemId) {
-        console.log('Item was updated', libraryItem)
         this.libraryItem = libraryItem
         this.$nextTick(this.checkDescriptionClamped)
       }
     },
     clearProgressClick() {
       if (!this.userMediaProgress) return
-
       const payload = {
         message: this.$strings.MessageConfirmResetProgress,
         callback: (confirmed) => {
-          if (confirmed) {
-            this.clearProgress()
-          }
+          if (confirmed) this.clearProgress()
         },
         type: 'yesNo'
       }
@@ -680,11 +726,8 @@ export default {
     },
     queueBtnClick() {
       if (this.isQueued) {
-        // Remove from queue
         this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId })
       } else {
-        // Add to queue
-
         const queueItem = {
           libraryItemId: this.libraryItemId,
           libraryId: this.libraryId,
@@ -711,7 +754,6 @@ export default {
         callback: (confirmed, hardDelete) => {
           if (confirmed) {
             localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
             this.$axios
               .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
               .then(() => {
@@ -733,10 +775,7 @@ export default {
         message: this.$getString('MessageConfirmSendEbookToDevice', [this.ebookFile.ebookFormat, this.title, deviceName]),
         callback: (confirmed) => {
           if (confirmed) {
-            const payload = {
-              libraryItemId: this.libraryItemId,
-              deviceName
-            }
+            const payload = { libraryItemId: this.libraryItemId, deviceName }
             this.processing = true
             this.$axios
               .$post(`/api/emails/send-ebook-to-device`, payload)
diff --git a/client/pages/me/recommendations/inbox.vue b/client/pages/me/recommendations/inbox.vue
new file mode 100644
index 000000000..0c19f4894
--- /dev/null
+++ b/client/pages/me/recommendations/inbox.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <h1 class="text-2xl font-semibold mb-4">Recommendations · Inbox</h1>
+
+    <div v-if="loading" class="text-gray-300">Loading…</div>
+    <div v-else-if="!items.length" class="text-gray-400">You have no incoming recommendations yet.</div>
+
+    <div v-else class="space-y-3">
+      <div v-for="r in items" :key="r.id" class="border border-gray-700 rounded-md p-3">
+        <!-- header row with Go to -->
+        <div class="text-sm text-gray-400 mb-1 flex items-center">
+          <div>
+            from <span class="text-gray-200">{{ r.recommender?.username || 'Someone' }}</span>
+            <span class="text-gray-500"> • {{ fmt(r.createdAt) }}</span>
+          </div>
+
+        <!-- Go to button -->
+          <nuxt-link
+            class="ml-auto text-xs px-2 py-1 rounded border border-primary text-primary hover:bg-primary/10"
+            :to="itemLink(r)"
+          >
+            Go to
+          </nuxt-link>
+        </div>
+
+        <div class="flex items-start">
+          <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs border border-gray-500 mr-2">
+            {{ r.tag?.label || 'Recommended' }}
+          </span>
+          <div class="text-sm text-gray-200">
+            <span>{{ r.bookTitle || `Book #${r.bookId}` }}</span>
+            <span v-if="r.note" class="block text-gray-300 mt-1">{{ r.note }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  middleware: 'authenticated',
+  async asyncData({ store, app, route, redirect }) {
+    if (!store.state.user.user) return redirect(`/login?redirect=${route.path}`)
+    try {
+      const items = await app.$axios.$get('/api/recommendations/inbox?include=tag,recommender,item')
+      return { items, loading: false }
+    } catch (_) {
+      return { items: [], loading: false }
+    }
+  },
+  data: () => ({ loading: true, items: [] }),
+  computed: {
+    dateFormat() {
+      return this.$store.getters['getServerSetting']('dateFormat') || 'yyyy-MM-dd'
+    }
+  },
+  methods: {
+    fmt(v) {
+      try { return this.$formatDate(v, this.dateFormat) }
+      catch { return new Date(v).toLocaleString() }
+    },
+    // Prefer the joined libraryItem id; fall back to stored bookId
+    itemLink(r) {
+      const id = r?.item?.id || r.bookId
+      return `/item/${id}`
+    }
+  }
+}
+</script>
diff --git a/client/pages/me/recommendations/sent.vue b/client/pages/me/recommendations/sent.vue
new file mode 100644
index 000000000..2bf5c9cf2
--- /dev/null
+++ b/client/pages/me/recommendations/sent.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <h1 class="text-2xl font-semibold mb-4">Recommendations · Sent</h1>
+
+    <div v-if="loading" class="text-gray-300">Loading…</div>
+    <div v-else-if="!items.length" class="text-gray-400">You haven’t sent any recommendations yet.</div>
+
+    <div v-else class="space-y-3">
+      <div v-for="r in items" :key="r.id" class="border border-gray-700 rounded-md p-3">
+        <div class="flex items-center text-sm text-gray-400 mb-1">
+          <div class="truncate">
+            to <span class="text-gray-200">{{ r.recipient?.username || 'Public' }}</span>
+            <span class="text-gray-500"> • {{ fmt(r.createdAt) }}</span>
+            <span
+              class="ml-2 text-xs px-2 py-0.5 border rounded-full"
+              :class="r.visibility === 'public' ? 'border-primary text-primary' : 'border-gray-500 text-gray-400'"
+            >{{ r.visibility }}</span>
+          </div>
+          <button
+            class="ml-auto text-xs px-2 py-1 rounded border border-error/60 text-error hover:bg-error/10 disabled:opacity-50"
+            :disabled="!!deleting[r.id]"
+            @click="confirmDelete(r)"
+          >{{ deleting[r.id] ? 'Deleting…' : 'Delete' }}</button>
+        </div>
+
+        <div class="flex items-start">
+          <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs border border-gray-500 mr-2">
+            {{ r.tag?.label || 'Recommended' }}
+          </span>
+          <div class="text-sm text-gray-200">
+            <span class="block">{{ r.bookTitle || `Book #${r.bookId}` }}</span>
+            <span v-if="r.note" class="block text-gray-300 mt-1">{{ r.note }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  middleware: 'authenticated',
+  async asyncData({ store, app, route, redirect }) {
+    if (!store.state.user.user) return redirect(`/login?redirect=${route.path}`)
+    try {
+      const items = await app.$axios.$get('/api/recommendations/sent?include=tag,recipient,item')
+      return { items, loading: false }
+    } catch {
+      return { items: [], loading: false }
+    }
+  },
+  data: () => ({ loading: true, items: [], deleting: {} }),
+  computed: {
+    dateFormat() {
+      return this.$store.getters['getServerSetting']('dateFormat') || 'yyyy-MM-dd'
+    }
+  },
+  methods: {
+    fmt(v) {
+      try {
+        return this.$formatDate(v, this.dateFormat)
+      } catch {
+        return new Date(v).toLocaleString()
+      }
+    },
+    async confirmDelete(r) {
+      if (!window.confirm('Delete this recommendation?')) return
+      await this.del(r.id)
+    },
+    async del(id) {
+      if (this.deleting[id]) return
+      this.$set(this.deleting, id, true)
+      try {
+        await this.$axios.$delete(`/api/recommendations/${id}`)
+        this.items = this.items.filter((i) => i.id !== id)
+        this.$toast?.success('Recommendation deleted')
+      } catch (e) {
+        this.$toast?.error(e?.response?.data?.message || 'Failed to delete recommendation')
+      } finally {
+        this.$delete(this.deleting, id)
+      }
+    }
+  }
+}
+</script>