From 310b1d09499bc76c15f23dd9a7657a1c61b9bf7a Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Thu, 30 Jul 2026 12:06:17 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20fix=20l=E1=BA=A1i=20m=E1=BA=A5y=20c?=
 =?UTF-8?q?=C3=A1i=20=E1=BB=9F=20comuniti=20section?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/lib/icons.ts                |  2 +
 app/pages/index.vue             | 63 +++++++++++++++++---------------
 server/api/home/sections.get.ts | 65 ++++++++++++++++++++-------------
 3 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/app/lib/icons.ts b/app/lib/icons.ts
index a648259..ec28c8b 100644
--- a/app/lib/icons.ts
+++ b/app/lib/icons.ts
@@ -1,5 +1,6 @@
 import {
   faArrowLeft,
+  faArrowUp,
   faArrowTurnDown,
   faArrowTrendDown,
   faArrowTrendUp,
@@ -92,6 +93,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 
 library.add(
   faArrowLeft,
+  faArrowUp,
   faArrowTurnDown,
   faArrowTrendDown,
   faArrowTrendUp,
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6409061..db94e4d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -617,17 +617,18 @@ useHead({
       <section class="relative overflow-visible rounded-2xl border border-white/15 bg-[#0E111A]">
         <!-- Bình luận mới -->
         <div v-if="recentComments.length" class="relative border-b border-white/10 px-5 py-5 sm:px-8 sm:py-6 lg:px-12">
-          <div class="mb-5 flex items-center gap-3">
-            <AppIcon name="message-circle" class="size-6 text-yellow-400" />
-            <h2 class="text-2xl font-black uppercase text-white">Bình luận mới</h2>
+          <div class="mb-4 flex items-center gap-3 lg:mb-5">
+            <AppIcon name="message-circle" class="size-5 text-yellow-400 lg:size-6" />
+            <h2 class="text-base font-black uppercase text-white sm:text-lg lg:text-2xl">Bình luận mới</h2>
           </div>
 
           <div class="relative">
-            <div ref="commentsCarouselRef" class="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2">
+            <div ref="commentsCarouselRef"
+              class="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-2">
               <NuxtLink v-for="comment in recentComments" :key="comment.id" :to="movieLinkFromSection(comment.movie)"
-                class="group relative h-50 snap-start overflow-hidden rounded-2xl bg-[#181a22]
-                 transition-all duration-800 ease-in-out sm:min-w-60 md:min-w-65 lg:min-w-67.5
-                 xl:min-w-72.5 2xl:min-w-77.5">
+                class="group relative h-48 min-w-[82%] snap-start overflow-hidden rounded-xl bg-[#181a22]
+                 transition-all duration-800 ease-in-out sm:h-50 sm:min-w-60 sm:rounded-2xl md:min-w-65
+                 lg:min-w-67.5 xl:min-w-72.5 2xl:min-w-77.5">
                 <!-- Blurred background -->
                 <div v-if="comment.movie?.poster"
                   class="absolute inset-0 transition-all duration-700 ease-in-out group-hover:blur-sm group-hover:saturate-150"
@@ -654,17 +655,18 @@ useHead({
                   <div class="flex items-end justify-between">
                     <!-- Avatar -->
                     <img v-if="comment.user?.avatar" :src="comment.user.avatar" :alt="comment.user?.name"
-                      class="mt-auto size-12 shrink-0 rounded-full object-cover shadow-md ring-2 ring-white/20">
+                      class="mt-auto size-10 shrink-0 rounded-full object-cover shadow-md ring-2 ring-white/20 sm:size-12">
 
                     <!-- Fallback Avatar -->
-                    <div v-else class="mt-auto grid size-12 shrink-0 place-items-center rounded-full
-                       bg-linear-to-br from-yellow-400 to-orange-500 text-lg font-black text-slate-950
-                       shadow-md ring-2 ring-white/20">
+                    <div v-else class="mt-auto grid size-10 shrink-0 place-items-center rounded-full
+                       bg-linear-to-br from-yellow-400 to-orange-500 text-base font-black text-slate-950
+                       shadow-md ring-2 ring-white/20 sm:size-12 sm:text-lg">
                       {{ (comment.user?.name || 'A').charAt(0).toUpperCase() }}
                     </div>
 
                     <!-- Movie Poster -->
-                    <div class="h-19 w-13 shrink-0 overflow-hidden rounded-lg shadow-md ring-1 ring-white/10">
+                    <div
+                      class="h-18 w-12 shrink-0 overflow-hidden rounded-lg shadow-md ring-1 ring-white/10 sm:h-19 sm:w-13">
                       <img v-if="comment.movie?.poster" :src="comment.movie.poster" :alt="comment.movie?.name"
                         class="h-full w-full object-cover">
                       <img v-else-if="comment.movie?.thumb" :src="comment.movie.thumb" :alt="comment.movie?.name"
@@ -728,9 +730,11 @@ useHead({
         </div>
 
         <!-- Top sections -->
-        <div class="grid items-stretch lg:grid-cols-3">
+        <div
+          class="no-scrollbar flex snap-x snap-mandatory items-stretch overflow-x-auto overscroll-x-contain scroll-smooth lg:grid lg:grid-cols-3 lg:overflow-visible">
           <!-- Sôi nổi nhất -->
-          <div class="flex h-full flex-col p-5 sm:p-6 lg:border-r lg:border-white/10">
+          <div
+            class="flex h-full min-w-[92%] snap-start flex-col p-5 sm:min-w-[70%] sm:p-6 lg:min-w-0 lg:border-r lg:border-white/10">
             <div class="mb-3 flex items-center gap-2">
               <AppIcon name="zap" class="size-4 text-orange-500" />
               <h2 class="text-sm font-black uppercase text-white">
@@ -751,10 +755,10 @@ useHead({
                   : index === 2
                     ? 'minus'
                     : 'trending-down'" :class="index < 2
-                  ? 'text-green-400'
-                  : index === 2
-                    ? 'text-slate-400'
-                    : 'text-red-400'" class="size-3.5 shrink-0" />
+                      ? 'text-green-400'
+                      : index === 2
+                        ? 'text-slate-400'
+                        : 'text-red-400'" class="size-3.5 shrink-0" />
 
                 <img :src="movie.thumb || movie.poster" :alt="movie.name"
                   class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
@@ -773,8 +777,8 @@ useHead({
           </div>
 
           <!-- Yêu thích nhất -->
-          <div class="flex h-full flex-col border-t border-white/10 p-5 sm:p-6
-             lg:border-t-0 lg:border-r lg:border-white/10">
+          <div class="flex h-full min-w-[92%] snap-start flex-col border-l border-white/10 p-5
+             sm:min-w-[70%] sm:p-6 lg:min-w-0 lg:border-l-0 lg:border-r lg:border-white/10">
             <div class="mb-3 flex items-center gap-2">
               <AppIcon name="heart" class="size-4 text-pink-500" />
               <h2 class="text-sm font-black uppercase text-white">
@@ -795,10 +799,10 @@ useHead({
                   : index === 2
                     ? 'minus'
                     : 'trending-down'" :class="index < 2
-                  ? 'text-green-400'
-                  : index === 2
-                    ? 'text-slate-400'
-                    : 'text-red-400'" class="size-3.5 shrink-0" />
+                      ? 'text-green-400'
+                      : index === 2
+                        ? 'text-slate-400'
+                        : 'text-red-400'" class="size-3.5 shrink-0" />
 
                 <img :src="movie.thumb || movie.poster" :alt="movie.name"
                   class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
@@ -817,7 +821,8 @@ useHead({
           </div>
 
           <!-- Thể loại hot -->
-          <div class="flex h-full flex-col border-t border-white/10 p-5 sm:p-6 lg:border-t-0">
+          <div
+            class="flex h-full min-w-[92%] snap-start flex-col border-l border-white/10 p-5 sm:min-w-[70%] sm:p-6 lg:min-w-0 lg:border-l-0">
             <div class="mb-3 flex items-center gap-2">
               <AppIcon name="layers" class="size-4 text-yellow-500" />
               <h2 class="text-sm font-black uppercase text-white">
@@ -837,10 +842,10 @@ useHead({
                   : index === 2
                     ? 'minus'
                     : 'trending-down'" :class="index < 2
-                  ? 'text-green-400'
-                  : index === 2
-                    ? 'text-slate-400'
-                    : 'text-red-400'" class="size-3.5 shrink-0" />
+                      ? 'text-green-400'
+                      : index === 2
+                        ? 'text-slate-400'
+                        : 'text-red-400'" class="size-3.5 shrink-0" />
 
                 <div class="flex h-12 items-center">
                   <span class="rounded-xl px-4 py-2 text-[10px] font-black text-white" :class="genreTagColor(index)">
diff --git a/server/api/home/sections.get.ts b/server/api/home/sections.get.ts
index 61f439a..653b5d0 100644
--- a/server/api/home/sections.get.ts
+++ b/server/api/home/sections.get.ts
@@ -4,8 +4,28 @@ import { comments, users, movies } from '../../database/schema'
 export default defineEventHandler(async () => {
   const db = useDb()
 
-  const [recentComments, trending, mostRated, allCategories] = await Promise.all([
-    // Recent comments (top-level only) with user and movie info
+  // Comment counts per movie (top-level only)
+  const commentCountsRows = await db
+    .select({
+      source: comments.source,
+      slug: comments.slug,
+      cCount: count(),
+    })
+    .from(comments)
+    .where(isNull(comments.parentId))
+    .groupBy(comments.source, comments.slug)
+
+  const commentCountMap = new Map<string, number>()
+  for (const row of commentCountsRows) {
+    commentCountMap.set(`${row.source}:${row.slug}`, Number(row.cCount))
+  }
+
+  function getCommentCount(movie: any) {
+    return commentCountMap.get(`${movie.source}:${movie.slug}`) || 0
+  }
+
+  const [recentComments, rawMovies, allCategories] = await Promise.all([
+    // Recent comments
     db
       .select({
         id: comments.id,
@@ -31,7 +51,7 @@ export default defineEventHandler(async () => {
       .orderBy(desc(comments.createdAt))
       .limit(10),
 
-    // Trending by views
+    // All active movies (used for trending + most rated in JS)
     db
       .select({
         source: movies.source,
@@ -44,34 +64,27 @@ export default defineEventHandler(async () => {
         rating: movies.rating,
       })
       .from(movies)
-      .where(eq(movies.active, true))
-      .orderBy(desc(movies.views), desc(movies.rating))
-      .limit(5),
+      .where(eq(movies.active, true)),
 
-    // Most rated / favorite
-    db
-      .select({
-        source: movies.source,
-        slug: movies.slug,
-        name: movies.name,
-        originName: movies.originName,
-        thumb: movies.thumb,
-        poster: movies.poster,
-        views: movies.views,
-        rating: movies.rating,
-      })
-      .from(movies)
-      .where(eq(movies.active, true))
-      .orderBy(desc(movies.rating), desc(movies.views))
-      .limit(5),
-
-    // All categories for hot genres calculation
+    // Categories for hot genres
     db
       .select({ categories: movies.categories })
       .from(movies)
       .where(eq(movies.active, true)),
   ])
 
+  // Trending: views + commentCount * 50
+  const trendingWithScore = rawMovies.map(m => ({
+    ...m,
+    _score: Number(m.views) + getCommentCount(m) * 50,
+  })).sort((a, b) => b._score - a._score).slice(0, 5)
+
+  // Most rated: rating + commentCount * 2
+  const mostRatedWithScore = rawMovies.map(m => ({
+    ...m,
+    _score: Number(m.rating) + getCommentCount(m) * 2,
+  })).sort((a, b) => b._score - a._score).slice(0, 5)
+
   // Count replies for each recent comment
   const commentIds = recentComments.map(c => c.id)
   let replyCounts: Record<number, number> = {}
@@ -124,7 +137,7 @@ export default defineEventHandler(async () => {
           }
         : null,
     })),
-    trending: trending.map(m => ({
+    trending: trendingWithScore.map(m => ({
       source: m.source,
       slug: m.slug,
       name: m.name,
@@ -134,7 +147,7 @@ export default defineEventHandler(async () => {
       views: m.views,
       rating: m.rating,
     })),
-    mostRated: mostRated.map(m => ({
+    mostRated: mostRatedWithScore.map(m => ({
       source: m.source,
       slug: m.slug,
       name: m.name,