feat: Refactor comment section to correctly handle API response structure

fix: Update Gravatar URL size and improve avatar rendering logic

style: Adjust footer margin for better layout consistency

refactor: Remove old navbar component and integrate new layout structure

feat: Enhance user profile page with user header component

chore: Remove unused user profile component

fix: Update posts per page configuration for better pagination

feat: Extend device context to support system theme mode

refactor: Remove unused device hook

fix: Improve storage state hook for better error handling

i18n: Add new translations for blog home page

feat: Implement pagination component for better navigation

feat: Create theme toggle component for improved user experience

feat: Introduce responsive navbar or side layout with theme toggle

feat: Develop custom select component for better UI consistency

feat: Create user header component to display user information

chore: Add query key constants for better code maintainability

web/src/components/comment/comment-input.tsx

@@ -60,7 +60,7 @@ export function CommentInput(
     <div className="fade-in-up">
       <div className="flex py-4 fade-in">
         <div onClick={user ? () => clickToUserProfile(user.username) : clickToLogin} className="cursor-pointer flex-shrink-0 w-10 h-10 fade-in">
-          {user && <GravatarAvatar url={user.avatarUrl} email={user.email} size={100}/>}
+          {user && <GravatarAvatar className="w-full h-full" url={user.avatarUrl} email={user.email} size={100}/>}
           {!user && <CircleUser className="w-full h-full fade-in" />}
         </div>
         <div className="flex-1 pl-2 fade-in-up">

web/src/components/comment/comment-item.tsx

@@ -101,7 +101,7 @@ export function CommentItem(
         commentId: comment.id
       }
     ).then(response => {
-      setReplies(response.data);
+      setReplies(response.data.comments);
       setRepliesLoaded(true);
     });
   }
@@ -159,7 +159,7 @@ export function CommentItem(
     <div>
       <div className="flex">
         <div onClick={() => clickToUserProfile(comment.user.username)} className="cursor-pointer fade-in w-12 h-12">
-          <GravatarAvatar email={comment.user.email} size={120}/>
+          <GravatarAvatar className="w-full h-full" url={comment.user.avatarUrl} email={comment.user.email} size={100}/>
         </div>
         <div className="flex-1 pl-2 fade-in-up">
           <div className="flex gap-2 md:gap-4 items-center">

web/src/components/comment/index.tsx

@@ -17,8 +17,6 @@ import config from "@/config";
 
 import "./style.css";
 
-
-
 export function CommentSection(
   {
     targetType,
@@ -59,7 +57,7 @@ export function CommentSection(
       size: config.commentsPerPage,
       commentId: 0
     }).then(response => {
-      setComments(response.data);
+      setComments(response.data.comments);
     });
   }, [])
 
@@ -108,10 +106,10 @@ export function CommentSection(
       size: config.commentsPerPage,
       commentId: 0
     }).then(response => {
-      if (response.data.length < config.commentsPerPage) {
+      if (response.data.comments.length < config.commentsPerPage) {
         setNeedLoadMore(false);
       }
-      setComments(prevComments => [...prevComments, ...response.data]);
+      setComments(prevComments => [...prevComments, ...response.data.comments]);
       setPage(nextPage);
     });
   }