diff --git a/client/components/AbsSelect.vue b/client/components/AbsSelect.vue
deleted file mode 100644
index 5c0e1cd50..000000000
--- a/client/components/AbsSelect.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<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 98d1904e7..f74134041 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -42,31 +42,15 @@
           </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" />
@@ -74,20 +58,17 @@
           <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>
@@ -179,22 +160,26 @@ 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) {
@@ -203,6 +188,7 @@ export default {
           action: 'download'
         })
       }
+
       return options
     }
   },
@@ -273,6 +259,7 @@ 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 })
@@ -321,7 +308,6 @@ export default {
     toggleBatchRead() {
       this.$store.commit('setProcessingBatch', true)
       const newIsFinished = !this.selectedIsFinished
-
       const updateProgressPayloads = this.selectedMediaItems.map((item) => {
         return {
           libraryItemId: item.id,
@@ -353,7 +339,9 @@ 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 47c6b7ae6..1d8f0f20b 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -21,7 +21,6 @@
             </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">
@@ -42,8 +41,7 @@
 
               <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>
 
@@ -56,6 +54,7 @@
           <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>
@@ -71,11 +70,9 @@
           <!-- 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 }} {{ 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>
+            <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>
 
             <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>
@@ -99,12 +96,6 @@
               {{ $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>
@@ -133,70 +124,25 @@
 
           <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>
 
@@ -207,7 +153,8 @@ export default {
       return redirect(`/login?redirect=${route.path}`)
     }
 
-    const item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed,share`).catch((error) => {
+    // Include episode downloads for podcasts
+    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed,share`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -235,18 +182,7 @@ export default {
       episodeDownloadsQueued: [],
       showBookmarksModal: false,
       isDescriptionClamped: false,
-      showFullDescription: false,
-
-      // Recommend modal state
-      showRecModal: false,
-      postingRec: false,
-      recTags: [],
-      recForm: {
-        tagId: '',
-        recipientUserId: '',
-        note: '',
-        visibility: 'public'
-      }
+      showFullDescription: false
     }
   },
   computed: {
@@ -351,7 +287,10 @@ export default {
       return this.series.map((se) => {
         let text = se.name
         if (se.sequence) text += ` #${se.sequence}`
-        return { ...se, text }
+        return {
+          ...se,
+          text
+        }
       })
     },
     duration() {
@@ -414,7 +353,9 @@ export default {
       return this.$store.getters['user/getUserCanDownload']
     },
     showRssFeedBtn() {
-      if (!this.rssFeed && !this.podcastEpisodes.length && !this.tracks.length) return false
+      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
       return this.userIsAdminOrUp || this.rssFeed
     },
     showQueueBtn() {
@@ -426,86 +367,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) => ({ text: d.name, action: 'sendToDevice', data: d.name }))
+          subitems: this.$store.state.libraries.ereaderDevices.map((d) => {
+            return {
+              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'
         }
@@ -534,7 +475,7 @@ export default {
         return this.$toast.error(this.$strings.ToastNoRSSFeed)
       }
       this.fetchingRSSFeed = true
-      const payload = await this.$axios.$post(`/api/podcasts/feed`, { rssFeed: this.mediaMetadata.feedUrl }).catch((error) => {
+      var 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
@@ -542,6 +483,7 @@ 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)
@@ -562,8 +504,10 @@ export default {
       if (!this.userIsFinished && this.progressPercent > 0 && !confirmed) {
         const payload = {
           message: this.$getString('MessageConfirmMarkItemFinished', [this.title]),
-          callback: (c) => {
-            if (c) this.toggleFinished(true)
+          callback: (confirmed) => {
+            if (confirmed) {
+              this.toggleFinished(true)
+            }
           },
           type: 'yesNo'
         }
@@ -571,7 +515,9 @@ export default {
         return
       }
 
-      const updatePayload = { isFinished: !this.userIsFinished }
+      var updatePayload = {
+        isFinished: !this.userIsFinished
+      }
       this.isProcessingReadUpdate = true
       this.$axios
         .$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload)
@@ -588,12 +534,15 @@ 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
@@ -608,14 +557,14 @@ export default {
               episodeId: episode.id,
               title: episode.title,
               subtitle: this.title,
-              caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.fmtDate(episode.publishedAt)]) : this.$strings.LabelUnknownPublishDate,
+              caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(episode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate,
               duration: episode.audioFile.duration || null,
               coverPath: this.libraryItem.media.coverPath || null
             })
           }
         }
       } else {
-        queueItems.push({
+        const queueItem = {
           libraryItemId: this.libraryItemId,
           libraryId: this.libraryId,
           episodeId: null,
@@ -624,7 +573,8 @@ export default {
           caption: '',
           duration: this.duration || null,
           coverPath: this.media.coverPath || null
-        })
+        }
+        queueItems.push(queueItem)
       }
 
       this.$eventBus.$emit('play-item', {
@@ -644,16 +594,20 @@ 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'
       }
@@ -726,8 +680,11 @@ 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,
@@ -754,6 +711,7 @@ 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(() => {
@@ -775,7 +733,10 @@ 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
deleted file mode 100644
index 0c19f4894..000000000
--- a/client/pages/me/recommendations/inbox.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<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
deleted file mode 100644
index 2bf5c9cf2..000000000
--- a/client/pages/me/recommendations/sent.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<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>