added review hub profile page

client/pages/item/_id/index.vue

@@ -189,12 +189,7 @@
                   <div v-for="comment in sortedComments" :key="comment.id" class="bg-bg border rounded-lg p-4" :class="comment.userId === currentUser.id ? 'border-white border-4' : 'border-gray-700'">
                     <div class="flex justify-between items-start mb-2">
                       <div>
-                        <template v-if="comment.userId === currentUser.id">
+                        <nuxt-link :to="'/user/' + comment.userId" class="font-semibold hover:text-white hover:underline">{{ comment.user.username }}</nuxt-link>
-                          <nuxt-link to="/account" class="font-semibold hover:text-white hover:underline">{{ comment.user.username }}</nuxt-link>
-                        </template>
-                        <template v-else>
-                          <span class="font-semibold">{{ comment.user.username }}</span>
-                        </template>
                         <span class="text-sm text-gray-400 ml-2">
                           {{ formatDate(comment.createdAt) }}
                         </span>

client/pages/user/_id/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="bg-bg min-h-screen">
+    <div class="max-w-6xl mx-auto px-4 py-8">
+      <div v-if="user" class="mb-8">
+        <h1 class="text-3xl font-semibold mb-2">{{ user.username }}'s Profile</h1>
+        <p class="text-gray-400">Member since {{ formatDate(user.createdAt) }}</p>
+      </div>
+
+      <div v-if="reviews.length" class="space-y-6">
+        <h2 class="text-2xl font-semibold mb-4">Reviews</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          <div v-for="review in reviews" :key="review.id" class="bg-primary rounded-lg overflow-hidden shadow-lg flex flex-col">
+            <nuxt-link :to="'/item/' + review.libraryItemId" class="block flex-shrink-0" style="height: 280px">
+              <div class="relative h-full w-full flex items-center justify-center">
+                <covers-book-cover v-if="review.libraryItem" :library-item="review.libraryItem" :width="180" :book-cover-aspect-ratio="bookCoverAspectRatio" class="hover:scale-105 transition-transform duration-200" />
+                <div v-else class="absolute inset-0 bg-gray-700 flex items-center justify-center">
+                  <span class="material-symbols text-4xl text-gray-400">book</span>
+                </div>
+              </div>
+            </nuxt-link>
+
+            <div class="p-4 flex-grow">
+              <nuxt-link :to="'/item/' + review.libraryItemId" class="block">
+                <h3 class="text-lg font-semibold mb-2 hover:text-white transition-colors line-clamp-1">{{ review.libraryItem?.title || 'Unknown Book' }}</h3>
+              </nuxt-link>
+
+              <div class="flex mb-3">
+                <span v-for="star in 5" :key="star" class="abs-icons icon-star" :class="star <= review.rating ? 'text-yellow-500' : 'text-gray-500'"></span>
+              </div>
+
+              <p class="text-gray-300 text-sm mb-2 line-clamp-3">{{ review.text }}</p>
+              <p class="text-gray-400 text-xs">{{ formatDate(review.createdAt) }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="user" class="text-gray-400">{{ user.username }} hasn't written any reviews yet.</div>
+      <div v-else class="text-gray-400">Loading...</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      user: null,
+      reviews: []
+    }
+  },
+  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    }
+  },
+  methods: {
+    formatDate(date) {
+      return new Date(date).toLocaleDateString()
+    },
+    async loadUser() {
+      try {
+        this.user = await this.$axios.$get('/api/users/' + this.$route.params.id)
+      } catch (error) {
+        console.error('Error loading user:', error)
+        this.$toast.error('Error loading user profile')
+      }
+    },
+    async loadReviews() {
+      try {
+        const reviews = await this.$axios.$get('/api/users/' + this.$route.params.id + '/reviews')
+        console.log('Raw reviews data:', JSON.stringify(reviews, null, 2))
+        this.reviews = reviews
+      } catch (error) {
+        console.error('Error loading reviews:', error)
+        this.$toast.error('Error loading reviews')
+      }
+    }
+  },
+  async mounted() {
+    await this.loadUser()
+    await this.loadReviews()
+  }
+}
+</script>
+
+<style>
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style> 

server/controllers/UserController.js

@@ -489,5 +489,72 @@ class UserController {
 
     next()
   }
+
+  /**
+   * GET: /api/users/:id/reviews
+   * Get reviews for a user with associated library items
+   * 
+   * @param {UserControllerRequest} req
+   * @param {Response} res
+   */
+  async getUserReviews(req, res) {
+    try {
+      // First get all reviews for the user
+      const reviews = await Database.commentModel.findAll({
+        where: { userId: req.params.id },
+        include: [{
+          model: Database.userModel,
+          as: 'user',
+          attributes: ['id', 'username']
+        }],
+        order: [['createdAt', 'DESC']]
+      })
+
+      // Get all libraryItemIds from the reviews
+      const libraryItemIds = reviews.map(review => review.libraryItemId)
+
+      // Get all library items with their books
+      const libraryItems = await Database.libraryItemModel.findAll({
+        where: {
+          id: libraryItemIds
+        },
+        attributes: ['id', 'title', 'mediaType', 'path', 'relPath', 'libraryId', 'libraryFolderId', 'isFile', 'updatedAt'],
+        include: [{
+          model: Database.bookModel,
+          as: 'book',
+          attributes: ['id', 'title', 'coverPath']
+        }]
+      })
+
+      // Create a map of library items by id for easy lookup
+      const libraryItemsMap = libraryItems.reduce((map, item) => {
+        map[item.id] = item
+        return map
+      }, {})
+
+      // Merge the data
+      const reviewsWithItems = reviews.map(review => {
+        const reviewJson = review.toJSON()
+        const libraryItem = libraryItemsMap[reviewJson.libraryItemId]
+        
+        if (libraryItem) {
+          const libraryItemJson = libraryItem.toJSON()
+          reviewJson.libraryItem = libraryItemJson
+          if (libraryItemJson.book) {
+            reviewJson.libraryItem.media = {
+              coverPath: libraryItemJson.book.coverPath
+            }
+            reviewJson.book = libraryItemJson.book
+          }
+        }
+        return reviewJson
+      })
+
+      res.json(reviewsWithItems)
+    } catch (error) {
+      Logger.error('[UserController] getUserReviews error:', error)
+      res.status(500).json({ error: 'Failed to get user reviews' })
+    }
+  }
 }
 module.exports = new UserController()

server/routers/ApiRouter.js

@@ -144,6 +144,7 @@ class ApiRouter {
     this.router.patch('/users/:id/openid-unlink', UserController.middleware.bind(this), UserController.unlinkFromOpenID.bind(this))
     this.router.get('/users/:id/listening-sessions', UserController.middleware.bind(this), UserController.getListeningSessions.bind(this))
     this.router.get('/users/:id/listening-stats', UserController.middleware.bind(this), UserController.getListeningStats.bind(this))
+    this.router.get('/users/:id/reviews', UserController.middleware.bind(this), UserController.getUserReviews.bind(this))
 
     //
     // Collection Routes