Can mark a comment as the answer, some layout changes

2025-11-11 18:23:11 -05:00
parent 825389228d
commit b045fbeb01
11 changed files with 379 additions and 323 deletions
--- a/backend/models/ForumPost.js
+++ b/backend/models/ForumPost.js
@@ -29,7 +29,7 @@ const ForumPost = sequelize.define('ForumPost', {
    defaultValue: 'general_discussion'
  },
  status: {
-    type: DataTypes.ENUM('open', 'solved', 'closed'),
+    type: DataTypes.ENUM('open', 'answered', 'closed'),
    defaultValue: 'open'
  },
  viewCount: {
@@ -43,6 +43,14 @@ const ForumPost = sequelize.define('ForumPost', {
  isPinned: {
    type: DataTypes.BOOLEAN,
    defaultValue: false
+  },
+  acceptedAnswerId: {
+    type: DataTypes.UUID,
+    allowNull: true,
+    references: {
+      model: 'ForumComments',
+      key: 'id'
+    }
  }
 });

--- a/backend/routes/forum.js
+++ b/backend/routes/forum.js
@@ -156,9 +156,11 @@ router.get('/posts/:id', async (req, res) => {
              as: 'author',
              attributes: ['id', 'username', 'firstName', 'lastName']
            }
-          ],
-          order: [['createdAt', 'ASC']]
+          ]
        }
+      ],
+      order: [
+        [{ model: ForumComment, as: 'comments' }, 'createdAt', 'ASC']
      ]
    });

@@ -370,7 +372,7 @@ router.patch('/posts/:id/status', authenticateToken, async (req, res) => {
      return res.status(403).json({ error: 'Only the author can update post status' });
    }

-    if (!['open', 'solved', 'closed'].includes(status)) {
+    if (!['open', 'answered', 'closed'].includes(status)) {
      return res.status(400).json({ error: 'Invalid status value' });
    }

@@ -411,6 +413,82 @@ router.patch('/posts/:id/status', authenticateToken, async (req, res) => {
  }
 });

+// PATCH /api/forum/posts/:id/accept-answer - Mark/unmark comment as accepted answer
+router.patch('/posts/:id/accept-answer', authenticateToken, async (req, res) => {
+  try {
+    const { commentId } = req.body;
+    const post = await ForumPost.findByPk(req.params.id);
+
+    if (!post) {
+      return res.status(404).json({ error: 'Post not found' });
+    }
+
+    if (post.authorId !== req.user.id) {
+      return res.status(403).json({ error: 'Only the post author can mark answers' });
+    }
+
+    // If commentId is provided, validate it
+    if (commentId) {
+      const comment = await ForumComment.findByPk(commentId);
+
+      if (!comment) {
+        return res.status(404).json({ error: 'Comment not found' });
+      }
+
+      if (comment.postId !== post.id) {
+        return res.status(400).json({ error: 'Comment does not belong to this post' });
+      }
+
+      if (comment.isDeleted) {
+        return res.status(400).json({ error: 'Cannot mark deleted comment as answer' });
+      }
+
+      if (comment.parentCommentId) {
+        return res.status(400).json({ error: 'Only top-level comments can be marked as answers' });
+      }
+    }
+
+    // Update the post with accepted answer
+    await post.update({
+      acceptedAnswerId: commentId || null,
+      status: commentId ? 'answered' : 'open'
+    });
+
+    const updatedPost = await ForumPost.findByPk(post.id, {
+      include: [
+        {
+          model: User,
+          as: 'author',
+          attributes: ['id', 'username', 'firstName', 'lastName']
+        },
+        {
+          model: PostTag,
+          as: 'tags',
+          attributes: ['tagName']
+        }
+      ]
+    });
+
+    const reqLogger = logger.withRequestId(req.id);
+    reqLogger.info("Answer marked/unmarked", {
+      postId: req.params.id,
+      commentId: commentId || 'unmarked',
+      authorId: req.user.id
+    });
+
+    res.json(updatedPost);
+  } catch (error) {
+    const reqLogger = logger.withRequestId(req.id);
+    reqLogger.error("Mark answer failed", {
+      error: error.message,
+      stack: error.stack,
+      postId: req.params.id,
+      authorId: req.user.id
+    });
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // POST /api/forum/posts/:id/comments - Add comment/reply
 router.post('/posts/:id/comments', authenticateToken, async (req, res) => {
  try {
--- a/frontend/src/components/CommentThread.tsx
+++ b/frontend/src/components/CommentThread.tsx
@@ -1,13 +1,16 @@
-import React, { useState } from 'react';
-import { ForumComment } from '../types';
-import CommentForm from './CommentForm';
+import React, { useState } from "react";
+import { ForumComment } from "../types";
+import CommentForm from "./CommentForm";

 interface CommentThreadProps {
  comment: ForumComment;
  onReply: (commentId: string, content: string) => Promise<void>;
  onEdit?: (commentId: string, content: string) => Promise<void>;
  onDelete?: (commentId: string) => Promise<void>;
+  onMarkAsAnswer?: (commentId: string) => Promise<void>;
  currentUserId?: string;
+  isPostAuthor?: boolean;
+  acceptedAnswerId?: string;
  depth?: number;
 }

@@ -16,7 +19,10 @@ const CommentThread: React.FC<CommentThreadProps> = ({
  onReply,
  onEdit,
  onDelete,
+  onMarkAsAnswer,
  currentUserId,
+  isPostAuthor = false,
+  acceptedAnswerId,
  depth = 0,
 }) => {
  const [showReplyForm, setShowReplyForm] = useState(false);
@@ -33,7 +39,7 @@ const CommentThread: React.FC<CommentThreadProps> = ({
    const diffDays = Math.floor(diffHours / 24);

    if (diffMinutes < 1) {
-      return 'Just now';
+      return "Just now";
    } else if (diffMinutes < 60) {
      return `${diffMinutes}m ago`;
    } else if (diffHours < 24) {
@@ -60,7 +66,10 @@ const CommentThread: React.FC<CommentThreadProps> = ({
  };

  const handleDelete = async () => {
-    if (onDelete && window.confirm('Are you sure you want to delete this comment?')) {
+    if (
+      onDelete &&
+      window.confirm("Are you sure you want to delete this comment?")
+    ) {
      await onDelete(comment.id);
    }
  };
@@ -68,15 +77,22 @@ const CommentThread: React.FC<CommentThreadProps> = ({
  const isAuthor = currentUserId === comment.authorId;
  const maxDepth = 5;
  const canNest = depth < maxDepth;
+  const isAcceptedAnswer = acceptedAnswerId === comment.id;
+  const canMarkAsAnswer =
+    isPostAuthor && depth === 0 && onMarkAsAnswer && !comment.isDeleted;
+
+  const handleMarkAsAnswer = async () => {
+    if (onMarkAsAnswer) {
+      await onMarkAsAnswer(comment.id);
+    }
+  };

  if (comment.isDeleted) {
    return (
-      <div className={`comment-deleted ${depth > 0 ? 'ms-4' : ''} mb-3`}>
+      <div className={`comment-deleted ${depth > 0 ? "ms-4" : ""} mb-3`}>
        <div className="card bg-light">
          <div className="card-body py-2">
-            <small className="text-muted fst-italic">
-              [Comment deleted]
-            </small>
+            <small className="text-muted fst-italic">[Comment deleted]</small>
          </div>
        </div>
        {comment.replies && comment.replies.length > 0 && (
@@ -88,7 +104,10 @@ const CommentThread: React.FC<CommentThreadProps> = ({
                onReply={onReply}
                onEdit={onEdit}
                onDelete={onDelete}
+                onMarkAsAnswer={onMarkAsAnswer}
                currentUserId={currentUserId}
+                isPostAuthor={isPostAuthor}
+                acceptedAnswerId={acceptedAnswerId}
                depth={depth + 1}
              />
            ))}
@@ -99,22 +118,33 @@ const CommentThread: React.FC<CommentThreadProps> = ({
  }

  return (
-    <div className={`comment ${depth > 0 ? 'ms-4' : ''} mb-3`}>
-      <div className="card">
+    <div className={`comment ${depth > 0 ? "ms-4" : ""} mb-3`}>
+      <div className={`card ${isAcceptedAnswer ? "border-success" : ""}`}>
        <div className="card-body">
+          {isAcceptedAnswer && (
+            <div className="mb-2">
+              <span className="badge bg-success">
+                <i className="bi bi-check-circle-fill me-1"></i>
+                Answer
+              </span>
+            </div>
+          )}
          <div className="d-flex justify-content-between align-items-start mb-2">
            <div className="d-flex align-items-center">
-              <div className="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2"
-                   style={{ width: '32px', height: '32px', fontSize: '14px' }}>
-                {comment.author?.firstName?.charAt(0) || '?'}
+              <div
+                className="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2"
+                style={{ width: "32px", height: "32px", fontSize: "14px" }}
+              >
+                {comment.author?.firstName?.charAt(0) || "?"}
              </div>
              <div>
                <strong className="d-block">
-                  {comment.author?.firstName || 'Unknown'} {comment.author?.lastName || ''}
+                  {comment.author?.firstName || "Unknown"}{" "}
+                  {comment.author?.lastName || ""}
                </strong>
                <small className="text-muted">
                  {formatDate(comment.createdAt)}
-                  {comment.updatedAt !== comment.createdAt && ' (edited)'}
+                  {comment.updatedAt !== comment.createdAt && " (edited)"}
                </small>
              </div>
            </div>
@@ -123,7 +153,9 @@ const CommentThread: React.FC<CommentThreadProps> = ({
                className="btn btn-sm btn-link text-decoration-none"
                onClick={() => setIsCollapsed(!isCollapsed)}
              >
-                <i className={`bi bi-chevron-${isCollapsed ? 'down' : 'up'}`}></i>
+                <i
+                  className={`bi bi-chevron-${isCollapsed ? "down" : "up"}`}
+                ></i>
              </button>
            )}
          </div>
@@ -156,7 +188,7 @@ const CommentThread: React.FC<CommentThreadProps> = ({
              </div>
            </div>
          ) : (
-            <p className="card-text mb-2" style={{ whiteSpace: 'pre-wrap' }}>
+            <p className="card-text mb-2" style={{ whiteSpace: "pre-wrap" }}>
              {comment.content}
            </p>
          )}
@@ -171,6 +203,23 @@ const CommentThread: React.FC<CommentThreadProps> = ({
                Reply
              </button>
            )}
+            {canMarkAsAnswer && !isEditing && (
+              <button
+                className={`btn btn-sm btn-link text-decoration-none p-0 ${
+                  isAcceptedAnswer ? "text-success" : "text-success"
+                }`}
+                onClick={handleMarkAsAnswer}
+              >
+                <i
+                  className={`bi ${
+                    isAcceptedAnswer
+                      ? "bi-check-circle-fill"
+                      : "bi-check-circle"
+                  } me-1`}
+                ></i>
+                {isAcceptedAnswer ? "Unmark Answer" : "Mark as Answer"}
+              </button>
+            )}
            {isAuthor && onEdit && !isEditing && (
              <button
                className="btn btn-sm btn-link text-decoration-none p-0"
@@ -214,7 +263,10 @@ const CommentThread: React.FC<CommentThreadProps> = ({
              onReply={onReply}
              onEdit={onEdit}
              onDelete={onDelete}
+              onMarkAsAnswer={onMarkAsAnswer}
              currentUserId={currentUserId}
+              isPostAuthor={isPostAuthor}
+              acceptedAnswerId={acceptedAnswerId}
              depth={depth + 1}
            />
          ))}
--- a/frontend/src/components/ForumPostCard.tsx
+++ b/frontend/src/components/ForumPostCard.tsx
@@ -1,115 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { ForumPost } from '../types';
-import CategoryBadge from './CategoryBadge';
-import PostStatusBadge from './PostStatusBadge';
-
-interface ForumPostCardProps {
-  post: ForumPost;
-  showActions?: boolean;
-}
-
-const ForumPostCard: React.FC<ForumPostCardProps> = ({ post, showActions = true }) => {
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-    const diffDays = Math.floor(diffHours / 24);
-
-    if (diffHours < 1) {
-      return 'Just now';
-    } else if (diffHours < 24) {
-      return `${diffHours}h ago`;
-    } else if (diffDays < 7) {
-      return `${diffDays}d ago`;
-    } else {
-      return date.toLocaleDateString();
-    }
-  };
-
-  // Strip HTML tags for preview
-  const getTextPreview = (html: string, maxLength: number = 150) => {
-    const text = html.replace(/<[^>]*>/g, '');
-    return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
-  };
-
-  return (
-    <div className="card h-100 shadow-sm hover-shadow">
-      <div className="card-body">
-        {post.isPinned && (
-          <div className="mb-2">
-            <span className="badge bg-danger">
-              <i className="bi bi-pin-angle-fill me-1"></i>
-              Pinned
-            </span>
-          </div>
-        )}
-
-        <div className="d-flex justify-content-between align-items-start mb-2">
-          <h5 className="card-title text-truncate flex-grow-1 me-2">{post.title}</h5>
-          <PostStatusBadge status={post.status} />
-        </div>
-
-        <div className="mb-2">
-          <CategoryBadge category={post.category} />
-        </div>
-
-        <p className="card-text text-muted small mb-2">
-          {getTextPreview(post.content)}
-        </p>
-
-        {post.tags && post.tags.length > 0 && (
-          <div className="mb-2">
-            {post.tags.slice(0, 3).map((tag) => (
-              <span key={tag.id} className="badge bg-light text-dark me-1 mb-1">
-                #{tag.tagName}
-              </span>
-            ))}
-            {post.tags.length > 3 && (
-              <span className="badge bg-light text-dark">
-                +{post.tags.length - 3}
-              </span>
-            )}
-          </div>
-        )}
-
-        <div className="mb-2">
-          <small className="text-muted">
-            <i className="bi bi-person me-1"></i>
-            {post.author?.firstName || 'Unknown'} {post.author?.lastName || ''}
-          </small>
-        </div>
-
-        <div className="d-flex justify-content-between align-items-center">
-          <div className="d-flex gap-3">
-            <small className="text-muted">
-              <i className="bi bi-chat me-1"></i>
-              {post.commentCount || 0}
-            </small>
-            <small className="text-muted">
-              <i className="bi bi-eye me-1"></i>
-              {post.viewCount || 0}
-            </small>
-          </div>
-          <small className="text-muted">
-            {formatDate(post.updatedAt)}
-          </small>
-        </div>
-
-        {showActions && (
-          <div className="d-grid gap-2 mt-3">
-            <Link
-              to={`/forum/${post.id}`}
-              className="btn btn-outline-primary btn-sm"
-            >
-              View Post
-            </Link>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ForumPostCard;
--- a/frontend/src/components/ForumPostListItem.tsx
+++ b/frontend/src/components/ForumPostListItem.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ForumPost } from '../types';
+import CategoryBadge from './CategoryBadge';
+import PostStatusBadge from './PostStatusBadge';
+
+interface ForumPostListItemProps {
+  post: ForumPost;
+}
+
+const ForumPostListItem: React.FC<ForumPostListItemProps> = ({ post }) => {
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMinutes < 1) {
+      return 'Just now';
+    } else if (diffMinutes < 60) {
+      return `${diffMinutes}m ago`;
+    } else if (diffHours < 24) {
+      return `${diffHours}h ago`;
+    } else if (diffDays < 7) {
+      return `${diffDays}d ago`;
+    } else {
+      return date.toLocaleDateString();
+    }
+  };
+
+  // Strip HTML tags for preview
+  const getTextPreview = (html: string, maxLength: number = 100) => {
+    const text = html.replace(/<[^>]*>/g, '');
+    return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+  };
+
+  return (
+    <div className="list-group-item list-group-item-action p-3">
+      <Link to={`/forum/${post.id}`} className="text-decoration-none d-block">
+        <div className="row align-items-center">
+          {/* Main content - 60% */}
+          <div className="col-md-7">
+            <div className="d-flex align-items-center gap-2 mb-1">
+              {post.isPinned && (
+                <span className="badge bg-danger badge-sm">
+                  <i className="bi bi-pin-angle-fill"></i>
+                </span>
+              )}
+              <CategoryBadge category={post.category} />
+              <PostStatusBadge status={post.status} />
+              {post.tags && post.tags.length > 0 && (
+                <>
+                  {post.tags.slice(0, 2).map((tag) => (
+                    <span key={tag.id} className="badge bg-light text-dark">
+                      #{tag.tagName}
+                    </span>
+                  ))}
+                  {post.tags.length > 2 && (
+                    <span className="badge bg-light text-dark">
+                      +{post.tags.length - 2}
+                    </span>
+                  )}
+                </>
+              )}
+            </div>
+
+            <h6 className="mb-1 text-dark">
+              {post.title}
+            </h6>
+
+            <p className="text-muted small mb-0">
+              {getTextPreview(post.content)}
+            </p>
+          </div>
+
+          {/* Author - 20% */}
+          <div className="col-md-3">
+            <div className="d-flex align-items-center">
+              <div className="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2"
+                   style={{ width: '32px', height: '32px', fontSize: '14px', flexShrink: 0 }}>
+                {post.author?.firstName?.charAt(0) || '?'}
+              </div>
+              <div className="text-truncate">
+                <small className="text-dark d-block text-truncate">
+                  {post.author?.firstName || 'Unknown'} {post.author?.lastName || ''}
+                </small>
+                <small className="text-muted">
+                  {formatDate(post.updatedAt)}
+                </small>
+              </div>
+            </div>
+          </div>
+
+          {/* Stats - 20% */}
+          <div className="col-md-2 text-end">
+            <div className="d-flex flex-column align-items-end gap-1">
+              <small className="text-muted">
+                <i className="bi bi-chat me-1"></i>
+                {post.commentCount || 0} {post.commentCount === 1 ? 'reply' : 'replies'}
+              </small>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default ForumPostListItem;
--- a/frontend/src/components/PostStatusBadge.tsx
+++ b/frontend/src/components/PostStatusBadge.tsx
@@ -1,7 +1,7 @@
 import React from 'react';

 interface PostStatusBadgeProps {
-  status: "open" | "solved" | "closed";
+  status: "open" | "answered" | "closed";
 }

 const PostStatusBadge: React.FC<PostStatusBadgeProps> = ({ status }) => {
@@ -9,8 +9,8 @@ const PostStatusBadge: React.FC<PostStatusBadgeProps> = ({ status }) => {
    switch (stat) {
      case 'open':
        return { label: 'Open', color: 'success', icon: 'bi-circle' };
-      case 'solved':
-        return { label: 'Solved', color: 'info', icon: 'bi-check-circle' };
+      case 'answered':
+        return { label: 'Answered', color: 'info', icon: 'bi-check-circle' };
      case 'closed':
        return { label: 'Closed', color: 'secondary', icon: 'bi-x-circle' };
      default:
--- a/frontend/src/pages/ForumPostDetail.tsx
+++ b/frontend/src/pages/ForumPostDetail.tsx
@@ -109,6 +109,17 @@ const ForumPostDetail: React.FC = () => {
    }
  };

+  const handleMarkAsAnswer = async (commentId: string) => {
+    try {
+      // If this comment is already the accepted answer, unmark it
+      const newCommentId = post?.acceptedAnswerId === commentId ? null : commentId;
+      await forumAPI.acceptAnswer(id!, newCommentId);
+      await fetchPost(); // Refresh to get updated post
+    } catch (err: any) {
+      alert(err.response?.data?.error || 'Failed to mark answer');
+    }
+  };
+
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleString();
@@ -160,86 +171,47 @@ const ForumPostDetail: React.FC = () => {
          {/* Post Content */}
          <div className="card mb-4">
            <div className="card-body">
-              <div className="d-flex justify-content-between align-items-start mb-3">
-                <div className="flex-grow-1">
-                  {post.isPinned && (
-                    <span className="badge bg-danger me-2">
-                      <i className="bi bi-pin-angle-fill me-1"></i>
-                      Pinned
-                    </span>
-                  )}
-                  <h1 className="h3 mb-2">{post.title}</h1>
-                  <div className="d-flex gap-2 mb-2">
-                    <CategoryBadge category={post.category} />
-                    <PostStatusBadge status={post.status} />
-                  </div>
-                </div>
-              </div>
-
-              {post.tags && post.tags.length > 0 && (
-                <div className="mb-3">
-                  {post.tags.map((tag) => (
-                    <Link
-                      key={tag.id}
-                      to={`/forum?tag=${tag.tagName}`}
-                      className="badge bg-light text-dark me-1 mb-1 text-decoration-none"
-                    >
-                      #{tag.tagName}
-                    </Link>
-                  ))}
-                </div>
+              {post.isPinned && (
+                <span className="badge bg-danger me-2 mb-2">
+                  <i className="bi bi-pin-angle-fill me-1"></i>
+                  Pinned
+                </span>
              )}
+              <h1 className="h3 mb-2">{post.title}</h1>

-              <div className="mb-3">
-                <div className="d-flex align-items-center">
-                  <div className="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2"
-                       style={{ width: '40px', height: '40px' }}>
-                    {post.author?.firstName?.charAt(0) || '?'}
-                  </div>
-                  <div>
-                    <strong>
-                      {post.author?.firstName || 'Unknown'} {post.author?.lastName || ''}
-                    </strong>
-                    <br />
-                    <small className="text-muted">
-                      Posted {formatDate(post.createdAt)}
-                      {post.updatedAt !== post.createdAt && ' (edited)'}
-                    </small>
-                  </div>
-                </div>
+              <div className="d-flex gap-2 mb-2 flex-wrap">
+                <CategoryBadge category={post.category} />
+                <PostStatusBadge status={post.status} />
+                {post.tags && post.tags.length > 0 && (
+                  <>
+                    {post.tags.map((tag) => (
+                      <Link
+                        key={tag.id}
+                        to={`/forum?tag=${tag.tagName}`}
+                        className="badge bg-light text-dark text-decoration-none"
+                      >
+                        #{tag.tagName}
+                      </Link>
+                    ))}
+                  </>
+                )}
              </div>

-              <hr />
+              <div className="text-muted small mb-3">
+                By <strong>{post.author?.firstName || 'Unknown'} {post.author?.lastName || ''}</strong>
+                {' • '}
+                Posted {formatDate(post.createdAt)}
+                {post.updatedAt !== post.createdAt && ' (edited)'}
+                {' • '}
+                {post.commentCount || 0} comments
+              </div>

              <div className="post-content mb-3" style={{ whiteSpace: 'pre-wrap' }}>
                {post.content}
              </div>

-              <div className="d-flex gap-3 text-muted small">
-                <span>
-                  <i className="bi bi-chat me-1"></i>
-                  {post.commentCount || 0} comments
-                </span>
-                <span>
-                  <i className="bi bi-eye me-1"></i>
-                  {post.viewCount || 0} views
-                </span>
-              </div>
-
              {isAuthor && (
-                <>
-                  <hr />
-                  <div className="d-flex gap-2 flex-wrap">
-                    {post.status === 'open' && (
-                      <button
-                        className="btn btn-sm btn-success"
-                        onClick={() => handleStatusChange('solved')}
-                        disabled={actionLoading}
-                      >
-                        <i className="bi bi-check-circle me-1"></i>
-                        Mark as Solved
-                      </button>
-                    )}
+                <div className="d-flex gap-2 flex-wrap mb-3">
                    {post.status !== 'closed' && (
                      <button
                        className="btn btn-sm btn-secondary"
@@ -275,120 +247,70 @@ const ForumPostDetail: React.FC = () => {
                      <i className="bi bi-trash me-1"></i>
                      Delete
                    </button>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Comments Section */}
-          <div className="card">
-            <div className="card-header">
-              <h5 className="mb-0">
-                <i className="bi bi-chat-dots me-2"></i>
-                Comments ({post.commentCount || 0})
-              </h5>
-            </div>
-            <div className="card-body">
-              {user ? (
-                <div className="mb-4">
-                  <h6>Add a comment</h6>
-                  <CommentForm
-                    onSubmit={handleAddComment}
-                    placeholder="Share your thoughts..."
-                    buttonText="Post Comment"
-                  />
-                </div>
-              ) : (
-                <div className="alert alert-info mb-4">
-                  <i className="bi bi-info-circle me-2"></i>
-                  <AuthButton mode="login" className="alert-link" asLink>Log in</AuthButton> to join the discussion.
                </div>
              )}

              <hr />

-              {post.comments && post.comments.length > 0 ? (
-                <div className="comments-list">
-                  {post.comments.map((comment: ForumComment) => (
-                    <CommentThread
-                      key={comment.id}
-                      comment={comment}
-                      onReply={handleReply}
-                      onEdit={handleEditComment}
-                      onDelete={handleDeleteComment}
-                      currentUserId={user?.id}
+              {/* Comments Section */}
+              <div className="mt-4">
+                <h5 className="mb-3">
+                  <i className="bi bi-chat-dots me-2"></i>
+                  Comments ({post.commentCount || 0})
+                </h5>
+
+                {post.comments && post.comments.length > 0 ? (
+                  <div className="comments-list mb-4">
+                    {[...post.comments]
+                      .sort((a, b) => {
+                        // Sort accepted answer to the top
+                        if (a.id === post.acceptedAnswerId) return -1;
+                        if (b.id === post.acceptedAnswerId) return 1;
+                        return 0;
+                      })
+                      .map((comment: ForumComment) => (
+                        <CommentThread
+                          key={comment.id}
+                          comment={comment}
+                          onReply={handleReply}
+                          onEdit={handleEditComment}
+                          onDelete={handleDeleteComment}
+                          onMarkAsAnswer={handleMarkAsAnswer}
+                          currentUserId={user?.id}
+                          isPostAuthor={isAuthor}
+                          acceptedAnswerId={post.acceptedAnswerId}
+                        />
+                      ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-4 text-muted mb-4">
+                    <i className="bi bi-chat display-4 d-block mb-2"></i>
+                    <p>No comments yet. Be the first to comment!</p>
+                  </div>
+                )}
+
+                <hr />
+
+                {user ? (
+                  <div>
+                    <h6>Add a comment</h6>
+                    <CommentForm
+                      onSubmit={handleAddComment}
+                      placeholder="Share your thoughts..."
+                      buttonText="Post Comment"
                    />
-                  ))}
-                </div>
-              ) : (
-                <div className="text-center py-4 text-muted">
-                  <i className="bi bi-chat display-4 d-block mb-2"></i>
-                  <p>No comments yet. Be the first to comment!</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Sidebar */}
-        <div className="col-lg-4">
-          <div className="card mb-3">
-            <div className="card-header">
-              <h6 className="mb-0">About this post</h6>
-            </div>
-            <div className="card-body">
-              <div className="mb-2">
-                <small className="text-muted">Category:</small>
-                <div>
-                  <CategoryBadge category={post.category} />
-                </div>
-              </div>
-              <div className="mb-2">
-                <small className="text-muted">Status:</small>
-                <div>
-                  <PostStatusBadge status={post.status} />
-                </div>
-              </div>
-              <div className="mb-2">
-                <small className="text-muted">Created:</small>
-                <div>{formatDate(post.createdAt)}</div>
-              </div>
-              <div className="mb-2">
-                <small className="text-muted">Last updated:</small>
-                <div>{formatDate(post.updatedAt)}</div>
-              </div>
-              <div className="mb-2">
-                <small className="text-muted">Author:</small>
-                <div>
-                  <Link to={`/users/${post.authorId}`}>
-                    {post.author?.firstName || 'Unknown'} {post.author?.lastName || ''}
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="card">
-            <div className="card-header">
-              <h6 className="mb-0">Actions</h6>
-            </div>
-            <div className="card-body">
-              <div className="d-grid gap-2">
-                <Link to="/forum" className="btn btn-outline-secondary btn-sm">
-                  <i className="bi bi-arrow-left me-2"></i>
-                  Back to Forum
-                </Link>
-                {user && (
-                  <Link to="/forum/create" className="btn btn-outline-primary btn-sm">
-                    <i className="bi bi-plus-circle me-2"></i>
-                    Create New Post
-                  </Link>
+                  </div>
+                ) : (
+                  <div className="alert alert-info">
+                    <i className="bi bi-info-circle me-2"></i>
+                    <AuthButton mode="login" className="alert-link" asLink>Log in</AuthButton> to join the discussion.
+                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
+
      </div>
    </div>
  );
--- a/frontend/src/pages/ForumPosts.tsx
+++ b/frontend/src/pages/ForumPosts.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { forumAPI } from '../services/api';
 import { ForumPost } from '../types';
-import ForumPostCard from '../components/ForumPostCard';
+import ForumPostListItem from '../components/ForumPostListItem';
 import AuthButton from '../components/AuthButton';

 const ForumPosts: React.FC = () => {
@@ -138,7 +138,7 @@ const ForumPosts: React.FC = () => {
          >
            <option value="">All Status</option>
            <option value="open">Open</option>
-            <option value="solved">Solved</option>
+            <option value="answered">Answered</option>
            <option value="closed">Closed</option>
          </select>
        </div>
@@ -151,7 +151,6 @@ const ForumPosts: React.FC = () => {
          >
            <option value="recent">Most Recent</option>
            <option value="comments">Most Commented</option>
-            <option value="views">Most Viewed</option>
          </select>
        </div>
      </div>
@@ -194,11 +193,9 @@ const ForumPosts: React.FC = () => {
            </div>
          ) : (
            <>
-              <div className="row g-4">
+              <div className="list-group list-group-flush mb-4">
                {posts.map((post) => (
-                  <div key={post.id} className="col-md-6 col-lg-4">
-                    <ForumPostCard post={post} />
-                  </div>
+                  <ForumPostListItem key={post.id} post={post} />
                ))}
              </div>

--- a/frontend/src/pages/MyPosts.tsx
+++ b/frontend/src/pages/MyPosts.tsx
@@ -208,11 +208,11 @@ const MyPosts: React.FC = () => {
                      {post.status === 'open' && (
                        <button
                          className="btn btn-sm btn-outline-success"
-                          onClick={() => handleStatusChange(post.id, 'solved')}
+                          onClick={() => handleStatusChange(post.id, 'answered')}
                          disabled={actionLoading === post.id}
                        >
                          <i className="bi bi-check-circle me-1"></i>
-                          Mark Solved
+                          Mark Answered
                        </button>
                      )}

--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -262,6 +262,8 @@ export const forumAPI = {
  deletePost: (id: string) => api.delete(`/forum/posts/${id}`),
  updatePostStatus: (id: string, status: string) =>
    api.patch(`/forum/posts/${id}/status`, { status }),
+  acceptAnswer: (postId: string, commentId: string | null) =>
+    api.patch(`/forum/posts/${postId}/accept-answer`, { commentId }),
  getMyPosts: () => api.get("/forum/my-posts"),
  getTags: (params?: any) => api.get("/forum/tags", { params }),
  createComment: (postId: string, data: any) =>
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -261,10 +261,11 @@ export interface ForumPost {
  content: string;
  authorId: string;
  category: "item_request" | "technical_support" | "community_resources" | "general_discussion";
-  status: "open" | "solved" | "closed";
+  status: "open" | "answered" | "closed";
  viewCount: number;
  commentCount: number;
  isPinned: boolean;
+  acceptedAnswerId?: string;
  author?: User;
  tags?: PostTag[];
  comments?: ForumComment[];