fix: refactored community page

Author: bncummings

src/app/api/posts/[id]/comments/route.ts

@@ -11,7 +11,8 @@ export async function GET(
 
     // Remove orderBy to avoid composite index requirement
     const commentsRef = db.collection('comments')
-      .where('postId', '==', id);
+      .where('postId', '==', id)
+      .orderBy('createdAt', 'asc'); // Sorting by createdAt
 
     const snapshot = await commentsRef.get();
     const comments = await Promise.all(
@@ -50,7 +51,7 @@ export async function GET(
     comments.sort((a, b) => {
       const aTime = a.createdAt.getTime();
       const bTime = b.createdAt.getTime();
-      return aTime - bTime;
+      return bTime - aTime; // Changed from aTime - bTime to bTime - aTime for newest first
     });
 
     return NextResponse.json(comments);

src/app/globals.css

@@ -72,6 +72,36 @@
   }
 }
 
+@keyframes slideInTop {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translateY(-5px) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes highlightNew {
+  0% {
+    background-color: rgba(99, 160, 136, 0.1);
+    box-shadow: 0 0 20px rgba(99, 160, 136, 0.2);
+  }
+  50% {
+    background-color: rgba(99, 160, 136, 0.15);
+    box-shadow: 0 0 25px rgba(99, 160, 136, 0.3);
+  }
+  100% {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
 /* Hide scrollbar but maintain functionality */
 .hide-scrollbar {
   -ms-overflow-style: none;  /* IE and Edge */

src/app/posts/[id]/page.tsx

@@ -35,6 +35,7 @@ export default function PostPage() {
   const [showCommentProductSearch, setShowCommentProductSearch] = useState(false);
   const [isRealTimeActive, setIsRealTimeActive] = useState(false);
   const [isOnline, setIsOnline] = useState(true);
+  const [newlyAddedComments, setNewlyAddedComments] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
@@ -161,17 +162,36 @@ export default function PostPage() {
         })
       );
 
-      // Sort comments by createdAt in JavaScript
+      // Sort comments by createdAt in JavaScript (newest first)
       commentsData.sort((a, b) => {
         const aTime = new Date(a.createdAt).getTime();
         const bTime = new Date(b.createdAt).getTime();
-        return aTime - bTime;
+        return bTime - aTime; // Changed from aTime - bTime to bTime - aTime for newest first
       });
 
       // Filter out optimistic updates and merge with real data
       setComments(prevComments => {
         const tempComments = prevComments.filter(c => c.id.startsWith('temp-'));
         const realComments = commentsData;
+        
+        // Detect new comments for animation
+        const prevCommentIds = new Set(prevComments.map(c => c.id));
+        const newCommentIds = realComments
+          .filter(c => !prevCommentIds.has(c.id) && !c.id.startsWith('temp-'))
+          .map(c => c.id);
+        
+        if (newCommentIds.length > 0) {
+          setNewlyAddedComments(prev => new Set([...prev, ...newCommentIds]));
+          // Remove animation class after animation duration
+          setTimeout(() => {
+            setNewlyAddedComments(prev => {
+              const updated = new Set(prev);
+              newCommentIds.forEach(id => updated.delete(id));
+              return updated;
+            });
+          }, 1000); // Remove animation after 1 second
+        }
+        
         return [...realComments, ...tempComments];
       });
       setLoadingComments(false);
@@ -411,27 +431,31 @@ export default function PostPage() {
           {user ? (
             <form onSubmit={handleSubmitComment} className="mb-4 sm:mb-6">
               <div className="flex gap-3">
-                <div className="flex-shrink-0">
-                  <div className="w-10 h-10 rounded-full flex items-center justify-center" style={{ backgroundColor: colours.tag.default.background }}>
-                    <span className="font-medium text-sm" style={{ color: colours.tag.default.text }}>
-                      {(user.displayName || user.email || '').charAt(0).toUpperCase()}
+                <div className="flex-1">
+                  <div className="relative">
+                    <textarea
+                      value={newComment}
+                      onChange={(e) => setNewComment(e.target.value)}
+                      className="w-full px-3 py-2 pr-20 shadow-lg rounded-lg resize-none border-2 border-black"
+                      style={{
+                        backgroundColor: colours.input.background,
+                        color: colours.input.text
+                      }}
+                      rows={3}
+                      placeholder="Share your thoughts..."
+                      maxLength={500}
+                    />
+                    {/* Character count inside textarea */}
+                    <span 
+                      className="absolute bottom-3 right-2 text-xs pointer-events-none px-2 py-1 rounded"
+                      style={{ 
+                        color: colours.text.muted,
+                        backgroundColor: colours.input.background,
+                      }}
+                    >
+                      {newComment.length}/500
                     </span>
                   </div>
-                </div>
-                <div className="flex-1">
-                  <textarea
-                    value={newComment}
-                    onChange={(e) => setNewComment(e.target.value)}
-                    className="w-full px-3 py-2 rounded-lg resize-none"
-                    style={{
-                      border: `1px solid ${colours.card.border}`,
-                      backgroundColor: colours.input.background,
-                      color: colours.input.text
-                    }}
-                    rows={3}
-                    placeholder="Share your thoughts..."
-                    maxLength={500}
-                  />
 
                   {/* Product Linking for Comments */}
                   <div className="mt-2">
@@ -475,7 +499,7 @@ export default function PostPage() {
                     )}
 
                     {showCommentProductSearch && !selectedCommentProduct && (
-                      <div className="relative mb-3">
+                      <div className="relative mb-2">
                         <div className="relative">
                           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2" size={16} style={{ color: colours.text.muted }} />
                           <input
@@ -537,31 +561,16 @@ export default function PostPage() {
                     )}
                   </div>
 
-                  <div className="flex justify-between items-center mt-3">
-                    <div className="flex items-center gap-3">
-                      <span className="text-xs px-2 py-1 rounded-full" style={{ 
-                        color: colours.text.muted,
-                        backgroundColor: colours.background.secondary
-                      }}>
-                        {newComment.length}/500
-                      </span>
+                  <div className="flex justify-between items-center mt-2">
+                    <div className="flex items-center">
                       {!selectedCommentProduct && (
                         <button
                           type="button"
                           onClick={() => setShowCommentProductSearch(!showCommentProductSearch)}
-                          className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-all ${
-                            showCommentProductSearch ? 'shadow-sm' : ''
-                          }`}
+                          className="flex items-center gap-2 px-3 py-2 shadow-xl rounded-xl border-2 border-black text-xs font-medium transition-all"
                           style={{
-                            backgroundColor: showCommentProductSearch 
-                              ? colours.button.primary.background 
-                              : colours.tag.default.background,
-                            color: showCommentProductSearch 
-                              ? colours.button.primary.text 
-                              : colours.text.secondary,
-                            border: `1px solid ${showCommentProductSearch 
-                              ? colours.button.primary.background 
-                              : colours.tag.default.border}`
+                            backgroundColor: '#f1f5fb',
+                            color: colours.text.primary
                           }}
                         >
                           <Package size={14} />
@@ -572,21 +581,21 @@ export default function PostPage() {
                     <button
                       type="submit"
                       disabled={!newComment.trim() || submittingComment}
-                      className="flex items-center justify-center w-10 h-10 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                      className="flex items-center gap-2 px-4 py-2 rounded-xl border-2 shadow-xl border-black text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed disabled:border-dotted transition-all"
                       style={{
-                        backgroundColor: colours.button.primary.background,
-                        color: colours.button.primary.text
+                        backgroundColor: '#f1f5fb',
+                        color: colours.text.primary
                       }}
-                      title={submittingComment ? 'Posting...' : 'Post Comment'}
                     >
-                      <Send size={16} />
+                      <Send size={14} />
+                      <span>{submittingComment ? 'Posting...' : 'Post Comment'}</span>
                     </button>
                   </div>
                 </div>
               </div>
             </form>
           ) : (
-            <div className="mb-6 p-4 rounded-lg text-center" style={{ backgroundColor: colours.background.secondary }}>
+            <div className="mb- p-4 rounded-lg text-center" style={{ backgroundColor: colours.background.secondary }}>
               <p className="mb-2" style={{ color: colours.text.secondary }}>Sign in to join the conversation</p>
               <Link
                 href="/auth"
@@ -606,20 +615,34 @@ export default function PostPage() {
             </div>
           ) : comments.length === 0 ? (
             <div className="text-center py-8">
-              <MessageCircle size={48} className="mx-auto mb-3" style={{ color: colours.text.muted }} />
+              <MessageCircle size={48} className="mx-auto mb-2" style={{ color: colours.text.muted }} />
               <p style={{ color: colours.text.secondary }}>No comments yet. Be the first to share your thoughts!</p>
             </div>
           ) : (
-            <div className="space-y-4">
+            <div className="space-y-1">
               {comments.map((comment) => (
-                <CommentItem
+                <div
                   key={comment.id}
-                  comment={comment}
-                  currentUserId={user?.uid}
-                  onLike={handleCommentLike}
-                  onDislike={handleCommentDislike}
-                  depth={0}
-                />
+                  className={`transition-all duration-1000 ease-out ${
+                    newlyAddedComments.has(comment.id)
+                      ? 'animate-slide-in-top opacity-100 transform translate-y-0'
+                      : 'opacity-100 transform translate-y-0'
+                  }`}
+                  style={{
+                    animation: newlyAddedComments.has(comment.id) 
+                      ? 'slideInTop 0.8s ease-out, highlightNew 2s ease-out' 
+                      : undefined,
+                    borderRadius: '0.75rem'
+                  }}
+                >
+                  <CommentItem
+                    comment={comment}
+                    currentUserId={user?.uid}
+                    onLike={handleCommentLike}
+                    onDislike={handleCommentDislike}
+                    depth={0}
+                  />
+                </div>
               ))}
             </div>
           )}

src/components/CommentItem.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { ThumbsUp, ThumbsDown, Reply, Clock, ExternalLink } from 'lucide-react';
+import { Reply, Clock, ExternalLink } from 'lucide-react';
 import Image from 'next/image';
 import { Comment } from '@/types/post';
 import { formatDate } from '@/utils/dateUtils';
 import { colours } from '@/styles/colours';
+import LikeButton from './LikeButton';
+import DislikeButton from './DislikeButton';
 
 interface CommentItemProps {
   comment: Comment;
@@ -50,21 +52,21 @@ export default function CommentItem({
 
   return (
     <div 
-      className="pl-4 pb-4"
+      className={`pb-4 ${depth > 0 ? 'pl-4' : ''}`}
       style={{ 
-        marginLeft: `${marginLeft}px`,
-        borderLeft: `2px solid ${colours.card.border}`
+        marginLeft: `${marginLeft}px`
       }}
     >
-      <div className="rounded-lg p-4" style={{ backgroundColor: colours.background.secondary }}>
+      <div 
+        className="rounded-xl shadow-lg p-4" 
+        style={{ 
+          backgroundColor: colours.tags.countries.background,
+          border: `2px solid ${colours.card.border}`,
+        }}
+      >
         {/* Header */}
         <div className="flex items-center justify-between mb-2">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: colours.tag.default.background }}>
-              <span className="font-medium text-sm" style={{ color: colours.tag.default.text }}>
-                {comment.authorName.charAt(0).toUpperCase()}
-              </span>
-            </div>
             <div>
               <span className="font-medium text-sm" style={{ color: colours.text.primary }}>
                 {comment.authorName}
@@ -116,42 +118,32 @@ export default function CommentItem({
         {/* Actions */}
         <div className="flex items-center gap-4">
           {/* Like Button */}
-          <button
-            onClick={handleLike}
+          <LikeButton
+            isLiked={hasLiked}
+            likeCount={likeCount}
+            onLike={handleLike}
             disabled={!currentUserId}
-            className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs transition-colors ${!currentUserId ? 'cursor-not-allowed opacity-50' : ''}`}
-            style={{
-              backgroundColor: hasLiked ? colours.status.success.background : colours.interactive.hover.background,
-              color: hasLiked ? colours.status.success.text : colours.text.secondary
-            }}
-          >
-            <ThumbsUp size={12} />
-            <span>{likeCount}</span>
-          </button>
+            size="sm"
+          />
 
           {/* Dislike Button */}
-          <button
-            onClick={handleDislike}
+          <DislikeButton
+            isDisliked={hasDisliked}
+            dislikeCount={dislikeCount}
+            onDislike={handleDislike}
             disabled={!currentUserId}
-            className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs transition-colors ${!currentUserId ? 'cursor-not-allowed opacity-50' : ''}`}
-            style={{
-              backgroundColor: hasDisliked ? colours.status.error.background : colours.interactive.hover.background,
-              color: hasDisliked ? colours.status.error.text : colours.text.secondary
-            }}
-          >
-            <ThumbsDown size={12} />
-            <span>{dislikeCount}</span>
-          </button>
+            size="sm"
+          />
 
           {/* Reply Button */}
           {onReply && depth < maxDepth && (
             <button
               onClick={handleReply}
               disabled={!currentUserId}
-              className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs transition-colors ${!currentUserId ? 'cursor-not-allowed opacity-50' : ''}`}
+              className={`flex items-center gap-1 px-2 py-1 rounded-full border-2 border-black text-xs transition-colors ${!currentUserId ? 'cursor-not-allowed opacity-50' : ''}`}
               style={{
-                backgroundColor: colours.interactive.hover.background,
-                color: colours.text.secondary
+                backgroundColor: '#f1f5fb',
+                color: colours.text.primary
               }}
             >
               <Reply size={12} />

src/components/CreatePostModal.tsx

@@ -192,7 +192,7 @@ export default function CreatePostModal({ isOpen, onClose, onSubmit, isLoading }
                   <button
                     type="button"
                     onClick={() => setShowProductSearch(!showProductSearch)}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-all ${
+                    className={`flex items-center gap-2 px-3 py-2 shadow-xl rounded-xl text-xs font-medium transition-all ${
                       showProductSearch ? 'shadow-sm' : ''
                     }`}
                     style={{