Add:Podcast latest page

pages/bookshelf.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full">
     <home-bookshelf-nav-bar />
-    <home-bookshelf-toolbar v-show="!isHome" />
+    <home-bookshelf-toolbar v-show="!isHome && !isLatest" />
     <div id="bookshelf-wrapper" class="main-content overflow-y-auto overflow-x-hidden relative" :class="isHome ? 'home-page' : ''">
       <nuxt-child />
     </div>
@@ -16,6 +16,9 @@ export default {
   computed: {
     isHome() {
       return this.$route.name === 'bookshelf'
+    },
+    isLatest() {
+      return this.$route.name === 'bookshelf-latest'
     }
   }
 }

pages/bookshelf/latest.vue

@@ -1,14 +1,59 @@
 <template>
-  <div>Latest</div>
+  <div class="w-full p-4">
+    <h1 class="text-xl mb-2 font-semibold">Latest Episodes</h1>
+
+    <template v-for="episode in recentEpisodes">
+      <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="episode.libraryItemId" :local-library-item-id="null" :is-local="isLocal" :key="episode.id" @addToPlaylist="addEpisodeToPlaylist" />
+    </template>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      processing: false,
+      recentEpisodes: [],
+      totalEpisodes: 0,
+      currentPage: 0,
+      localEpisodeMap: {},
+      isLocal: false
+    }
   },
   watch: {},
-  computed: {},
+  computed: {
-  methods: {}
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    async addEpisodeToPlaylist(episode) {
+      const libraryItem = await this.$axios.$get(`/api/items/${episode.libraryItemId}`).catch((error) => {
+        console.error('Failed to get library item', error)
+        this.$toast.error('Failed to get library item')
+        return null
+      })
+      if (!libraryItem) return
+
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsAddCreateModal', true)
+    },
+    async loadRecentEpisodes(page = 0) {
+      this.processing = true
+      const episodePayload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/recent-episodes?limit=25&page=${page}`).catch((error) => {
+        console.error('Failed to get recent episodes', error)
+        this.$toast.error('Failed to get recent episodes')
+        return null
+      })
+      this.processing = false
+      console.log('Episodes', episodePayload)
+      this.recentEpisodes = episodePayload.episodes || []
+      this.totalEpisodes = episodePayload.total
+      this.currentPage = page
+    }
+  },
+  mounted() {
+    this.loadRecentEpisodes()
+  }
 }
 </script>