fixes

* fix comments
* fix page history
* fix aside width on smaller screens

apps/client/src/features/comment/components/comment-list.tsx

@@ -1,16 +1,24 @@
-import React, { useState, useRef } from 'react';
-import { useParams } from 'react-router-dom';
-import { Divider, Paper } from '@mantine/core';
-import CommentListItem from '@/features/comment/components/comment-list-item';
-import { useCommentsQuery, useCreateCommentMutation } from '@/features/comment/queries/comment-query';
+import React, { useState, useRef } from "react";
+import { useParams } from "react-router-dom";
+import { Divider, Paper } from "@mantine/core";
+import CommentListItem from "@/features/comment/components/comment-list-item";
+import {
+  useCommentsQuery,
+  useCreateCommentMutation,
+} from "@/features/comment/queries/comment-query";
 
-import CommentEditor from '@/features/comment/components/comment-editor';
-import CommentActions from '@/features/comment/components/comment-actions';
-import { useFocusWithin } from '@mantine/hooks';
+import CommentEditor from "@/features/comment/components/comment-editor";
+import CommentActions from "@/features/comment/components/comment-actions";
+import { useFocusWithin } from "@mantine/hooks";
+import { IComment } from "@/features/comment/types/comment.types.ts";
 
 function CommentList() {
   const { pageId } = useParams();
-  const { data: comments, isLoading: isCommentsLoading, isError } = useCommentsQuery(pageId);
+  const {
+    data: comments,
+    isLoading: isCommentsLoading,
+    isError,
+  } = useCommentsQuery(pageId);
   const [isLoading, setIsLoading] = useState(false);
   const createCommentMutation = useCreateCommentMutation();
 
@@ -22,12 +30,12 @@ function CommentList() {
     return <div>Error loading comments.</div>;
   }
 
-  if (!comments || comments.length === 0) {
+  if (!comments || comments.items.length === 0) {
     return <>No comments yet.</>;
   }
 
-  const renderComments = (comment) => {
-    const handleAddReply = async (commentId, content) => {
+  const renderComments = (comment: IComment) => {
+    const handleAddReply = async (commentId: string, content: string) => {
       try {
         setIsLoading(true);
         const commentData = {
@@ -38,14 +46,22 @@ function CommentList() {
 
         await createCommentMutation.mutateAsync(commentData);
       } catch (error) {
-        console.error('Failed to post comment:', error);
+        console.error("Failed to post comment:", error);
       } finally {
         setIsLoading(false);
       }
     };
 
     return (
-      <Paper shadow="sm" radius="md" p="sm" mb="sm" withBorder key={comment.id} data-comment-id={comment.id}>
+      <Paper
+        shadow="sm"
+        radius="md"
+        p="sm"
+        mb="sm"
+        withBorder
+        key={comment.id}
+        data-comment-id={comment.id}
+      >
         <div>
           <CommentListItem comment={comment} />
           <ChildComments comments={comments} parentId={comment.id} />
@@ -53,26 +69,34 @@ function CommentList() {
 
         <Divider my={4} />
 
-        <CommentEditorWithActions commentId={comment.id} onSave={handleAddReply} isLoading={isLoading} />
+        <CommentEditorWithActions
+          commentId={comment.id}
+          onSave={handleAddReply}
+          isLoading={isLoading}
+        />
       </Paper>
     );
   };
 
   return (
     <>
-      {comments.filter(comment => comment.parentCommentId === null).map(renderComments)}
+      {comments.items
+        .filter((comment) => comment.parentCommentId === null)
+        .map(renderComments)}
     </>
   );
 }
 
 const ChildComments = ({ comments, parentId }) => {
-  const getChildComments = (parentId) => {
-    return comments.filter(comment => comment.parentCommentId === parentId);
+  const getChildComments = (parentId: string) => {
+    return comments.items.filter(
+      (comment: IComment) => comment.parentCommentId === parentId,
+    );
   };
 
   return (
     <div>
-      {getChildComments(parentId).map(childComment => (
+      {getChildComments(parentId).map((childComment) => (
         <div key={childComment.id}>
           <CommentListItem comment={childComment} />
           <ChildComments comments={comments} parentId={childComment.id} />
@@ -83,23 +107,26 @@ const ChildComments = ({ comments, parentId }) => {
 };
 
 const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
-  const [content, setContent] = useState('');
+  const [content, setContent] = useState("");
   const { ref, focused } = useFocusWithin();
   const commentEditorRef = useRef(null);
 
   const handleSave = () => {
     onSave(commentId, content);
-    setContent('');
+    setContent("");
     commentEditorRef.current?.clearContent();
   };
 
   return (
     <div ref={ref}>
-      <CommentEditor ref={commentEditorRef} onUpdate={setContent} editable={true} />
+      <CommentEditor
+        ref={commentEditorRef}
+        onUpdate={setContent}
+        editable={true}
+      />
       {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
     </div>
   );
 };
 
-
 export default CommentList;