ui: compact question cards, threaded reply design, and unlike toggle

backend/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst

@@ -1,11 +1,16 @@
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\config\DataInitializer.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\config\WebConfig.java
+C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\controller\BusRouteController.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\controller\CommunityQuestionController.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\controller\NotePyqController.java
+C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\entity\BusRoute.java
+C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\entity\BusStop.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\entity\CommunityAnswer.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\entity\CommunityQuestion.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\entity\NotePyq.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\PortalApplication.java
+C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\repository\BusRouteRepository.java
+C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\repository\BusStopRepository.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\repository\CommunityAnswerRepository.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\repository\CommunityQuestionRepository.java
 C:\Users\deves\OneDrive\project_main\Freshers-Hub\backend\src\main\java\com\rit\portal\repository\NotePyqRepository.java

src/pages/Community/Community.tsx

@@ -7,7 +7,7 @@ import {
 import SectionTitle from '@/components/SectionTitle/SectionTitle';
 import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
 import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
-import { QUESTIONS_DATA, CONFESSIONS_DATA } from '@/constants';
+import { CONFESSIONS_DATA } from '@/constants';
 
 type Tab = 'qa' | 'confession';
 
@@ -74,13 +74,12 @@ export default function Community() {
   const [searchQuery, setSearchQuery] = useState('');
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
   const [expandedQuestionIds, setExpandedQuestionIds] = useState<Set<string>>(new Set());
-  // Server-side pagination
+  const [expandedBodyIds, setExpandedBodyIds] = useState<Set<string>>(new Set());
+  const [sortFilter, setSortFilter] = useState<'recent' | 'liked' | 'answered' | 'unanswered'>('recent');
+  // Client-side pagination state
   const [currentPage, setCurrentPage] = useState(0);
-  const [totalPages, setTotalPages] = useState(1);
   const [questions, setQuestions] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  // Fallback static questions for when backend is unavailable
-  const [staticQuestions] = useState<any[]>(QUESTIONS_DATA);
 
   const toggleAnswers = (id: string) => {
     setExpandedQuestionIds((prev) => {
@@ -94,37 +93,35 @@ export default function Community() {
     });
   };
 
-  const fetchQuestions = async (page = 0) => {
+  const fetchQuestions = async () => {
     setLoading(true);
     try {
-      const response = await fetch(`http://localhost:8080/api/questions/paged?page=${page}&size=${PAGE_SIZE}`);
+      const response = await fetch(`http://localhost:8080/api/questions`);
       if (response.ok) {
         const data = await response.json();
-        // Spring Page response: { content: [], totalPages, totalElements, number }
+        // Backend returns oldest-first, reverse to show newest first
-        setQuestions(data.content || []);
+        setQuestions(Array.isArray(data) ? [...data].reverse() : []);
-        setTotalPages(data.totalPages || 1);
-        setCurrentPage(data.number ?? page);
       } else {
-        console.error("Failed to fetch questions from backend: HTTP status", response.status);
+        setQuestions([]);
-        // Fallback: slice static questions
-        const start = page * PAGE_SIZE;
-        setQuestions(staticQuestions.slice(start, start + PAGE_SIZE));
-        setTotalPages(Math.ceil(staticQuestions.length / PAGE_SIZE));
-        setCurrentPage(page);
       }
-    } catch (error) {
+    } catch {
-      console.error('Backend not available. Falling back to local static questions data.', error);
+      // Backend unavailable — show empty state
-      const start = page * PAGE_SIZE;
+      setQuestions([]);
-      setQuestions(staticQuestions.slice(start, start + PAGE_SIZE));
-      setTotalPages(Math.ceil(staticQuestions.length / PAGE_SIZE));
-      setCurrentPage(page);
     } finally {
       setLoading(false);
     }
   };
 
   useEffect(() => {
-    fetchQuestions(0);
+    const savedLikes = localStorage.getItem('qa-liked-ids');
+    if (savedLikes) {
+      try {
+        setLikedIds(new Set(JSON.parse(savedLikes)));
+      } catch (e) {
+        console.error('Failed to parse liked IDs from localStorage', e);
+      }
+    }
+    fetchQuestions();
   }, []);
 
   const getAnswersCount = (q: any) => {
@@ -138,17 +135,37 @@ export default function Community() {
     return votesVal;
   };
 
-  // Client-side filter applied on top of current page (for search within page)
+  // Client-side filter and sorting derived state
-  const filteredQuestions = questions.filter((q) => {
+  let processedQuestions = questions.filter((q) => {
     const titleVal = q.title || "";
     const tagsVal = q.tags || [];
     return titleVal.toLowerCase().includes(searchQuery.toLowerCase()) ||
       tagsVal.some((t: string) => t.toLowerCase().includes(searchQuery.toLowerCase()));
   });
 
+  if (sortFilter === 'recent') {
+    processedQuestions.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+  } else if (sortFilter === 'liked') {
+    processedQuestions.sort((a, b) => getVotesCount(b) - getVotesCount(a));
+  } else if (sortFilter === 'answered') {
+    processedQuestions.sort((a, b) => getAnswersCount(b) - getAnswersCount(a));
+  } else if (sortFilter === 'unanswered') {
+    processedQuestions = processedQuestions.filter(q => !q.isAnswered && getAnswersCount(q) === 0);
+  }
+
+  const filteredQuestions = processedQuestions;
+  const totalPages = Math.max(1, Math.ceil(filteredQuestions.length / PAGE_SIZE));
+  const paginatedQuestions = filteredQuestions.slice(currentPage * PAGE_SIZE, (currentPage + 1) * PAGE_SIZE);
+
+  // Reset page when search or filter changes
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [searchQuery, sortFilter]);
+
   const handlePageChange = (newPage: number) => {
     setExpandedQuestionIds(new Set()); // collapse any open answers
-    fetchQuestions(newPage);
+    setExpandedBodyIds(new Set());     // collapse bodies too
+    setCurrentPage(newPage);
     // Scroll back to the top of the questions list smoothly
     document.getElementById('qa-questions-list')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   };
@@ -160,23 +177,58 @@ export default function Community() {
     setTimeout(() => setConfessionPosted(false), 3000);
   };
 
-  const toggleLike = async (id: string) => {
+  const handleLike = async (id: string) => {
+    let isLikedNow = false;
     setLikedIds((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id); else next.add(id);
+      if (next.has(id)) {
+        next.delete(id);
+        isLikedNow = false;
+      } else {
+        next.add(id);
+        isLikedNow = true;
+      }
+      localStorage.setItem('qa-liked-ids', JSON.stringify(Array.from(next)));
       return next;
     });
 
+    // Optimistically update count (+1 if liked, -1 if unliked)
+    setQuestions((prev) => 
+      prev.map((q) => {
+        if (q.id.toString() === id) {
+          const votesVal = typeof q.upvotes === 'number' ? q.upvotes : (typeof q.votes === 'number' ? q.votes : 0);
+          return { ...q, upvotes: isLikedNow ? votesVal + 1 : Math.max(0, votesVal - 1) };
+        }
+        return q;
+      })
+    );
+
     try {
-      await fetch(`http://localhost:8080/api/questions/${id}/upvote`, {
+      if (isLikedNow) {
-        method: 'POST'
+        await fetch(`http://localhost:8080/api/questions/${id}/upvote`, {
-      });
+          method: 'POST'
-      fetchQuestions();
+        });
+        fetchQuestions();
+      }
     } catch (error) {
       console.log('Backend not available for upvote sync.', error);
     }
   };
 
+  const handleCardClick = (id: string) => {
+    const idStr = id.toString();
+    setExpandedQuestionIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(idStr)) next.delete(idStr); else next.add(idStr);
+      return next;
+    });
+    setExpandedBodyIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(idStr)) next.delete(idStr); else next.add(idStr);
+      return next;
+    });
+  };
+
   const handlePostQuestion = async () => {
     if (!questionText.trim()) return;
     
@@ -232,7 +284,7 @@ export default function Community() {
       {/* Header */}
       <div className="bg-white border-b border-slate-100 py-12">
         <div className="container-custom">
-          <h1 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+          <h1 className="text-3xl md:text-4xl font-bold mb-2 tracking-tight" style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}>
             RIT Community
           </h1>
           <p className="text-slate-500 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -280,16 +332,15 @@ export default function Community() {
               transition={{ duration: 0.25 }}
             >
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                <div className="lg:col-span-2">
+                <div className="lg:col-span-2">                  {/* Ask Question Box */}
-                  {/* Ask Question Box */}
+                  <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 mb-8" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                  <div className="bg-white rounded-xl border border-slate-200/80 p-5 mb-8 shadow-xs">
+                    <h3 className="text-base font-semibold text-[#1E293B] mb-3 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3>
-                    <h3 className="text-sm font-semibold text-slate-900 mb-3 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3>
                     <textarea
                       value={questionText}
                       onChange={(e) => setQuestionText(e.target.value)}
                       placeholder="What's on your mind? Ask your seniors anything about RIT..."
                       rows={3}
-                      className="w-full border border-slate-200 rounded-xl p-3 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-slate-400 focus:bg-white bg-slate-50/30 resize-none transition-all mb-3"
+                      className="w-full border border-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-slate-400 focus:bg-white bg-slate-50/30 resize-none transition-all mb-3.5"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <input
@@ -297,7 +348,7 @@ export default function Community() {
                       value={authorName}
                       onChange={(e) => setAuthorName(e.target.value)}
                       placeholder="Your Name (optional)"
-                      className="w-full md:w-64 border border-slate-200 rounded-xl px-3 py-2 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-slate-400 focus:bg-white bg-slate-50/30 transition-all mb-4"
+                      className="w-full md:w-64 border border-[#E5E7EB] rounded-2xl px-4 py-2.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-slate-400 focus:bg-white bg-slate-50/30 transition-all mb-4"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">
@@ -308,7 +359,7 @@ export default function Community() {
                         whileHover={{ scale: 1.01 }}
                         whileTap={{ scale: 0.99 }}
                         onClick={handlePostQuestion}
-                        className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-white text-[13px] font-semibold bg-[#F97316] hover:bg-[#EA580C] transition-colors cursor-pointer"
+                        className="flex items-center gap-1.5 px-4.5 py-2.5 rounded-xl text-white text-[13px] font-semibold bg-[#F97316] hover:bg-[#EA580C] transition-colors cursor-pointer"
                         style={{ fontFamily: 'Poppins, sans-serif' }}
                       >
                         <Plus className="w-4 h-4" />
@@ -319,18 +370,44 @@ export default function Community() {
 
 
                   {/* Search */}
-                  <div className="relative mb-6">
+                  <div className="relative mb-4">
                     <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                     <input
                       type="text"
                       placeholder="Search questions..."
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
-                      className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-slate-400 transition-colors"
+                      className="w-full pl-10 pr-4 py-2.5 rounded-2xl border border-[#E5E7EB] bg-white text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-slate-400 transition-colors"
-                      style={{ fontFamily: 'Inter, sans-serif' }}
+                      style={{ fontFamily: 'Inter, sans-serif', boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
                     />
                   </div>
 
+                  {/* Sort / Filter Bar */}
+                  <div className="flex gap-2 overflow-x-auto pb-3 mb-6 scrollbar-none flex-nowrap">
+                    {[
+                      { id: 'recent', label: 'Recent' },
+                      { id: 'liked', label: 'Most Liked' },
+                      { id: 'answered', label: 'Most Answered' },
+                      { id: 'unanswered', label: 'Unanswered' }
+                    ].map((chip) => {
+                      const isActive = sortFilter === chip.id;
+                      return (
+                        <button
+                          key={chip.id}
+                          onClick={() => setSortFilter(chip.id as any)}
+                          className={`px-4 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap cursor-pointer transition-all border ${
+                            isActive
+                              ? 'bg-[#F97316] text-white border-[#F97316] shadow-sm'
+                              : 'bg-white hover:bg-slate-50 text-slate-600 border-[#E5E7EB]'
+                          }`}
+                          style={{ fontFamily: 'Poppins, sans-serif' }}
+                        >
+                          {chip.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+
                   {/* Questions */}
                   <div id="qa-questions-list">
                     {loading ? (
@@ -348,118 +425,172 @@ export default function Community() {
                           </div>
                         ))}
                       </div>
+                    ) : filteredQuestions.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-16 text-center">
+                        <div className="w-14 h-14 rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
+                          <MessageCircle className="w-6 h-6 text-slate-400" />
+                        </div>
+                        <p className="text-sm font-semibold text-slate-700 mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                          {searchQuery ? 'No questions match your search' : 'No questions yet'}
+                        </p>
+                        <p className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
+                          {searchQuery ? 'Try a different keyword' : 'Be the first to ask something!'}
+                        </p>
+                      </div>
                     ) : (
-                      <StaggerContainer key={`${currentPage}-${filteredQuestions.length}`} className="flex flex-col gap-4">
+                      <StaggerContainer key={`${currentPage}-${filteredQuestions.length}`} className="flex flex-col gap-3">
-                        {filteredQuestions.map((q, idx) => {
+                        {paginatedQuestions.map((q, idx) => {
                           const isFeatured = idx === 0 && searchQuery === '' && currentPage === 0;
+                          const isLiked = likedIds.has(q.id.toString());
+                          const ansCount = getAnswersCount(q);
+                          const likesCount = getVotesCount(q);
+                          const isTrending = (likesCount + ansCount) >= 5;
+                          const isBodyExpanded = expandedBodyIds.has(q.id.toString());
+
                       return (
                         <StaggerItem key={q.id}>
                           <motion.div
-                            whileHover={{ y: -0.5 }}
+                            whileHover={{ y: -2, boxShadow: '0 8px 30px -4px rgba(0,0,0,0.08)', borderColor: '#CBD5E1' }}
-                            className={`bg-white rounded-xl border p-5 transition-all duration-300 hover:border-slate-350 hover:shadow-[0_8px_30px_rgba(17,24,39,0.015)] ${
+                            onClick={() => handleCardClick(q.id)}
+                            transition={{ duration: 0.2 }}
+                            className={`bg-white border rounded-2xl p-4 transition-all duration-300 cursor-pointer ${
                               isFeatured
-                                ? 'border-l-2 border-l-slate-800 border-slate-200'
+                                ? 'border-l-4 border-l-[#F97316] border-[#E5E7EB]'
-                                : 'border-slate-200/50'
+                                : 'border-[#E5E7EB]'
                             }`}
+                            style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
                           >
-                            <div className="flex items-start gap-4">
+                            <div className="flex items-start gap-3">
                               {/* Avatar */}
                               <img
                                 src={getAvatar(q.author)}
                                 alt={q.author}
-                                className="w-10 h-10 rounded-xl object-cover bg-slate-50 border border-slate-100 shrink-0"
+                                className="w-8 h-8 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0"
                               />
 
                               <div className="flex-1 min-w-0">
                                 {/* Header / Meta */}
-                                <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                                <div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
-                                  <span className="text-xs font-bold text-slate-800 hover:text-slate-900 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>{q.author}</span>
+                                  <span className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{q.author}</span>
                                   <span className="text-[10px] text-slate-300">•</span>
                                   <span className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(q.createdAt)}</span>
-                                  {isFeatured && (
+                                  
-                                    <span className="ml-auto bg-amber-50 text-amber-700 border border-amber-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">★ Popular</span>
+                                  {/* Badges on Top Right */}
-                                  )}
+                                  <div className="ml-auto flex items-center gap-1 shrink-0">
+                                    {isTrending && (
+                                      <span className="bg-amber-50 text-amber-700 border border-amber-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">★ Trending</span>
+                                    )}
+                                    {q.isAnswered || ansCount > 0 ? (
+                                      <span className="bg-emerald-50 text-emerald-750 border border-emerald-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">✓ Answered</span>
+                                    ) : (
+                                      <span className="bg-slate-50 text-slate-400 border border-slate-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">Unanswered</span>
+                                    )}
+                                  </div>
                                 </div>
 
-                                <h3 className={`font-bold text-slate-900 mb-1 hover:text-slate-700 cursor-pointer transition-colors tracking-tight ${
+                                <h3 className={`font-bold text-[#1E293B] mb-1 hover:text-[#F97316] transition-colors tracking-tight ${
                                   isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
                                 }`}
-                                  style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                  style={{ fontFamily: 'Playfair Display, serif' }}>
                                   {q.title}
                                 </h3>
-                                <p className="text-[13px] text-slate-650 mb-4 leading-relaxed line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>
+                                
+                                <p className={`text-[12.5px] text-slate-500 mb-3.5 leading-relaxed transition-all duration-300 ${
+                                  isBodyExpanded ? '' : 'line-clamp-1'
+                                }`} style={{ fontFamily: 'Inter, sans-serif' }}>
                                   {q.body}
                                 </p>
 
-                                <div className="flex items-center justify-between flex-wrap gap-3 pt-1.5 border-t border-slate-100/60">
+                                <div className="flex items-center justify-between flex-wrap gap-3 pt-2.5 border-t border-slate-100/60">
-                                  <div className="flex flex-wrap gap-1.5">
+                                  {/* Left side: Replies & Likes & Tags inline */}
-                                    {(q.tags || []).map((tag) => (
+                                  <div className="flex items-center gap-4 flex-wrap text-[11px]">
-                                      <span
+                                    {/* Replies button */}
-                                        key={tag}
-                                        className="px-2 py-0.5 rounded-md text-[10px] font-medium bg-slate-50 text-slate-500 border border-slate-100/60 hover:bg-slate-100/60 hover:text-slate-700 transition-colors cursor-pointer"
-                                        style={{ fontFamily: 'Inter, sans-serif' }}
-                                      >
-                                        #{tag}
-                                      </span>
-                                    ))}
-                                  </div>
-
-                                  <div className="flex items-center gap-2 text-[10px] text-slate-400 font-bold">
                                     <button
-                                      onClick={() => toggleAnswers(q.id)}
+                                      onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
-                                      className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border border-slate-200/30 ${
+                                      className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
                                         expandedQuestionIds.has(q.id.toString())
-                                          ? 'bg-slate-900 text-white border-slate-900'
+                                          ? 'text-[#F97316]'
-                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700'
+                                          : 'text-slate-500 hover:text-slate-800'
                                       }`}
                                     >
                                       <MessageCircle className="w-3.5 h-3.5" />
-                                      <span>{getAnswersCount(q)} answers</span>
+                                      <span style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                        {ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : 'No replies yet'}
+                                      </span>
                                     </button>
-                                    {q.isAnswered && (
-                                      <span className="bg-emerald-50 text-emerald-700 border border-emerald-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">✓ Answered</span>
-                                    )}
 
-                                    {/* Like/Vote Button inside bottom bar */}
+                                    {/* Upvotes button */}
                                     <button
-                                      onClick={() => toggleLike(q.id)}
+                                      onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
-                                      className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border ${
+                                      className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
-                                        likedIds.has(q.id.toString())
+                                        isLiked
-                                          ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
+                                          ? 'text-rose-600'
-                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
+                                          : 'text-slate-500 hover:text-slate-850'
                                       }`}
                                     >
-                                      <ThumbsUp className="w-3 h-3" />
+                                      <ThumbsUp className="w-3.5 h-3.5" fill={isLiked ? 'currentColor' : 'none'} />
-                                      <span>{getVotesCount(q) + (likedIds.has(q.id.toString()) ? 1 : 0)}</span>
+                                      <span style={{ fontFamily: 'Poppins, sans-serif' }}>{likesCount}</span>
                                     </button>
+
+                                    {/* Tags Inline */}
+                                    <div className="flex items-center gap-1 flex-wrap pl-1 border-l border-slate-100">
+                                      {(q.tags || []).map((tag) => (
+                                        <span
+                                          key={tag}
+                                          onClick={(e) => { e.stopPropagation(); setSearchQuery(tag); }}
+                                          className="px-1.5 py-0.5 rounded bg-slate-50 text-[10px] font-semibold text-slate-400 border border-slate-100 hover:bg-slate-100 hover:text-slate-600 transition-colors"
+                                          style={{ fontFamily: 'Inter, sans-serif' }}
+                                        >
+                                          #{tag}
+                                        </span>
+                                      ))}
+                                    </div>
                                   </div>
                                 </div>
 
                                 {/* Expandable Answers Section */}
                                 {expandedQuestionIds.has(q.id.toString()) && (
-                                  <div className="mt-4 pt-4 border-t border-slate-100 flex flex-col gap-3.5 pl-3 border-l-2 border-l-slate-100">
+                                  <div className="mt-4 pt-4 border-t border-slate-150 flex flex-col gap-4" onClick={(e) => e.stopPropagation()}>
                                     <div className="flex items-center justify-between">
-                                      <h4 className="text-[11px] font-bold text-slate-700 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                      <h4 className="text-[10px] font-bold text-slate-500 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                        Answers ({getAnswersCount(q)})
+                                        Replies ({ansCount})
                                       </h4>
                                     </div>
                                     {Array.isArray(q.answers) && q.answers.length > 0 ? (
-                                      <div className="flex flex-col gap-2.5 max-h-60 overflow-y-auto pr-1">
+                                      <div className="flex flex-col gap-3.5 max-h-80 overflow-y-auto pr-1">
                                         {q.answers.map((ans: any) => (
-                                          <div key={ans.id} className="bg-slate-50/50 rounded-xl p-3.5 border border-slate-100 hover:bg-slate-50/80 transition-colors">
+                                          <div key={ans.id} className="relative pl-6 flex items-start gap-2.5 group">
-                                            <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                                            {/* Thread connector line */}
-                                              <span className="text-xs font-bold text-slate-700" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
+                                            <div className="absolute left-[9px] top-[-16px] bottom-3 w-3 border-l border-b border-slate-200 rounded-bl-lg pointer-events-none" />
-                                              <span className="text-[9px] text-slate-300">•</span>
+                                            
-                                              <span className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(ans.createdAt)}</span>
+                                            {/* Senior Avatar */}
+                                            <img
+                                              src={getAvatar(ans.author)}
+                                              alt={ans.author}
+                                              className="w-6 h-6 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0 relative z-10"
+                                            />
+
+                                            <div className="flex-1 min-w-0">
+                                              <div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
+                                                <span className="text-[11.5px] font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
+                                                {/* Blue verified check icon for senior helpers */}
+                                                <span className="inline-flex text-blue-500" title="Verified Senior Helper">
+                                                  <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
+                                                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                                                  </svg>
+                                                </span>
+                                                <span className="text-[9px] text-slate-350">•</span>
+                                                <span className="text-[10px] text-slate-450 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(ans.createdAt)}</span>
+                                              </div>
+                                              <p className="text-[12.5px] text-slate-600 leading-relaxed font-normal" style={{ fontFamily: 'Inter, sans-serif' }}>
+                                                {ans.body}
+                                              </p>
                                             </div>
-                                            <p className="text-xs text-slate-600 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
-                                              {ans.body}
-                                            </p>
                                           </div>
                                         ))}
                                       </div>
                                     ) : (
-                                      <p className="text-xs text-slate-400 italic font-medium py-1" style={{ fontFamily: 'Inter, sans-serif' }}>
+                                      <p className="text-xs text-slate-400 italic font-medium py-1 pl-4" style={{ fontFamily: 'Inter, sans-serif' }}>
                                         No answers posted yet. Senior helpers can reply to this question via the Telegram Bot!
                                       </p>
                                     )}
@@ -470,22 +601,22 @@ export default function Community() {
                           </motion.div>
                         </StaggerItem>
                       );
-                        })}
+                    })}
-                      </StaggerContainer>
+                  </StaggerContainer>
-                    )}
+                )}
 
-                  {/* Pagination Controls */}
+                  {/* Pagination — arrows only */}
-                  {totalPages > 1 && (
+                  {!loading && totalPages > 1 && (
                     <div className="flex items-center justify-between mt-6 px-1">
                       <motion.button
                         whileHover={{ scale: 1.04 }}
                         whileTap={{ scale: 0.95 }}
                         onClick={() => handlePageChange(currentPage - 1)}
                         disabled={currentPage === 0 || loading}
-                        className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 cursor-pointer ${
+                        className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${
-                          currentPage === 0 || loading
+                          currentPage === 0
                             ? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
-                            : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm'
+                            : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
                         }`}
                         style={{ fontFamily: 'Poppins, sans-serif' }}
                       >
@@ -493,35 +624,19 @@ export default function Community() {
                         Prev
                       </motion.button>
 
-                      <div className="flex items-center gap-1.5">
+                      <span className="text-[11px] text-slate-405 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
-                        {Array.from({ length: totalPages }).map((_, i) => (
+                        Page {currentPage + 1} of {totalPages} &middot; {filteredQuestions.length} questions
-                          <motion.button
+                      </span>
-                            key={i}
-                            whileHover={{ scale: 1.1 }}
-                            whileTap={{ scale: 0.9 }}
-                            onClick={() => handlePageChange(i)}
-                            disabled={loading}
-                            className={`w-7 h-7 rounded-lg text-[11px] font-bold transition-all duration-200 cursor-pointer border ${
-                              i === currentPage
-                                ? 'bg-slate-900 text-white border-slate-900'
-                                : 'bg-white text-slate-500 border-slate-200 hover:border-slate-300 hover:bg-slate-50'
-                            }`}
-                            style={{ fontFamily: 'Poppins, sans-serif' }}
-                          >
-                            {i + 1}
-                          </motion.button>
-                        ))}
-                      </div>
 
                       <motion.button
                         whileHover={{ scale: 1.04 }}
                         whileTap={{ scale: 0.95 }}
                         onClick={() => handlePageChange(currentPage + 1)}
                         disabled={currentPage >= totalPages - 1 || loading}
-                        className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 cursor-pointer ${
+                        className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${
-                          currentPage >= totalPages - 1 || loading
+                          currentPage >= totalPages - 1
                             ? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
-                            : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm'
+                            : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
                         }`}
                         style={{ fontFamily: 'Poppins, sans-serif' }}
                       >
@@ -537,7 +652,7 @@ export default function Community() {
                 <div className="flex flex-col gap-6">
                   {/* Trending */}
                   <AnimatedContainer direction="right" delay={0.1}>
-                    <div className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-xs">
+                    <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
                       <div className="flex items-center gap-2 mb-4">
                         <TrendingUp className="w-4 h-4 text-slate-600" />
                         <h3 className="text-sm font-semibold text-slate-850 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Trending Topics</h3>
@@ -557,15 +672,22 @@ export default function Community() {
                     </div>
                   </AnimatedContainer>
 
-                  {/* Stats */}
+                  {/* Stats — real data from backend */}
                   <AnimatedContainer direction="right" delay={0.2}>
-                    <div className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-xs">
+                    <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
                       {[
-                        { label: 'Total Questions', value: '124' },
+                        {
-                        { label: 'Answered', value: '98%' },
+                          label: 'Total Questions',
-                        { label: 'Active Students', value: '340+' },
+                          value: questions.length.toString()
+                        },
+                        {
+                          label: 'Answered',
+                          value: questions.length > 0
+                            ? `${Math.round((questions.filter(q => q.isAnswered).length / questions.length) * 100)}%`
+                            : '0%'
+                        },
                       ].map((stat, i) => (
-                        <div key={i} className={`flex justify-between py-2.5 ${i < 2 ? 'border-b border-slate-100' : ''}`}>
+                        <div key={i} className={`flex justify-between py-2.5 ${i < 1 ? 'border-b border-slate-100' : ''}`}>
                           <span className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>{stat.label}</span>
                           <span className="text-xs font-bold text-slate-900" style={{ fontFamily: 'Poppins, sans-serif' }}>{stat.value}</span>
                         </div>
@@ -590,7 +712,7 @@ export default function Community() {
                 <div className="lg:col-span-2">
                   {/* Post confession */}
                   <div
-                    className="rounded-xl p-5 mb-6 border"
+                    className="rounded-2xl p-6 mb-6 border"
                     style={{ background: '#0F172A', borderColor: 'rgba(255,255,255,0.05)' }}
                   >
                     <div className="flex items-center gap-3 mb-4">
@@ -608,13 +730,13 @@ export default function Community() {
                       onChange={(e) => setConfessionText(e.target.value)}
                       placeholder="Share your thoughts, stories, crushes, or anything on your mind... It's completely anonymous 🤫"
                       rows={4}
-                      className="w-full rounded-xl p-3 text-[13px] placeholder-slate-500 focus:outline-none resize-none mb-4 bg-white/5 border border-white/10 text-white"
+                      className="w-full rounded-2xl p-3.5 text-[13px] placeholder-slate-500 focus:outline-none resize-none mb-4 bg-white/5 border border-white/10 text-white"
                       style={{
                         fontFamily: 'Inter, sans-serif',
                       }}
                     />
 
-                    <div className="flex items-center gap-2.5 p-3 rounded-lg mb-4 bg-white/5 border border-white/10">
+                    <div className="flex items-center gap-2.5 p-3 rounded-xl mb-4 bg-white/5 border border-white/10">
                       <Shield className="w-4 h-4 text-slate-300 shrink-0" />
                       <span className="text-[11px] text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
                         No IP tracking. No username. 100% anonymous posting.
@@ -626,7 +748,7 @@ export default function Community() {
                         whileHover={{ scale: 1.01 }}
                         whileTap={{ scale: 0.99 }}
                         onClick={handleConfess}
-                        className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-white text-[13px] font-semibold bg-[#F97316] hover:bg-[#EA580C] transition-colors cursor-pointer"
+                        className="flex items-center gap-1.5 px-4.5 py-2.5 rounded-xl text-white text-[13px] font-semibold bg-[#F97316] hover:bg-[#EA580C] transition-colors cursor-pointer"
                         style={{ fontFamily: 'Poppins, sans-serif' }}
                       >
                         <Smile className="w-4 h-4" />
@@ -654,8 +776,10 @@ export default function Community() {
                     {CONFESSIONS_DATA.map((conf) => (
                       <StaggerItem key={conf.id}>
                         <motion.div
-                          whileHover={{ y: -0.5 }}
+                          whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
-                          className="bg-white rounded-xl border border-slate-200/50 p-5 transition-all duration-300 hover:border-slate-350 hover:shadow-[0_8px_30px_rgba(17,24,39,0.015)]"
+                          transition={{ duration: 0.25 }}
+                          className="bg-white rounded-2xl border border-[#E5E7EB] p-6 transition-all duration-300"
+                          style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
                         >
                           <div className="flex items-start justify-between mb-3">
                             <div className="flex items-center gap-2.5">
@@ -699,8 +823,8 @@ export default function Community() {
 
                 {/* Sidebar */}
                 <AnimatedContainer direction="right" delay={0.15}>
-                  <div className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-xs">
+                  <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                    <h3 className="text-sm font-semibold text-slate-850 mb-4 flex items-center gap-2" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                    <h3 className="text-sm font-semibold text-[#1E293B] mb-4 flex items-center gap-2" style={{ fontFamily: 'Poppins, sans-serif' }}>
                       <Shield className="w-4 h-4 text-slate-500" />
                       Community Rules
                     </h3>

telegram-bot/config.json

@@ -1,5 +1,7 @@
 {
   "telegram_bot_token": "8859374355:AAH0dhwstkTBhRerRTjzmb2RG2fjPbigzvo",
   "helper_chat_ids": [971749136,5567776672],
+  "discord_bot_token": "",
+  "discord_helper_user_ids": [789393727641878568],
   "spring_backend_url": "http://localhost:8080"
 }