From 8cacd1f23ed3da6bfc7a9b55634edad23b29f6c4 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 12:30:21 +0530
Subject: [PATCH 01/24] feat: implement Q&A database persistence and Telegram
 bot integration

---
 .gitignore                                    |   1 +
 .../CommunityQuestionController.java          |  84 ++++
 .../portal/controller/NotePyqController.java  |   3 +-
 .../rit/portal/entity/CommunityAnswer.java    |  40 ++
 .../rit/portal/entity/CommunityQuestion.java  |  46 ++
 .../java/com/rit/portal/entity/NotePyq.java   |   2 +-
 .../repository/CommunityAnswerRepository.java |   9 +
 .../CommunityQuestionRepository.java          |   9 +
 .../portal/repository/NotePyqRepository.java  |   2 +-
 .../src/main/resources/application.properties |   4 +-
 package-lock.json                             |  78 ----
 src/pages/Community/Community.tsx             | 394 ++++++++++++------
 telegram-bot/README.md                        |  50 +++
 telegram-bot/config.json                      |   5 +
 telegram-bot/requirements.txt                 |   4 +
 telegram-bot/telegram_bot.py                  | 238 +++++++++++
 16 files changed, 750 insertions(+), 219 deletions(-)
 create mode 100644 backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
 create mode 100644 backend/src/main/java/com/rit/portal/entity/CommunityAnswer.java
 create mode 100644 backend/src/main/java/com/rit/portal/entity/CommunityQuestion.java
 create mode 100644 backend/src/main/java/com/rit/portal/repository/CommunityAnswerRepository.java
 create mode 100644 backend/src/main/java/com/rit/portal/repository/CommunityQuestionRepository.java
 create mode 100644 telegram-bot/README.md
 create mode 100644 telegram-bot/config.json
 create mode 100644 telegram-bot/requirements.txt
 create mode 100644 telegram-bot/telegram_bot.py

diff --git a/.gitignore b/.gitignore
index a547bf3..8e4bb48 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+*.db
diff --git a/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java b/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
new file mode 100644
index 0000000..3167ef1
--- /dev/null
+++ b/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
@@ -0,0 +1,84 @@
+package com.rit.portal.controller;
+
+import com.rit.portal.entity.CommunityAnswer;
+import com.rit.portal.entity.CommunityQuestion;
+import com.rit.portal.repository.CommunityAnswerRepository;
+import com.rit.portal.repository.CommunityQuestionRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.client.RestTemplate;
+import java.time.LocalDateTime;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@RestController
+@RequestMapping("/api/questions")
+public class CommunityQuestionController {
+
+    @Autowired
+    private CommunityQuestionRepository questionRepository;
+
+    @Autowired
+    private CommunityAnswerRepository answerRepository;
+
+    private final RestTemplate restTemplate = new RestTemplate();
+    private static final String TELEGRAM_BOT_URL = "http://localhost:8082/send_question";
+
+    @GetMapping
+    public List<CommunityQuestion> getAllQuestions() {
+        return questionRepository.findAll();
+    }
+
+    @PostMapping
+    public CommunityQuestion createQuestion(@RequestBody CommunityQuestion question) {
+        if (question.getUpvotes() == null) question.setUpvotes(0);
+        if (question.getIsAnswered() == null) question.setIsAnswered(false);
+        question.setCreatedAt(LocalDateTime.now());
+        
+        CommunityQuestion saved = questionRepository.save(question);
+        
+        // Notify Telegram bot in a background thread to keep it robust and non-blocking
+        new Thread(() -> {
+            try {
+                Map<String, Object> payload = new HashMap<>();
+                payload.put("question_id", saved.getId());
+                payload.put("title", saved.getTitle());
+                payload.put("body", saved.getBody());
+                payload.put("author", saved.getAuthor());
+                
+                restTemplate.postForEntity(TELEGRAM_BOT_URL, payload, String.class);
+            } catch (Exception e) {
+                System.err.println("Failed to notify Telegram Bot intermediary: " + e.getMessage());
+            }
+        }).start();
+
+        return saved;
+    }
+
+    @PostMapping("/{id}/answers")
+    public ResponseEntity<CommunityAnswer> addAnswer(@PathVariable Integer id, @RequestBody CommunityAnswer answer) {
+        return questionRepository.findById(id).map(question -> {
+            answer.setQuestion(question);
+            if (answer.getUpvotes() == null) answer.setUpvotes(0);
+            if (answer.getIsAccepted() == null) answer.setIsAccepted(false);
+            answer.setCreatedAt(LocalDateTime.now());
+            
+            CommunityAnswer savedAnswer = answerRepository.save(answer);
+            
+            question.setIsAnswered(true);
+            questionRepository.save(question);
+            
+            return ResponseEntity.ok(savedAnswer);
+        }).orElse(ResponseEntity.notFound().build());
+    }
+
+    @PostMapping("/{id}/upvote")
+    public ResponseEntity<CommunityQuestion> upvoteQuestion(@PathVariable Integer id) {
+        return questionRepository.findById(id).map(question -> {
+            question.setUpvotes(question.getUpvotes() + 1);
+            return ResponseEntity.ok(questionRepository.save(question));
+        }).orElse(ResponseEntity.notFound().build());
+    }
+}
diff --git a/backend/src/main/java/com/rit/portal/controller/NotePyqController.java b/backend/src/main/java/com/rit/portal/controller/NotePyqController.java
index ebdad65..54ff9c6 100644
--- a/backend/src/main/java/com/rit/portal/controller/NotePyqController.java
+++ b/backend/src/main/java/com/rit/portal/controller/NotePyqController.java
@@ -9,7 +9,6 @@ import java.util.List;
 
 @RestController
 @RequestMapping("/api/notes")
-@CrossOrigin(origins = "*") // CrossOrigin configured globally, but added here for safety
 public class NotePyqController {
 
     @Autowired
@@ -41,7 +40,7 @@ public class NotePyqController {
 
     // Increment downloads count
     @PostMapping("/{id}/download")
-    public ResponseEntity<Void> incrementDownloads(@PathVariable Long id) {
+    public ResponseEntity<Void> incrementDownloads(@PathVariable Integer id) {
         return noteRepository.findById(id).map(note -> {
             note.setDownloadsCount(note.getDownloadsCount() + 1);
             note.setFileType(note.getFileType()); // Keep dirty check
diff --git a/backend/src/main/java/com/rit/portal/entity/CommunityAnswer.java b/backend/src/main/java/com/rit/portal/entity/CommunityAnswer.java
new file mode 100644
index 0000000..2c49cad
--- /dev/null
+++ b/backend/src/main/java/com/rit/portal/entity/CommunityAnswer.java
@@ -0,0 +1,40 @@
+package com.rit.portal.entity;
+
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import jakarta.persistence.*;
+import lombok.*;
+import java.time.LocalDateTime;
+
+@Entity
+@Table(name = "community_answers")
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class CommunityAnswer {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Integer id;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "question_id", nullable = false)
+    @JsonIgnore
+    private CommunityQuestion question;
+
+    @Column(nullable = false, columnDefinition = "TEXT")
+    private String body;
+
+    @Column(nullable = false)
+    private String author;
+
+    @Column(name = "upvotes")
+    private Integer upvotes = 0;
+
+    @Column(name = "is_accepted")
+    private Boolean isAccepted = false;
+
+    @Column(name = "created_at")
+    private LocalDateTime createdAt = LocalDateTime.now();
+}
diff --git a/backend/src/main/java/com/rit/portal/entity/CommunityQuestion.java b/backend/src/main/java/com/rit/portal/entity/CommunityQuestion.java
new file mode 100644
index 0000000..0bf8012
--- /dev/null
+++ b/backend/src/main/java/com/rit/portal/entity/CommunityQuestion.java
@@ -0,0 +1,46 @@
+package com.rit.portal.entity;
+
+import jakarta.persistence.*;
+import lombok.*;
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+@Entity
+@Table(name = "community_questions")
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class CommunityQuestion {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Integer id;
+
+    @Column(nullable = false)
+    private String title;
+
+    @Column(nullable = false, columnDefinition = "TEXT")
+    private String body;
+
+    @Column(nullable = false)
+    private String author;
+
+    @Column(name = "upvotes")
+    private Integer upvotes = 0;
+
+    @Column(name = "tags", columnDefinition = "text[]")
+    private List<String> tags = new ArrayList<>();
+
+    @Column(name = "is_answered")
+    private Boolean isAnswered = false;
+
+    @Column(name = "created_at")
+    private LocalDateTime createdAt = LocalDateTime.now();
+
+    @OneToMany(mappedBy = "question", cascade = CascadeType.ALL, fetch = FetchType.EAGER)
+    @Builder.Default
+    private List<CommunityAnswer> answers = new ArrayList<>();
+}
diff --git a/backend/src/main/java/com/rit/portal/entity/NotePyq.java b/backend/src/main/java/com/rit/portal/entity/NotePyq.java
index d71892b..9fb586a 100644
--- a/backend/src/main/java/com/rit/portal/entity/NotePyq.java
+++ b/backend/src/main/java/com/rit/portal/entity/NotePyq.java
@@ -15,7 +15,7 @@ public class NotePyq {
 
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long id;
+    private Integer id;
 
     @Column(nullable = false)
     private String title;
diff --git a/backend/src/main/java/com/rit/portal/repository/CommunityAnswerRepository.java b/backend/src/main/java/com/rit/portal/repository/CommunityAnswerRepository.java
new file mode 100644
index 0000000..302685f
--- /dev/null
+++ b/backend/src/main/java/com/rit/portal/repository/CommunityAnswerRepository.java
@@ -0,0 +1,9 @@
+package com.rit.portal.repository;
+
+import com.rit.portal.entity.CommunityAnswer;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface CommunityAnswerRepository extends JpaRepository<CommunityAnswer, Integer> {
+}
diff --git a/backend/src/main/java/com/rit/portal/repository/CommunityQuestionRepository.java b/backend/src/main/java/com/rit/portal/repository/CommunityQuestionRepository.java
new file mode 100644
index 0000000..72dd96f
--- /dev/null
+++ b/backend/src/main/java/com/rit/portal/repository/CommunityQuestionRepository.java
@@ -0,0 +1,9 @@
+package com.rit.portal.repository;
+
+import com.rit.portal.entity.CommunityQuestion;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface CommunityQuestionRepository extends JpaRepository<CommunityQuestion, Integer> {
+}
diff --git a/backend/src/main/java/com/rit/portal/repository/NotePyqRepository.java b/backend/src/main/java/com/rit/portal/repository/NotePyqRepository.java
index 6a9fd1d..c14e7fd 100644
--- a/backend/src/main/java/com/rit/portal/repository/NotePyqRepository.java
+++ b/backend/src/main/java/com/rit/portal/repository/NotePyqRepository.java
@@ -6,7 +6,7 @@ import org.springframework.stereotype.Repository;
 import java.util.List;
 
 @Repository
-public interface NotePyqRepository extends JpaRepository<NotePyq, Long> {
+public interface NotePyqRepository extends JpaRepository<NotePyq, Integer> {
     List<NotePyq> findBySemester(Integer semester);
     List<NotePyq> findByDepartment(String department);
     List<NotePyq> findByFileType(String fileType);
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index c24917f..8dddc35 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -1,7 +1,7 @@
 # ─── DATABASE CONNECTION CONFIGURATION ───
-spring.datasource.url=jdbc:postgresql://localhost:5432/rit_freshers_hub?sslmode=disable
+spring.datasource.url=jdbc:postgresql://localhost:5433/rit_freshers_hub?sslmode=disable
 spring.datasource.username=postgres
-spring.datasource.password=Amudiesh22@.
+spring.datasource.password=Devesh@54
 
 # ─── JPA / HIBERNATE SETTINGS ───
 spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect
diff --git a/package-lock.json b/package-lock.json
index 817e569..c2aab0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -340,9 +340,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -360,9 +357,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -380,9 +374,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -400,9 +391,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -420,9 +408,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -440,9 +425,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -460,9 +442,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -480,9 +459,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1605,9 +1581,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1625,9 +1598,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1645,9 +1615,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1665,9 +1632,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1685,9 +1649,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1705,9 +1666,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1959,9 +1917,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1983,9 +1938,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -2007,9 +1959,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -2031,9 +1980,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -2206,9 +2152,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2226,9 +2169,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2246,9 +2186,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2266,9 +2203,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3211,9 +3145,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3235,9 +3166,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3259,9 +3187,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3283,9 +3208,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index bcfc482..4705b55 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -1,19 +1,48 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   MessageCircle, Heart, TrendingUp, ThumbsUp, Send,
-  Shield, Lock, Smile, ChevronRight, Search, Plus
+  Shield, Lock, Smile, ChevronRight, Search, Plus, User
 } from 'lucide-react';
 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 { formatDate } from '@/lib/utils';
 
 type Tab = 'qa' | 'confession';
 
 const TRENDING_TAGS = ['hostel', 'academics', 'clubs', 'campus', 'canteen', 'sports', 'placement', 'library'];
 
+const AVATARS: Record<string, string> = {
+  'Priya S.': 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=120&h=120&q=80',
+  'Ravi K.': 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=120&h=120&q=80',
+  'Arun M.': 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=120&h=120&q=80',
+};
+
+const getAvatar = (author: string) => {
+  return AVATARS[author] || `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(author)}`;
+};
+
+const getRelativeTime = (dateString: string) => {
+  const now = new Date('2026-07-22T11:56:24+05:30').getTime(); // Current local time from metadata
+  const past = new Date(dateString).getTime();
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const elapsed = now - past;
+
+  if (elapsed < msPerMinute) {
+    return 'just now';
+  } else if (elapsed < msPerHour) {
+    return Math.round(elapsed / msPerMinute) + 'm ago';
+  } else if (elapsed < msPerDay) {
+    return Math.round(elapsed / msPerHour) + 'h ago';
+  } else {
+    const days = Math.round(elapsed / msPerDay);
+    return days === 1 ? 'yesterday' : `${days}d ago`;
+  }
+};
+
 export default function Community() {
   const [activeTab, setActiveTab] = useState<Tab>('qa');
   const [confessionText, setConfessionText] = useState('');
@@ -21,10 +50,30 @@ export default function Community() {
   const [confessionPosted, setConfessionPosted] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
+  const [questions, setQuestions] = useState<any[]>(QUESTIONS_DATA);
 
-  const filteredQuestions = QUESTIONS_DATA.filter((q) =>
+  const fetchQuestions = async () => {
+    try {
+      const response = await fetch('http://localhost:8080/api/questions');
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.length > 0) {
+          // Sort newest first
+          setQuestions(data.reverse());
+        }
+      }
+    } catch (error) {
+      console.log('Backend not available. Falling back to local static questions data.', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchQuestions();
+  }, []);
+
+  const filteredQuestions = questions.filter((q) =>
     q.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    q.tags.some((t) => t.includes(searchQuery.toLowerCase()))
+    (q.tags && q.tags.some((t: string) => t.toLowerCase().includes(searchQuery.toLowerCase())))
   );
 
   const handleConfess = () => {
@@ -34,34 +83,81 @@ export default function Community() {
     setTimeout(() => setConfessionPosted(false), 3000);
   };
 
-  const toggleLike = (id: string) => {
+  const toggleLike = async (id: string) => {
     setLikedIds((prev) => {
       const next = new Set(prev);
       if (next.has(id)) next.delete(id); else next.add(id);
       return next;
     });
+
+    try {
+      await fetch(`http://localhost:8080/api/questions/${id}/upvote`, {
+        method: 'POST'
+      });
+      fetchQuestions();
+    } catch (error) {
+      console.log('Backend not available for upvote sync.', error);
+    }
+  };
+
+  const handlePostQuestion = async () => {
+    if (!questionText.trim()) return;
+    
+    const newQuestion = {
+      title: questionText.split('\n')[0].substring(0, 100) || "Q&A Question",
+      body: questionText,
+      author: 'Priya S.',
+      tags: ['fresher', 'general'],
+      upvotes: 0,
+      isAnswered: false,
+      createdAt: new Date().toISOString(),
+      answers: []
+    };
+
+    try {
+      const response = await fetch('http://localhost:8080/api/questions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: newQuestion.title,
+          body: newQuestion.body,
+          author: newQuestion.author,
+          tags: newQuestion.tags
+        })
+      });
+
+      if (response.ok) {
+        const saved = await response.json();
+        setQuestions(prev => [saved, ...prev]);
+        setQuestionText('');
+      } else {
+        setQuestions(prev => [{ ...newQuestion, id: String(Date.now()) }, ...prev]);
+        setQuestionText('');
+      }
+    } catch (error) {
+      console.error("Error saving question:", error);
+      setQuestions(prev => [{ ...newQuestion, id: String(Date.now()) }, ...prev]);
+      setQuestionText('');
+    }
   };
 
   return (
-    <div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
+    <div className="min-h-screen" style={{ backgroundColor: '#FAFBFD' }}>
       {/* Header */}
-      <div className="bg-white border-b border-[#E5E7EB] py-10">
+      <div className="bg-white border-b border-slate-100 py-12">
         <div className="container-custom">
-          <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
-            RIT{' '}
-            <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
-              Community
-            </span>
+          <h1 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+            RIT Community
           </h1>
-          <p className="text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>
+          <p className="text-slate-500 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
             Ask questions, share confessions, and connect with fellow RIT students.
           </p>
         </div>
       </div>
 
-      <div className="container-custom py-8">
+      <div className="container-custom py-10">
         {/* Tabs */}
-        <div className="flex gap-2 bg-white rounded-2xl p-2 border border-[#E5E7EB] mb-8 w-fit" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
+        <div className="flex gap-1.5 bg-slate-100 rounded-xl p-1.5 border border-slate-200/40 mb-8 w-fit">
           {[
             { id: 'qa' as Tab, label: 'Freshers Q&A', icon: MessageCircle },
             { id: 'confession' as Tab, label: 'Confessions', icon: Heart },
@@ -69,19 +165,18 @@ export default function Community() {
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className="relative flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium transition-all"
-              style={{ fontFamily: 'Poppins, sans-serif', color: activeTab === tab.id ? 'white' : '#475569' }}
+              className="relative flex items-center gap-2 px-4 py-2 rounded-lg text-[13px] font-medium transition-all cursor-pointer"
+              style={{ fontFamily: 'Poppins, sans-serif', color: activeTab === tab.id ? '#ffffff' : '#64748B' }}
             >
               {activeTab === tab.id && (
                 <motion.div
                   layoutId="community-tab"
-                  className="absolute inset-0 rounded-xl"
-                  style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
-                  transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
+                  className="absolute inset-0 rounded-lg bg-slate-950"
+                  transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
                 />
               )}
               <span className="relative z-10 flex items-center gap-2">
-                <tab.icon className="w-4 h-4" />
+                <tab.icon className="w-3.5 h-3.5" />
                 {tab.label}
               </span>
             </button>
@@ -93,33 +188,34 @@ export default function Community() {
           {activeTab === 'qa' && (
             <motion.div
               key="qa"
-              initial={{ opacity: 0, y: 16 }}
+              initial={{ opacity: 0, y: 12 }}
               animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -16 }}
-              transition={{ duration: 0.3 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.25 }}
             >
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 <div className="lg:col-span-2">
                   {/* Ask Question Box */}
-                  <div className="bg-white rounded-2xl border border-[#E5E7EB] p-5 mb-6" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                    <h3 className="text-sm font-semibold text-[#1E293B] mb-3" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3>
+                  <div className="bg-white rounded-xl border border-slate-200/80 p-5 mb-8 shadow-xs">
+                    <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-[#E5E7EB] rounded-xl p-3 text-sm text-[#1E293B] placeholder-[#94A3B8] focus:outline-none focus:border-[#F97316] resize-none transition-colors mb-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-4"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">
-                      <span className="text-xs text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>
+                      <span className="text-[11px] text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
                         Your question will be visible to all students
                       </span>
                       <motion.button
-                        whileHover={{ scale: 1.03 }}
-                        whileTap={{ scale: 0.97 }}
-                        className="flex items-center gap-2 px-4 py-2 rounded-xl text-white text-sm font-semibold"
-                        style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
+                        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"
+                        style={{ fontFamily: 'Poppins, sans-serif' }}
                       >
                         <Plus className="w-4 h-4" />
                         Post Question
@@ -128,91 +224,121 @@ export default function Community() {
                   </div>
 
                   {/* Search */}
-                  <div className="relative mb-5">
-                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94A3B8]" />
+                  <div className="relative mb-6">
+                    <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-[#E5E7EB] bg-white text-sm text-[#1E293B] placeholder-[#94A3B8] focus:outline-none focus:border-[#F97316] transition-colors"
+                      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"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                   </div>
 
                   {/* Questions */}
                   <StaggerContainer className="flex flex-col gap-4">
-                    {filteredQuestions.map((q) => (
-                      <StaggerItem key={q.id}>
-                        <motion.div
-                          whileHover={{ y: -2 }}
-                          className="bg-white rounded-2xl border border-[#E5E7EB] p-5"
-                          style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
-                        >
-                          <div className="flex items-start gap-4">
-                            {/* Votes */}
-                            <div className="flex flex-col items-center gap-1 shrink-0">
-                              <button
-                                onClick={() => toggleLike(q.id)}
-                                className="w-8 h-8 rounded-lg flex items-center justify-center transition-all"
-                                style={{ backgroundColor: likedIds.has(q.id) ? '#FFF7ED' : '#F8FAFC' }}
-                              >
-                                <ThumbsUp className="w-4 h-4" style={{ color: likedIds.has(q.id) ? '#F97316' : '#94A3B8' }} />
-                              </button>
-                              <span className="text-xs font-semibold text-[#475569]">{q.votes + (likedIds.has(q.id) ? 1 : 0)}</span>
-                            </div>
+                    {filteredQuestions.map((q, idx) => {
+                      const isFeatured = idx === 0 && searchQuery === '';
+                      return (
+                        <StaggerItem key={q.id}>
+                          <motion.div
+                            whileHover={{ y: -1 }}
+                            className={`bg-white rounded-xl border p-5 transition-all shadow-xs ${
+                              isFeatured
+                                ? 'border-l-4 border-l-slate-900 border-slate-200'
+                                : 'border-slate-200/80'
+                            }`}
+                          >
+                            <div className="flex items-start gap-4">
+                              {/* Avatar */}
+                              <img
+                                src={getAvatar(q.author)}
+                                alt={q.author}
+                                className="w-9 h-9 rounded-lg object-cover bg-slate-100 border border-slate-100 shrink-0"
+                              />
 
-                            <div className="flex-1">
-                              <h3 className="text-sm font-semibold text-[#1E293B] mb-1.5 hover:text-[#F97316] cursor-pointer transition-colors"
-                                style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                {q.title}
-                              </h3>
-                              <p className="text-xs text-[#94A3B8] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{q.body}</p>
-                              <div className="flex items-center justify-between flex-wrap gap-2">
-                                <div className="flex flex-wrap gap-1.5">
-                                  {q.tags.map((tag) => (
-                                    <span
-                                      key={tag}
-                                      className="px-2 py-0.5 rounded-full text-[10px] font-medium bg-[#F8FAFC] text-[#94A3B8] border border-[#E5E7EB]"
-                                      style={{ fontFamily: 'Inter, sans-serif' }}
-                                    >
-                                      #{tag}
-                                    </span>
-                                  ))}
-                                </div>
-                                <div className="flex items-center gap-3 text-xs text-[#94A3B8]">
-                                  <span className="flex items-center gap-1">
-                                    <MessageCircle className="w-3.5 h-3.5" />
-                                    {q.answers} answers
-                                  </span>
-                                  {q.isAnswered && (
-                                    <span className="px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 text-[10px] font-semibold">✓ Answered</span>
+                              <div className="flex-1 min-w-0">
+                                {/* Header / Meta */}
+                                <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                                  <span className="text-xs font-semibold text-slate-800">{q.author}</span>
+                                  <span className="text-[10px] text-slate-300">•</span>
+                                  <span className="text-[11px] text-slate-400">{getRelativeTime(q.createdAt)}</span>
+                                  {isFeatured && (
+                                    <span className="ml-auto px-2 py-0.5 rounded text-[10px] font-bold bg-slate-900 text-white tracking-wider uppercase">★ Popular</span>
                                   )}
                                 </div>
+
+                                <h3 className={`font-bold text-slate-950 mb-1 hover:text-slate-700 cursor-pointer transition-colors tracking-tight ${
+                                  isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
+                                }`}
+                                  style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                  {q.title}
+                                </h3>
+                                <p className="text-[13px] text-slate-600 mb-4 leading-relaxed line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>
+                                  {q.body}
+                                </p>
+
+                                <div className="flex items-center justify-between flex-wrap gap-3 pt-1 border-t border-slate-100">
+                                  <div className="flex flex-wrap gap-1.5">
+                                    {q.tags.map((tag) => (
+                                      <span
+                                        key={tag}
+                                        className="px-2.5 py-0.5 rounded-lg text-[10px] font-medium bg-slate-100 text-slate-600"
+                                        style={{ fontFamily: 'Inter, sans-serif' }}
+                                      >
+                                        #{tag}
+                                      </span>
+                                    ))}
+                                  </div>
+
+                                  <div className="flex items-center gap-4 text-[11px] text-slate-400">
+                                    <span className="flex items-center gap-1.5">
+                                      <MessageCircle className="w-3.5 h-3.5 text-slate-400" />
+                                      {q.answers} answers
+                                    </span>
+                                    {q.isAnswered && (
+                                      <span className="px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 font-semibold text-[10px]">✓ Answered</span>
+                                    )}
+
+                                    {/* Like/Vote Button inside bottom bar */}
+                                    <button
+                                      onClick={() => toggleLike(q.id)}
+                                      className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg transition-all cursor-pointer ${
+                                        likedIds.has(q.id)
+                                          ? 'bg-slate-900 text-white font-semibold'
+                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-800'
+                                      }`}
+                                    >
+                                      <ThumbsUp className="w-3 h-3" />
+                                      <span>{q.votes + (likedIds.has(q.id) ? 1 : 0)}</span>
+                                    </button>
+                                  </div>
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </motion.div>
-                      </StaggerItem>
-                    ))}
+                          </motion.div>
+                        </StaggerItem>
+                      );
+                    })}
                   </StaggerContainer>
                 </div>
 
                 {/* Sidebar */}
-                <div className="flex flex-col gap-5">
+                <div className="flex flex-col gap-6">
                   {/* Trending */}
                   <AnimatedContainer direction="right" delay={0.1}>
-                    <div className="bg-white rounded-2xl border border-[#E5E7EB] p-5" 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 shadow-xs">
                       <div className="flex items-center gap-2 mb-4">
-                        <TrendingUp className="w-4.5 h-4.5 text-[#F97316]" />
-                        <h3 className="text-sm font-semibold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Trending Topics</h3>
+                        <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>
                       </div>
-                      <div className="flex flex-wrap gap-2">
+                      <div className="flex flex-wrap gap-1.5">
                         {TRENDING_TAGS.map((tag) => (
                           <button
                             key={tag}
                             onClick={() => setSearchQuery(tag)}
-                            className="px-3 py-1.5 rounded-full text-xs font-medium bg-[#FFF7ED] text-[#F97316] hover:bg-[#F97316] hover:text-white transition-all border border-[#FED7AA]"
+                            className="px-2.5 py-1.5 rounded-lg text-[11px] font-medium bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-all border-0 cursor-pointer"
                             style={{ fontFamily: 'Inter, sans-serif' }}
                           >
                             #{tag}
@@ -224,15 +350,15 @@ export default function Community() {
 
                   {/* Stats */}
                   <AnimatedContainer direction="right" delay={0.2}>
-                    <div className="bg-white rounded-2xl border border-[#E5E7EB] p-5" 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 shadow-xs">
                       {[
                         { label: 'Total Questions', value: '124' },
                         { label: 'Answered', value: '98%' },
                         { label: 'Active Students', value: '340+' },
                       ].map((stat, i) => (
-                        <div key={i} className={`flex justify-between py-2.5 ${i < 2 ? 'border-b border-[#E5E7EB]' : ''}`}>
-                          <span className="text-xs text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>{stat.label}</span>
-                          <span className="text-xs font-bold text-[#F97316]" style={{ fontFamily: 'Poppins, sans-serif' }}>{stat.value}</span>
+                        <div key={i} className={`flex justify-between py-2.5 ${i < 2 ? '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>
                       ))}
                     </div>
@@ -246,25 +372,25 @@ export default function Community() {
           {activeTab === 'confession' && (
             <motion.div
               key="confession"
-              initial={{ opacity: 0, y: 16 }}
+              initial={{ opacity: 0, y: 12 }}
               animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -16 }}
-              transition={{ duration: 0.3 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.25 }}
             >
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 <div className="lg:col-span-2">
                   {/* Post confession */}
                   <div
-                    className="rounded-3xl p-6 mb-8 border"
-                    style={{ background: 'linear-gradient(135deg, #1E293B, #334155)', borderColor: 'rgba(255,255,255,0.1)' }}
+                    className="rounded-xl p-5 mb-6 border"
+                    style={{ background: '#0F172A', borderColor: 'rgba(255,255,255,0.05)' }}
                   >
                     <div className="flex items-center gap-3 mb-4">
-                      <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: 'rgba(249,115,22,0.2)' }}>
-                        <Lock className="w-5 h-5 text-[#F97316]" />
+                      <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-slate-800">
+                        <Lock className="w-4.5 h-4.5 text-slate-300" />
                       </div>
                       <div>
-                        <h3 className="text-white font-semibold text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>Share Anonymously</h3>
-                        <p className="text-slate-400 text-xs">Your identity is never revealed</p>
+                        <h3 className="text-white font-semibold text-sm tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Share Anonymously</h3>
+                        <p className="text-slate-400 text-[11px]">Your identity is never revealed</p>
                       </div>
                     </div>
 
@@ -273,29 +399,26 @@ 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-4 text-sm placeholder-slate-500 focus:outline-none resize-none mb-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"
                       style={{
                         fontFamily: 'Inter, sans-serif',
-                        backgroundColor: 'rgba(255,255,255,0.06)',
-                        border: '1px solid rgba(255,255,255,0.1)',
-                        color: 'white',
                       }}
                     />
 
-                    <div className="flex items-center gap-3 p-3 rounded-xl mb-4" style={{ backgroundColor: 'rgba(249,115,22,0.1)', border: '1px solid rgba(249,115,22,0.2)' }}>
-                      <Shield className="w-4 h-4 text-[#F97316] shrink-0" />
-                      <span className="text-xs text-slate-400" 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">
+                      <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.
                       </span>
                     </div>
 
                     <div className="flex items-center gap-3">
                       <motion.button
-                        whileHover={{ scale: 1.03 }}
-                        whileTap={{ scale: 0.97 }}
+                        whileHover={{ scale: 1.01 }}
+                        whileTap={{ scale: 0.99 }}
                         onClick={handleConfess}
-                        className="flex items-center gap-2 px-6 py-2.5 rounded-xl text-white text-sm font-semibold"
-                        style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
+                        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"
+                        style={{ fontFamily: 'Poppins, sans-serif' }}
                       >
                         <Smile className="w-4 h-4" />
                         Post Anonymously
@@ -322,39 +445,40 @@ export default function Community() {
                     {CONFESSIONS_DATA.map((conf) => (
                       <StaggerItem key={conf.id}>
                         <motion.div
-                          whileHover={{ y: -2 }}
-                          className="bg-white rounded-2xl border border-[#E5E7EB] p-5"
-                          style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
+                          whileHover={{ y: -1 }}
+                          className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-xs"
                         >
                           <div className="flex items-start justify-between mb-3">
-                            <div className="flex items-center gap-2">
-                              <div className="w-8 h-8 rounded-xl flex items-center justify-center bg-[#FFF7ED]">
-                                <Shield className="w-4 h-4 text-[#F97316]" />
+                            <div className="flex items-center gap-2.5">
+                              <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-slate-50 border border-slate-100">
+                                <Shield className="w-4 h-4 text-slate-500" />
                               </div>
                               <div>
-                                <span className="text-xs font-semibold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
-                                <p className="text-[10px] text-[#94A3B8]">{formatDate(conf.createdAt)}</p>
+                                <span className="text-xs font-semibold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
+                                <p className="text-[10px] text-slate-400">{getRelativeTime(conf.createdAt)}</p>
                               </div>
                             </div>
                             {conf.category && (
-                              <span className="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-[#FFF7ED] text-[#F97316] border border-[#FED7AA]" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                              <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-slate-50 text-slate-650 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
                                 {conf.category}
                               </span>
                             )}
                           </div>
-                          <p className="text-sm text-[#475569] leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
+                          <p className="text-[13px] text-slate-700 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
                           <div className="flex items-center justify-between">
                             <button
                               onClick={() => toggleLike(conf.id)}
-                              className="flex items-center gap-2 px-3 py-1.5 rounded-xl transition-all"
-                              style={{ backgroundColor: likedIds.has(conf.id) ? '#FFF7ED' : '#F8FAFC' }}
+                              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all cursor-pointer ${
+                                likedIds.has(conf.id)
+                                  ? 'bg-slate-900 text-white'
+                                  : 'bg-slate-50 hover:bg-slate-100 text-slate-500'
+                              }`}
                             >
                               <Heart
                                 className="w-3.5 h-3.5"
-                                style={{ color: likedIds.has(conf.id) ? '#F97316' : '#94A3B8' }}
-                                fill={likedIds.has(conf.id) ? '#F97316' : 'none'}
+                                fill={likedIds.has(conf.id) ? '#ffffff' : 'none'}
                               />
-                              <span className="text-xs text-[#94A3B8]">{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
+                              <span className="text-xs">{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
                             </button>
                           </div>
                         </motion.div>
@@ -365,9 +489,9 @@ export default function Community() {
 
                 {/* Sidebar */}
                 <AnimatedContainer direction="right" delay={0.15}>
-                  <div className="bg-white rounded-2xl border border-[#E5E7EB] p-5" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                    <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-[#F97316]" />
+                  <div className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-xs">
+                    <h3 className="text-sm font-semibold text-slate-850 mb-4 flex items-center gap-2" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                      <Shield className="w-4 h-4 text-slate-500" />
                       Community Rules
                     </h3>
                     {[
@@ -377,9 +501,9 @@ export default function Community() {
                       'Keep it relevant to campus life',
                       'Confessions are 100% anonymous',
                     ].map((rule, i) => (
-                      <div key={i} className="flex items-start gap-2.5 py-2.5 border-b border-[#E5E7EB] last:border-0">
-                        <ChevronRight className="w-3.5 h-3.5 text-[#F97316] mt-0.5 shrink-0" />
-                        <span className="text-xs text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>{rule}</span>
+                      <div key={i} className="flex items-start gap-2.5 py-2.5 border-b border-slate-100 last:border-0">
+                        <ChevronRight className="w-3.5 h-3.5 text-slate-400 mt-0.5 shrink-0" />
+                        <span className="text-xs text-slate-650" style={{ fontFamily: 'Inter, sans-serif' }}>{rule}</span>
                       </div>
                     ))}
                   </div>
diff --git a/telegram-bot/README.md b/telegram-bot/README.md
new file mode 100644
index 0000000..a85e97d
--- /dev/null
+++ b/telegram-bot/README.md
@@ -0,0 +1,50 @@
+# 🤖 RIT Freshers Hub - Telegram Q&A Intermediary Bot
+
+This is a lightweight Python microservice that acts as an intermediary between the student Q&A forum and registered helper accounts (Seniors/Staff) on Telegram.
+
+---
+
+## 🚀 How It Works
+1. **Student submits a question** on the web portal.
+2. **Spring Boot Backend** saves the question and triggers an HTTP POST request to the Python bot: `/send_question`.
+3. **Telegram Bot** broadcasts the question with a `force_reply` prompt to all configured helper accounts.
+4. **Helpers reply** directly to the Telegram message.
+5. **Telegram Bot** captures the reply, maps it back to the original question ID, and pushes the answer back to the Spring Boot REST endpoint (`POST /api/questions/{id}/answers`).
+
+---
+
+## 🛠️ Installation & Setup
+
+### 1. Install Dependencies
+Run this in the `telegram-bot/` directory:
+```bash
+pip install -r requirements.txt
+```
+
+### 2. Configure the Bot
+Update [config.json](config.json):
+```json
+{
+  "telegram_bot_token": "YOUR_TELEGRAM_BOT_TOKEN",
+  "helper_chat_ids": [
+    971749136
+  ],
+  "spring_backend_url": "http://localhost:8080"
+}
+```
+
+#### How to find your Telegram Chat ID:
+1. Search for the bot username on Telegram and click **Start** (or send `/start`).
+2. The bot will automatically reply with your exact **Chat ID**.
+3. Add this ID to the `helper_chat_ids` array in `config.json`. The bot dynamically reloads configuration changes on the fly!
+
+---
+
+## 🏃 Running the Bot
+
+Start the server:
+```bash
+python telegram_bot.py
+```
+* **Bot Server Port**: `8082`
+* **Local Mappings Store**: `bot_mappings.db` (SQLite) is created automatically to persist message mappings so that replies continue to map to the correct questions even if the bot is restarted.
diff --git a/telegram-bot/config.json b/telegram-bot/config.json
new file mode 100644
index 0000000..9f2183a
--- /dev/null
+++ b/telegram-bot/config.json
@@ -0,0 +1,5 @@
+{
+  "telegram_bot_token": "8859374355:AAH0dhwstkTBhRerRTjzmb2RG2fjPbigzvo",
+  "helper_chat_ids": [971749136],
+  "spring_backend_url": "http://localhost:8080"
+}
diff --git a/telegram-bot/requirements.txt b/telegram-bot/requirements.txt
new file mode 100644
index 0000000..c85c38d
--- /dev/null
+++ b/telegram-bot/requirements.txt
@@ -0,0 +1,4 @@
+requests>=2.28.0
+fastapi>=0.95.0
+uvicorn>=0.20.0
+pydantic>=2.0
diff --git a/telegram-bot/telegram_bot.py b/telegram-bot/telegram_bot.py
new file mode 100644
index 0000000..7c9e39d
--- /dev/null
+++ b/telegram-bot/telegram_bot.py
@@ -0,0 +1,238 @@
+import os
+import json
+import sqlite3
+import threading
+import time
+import logging
+import requests
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+import uvicorn
+
+# Configure Logging
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(message)s",
+    handlers=[
+        logging.StreamHandler()
+    ]
+)
+
+# Load Configuration
+CONFIG_PATH = os.path.join(os.path.dirname(__file__), "config.json")
+
+def load_config():
+    if not os.path.exists(CONFIG_PATH):
+        default_config = {
+            "telegram_bot_token": "8859374355:AAH0dhwstkTBhRerRTjzmb2RG2fjPbigzvo",
+            "helper_chat_ids": [],
+            "spring_backend_url": "http://localhost:8080"
+        }
+        with open(CONFIG_PATH, "w") as f:
+            json.dump(default_config, f, indent=2)
+        return default_config
+    
+    with open(CONFIG_PATH, "r") as f:
+        return json.load(f)
+
+config = load_config()
+BOT_TOKEN = config.get("telegram_bot_token")
+BACKEND_URL = config.get("spring_backend_url")
+
+# Database Setup
+DB_PATH = os.path.join(os.path.dirname(__file__), "bot_mappings.db")
+
+def init_db():
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS question_mappings (
+            chat_id INTEGER,
+            message_id INTEGER,
+            question_id INTEGER,
+            PRIMARY KEY (chat_id, message_id)
+        )
+    """)
+    conn.commit()
+    conn.close()
+
+init_db()
+
+def save_mapping(chat_id: int, message_id: int, question_id: int):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute(
+        "INSERT OR REPLACE INTO question_mappings (chat_id, message_id, question_id) VALUES (?, ?, ?)",
+        (chat_id, message_id, question_id)
+    )
+    conn.commit()
+    conn.close()
+
+def get_question_id(chat_id: int, message_id: int) -> int:
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute(
+        "SELECT question_id FROM question_mappings WHERE chat_id = ? AND message_id = ?",
+        (chat_id, message_id)
+    )
+    row = cursor.fetchone()
+    conn.close()
+    return row[0] if row else None
+
+# Telegram API Helpers
+def send_telegram_message(chat_id: int, text: str, reply_to_message_id: int = None) -> dict:
+    url = f"https://api.telegram.org/bot{BOT_TOKEN}/sendMessage"
+    payload = {
+        "chat_id": chat_id,
+        "text": text,
+        "parse_mode": "Markdown",
+        "reply_markup": {"force_reply": True, "selective": True}
+    }
+    if reply_to_message_id:
+        payload["reply_to_message_id"] = reply_to_message_id
+        
+    try:
+        response = requests.post(url, json=payload, timeout=10)
+        return response.json()
+    except Exception as e:
+        logging.error(f"Error sending Telegram message to {chat_id}: {e}")
+        return {}
+
+# Background Long Polling for Telegram Updates
+def telegram_polling_thread():
+    logging.info("Starting Telegram long polling thread...")
+    offset = 0
+    while True:
+        # Re-load config dynamic updates
+        current_config = load_config()
+        helpers = current_config.get("helper_chat_ids", [])
+        backend_url = current_config.get("spring_backend_url")
+        bot_token = current_config.get("telegram_bot_token")
+
+        url = f"https://api.telegram.org/bot{bot_token}/getUpdates"
+        params = {"offset": offset, "timeout": 20}
+        try:
+            response = requests.get(url, params=params, timeout=25)
+            data = response.json()
+            if not data.get("ok"):
+                logging.error(f"Telegram API getUpdates error: {data}")
+                time.sleep(5)
+                continue
+                
+            updates = data.get("result", [])
+            for update in updates:
+                offset = update["update_id"] + 1
+                
+                message = update.get("message")
+                if not message:
+                    continue
+                    
+                chat_id = message["chat"]["id"]
+                text = message.get("text", "").strip()
+                
+                # Help helper find their Chat ID
+                if text == "/start":
+                    welcome_text = (
+                        f"👋 *Welcome to RIT Freshers Hub Intermediary Bot!*\n\n"
+                        f"To configure this helper, register this Chat ID in the `config.json` file:\n"
+                        f"`{chat_id}`\n\n"
+                        f"Once registered, you will receive new student questions here and can reply directly to them."
+                    )
+                    send_telegram_message(chat_id, welcome_text)
+                    continue
+
+                # Process reply messages
+                reply_to = message.get("reply_to_message")
+                if reply_to:
+                    # Verify if helper is authorized
+                    if chat_id not in helpers:
+                        logging.warning(f"Unauthorized message from chat ID {chat_id}")
+                        send_telegram_message(chat_id, "⚠️ You are not registered as an authorized helper in config.json.")
+                        continue
+
+                    original_message_id = reply_to["message_id"]
+                    question_id = get_question_id(chat_id, original_message_id)
+                    
+                    if question_id:
+                        # Extract author name
+                        first_name = message["from"].get("first_name", "")
+                        last_name = message["from"].get("last_name", "")
+                        author_name = f"{first_name} {last_name}".strip() or "Senior Helper"
+                        
+                        logging.info(f"Submitting answer for question {question_id} by helper '{author_name}'")
+                        
+                        # Post answer to Spring Boot backend
+                        backend_endpoint = f"{backend_url}/api/questions/{question_id}/answers"
+                        answer_payload = {
+                            "body": text,
+                            "author": author_name
+                        }
+                        try:
+                            res = requests.post(backend_endpoint, json=answer_payload, timeout=10)
+                            if res.status_code == 200 or res.status_code == 201:
+                                send_telegram_message(chat_id, "✅ *Answer posted successfully to the Q&A board!*", reply_to_message_id=message["message_id"])
+                            else:
+                                send_telegram_message(chat_id, f"❌ *Failed to post answer to backend.* (Status: {res.status_code})\nResponse: {res.text[:100]}", reply_to_message_id=message["message_id"])
+                        except Exception as e:
+                            logging.error(f"Error calling backend endpoint {backend_endpoint}: {e}")
+                            send_telegram_message(chat_id, f"❌ *Connection error to backend.* ({e})", reply_to_message_id=message["message_id"])
+                    else:
+                        send_telegram_message(chat_id, "❓ This message does not correspond to any active question or the mapping has expired.", reply_to_message_id=message["message_id"])
+                        
+        except Exception as e:
+            logging.error(f"Error in long polling loop: {e}")
+            time.sleep(5)
+
+# Start Polling Thread
+polling_thread = threading.Thread(target=telegram_polling_thread, daemon=True)
+polling_thread.start()
+
+# FastAPI Web Server Setup
+app = FastAPI(title="RIT Telegram Intermediary Bot HTTP Server")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class QuestionPayload(BaseModel):
+    question_id: int
+    title: str
+    body: str
+    author: str
+
+@app.post("/send_question")
+def send_question(payload: QuestionPayload):
+    current_config = load_config()
+    helpers = current_config.get("helper_chat_ids", [])
+    
+    if not helpers:
+        logging.warning("No helper chat IDs registered in config.json.")
+        return {"status": "ignored", "reason": "No helpers registered"}
+        
+    logging.info(f"Broadcasting question {payload.question_id} to {len(helpers)} helpers.")
+    
+    formatted_msg = (
+        f"❓ *New Student Question!*\n\n"
+        f"👤 *Author:* {payload.author}\n"
+        f"📌 *Topic:* {payload.title}\n"
+        f"📝 *Details:* {payload.body}\n\n"
+        f"💬 *Reply to this message directly to submit your answer.*"
+    )
+    
+    sent_count = 0
+    for chat_id in helpers:
+        res = send_telegram_message(chat_id, formatted_msg)
+        if res.get("ok"):
+            message_id = res["result"]["message_id"]
+            save_mapping(chat_id, message_id, payload.question_id)
+            sent_count += 1
+            
+    return {"status": "success", "delivered_to": sent_count}
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8082)

From 61b59a826345cbc99096bce8f19e49ae7c21b9c4 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 13:24:38 +0530
Subject: [PATCH 02/24] feat: add author name input and allow wildcard CORS
 origins

---
 .../java/com/rit/portal/config/WebConfig.java |  2 +-
 src/pages/Community/Community.tsx             | 33 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/backend/src/main/java/com/rit/portal/config/WebConfig.java b/backend/src/main/java/com/rit/portal/config/WebConfig.java
index 680bdc3..3f5ef5f 100644
--- a/backend/src/main/java/com/rit/portal/config/WebConfig.java
+++ b/backend/src/main/java/com/rit/portal/config/WebConfig.java
@@ -10,7 +10,7 @@ public class WebConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/api/**")
-                .allowedOrigins("http://localhost:5173", "http://localhost:3000")
+                .allowedOriginPatterns("*")
                 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                 .allowedHeaders("*")
                 .allowCredentials(true);
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 4705b55..702e645 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -47,6 +47,7 @@ export default function Community() {
   const [activeTab, setActiveTab] = useState<Tab>('qa');
   const [confessionText, setConfessionText] = useState('');
   const [questionText, setQuestionText] = useState('');
+  const [authorName, setAuthorName] = useState('');
   const [confessionPosted, setConfessionPosted] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
@@ -57,9 +58,12 @@ export default function Community() {
       const response = await fetch('http://localhost:8080/api/questions');
       if (response.ok) {
         const data = await response.json();
-        if (data && data.length > 0) {
-          // Sort newest first
-          setQuestions(data.reverse());
+        if (data) {
+          // Merge database questions with static mock data, matching IDs to prevent duplicates
+          const backendIds = new Set(data.map((q: any) => q.id.toString()));
+          const uniqueMocks = QUESTIONS_DATA.filter(q => !backendIds.has(q.id.toString()));
+          // Sort backend questions newest first, then append mock questions
+          setQuestions([...[...data].reverse(), ...uniqueMocks]);
         }
       }
     } catch (error) {
@@ -103,10 +107,12 @@ export default function Community() {
   const handlePostQuestion = async () => {
     if (!questionText.trim()) return;
     
+    const displayAuthor = authorName.trim() || 'Anonymous';
+    
     const newQuestion = {
       title: questionText.split('\n')[0].substring(0, 100) || "Q&A Question",
       body: questionText,
-      author: 'Priya S.',
+      author: displayAuthor,
       tags: ['fresher', 'general'],
       upvotes: 0,
       isAnswered: false,
@@ -128,16 +134,23 @@ export default function Community() {
 
       if (response.ok) {
         const saved = await response.json();
-        setQuestions(prev => [saved, ...prev]);
+        setQuestions(prev => {
+          // Prepend saved question and filter out duplicate placeholders
+          const filtered = prev.filter(q => q.id.toString() !== saved.id.toString());
+          return [saved, ...filtered];
+        });
         setQuestionText('');
+        setAuthorName('');
       } else {
         setQuestions(prev => [{ ...newQuestion, id: String(Date.now()) }, ...prev]);
         setQuestionText('');
+        setAuthorName('');
       }
     } catch (error) {
       console.error("Error saving question:", error);
       setQuestions(prev => [{ ...newQuestion, id: String(Date.now()) }, ...prev]);
       setQuestionText('');
+      setAuthorName('');
     }
   };
 
@@ -203,7 +216,15 @@ export default function Community() {
                       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-4"
+                      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"
+                      style={{ fontFamily: 'Inter, sans-serif' }}
+                    />
+                    <input
+                      type="text"
+                      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"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">

From df3bb661cbc96031d76cf663a589da42fbdce377 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 13:27:50 +0530
Subject: [PATCH 03/24] fix: resolve NaN and missing answers count in frontend
 UI

---
 src/pages/Community/Community.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 702e645..cb9d9a2 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -75,6 +75,17 @@ export default function Community() {
     fetchQuestions();
   }, []);
 
+  const getAnswersCount = (q: any) => {
+    if (Array.isArray(q.answers)) return q.answers.length;
+    if (typeof q.answers === 'number') return q.answers;
+    return 0;
+  };
+
+  const getVotesCount = (q: any) => {
+    const votesVal = typeof q.upvotes === 'number' ? q.upvotes : (typeof q.votes === 'number' ? q.votes : 0);
+    return votesVal;
+  };
+
   const filteredQuestions = questions.filter((q) =>
     q.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
     (q.tags && q.tags.some((t: string) => t.toLowerCase().includes(searchQuery.toLowerCase())))
@@ -316,7 +327,7 @@ export default function Community() {
                                   <div className="flex items-center gap-4 text-[11px] text-slate-400">
                                     <span className="flex items-center gap-1.5">
                                       <MessageCircle className="w-3.5 h-3.5 text-slate-400" />
-                                      {q.answers} answers
+                                      {getAnswersCount(q)} answers
                                     </span>
                                     {q.isAnswered && (
                                       <span className="px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 font-semibold text-[10px]">✓ Answered</span>
@@ -326,13 +337,13 @@ export default function Community() {
                                     <button
                                       onClick={() => toggleLike(q.id)}
                                       className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg transition-all cursor-pointer ${
-                                        likedIds.has(q.id)
+                                        likedIds.has(q.id.toString())
                                           ? 'bg-slate-900 text-white font-semibold'
                                           : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-800'
                                       }`}
                                     >
                                       <ThumbsUp className="w-3 h-3" />
-                                      <span>{q.votes + (likedIds.has(q.id) ? 1 : 0)}</span>
+                                      <span>{getVotesCount(q) + (likedIds.has(q.id.toString()) ? 1 : 0)}</span>
                                     </button>
                                   </div>
                                 </div>

From 3c1a92ce2a2e9e7c87dd9bab0096b4cc3ae04542 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 13:44:36 +0530
Subject: [PATCH 04/24] fix: switch to feature/freshers-qa and add robust
 fallback and date parsing

---
 src/pages/Community/Community.tsx | 36 +++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index cb9d9a2..3798fc1 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -24,8 +24,28 @@ const getAvatar = (author: string) => {
 };
 
 const getRelativeTime = (dateString: string) => {
-  const now = new Date('2026-07-22T11:56:24+05:30').getTime(); // Current local time from metadata
-  const past = new Date(dateString).getTime();
+  if (!dateString) return 'just now';
+  
+  // Normalize microsecond timestamps (e.g. 2026-07-22T13:28:18.174367) to standard millisecond precision
+  let normalized = dateString;
+  const dotIndex = dateString.indexOf('.');
+  if (dotIndex !== -1) {
+    const mainPart = dateString.substring(0, dotIndex);
+    let msPart = dateString.substring(dotIndex + 1);
+    // Strip any trailing non-digits (like timezone offsets Z or +05:30) for truncation, then keep first 3 digits
+    const nonDigitMatch = msPart.match(/\D/);
+    let suffix = '';
+    if (nonDigitMatch && nonDigitMatch.index !== undefined) {
+      suffix = msPart.substring(nonDigitMatch.index);
+      msPart = msPart.substring(0, nonDigitMatch.index);
+    }
+    normalized = `${mainPart}.${msPart.substring(0, 3)}${suffix}`;
+  }
+
+  const now = new Date().getTime(); // Dynamic local time
+  const past = new Date(normalized).getTime();
+  if (isNaN(past)) return 'just now';
+
   const msPerMinute = 60 * 1000;
   const msPerHour = msPerMinute * 60;
   const msPerDay = msPerHour * 24;
@@ -86,10 +106,12 @@ export default function Community() {
     return votesVal;
   };
 
-  const filteredQuestions = questions.filter((q) =>
-    q.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    (q.tags && q.tags.some((t: string) => t.toLowerCase().includes(searchQuery.toLowerCase())))
-  );
+  const filteredQuestions = 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()));
+  });
 
   const handleConfess = () => {
     if (!confessionText.trim()) return;
@@ -313,7 +335,7 @@ export default function Community() {
 
                                 <div className="flex items-center justify-between flex-wrap gap-3 pt-1 border-t border-slate-100">
                                   <div className="flex flex-wrap gap-1.5">
-                                    {q.tags.map((tag) => (
+                                    {(q.tags || []).map((tag) => (
                                       <span
                                         key={tag}
                                         className="px-2.5 py-0.5 rounded-lg text-[10px] font-medium bg-slate-100 text-slate-600"

From 67d6849089a1f92e7a71540a1a6ebf8a36670d4e Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 13:58:24 +0530
Subject: [PATCH 05/24] diagnostics: add console logging to fetchQuestions

---
 src/pages/Community/Community.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 3798fc1..0eb8b3e 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -78,16 +78,20 @@ export default function Community() {
       const response = await fetch('http://localhost:8080/api/questions');
       if (response.ok) {
         const data = await response.json();
+        console.log("API DATA FETCHED:", data);
         if (data) {
           // Merge database questions with static mock data, matching IDs to prevent duplicates
           const backendIds = new Set(data.map((q: any) => q.id.toString()));
           const uniqueMocks = QUESTIONS_DATA.filter(q => !backendIds.has(q.id.toString()));
-          // Sort backend questions newest first, then append mock questions
-          setQuestions([...[...data].reverse(), ...uniqueMocks]);
+          const merged = [...[...data].reverse(), ...uniqueMocks];
+          console.log("MERGED QUESTIONS LIST:", merged);
+          setQuestions(merged);
         }
+      } else {
+        console.error("Failed to fetch questions from backend: HTTP status", response.status);
       }
     } catch (error) {
-      console.log('Backend not available. Falling back to local static questions data.', error);
+      console.error('Backend not available. Falling back to local static questions data.', error);
     }
   };
 

From 3b8e9fa1ee53a2f49cc3579c84e1a18cad93bf7b Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 14:05:23 +0530
Subject: [PATCH 06/24] fix: resolve framer-motion opacity 0 for asynchronously
 loaded questions

---
 src/pages/Community/Community.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 0eb8b3e..916dc40 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -281,6 +281,7 @@ export default function Community() {
                     </div>
                   </div>
 
+
                   {/* Search */}
                   <div className="relative mb-6">
                     <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
@@ -295,7 +296,7 @@ export default function Community() {
                   </div>
 
                   {/* Questions */}
-                  <StaggerContainer className="flex flex-col gap-4">
+                  <StaggerContainer key={filteredQuestions.length} className="flex flex-col gap-4">
                     {filteredQuestions.map((q, idx) => {
                       const isFeatured = idx === 0 && searchQuery === '';
                       return (

From 132f3edbd4afd417ea51f2beb2d4ee973a0df3ff Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 14:08:48 +0530
Subject: [PATCH 07/24] feat: add option to display answers for the questions

---
 src/pages/Community/Community.tsx | 59 ++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 916dc40..9101410 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -71,8 +71,21 @@ export default function Community() {
   const [confessionPosted, setConfessionPosted] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
+  const [expandedQuestionIds, setExpandedQuestionIds] = useState<Set<string>>(new Set());
   const [questions, setQuestions] = useState<any[]>(QUESTIONS_DATA);
 
+  const toggleAnswers = (id: string) => {
+    setExpandedQuestionIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id.toString())) {
+        next.delete(id.toString());
+      } else {
+        next.add(id.toString());
+      }
+      return next;
+    });
+  };
+
   const fetchQuestions = async () => {
     try {
       const response = await fetch('http://localhost:8080/api/questions');
@@ -352,10 +365,17 @@ export default function Community() {
                                   </div>
 
                                   <div className="flex items-center gap-4 text-[11px] text-slate-400">
-                                    <span className="flex items-center gap-1.5">
-                                      <MessageCircle className="w-3.5 h-3.5 text-slate-400" />
-                                      {getAnswersCount(q)} answers
-                                    </span>
+                                    <button
+                                      onClick={() => toggleAnswers(q.id)}
+                                      className={`flex items-center gap-1.5 px-2 py-1 rounded-lg transition-all cursor-pointer border-0 bg-slate-50 hover:bg-slate-100 ${
+                                        expandedQuestionIds.has(q.id.toString())
+                                          ? 'bg-slate-900 text-white font-semibold'
+                                          : 'text-slate-500 hover:text-slate-800'
+                                      }`}
+                                    >
+                                      <MessageCircle className="w-3.5 h-3.5" />
+                                      <span>{getAnswersCount(q)} answers</span>
+                                    </button>
                                     {q.isAnswered && (
                                       <span className="px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 font-semibold text-[10px]">✓ Answered</span>
                                     )}
@@ -374,6 +394,37 @@ export default function Community() {
                                     </button>
                                   </div>
                                 </div>
+
+                                {/* Expandable Answers Section */}
+                                {expandedQuestionIds.has(q.id.toString()) && (
+                                  <div className="mt-4 pt-4 border-t border-slate-100/80 flex flex-col gap-3">
+                                    <div className="flex items-center justify-between">
+                                      <h4 className="text-xs font-bold text-slate-800 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                        Answers ({getAnswersCount(q)})
+                                      </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">
+                                        {q.answers.map((ans: any) => (
+                                          <div key={ans.id} className="bg-slate-50/60 rounded-xl p-3.5 border border-slate-100/90 hover:border-slate-200/60 transition-all">
+                                            <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                                              <span className="text-[11px] font-semibold text-slate-700">{ans.author}</span>
+                                              <span className="text-[9px] text-slate-300">•</span>
+                                              <span className="text-[10px] text-slate-400">{getRelativeTime(ans.createdAt)}</span>
+                                            </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' }}>
+                                        No answers posted yet. Senior helpers can reply to this question via the Telegram Bot!
+                                      </p>
+                                    )}
+                                  </div>
+                                )}
                               </div>
                             </div>
                           </motion.div>

From 7536c244d5c337db3765f125e91cae01f14a6b9a Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 14:30:52 +0530
Subject: [PATCH 08/24] feat: show 5 recent questions by default with Load More
 / Show Less pagination

---
 src/pages/Community/Community.tsx | 117 ++++++++++++++++++++----------
 telegram-bot/config.json          |   2 +-
 2 files changed, 79 insertions(+), 40 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 9101410..9b63b83 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -73,6 +73,7 @@ export default function Community() {
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
   const [expandedQuestionIds, setExpandedQuestionIds] = useState<Set<string>>(new Set());
   const [questions, setQuestions] = useState<any[]>(QUESTIONS_DATA);
+  const [visibleCount, setVisibleCount] = useState(5);
 
   const toggleAnswers = (id: string) => {
     setExpandedQuestionIds((prev) => {
@@ -130,6 +131,9 @@ export default function Community() {
       tagsVal.some((t: string) => t.toLowerCase().includes(searchQuery.toLowerCase()));
   });
 
+  const visibleQuestions = filteredQuestions.slice(0, visibleCount);
+  const hasMore = visibleCount < filteredQuestions.length;
+
   const handleConfess = () => {
     if (!confessionText.trim()) return;
     setConfessionPosted(true);
@@ -302,24 +306,24 @@ export default function Community() {
                       type="text"
                       placeholder="Search questions..."
                       value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
+                      onChange={(e) => { setSearchQuery(e.target.value); setVisibleCount(5); }}
                       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"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                   </div>
 
                   {/* Questions */}
-                  <StaggerContainer key={filteredQuestions.length} className="flex flex-col gap-4">
-                    {filteredQuestions.map((q, idx) => {
+                  <StaggerContainer key={visibleCount + '-' + filteredQuestions.length} className="flex flex-col gap-4">
+                    {visibleQuestions.map((q, idx) => {
                       const isFeatured = idx === 0 && searchQuery === '';
                       return (
                         <StaggerItem key={q.id}>
                           <motion.div
-                            whileHover={{ y: -1 }}
-                            className={`bg-white rounded-xl border p-5 transition-all shadow-xs ${
+                            whileHover={{ y: -0.5 }}
+                            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)] ${
                               isFeatured
-                                ? 'border-l-4 border-l-slate-900 border-slate-200'
-                                : 'border-slate-200/80'
+                                ? 'border-l-2 border-l-slate-800 border-slate-200'
+                                : 'border-slate-200/50'
                             }`}
                           >
                             <div className="flex items-start gap-4">
@@ -327,36 +331,36 @@ export default function Community() {
                               <img
                                 src={getAvatar(q.author)}
                                 alt={q.author}
-                                className="w-9 h-9 rounded-lg object-cover bg-slate-100 border border-slate-100 shrink-0"
+                                className="w-10 h-10 rounded-xl 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">
-                                  <span className="text-xs font-semibold text-slate-800">{q.author}</span>
+                                  <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-[10px] text-slate-300">•</span>
-                                  <span className="text-[11px] text-slate-400">{getRelativeTime(q.createdAt)}</span>
+                                  <span className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(q.createdAt)}</span>
                                   {isFeatured && (
-                                    <span className="ml-auto px-2 py-0.5 rounded text-[10px] font-bold bg-slate-900 text-white tracking-wider uppercase">★ Popular</span>
+                                    <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>
                                   )}
                                 </div>
 
-                                <h3 className={`font-bold text-slate-950 mb-1 hover:text-slate-700 cursor-pointer transition-colors tracking-tight ${
+                                <h3 className={`font-bold text-slate-900 mb-1 hover:text-slate-700 cursor-pointer transition-colors tracking-tight ${
                                   isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
                                 }`}
                                   style={{ fontFamily: 'Poppins, sans-serif' }}>
                                   {q.title}
                                 </h3>
-                                <p className="text-[13px] text-slate-600 mb-4 leading-relaxed line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>
+                                <p className="text-[13px] text-slate-650 mb-4 leading-relaxed line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>
                                   {q.body}
                                 </p>
 
-                                <div className="flex items-center justify-between flex-wrap gap-3 pt-1 border-t border-slate-100">
+                                <div className="flex items-center justify-between flex-wrap gap-3 pt-1.5 border-t border-slate-100/60">
                                   <div className="flex flex-wrap gap-1.5">
                                     {(q.tags || []).map((tag) => (
                                       <span
                                         key={tag}
-                                        className="px-2.5 py-0.5 rounded-lg text-[10px] font-medium bg-slate-100 text-slate-600"
+                                        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}
@@ -364,29 +368,29 @@ export default function Community() {
                                     ))}
                                   </div>
 
-                                  <div className="flex items-center gap-4 text-[11px] text-slate-400">
+                                  <div className="flex items-center gap-2 text-[10px] text-slate-400 font-bold">
                                     <button
                                       onClick={() => toggleAnswers(q.id)}
-                                      className={`flex items-center gap-1.5 px-2 py-1 rounded-lg transition-all cursor-pointer border-0 bg-slate-50 hover:bg-slate-100 ${
+                                      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 ${
                                         expandedQuestionIds.has(q.id.toString())
-                                          ? 'bg-slate-900 text-white font-semibold'
-                                          : 'text-slate-500 hover:text-slate-800'
+                                          ? 'bg-slate-900 text-white border-slate-900'
+                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700'
                                       }`}
                                     >
                                       <MessageCircle className="w-3.5 h-3.5" />
                                       <span>{getAnswersCount(q)} answers</span>
                                     </button>
                                     {q.isAnswered && (
-                                      <span className="px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 font-semibold text-[10px]">✓ Answered</span>
+                                      <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 */}
                                     <button
                                       onClick={() => toggleLike(q.id)}
-                                      className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg transition-all cursor-pointer ${
+                                      className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border ${
                                         likedIds.has(q.id.toString())
-                                          ? 'bg-slate-900 text-white font-semibold'
-                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-800'
+                                          ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
+                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
                                       }`}
                                     >
                                       <ThumbsUp className="w-3 h-3" />
@@ -397,20 +401,20 @@ export default function Community() {
 
                                 {/* Expandable Answers Section */}
                                 {expandedQuestionIds.has(q.id.toString()) && (
-                                  <div className="mt-4 pt-4 border-t border-slate-100/80 flex flex-col gap-3">
+                                  <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="flex items-center justify-between">
-                                      <h4 className="text-xs font-bold text-slate-800 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                      <h4 className="text-[11px] font-bold text-slate-700 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
                                         Answers ({getAnswersCount(q)})
                                       </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">
                                         {q.answers.map((ans: any) => (
-                                          <div key={ans.id} className="bg-slate-50/60 rounded-xl p-3.5 border border-slate-100/90 hover:border-slate-200/60 transition-all">
+                                          <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 className="flex items-center gap-2 mb-1.5 flex-wrap">
-                                              <span className="text-[11px] font-semibold text-slate-700">{ans.author}</span>
+                                              <span className="text-xs font-bold text-slate-700" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
                                               <span className="text-[9px] text-slate-300">•</span>
-                                              <span className="text-[10px] text-slate-400">{getRelativeTime(ans.createdAt)}</span>
+                                              <span className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(ans.createdAt)}</span>
                                             </div>
                                             <p className="text-xs text-slate-600 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                                               {ans.body}
@@ -432,6 +436,40 @@ export default function Community() {
                       );
                     })}
                   </StaggerContainer>
+
+                  {/* Load More / Show Less */}
+                  {filteredQuestions.length > 5 && (
+                    <div className="flex flex-col items-center gap-3 mt-6">
+                      {hasMore ? (
+                        <>
+                          <p className="text-[11px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
+                            Showing {visibleCount} of {filteredQuestions.length} questions
+                          </p>
+                          <motion.button
+                            whileHover={{ scale: 1.015 }}
+                            whileTap={{ scale: 0.985 }}
+                            onClick={() => setVisibleCount((c) => c + 5)}
+                            className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-700 text-[13px] font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all duration-200 cursor-pointer shadow-sm"
+                            style={{ fontFamily: 'Poppins, sans-serif' }}
+                          >
+                            <ChevronRight className="w-4 h-4 rotate-90" />
+                            Load More Questions
+                          </motion.button>
+                        </>
+                      ) : (
+                        <motion.button
+                          whileHover={{ scale: 1.015 }}
+                          whileTap={{ scale: 0.985 }}
+                          onClick={() => setVisibleCount(5)}
+                          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-500 text-[13px] font-medium hover:bg-slate-50 hover:border-slate-300 transition-all duration-200 cursor-pointer"
+                          style={{ fontFamily: 'Poppins, sans-serif' }}
+                        >
+                          <ChevronRight className="w-4 h-4 -rotate-90" />
+                          Show Less
+                        </motion.button>
+                      )}
+                    </div>
+                  )}
                 </div>
 
                 {/* Sidebar */}
@@ -555,8 +593,8 @@ export default function Community() {
                     {CONFESSIONS_DATA.map((conf) => (
                       <StaggerItem key={conf.id}>
                         <motion.div
-                          whileHover={{ y: -1 }}
-                          className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-xs"
+                          whileHover={{ y: -0.5 }}
+                          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)]"
                         >
                           <div className="flex items-start justify-between mb-3">
                             <div className="flex items-center gap-2.5">
@@ -564,31 +602,32 @@ export default function Community() {
                                 <Shield className="w-4 h-4 text-slate-500" />
                               </div>
                               <div>
-                                <span className="text-xs font-semibold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
-                                <p className="text-[10px] text-slate-400">{getRelativeTime(conf.createdAt)}</p>
+                                <span className="text-xs font-bold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
+                                <p className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(conf.createdAt)}</p>
                               </div>
                             </div>
                             {conf.category && (
-                              <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-slate-50 text-slate-650 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                              <span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-55 text-slate-650 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
                                 {conf.category}
                               </span>
                             )}
                           </div>
-                          <p className="text-[13px] text-slate-700 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
+                          <p className="text-[13px] text-slate-750 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
                           <div className="flex items-center justify-between">
                             <button
                               onClick={() => toggleLike(conf.id)}
-                              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all cursor-pointer ${
+                              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${
                                 likedIds.has(conf.id)
-                                  ? 'bg-slate-900 text-white'
-                                  : 'bg-slate-50 hover:bg-slate-100 text-slate-500'
+                                  ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
+                                  : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
                               }`}
                             >
                               <Heart
                                 className="w-3.5 h-3.5"
-                                fill={likedIds.has(conf.id) ? '#ffffff' : 'none'}
+                                fill={likedIds.has(conf.id) ? '#e11d48' : 'none'}
+                                color={likedIds.has(conf.id) ? '#e11d48' : 'currentColor'}
                               />
-                              <span className="text-xs">{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
+                              <span>{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
                             </button>
                           </div>
                         </motion.div>
diff --git a/telegram-bot/config.json b/telegram-bot/config.json
index 9f2183a..3ea7da8 100644
--- a/telegram-bot/config.json
+++ b/telegram-bot/config.json
@@ -1,5 +1,5 @@
 {
   "telegram_bot_token": "8859374355:AAH0dhwstkTBhRerRTjzmb2RG2fjPbigzvo",
-  "helper_chat_ids": [971749136],
+  "helper_chat_ids": [971749136,5567776672],
   "spring_backend_url": "http://localhost:8080"
 }

From 163e9f93f28f269b15e720b39cf097b6c7fd07a0 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 14:36:02 +0530
Subject: [PATCH 09/24] feat: server-side pagination with prev/next arrows,
 page buttons, and skeleton loader

---
 .../CommunityQuestionController.java          |  30 +++-
 src/pages/Community/Community.tsx             | 159 ++++++++++++------
 2 files changed, 134 insertions(+), 55 deletions(-)

diff --git a/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java b/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
index 3167ef1..7951bef 100644
--- a/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
+++ b/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
@@ -5,6 +5,10 @@ import com.rit.portal.entity.CommunityQuestion;
 import com.rit.portal.repository.CommunityAnswerRepository;
 import com.rit.portal.repository.CommunityQuestionRepository;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.client.RestTemplate;
@@ -26,19 +30,33 @@ public class CommunityQuestionController {
     private final RestTemplate restTemplate = new RestTemplate();
     private static final String TELEGRAM_BOT_URL = "http://localhost:8082/send_question";
 
+    /** Legacy – returns all questions (kept for backwards compatibility) */
     @GetMapping
     public List<CommunityQuestion> getAllQuestions() {
         return questionRepository.findAll();
     }
 
+    /**
+     * Paginated – returns a Spring Page of questions ordered newest-first.
+     * Usage: GET /api/questions/paged?page=0&size=5
+     * Response includes: content[], totalElements, totalPages, number (current page), last (boolean)
+     */
+    @GetMapping("/paged")
+    public Page<CommunityQuestion> getQuestionsPaged(
+            @RequestParam(defaultValue = "0")  int page,
+            @RequestParam(defaultValue = "5")  int size) {
+        Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
+        return questionRepository.findAll(pageable);
+    }
+
     @PostMapping
     public CommunityQuestion createQuestion(@RequestBody CommunityQuestion question) {
         if (question.getUpvotes() == null) question.setUpvotes(0);
         if (question.getIsAnswered() == null) question.setIsAnswered(false);
         question.setCreatedAt(LocalDateTime.now());
-        
+
         CommunityQuestion saved = questionRepository.save(question);
-        
+
         // Notify Telegram bot in a background thread to keep it robust and non-blocking
         new Thread(() -> {
             try {
@@ -47,7 +65,7 @@ public class CommunityQuestionController {
                 payload.put("title", saved.getTitle());
                 payload.put("body", saved.getBody());
                 payload.put("author", saved.getAuthor());
-                
+
                 restTemplate.postForEntity(TELEGRAM_BOT_URL, payload, String.class);
             } catch (Exception e) {
                 System.err.println("Failed to notify Telegram Bot intermediary: " + e.getMessage());
@@ -64,12 +82,12 @@ public class CommunityQuestionController {
             if (answer.getUpvotes() == null) answer.setUpvotes(0);
             if (answer.getIsAccepted() == null) answer.setIsAccepted(false);
             answer.setCreatedAt(LocalDateTime.now());
-            
+
             CommunityAnswer savedAnswer = answerRepository.save(answer);
-            
+
             question.setIsAnswered(true);
             questionRepository.save(question);
-            
+
             return ResponseEntity.ok(savedAnswer);
         }).orElse(ResponseEntity.notFound().build());
     }
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 9b63b83..e8b1eea 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -64,6 +64,8 @@ const getRelativeTime = (dateString: string) => {
 };
 
 export default function Community() {
+  const PAGE_SIZE = 5;
+
   const [activeTab, setActiveTab] = useState<Tab>('qa');
   const [confessionText, setConfessionText] = useState('');
   const [questionText, setQuestionText] = useState('');
@@ -72,8 +74,13 @@ export default function Community() {
   const [searchQuery, setSearchQuery] = useState('');
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
   const [expandedQuestionIds, setExpandedQuestionIds] = useState<Set<string>>(new Set());
-  const [questions, setQuestions] = useState<any[]>(QUESTIONS_DATA);
-  const [visibleCount, setVisibleCount] = useState(5);
+  // Server-side pagination
+  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) => {
@@ -87,30 +94,37 @@ export default function Community() {
     });
   };
 
-  const fetchQuestions = async () => {
+  const fetchQuestions = async (page = 0) => {
+    setLoading(true);
     try {
-      const response = await fetch('http://localhost:8080/api/questions');
+      const response = await fetch(`http://localhost:8080/api/questions/paged?page=${page}&size=${PAGE_SIZE}`);
       if (response.ok) {
         const data = await response.json();
-        console.log("API DATA FETCHED:", data);
-        if (data) {
-          // Merge database questions with static mock data, matching IDs to prevent duplicates
-          const backendIds = new Set(data.map((q: any) => q.id.toString()));
-          const uniqueMocks = QUESTIONS_DATA.filter(q => !backendIds.has(q.id.toString()));
-          const merged = [...[...data].reverse(), ...uniqueMocks];
-          console.log("MERGED QUESTIONS LIST:", merged);
-          setQuestions(merged);
-        }
+        // Spring Page response: { content: [], totalPages, totalElements, number }
+        setQuestions(data.content || []);
+        setTotalPages(data.totalPages || 1);
+        setCurrentPage(data.number ?? page);
       } else {
         console.error("Failed to fetch questions from backend: HTTP status", response.status);
+        // 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) {
       console.error('Backend not available. Falling back to local static questions data.', error);
+      const start = page * PAGE_SIZE;
+      setQuestions(staticQuestions.slice(start, start + PAGE_SIZE));
+      setTotalPages(Math.ceil(staticQuestions.length / PAGE_SIZE));
+      setCurrentPage(page);
+    } finally {
+      setLoading(false);
     }
   };
 
   useEffect(() => {
-    fetchQuestions();
+    fetchQuestions(0);
   }, []);
 
   const getAnswersCount = (q: any) => {
@@ -124,6 +138,7 @@ export default function Community() {
     return votesVal;
   };
 
+  // Client-side filter applied on top of current page (for search within page)
   const filteredQuestions = questions.filter((q) => {
     const titleVal = q.title || "";
     const tagsVal = q.tags || [];
@@ -131,8 +146,12 @@ export default function Community() {
       tagsVal.some((t: string) => t.toLowerCase().includes(searchQuery.toLowerCase()));
   });
 
-  const visibleQuestions = filteredQuestions.slice(0, visibleCount);
-  const hasMore = visibleCount < filteredQuestions.length;
+  const handlePageChange = (newPage: number) => {
+    setExpandedQuestionIds(new Set()); // collapse any open answers
+    fetchQuestions(newPage);
+    // Scroll back to the top of the questions list smoothly
+    document.getElementById('qa-questions-list')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
 
   const handleConfess = () => {
     if (!confessionText.trim()) return;
@@ -306,16 +325,33 @@ export default function Community() {
                       type="text"
                       placeholder="Search questions..."
                       value={searchQuery}
-                      onChange={(e) => { setSearchQuery(e.target.value); setVisibleCount(5); }}
+                      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"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                   </div>
 
                   {/* Questions */}
-                  <StaggerContainer key={visibleCount + '-' + filteredQuestions.length} className="flex flex-col gap-4">
-                    {visibleQuestions.map((q, idx) => {
-                      const isFeatured = idx === 0 && searchQuery === '';
+                  <div id="qa-questions-list">
+                    {loading ? (
+                      <div className="flex flex-col gap-3">
+                        {[...Array(PAGE_SIZE)].map((_, i) => (
+                          <div key={i} className="bg-white rounded-xl border border-slate-200/50 p-5 animate-pulse">
+                            <div className="flex items-start gap-4">
+                              <div className="w-10 h-10 rounded-xl bg-slate-100 shrink-0" />
+                              <div className="flex-1 space-y-2">
+                                <div className="h-3 w-1/4 rounded bg-slate-100" />
+                                <div className="h-4 w-2/3 rounded bg-slate-100" />
+                                <div className="h-3 w-full rounded bg-slate-100" />
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <StaggerContainer key={`${currentPage}-${filteredQuestions.length}`} className="flex flex-col gap-4">
+                        {filteredQuestions.map((q, idx) => {
+                          const isFeatured = idx === 0 && searchQuery === '' && currentPage === 0;
                       return (
                         <StaggerItem key={q.id}>
                           <motion.div
@@ -434,42 +470,67 @@ export default function Community() {
                           </motion.div>
                         </StaggerItem>
                       );
-                    })}
-                  </StaggerContainer>
+                        })}
+                      </StaggerContainer>
+                    )}
 
-                  {/* Load More / Show Less */}
-                  {filteredQuestions.length > 5 && (
-                    <div className="flex flex-col items-center gap-3 mt-6">
-                      {hasMore ? (
-                        <>
-                          <p className="text-[11px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
-                            Showing {visibleCount} of {filteredQuestions.length} questions
-                          </p>
+                  {/* Pagination Controls */}
+                  {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 ${
+                          currentPage === 0 || loading
+                            ? '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'
+                        }`}
+                        style={{ fontFamily: 'Poppins, sans-serif' }}
+                      >
+                        <ChevronRight className="w-4 h-4 rotate-180" />
+                        Prev
+                      </motion.button>
+
+                      <div className="flex items-center gap-1.5">
+                        {Array.from({ length: totalPages }).map((_, i) => (
                           <motion.button
-                            whileHover={{ scale: 1.015 }}
-                            whileTap={{ scale: 0.985 }}
-                            onClick={() => setVisibleCount((c) => c + 5)}
-                            className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-700 text-[13px] font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all duration-200 cursor-pointer shadow-sm"
+                            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' }}
                           >
-                            <ChevronRight className="w-4 h-4 rotate-90" />
-                            Load More Questions
+                            {i + 1}
                           </motion.button>
-                        </>
-                      ) : (
-                        <motion.button
-                          whileHover={{ scale: 1.015 }}
-                          whileTap={{ scale: 0.985 }}
-                          onClick={() => setVisibleCount(5)}
-                          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-500 text-[13px] font-medium hover:bg-slate-50 hover:border-slate-300 transition-all duration-200 cursor-pointer"
-                          style={{ fontFamily: 'Poppins, sans-serif' }}
-                        >
-                          <ChevronRight className="w-4 h-4 -rotate-90" />
-                          Show Less
-                        </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 ${
+                          currentPage >= totalPages - 1 || loading
+                            ? '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'
+                        }`}
+                        style={{ fontFamily: 'Poppins, sans-serif' }}
+                      >
+                        Next
+                        <ChevronRight className="w-4 h-4" />
+                      </motion.button>
                     </div>
                   )}
+                  </div>
                 </div>
 
                 {/* Sidebar */}

From b8b62bed66994970087b8bf8d012a01400514391 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Wed, 22 Jul 2026 14:41:42 +0530
Subject: [PATCH 10/24] telegram updated

---
 .../CommunityQuestionController.java          | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java b/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
index 7951bef..3167ef1 100644
--- a/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
+++ b/backend/src/main/java/com/rit/portal/controller/CommunityQuestionController.java
@@ -5,10 +5,6 @@ import com.rit.portal.entity.CommunityQuestion;
 import com.rit.portal.repository.CommunityAnswerRepository;
 import com.rit.portal.repository.CommunityQuestionRepository;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.PageRequest;
-import org.springframework.data.domain.Pageable;
-import org.springframework.data.domain.Sort;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.client.RestTemplate;
@@ -30,33 +26,19 @@ public class CommunityQuestionController {
     private final RestTemplate restTemplate = new RestTemplate();
     private static final String TELEGRAM_BOT_URL = "http://localhost:8082/send_question";
 
-    /** Legacy – returns all questions (kept for backwards compatibility) */
     @GetMapping
     public List<CommunityQuestion> getAllQuestions() {
         return questionRepository.findAll();
     }
 
-    /**
-     * Paginated – returns a Spring Page of questions ordered newest-first.
-     * Usage: GET /api/questions/paged?page=0&size=5
-     * Response includes: content[], totalElements, totalPages, number (current page), last (boolean)
-     */
-    @GetMapping("/paged")
-    public Page<CommunityQuestion> getQuestionsPaged(
-            @RequestParam(defaultValue = "0")  int page,
-            @RequestParam(defaultValue = "5")  int size) {
-        Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
-        return questionRepository.findAll(pageable);
-    }
-
     @PostMapping
     public CommunityQuestion createQuestion(@RequestBody CommunityQuestion question) {
         if (question.getUpvotes() == null) question.setUpvotes(0);
         if (question.getIsAnswered() == null) question.setIsAnswered(false);
         question.setCreatedAt(LocalDateTime.now());
-
+        
         CommunityQuestion saved = questionRepository.save(question);
-
+        
         // Notify Telegram bot in a background thread to keep it robust and non-blocking
         new Thread(() -> {
             try {
@@ -65,7 +47,7 @@ public class CommunityQuestionController {
                 payload.put("title", saved.getTitle());
                 payload.put("body", saved.getBody());
                 payload.put("author", saved.getAuthor());
-
+                
                 restTemplate.postForEntity(TELEGRAM_BOT_URL, payload, String.class);
             } catch (Exception e) {
                 System.err.println("Failed to notify Telegram Bot intermediary: " + e.getMessage());
@@ -82,12 +64,12 @@ public class CommunityQuestionController {
             if (answer.getUpvotes() == null) answer.setUpvotes(0);
             if (answer.getIsAccepted() == null) answer.setIsAccepted(false);
             answer.setCreatedAt(LocalDateTime.now());
-
+            
             CommunityAnswer savedAnswer = answerRepository.save(answer);
-
+            
             question.setIsAnswered(true);
             questionRepository.save(question);
-
+            
             return ResponseEntity.ok(savedAnswer);
         }).orElse(ResponseEntity.notFound().build());
     }

From 293104cab357b1a958d4b0fac0ddad85124c9432 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 11:18:47 +0530
Subject: [PATCH 11/24] ui: compact question cards, threaded reply design, and
 unlike toggle

---
 .../compile/default-compile/inputFiles.lst    |   5 +
 src/pages/Community/Community.tsx             | 420 ++++++++++++------
 telegram-bot/config.json                      |   2 +
 3 files changed, 279 insertions(+), 148 deletions(-)

diff --git a/backend/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst b/backend/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst
index 7b9469e..8012ba6 100644
--- a/backend/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst
+++ b/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
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index e8b1eea..a4e087d 100644
--- a/src/pages/Community/Community.tsx
+++ b/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 }
-        setQuestions(data.content || []);
-        setTotalPages(data.totalPages || 1);
-        setCurrentPage(data.number ?? page);
+        // Backend returns oldest-first, reverse to show newest first
+        setQuestions(Array.isArray(data) ? [...data].reverse() : []);
       } else {
-        console.error("Failed to fetch questions from backend: HTTP status", response.status);
-        // 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);
+        setQuestions([]);
       }
-    } catch (error) {
-      console.error('Backend not available. Falling back to local static questions data.', error);
-      const start = page * PAGE_SIZE;
-      setQuestions(staticQuestions.slice(start, start + PAGE_SIZE));
-      setTotalPages(Math.ceil(staticQuestions.length / PAGE_SIZE));
-      setCurrentPage(page);
+    } catch {
+      // Backend unavailable — show empty state
+      setQuestions([]);
     } 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)
-  const filteredQuestions = questions.filter((q) => {
+  // Client-side filter and sorting derived state
+  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`, {
-        method: 'POST'
-      });
-      fetchQuestions();
+      if (isLikedNow) {
+        await fetch(`http://localhost:8080/api/questions/${id}/upvote`, {
+          method: 'POST'
+        });
+        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">
-                  {/* Ask Question Box */}
-                  <div className="bg-white rounded-xl border border-slate-200/80 p-5 mb-8 shadow-xs">
-                    <h3 className="text-sm font-semibold text-slate-900 mb-3 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3>
+                <div className="lg:col-span-2">                  {/* 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)' }}>
+                    <h3 className="text-base font-semibold text-[#1E293B] 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"
-                      style={{ fontFamily: 'Inter, sans-serif' }}
+                      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', 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">
-                        {filteredQuestions.map((q, idx) => {
+                      <StaggerContainer key={`${currentPage}-${filteredQuestions.length}`} className="flex flex-col gap-3">
+                        {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 }}
-                            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)] ${
+                            whileHover={{ y: -2, boxShadow: '0 8px 30px -4px rgba(0,0,0,0.08)', borderColor: '#CBD5E1' }}
+                            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-slate-200/50'
+                                ? 'border-l-4 border-l-[#F97316] border-[#E5E7EB]'
+                                : '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">
-                                  <span className="text-xs font-bold text-slate-800 hover:text-slate-900 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>{q.author}</span>
+                                <div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
+                                  <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 flex-wrap gap-1.5">
-                                    {(q.tags || []).map((tag) => (
-                                      <span
-                                        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">
+                                <div className="flex items-center justify-between flex-wrap gap-3 pt-2.5 border-t border-slate-100/60">
+                                  {/* Left side: Replies & Likes & Tags inline */}
+                                  <div className="flex items-center gap-4 flex-wrap text-[11px]">
+                                    {/* Replies button */}
                                     <button
-                                      onClick={() => toggleAnswers(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 ${
+                                      onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
+                                      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'
-                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700'
+                                          ? 'text-[#F97316]'
+                                          : '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)}
-                                      className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border ${
-                                        likedIds.has(q.id.toString())
-                                          ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
-                                          : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
+                                      onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
+                                      className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
+                                        isLiked
+                                          ? 'text-rose-600'
+                                          : 'text-slate-500 hover:text-slate-850'
                                       }`}
                                     >
-                                      <ThumbsUp className="w-3 h-3" />
-                                      <span>{getVotesCount(q) + (likedIds.has(q.id.toString()) ? 1 : 0)}</span>
+                                      <ThumbsUp className="w-3.5 h-3.5" fill={isLiked ? 'currentColor' : 'none'} />
+                                      <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' }}>
-                                        Answers ({getAnswersCount(q)})
+                                      <h4 className="text-[10px] font-bold text-slate-500 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                        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 className="flex items-center gap-2 mb-1.5 flex-wrap">
-                                              <span className="text-xs font-bold text-slate-700" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
-                                              <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>
+                                          <div key={ans.id} className="relative pl-6 flex items-start gap-2.5 group">
+                                            {/* Thread connector line */}
+                                            <div className="absolute left-[9px] top-[-16px] bottom-3 w-3 border-l border-b border-slate-200 rounded-bl-lg pointer-events-none" />
+                                            
+                                            {/* 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 */}
-                  {totalPages > 1 && (
+                  {/* Pagination — arrows only */}
+                  {!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 ${
-                          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 ${
+                          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">
-                        {Array.from({ length: totalPages }).map((_, i) => (
-                          <motion.button
-                            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>
+                      <span className="text-[11px] text-slate-405 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
+                        Page {currentPage + 1} of {totalPages} &middot; {filteredQuestions.length} questions
+                      </span>
 
                       <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 ${
-                          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 ${
+                          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: 'Active Students', value: '340+' },
+                        {
+                          label: 'Total Questions',
+                          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 }}
-                          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)]"
+                          whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
+                          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">
-                    <h3 className="text-sm font-semibold text-slate-850 mb-4 flex items-center gap-2" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                  <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-[#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>
diff --git a/telegram-bot/config.json b/telegram-bot/config.json
index 3ea7da8..ffd3d76 100644
--- a/telegram-bot/config.json
+++ b/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"
 }

From 0e63fb40e78d6497fad081de72594d6f8ca37eb5 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 11:32:41 +0530
Subject: [PATCH 12/24] ui: add trending tags and implement dynamic hashtag
 auto-detection

---
 src/pages/Community/Community.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index a4e087d..9109bc6 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -11,7 +11,7 @@ import { CONFESSIONS_DATA } from '@/constants';
 
 type Tab = 'qa' | 'confession';
 
-const TRENDING_TAGS = ['hostel', 'academics', 'clubs', 'campus', 'canteen', 'sports', 'placement', 'library'];
+const TRENDING_TAGS = ['hostel', 'academics', 'clubs', 'campus', 'canteen', 'sports', 'placement', 'library', 'cat exam', 'semester', 'labs', 'exams'];
 
 const AVATARS: Record<string, string> = {
   'Priya S.': 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=120&h=120&q=80',
@@ -234,11 +234,17 @@ export default function Community() {
     
     const displayAuthor = authorName.trim() || 'Anonymous';
     
+    // Auto-detect hashtags based on question text content
+    const detectedTags = TRENDING_TAGS.filter(tag => 
+      questionText.toLowerCase().includes(tag.toLowerCase())
+    );
+    const finalTags = detectedTags.length > 0 ? detectedTags : ['fresher', 'general'];
+
     const newQuestion = {
       title: questionText.split('\n')[0].substring(0, 100) || "Q&A Question",
       body: questionText,
       author: displayAuthor,
-      tags: ['fresher', 'general'],
+      tags: finalTags,
       upvotes: 0,
       isAnswered: false,
       createdAt: new Date().toISOString(),

From 1c8c6c066bbe60cff8cee25c79c649184a00baf3 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 11:36:41 +0530
Subject: [PATCH 13/24] ui: make orange left-border hover effect apply
 dynamically to all cards

---
 src/pages/Community/Community.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 9109bc6..7079c62 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -456,14 +456,10 @@ export default function Community() {
                       return (
                         <StaggerItem key={q.id}>
                           <motion.div
-                            whileHover={{ y: -2, boxShadow: '0 8px 30px -4px rgba(0,0,0,0.08)', borderColor: '#CBD5E1' }}
+                            whileHover={{ y: -2, boxShadow: '0 12px 30px -4px rgba(249,115,22,0.08)' }}
                             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-4 border-l-[#F97316] border-[#E5E7EB]'
-                                : 'border-[#E5E7EB]'
-                            }`}
+                            className="bg-white border border-[#E5E7EB] border-l-4 border-l-transparent rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:border-l-[#F97316]"
                             style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
                           >
                             <div className="flex items-start gap-3">

From 21747365326115bd8edca84a049172707a9f2054 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 13:32:58 +0530
Subject: [PATCH 14/24] ui: implement dynamic orange border highlight and
 shadow glow on hover for all cards

---
 src/pages/Community/Community.tsx | 386 +++++++++++++++---------------
 1 file changed, 189 insertions(+), 197 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 7079c62..0fe10fe 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -25,7 +25,7 @@ const getAvatar = (author: string) => {
 
 const getRelativeTime = (dateString: string) => {
   if (!dateString) return 'just now';
-  
+
   // Normalize microsecond timestamps (e.g. 2026-07-22T13:28:18.174367) to standard millisecond precision
   let normalized = dateString;
   const dotIndex = dateString.indexOf('.');
@@ -193,7 +193,7 @@ export default function Community() {
     });
 
     // Optimistically update count (+1 if liked, -1 if unliked)
-    setQuestions((prev) => 
+    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);
@@ -231,11 +231,11 @@ export default function Community() {
 
   const handlePostQuestion = async () => {
     if (!questionText.trim()) return;
-    
+
     const displayAuthor = authorName.trim() || 'Anonymous';
-    
+
     // Auto-detect hashtags based on question text content
-    const detectedTags = TRENDING_TAGS.filter(tag => 
+    const detectedTags = TRENDING_TAGS.filter(tag =>
       questionText.toLowerCase().includes(tag.toLowerCase())
     );
     const finalTags = detectedTags.length > 0 ? detectedTags : ['fresher', 'general'];
@@ -401,11 +401,10 @@ export default function Community() {
                         <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
+                          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}
@@ -453,200 +452,194 @@ export default function Community() {
                           const isTrending = (likesCount + ansCount) >= 5;
                           const isBodyExpanded = expandedBodyIds.has(q.id.toString());
 
-                      return (
-                        <StaggerItem key={q.id}>
-                          <motion.div
-                            whileHover={{ y: -2, boxShadow: '0 12px 30px -4px rgba(249,115,22,0.08)' }}
-                            onClick={() => handleCardClick(q.id)}
-                            transition={{ duration: 0.2 }}
-                            className="bg-white border border-[#E5E7EB] border-l-4 border-l-transparent rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:border-l-[#F97316]"
-                            style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
-                          >
-                            <div className="flex items-start gap-3">
-                              {/* Avatar */}
-                              <img
-                                src={getAvatar(q.author)}
-                                alt={q.author}
-                                className="w-8 h-8 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0"
-                              />
+                          return (
+                            <StaggerItem key={q.id}>
+                              <motion.div
+                                whileHover={{ y: -2, boxShadow: '0 12px 30px -4px rgba(249,115,22,0.08)' }}
+                                onClick={() => handleCardClick(q.id)}
+                                transition={{ duration: 0.2 }}
+                                className="bg-white border border-[#E5E7EB] border-l-4 border-l-transparent rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:border-l-[#F97316]"
+                                style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
+                              >
+                                <div className="flex items-start gap-3">
+                                  {/* Avatar */}
+                                  <img
+                                    src={getAvatar(q.author)}
+                                    alt={q.author}
+                                    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-1.5 mb-1.5 flex-wrap">
-                                  <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>
-                                  
-                                  {/* 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>
+                                  <div className="flex-1 min-w-0">
+                                    {/* Header / Meta */}
+                                    <div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
+                                      <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>
 
-                                <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: 'Playfair Display, serif' }}>
-                                  {q.title}
-                                </h3>
-                                
-                                <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-2.5 border-t border-slate-100/60">
-                                  {/* Left side: Replies & Likes & Tags inline */}
-                                  <div className="flex items-center gap-4 flex-wrap text-[11px]">
-                                    {/* Replies button */}
-                                    <button
-                                      onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
-                                      className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
-                                        expandedQuestionIds.has(q.id.toString())
-                                          ? 'text-[#F97316]'
-                                          : 'text-slate-500 hover:text-slate-800'
-                                      }`}
-                                    >
-                                      <MessageCircle className="w-3.5 h-3.5" />
-                                      <span style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                        {ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : 'No replies yet'}
-                                      </span>
-                                    </button>
-
-                                    {/* Upvotes button */}
-                                    <button
-                                      onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
-                                      className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
-                                        isLiked
-                                          ? 'text-rose-600'
-                                          : 'text-slate-500 hover:text-slate-850'
-                                      }`}
-                                    >
-                                      <ThumbsUp className="w-3.5 h-3.5" fill={isLiked ? 'currentColor' : 'none'} />
-                                      <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-150 flex flex-col gap-4" onClick={(e) => e.stopPropagation()}>
-                                    <div className="flex items-center justify-between">
-                                      <h4 className="text-[10px] font-bold text-slate-500 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                        Replies ({ansCount})
-                                      </h4>
-                                    </div>
-                                    {Array.isArray(q.answers) && q.answers.length > 0 ? (
-                                      <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="relative pl-6 flex items-start gap-2.5 group">
-                                            {/* Thread connector line */}
-                                            <div className="absolute left-[9px] top-[-16px] bottom-3 w-3 border-l border-b border-slate-200 rounded-bl-lg pointer-events-none" />
-                                            
-                                            {/* 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>
-                                          </div>
-                                        ))}
+                                      {/* 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-[#1E293B] mb-1 hover:text-[#F97316] transition-colors tracking-tight ${isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
+                                      }`}
+                                      style={{ fontFamily: 'Playfair Display, serif' }}>
+                                      {q.title}
+                                    </h3>
+
+                                    <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-2.5 border-t border-slate-100/60">
+                                      {/* Left side: Replies & Likes & Tags inline */}
+                                      <div className="flex items-center gap-4 flex-wrap text-[11px]">
+                                        {/* Replies button */}
+                                        <button
+                                          onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
+                                          className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${expandedQuestionIds.has(q.id.toString())
+                                              ? 'text-[#F97316]'
+                                              : 'text-slate-500 hover:text-slate-800'
+                                            }`}
+                                        >
+                                          <MessageCircle className="w-3.5 h-3.5" />
+                                          <span style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                            {ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : 'No replies yet'}
+                                          </span>
+                                        </button>
+
+                                        {/* Upvotes button */}
+                                        <button
+                                          onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
+                                          className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${isLiked
+                                              ? 'text-rose-600'
+                                              : 'text-slate-500 hover:text-slate-850'
+                                            }`}
+                                        >
+                                          <ThumbsUp className="w-3.5 h-3.5" fill={isLiked ? 'currentColor' : 'none'} />
+                                          <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-150 flex flex-col gap-4" onClick={(e) => e.stopPropagation()}>
+                                        <div className="flex items-center justify-between">
+                                          <h4 className="text-[10px] font-bold text-slate-500 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                            Replies ({ansCount})
+                                          </h4>
+                                        </div>
+                                        {Array.isArray(q.answers) && q.answers.length > 0 ? (
+                                          <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="relative pl-6 flex items-start gap-2.5 group">
+                                                {/* Thread connector line */}
+                                                <div className="absolute left-[9px] top-[-16px] bottom-3 w-3 border-l border-b border-slate-200 rounded-bl-lg pointer-events-none" />
+
+                                                {/* 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>
+                                              </div>
+                                            ))}
+                                          </div>
+                                        ) : (
+                                          <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>
+                                        )}
                                       </div>
-                                    ) : (
-                                      <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>
                                     )}
                                   </div>
-                                )}
-                              </div>
-                            </div>
-                          </motion.div>
-                        </StaggerItem>
-                      );
-                    })}
-                  </StaggerContainer>
-                )}
+                                </div>
+                              </motion.div>
+                            </StaggerItem>
+                          );
+                        })}
+                      </StaggerContainer>
+                    )}
 
-                  {/* Pagination — arrows only */}
-                  {!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 ${
-                          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 cursor-pointer'
-                        }`}
-                        style={{ fontFamily: 'Poppins, sans-serif' }}
-                      >
-                        <ChevronRight className="w-4 h-4 rotate-180" />
-                        Prev
-                      </motion.button>
+                    {/* Pagination — arrows only */}
+                    {!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 ${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 cursor-pointer'
+                            }`}
+                          style={{ fontFamily: 'Poppins, sans-serif' }}
+                        >
+                          <ChevronRight className="w-4 h-4 rotate-180" />
+                          Prev
+                        </motion.button>
 
-                      <span className="text-[11px] text-slate-405 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
-                        Page {currentPage + 1} of {totalPages} &middot; {filteredQuestions.length} questions
-                      </span>
+                        <span className="text-[11px] text-slate-405 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
+                          Page {currentPage + 1} of {totalPages} &middot; {filteredQuestions.length} questions
+                        </span>
 
-                      <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 ${
-                          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 cursor-pointer'
-                        }`}
-                        style={{ fontFamily: 'Poppins, sans-serif' }}
-                      >
-                        Next
-                        <ChevronRight className="w-4 h-4" />
-                      </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 ${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 cursor-pointer'
+                            }`}
+                          style={{ fontFamily: 'Poppins, sans-serif' }}
+                        >
+                          Next
+                          <ChevronRight className="w-4 h-4" />
+                        </motion.button>
+                      </div>
+                    )}
                   </div>
                 </div>
 
@@ -803,11 +796,10 @@ export default function Community() {
                           <div className="flex items-center justify-between">
                             <button
                               onClick={() => toggleLike(conf.id)}
-                              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${
-                                likedIds.has(conf.id)
+                              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
                                   ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
                                   : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
-                              }`}
+                                }`}
                             >
                               <Heart
                                 className="w-3.5 h-3.5"

From 0460bb4a2bd658e1f6426dcc9b6dffb974d55147 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 14:08:49 +0530
Subject: [PATCH 15/24] ui: make inputs glow premium orange on focus and remove
 default outlines

---
 src/pages/Community/Community.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 0fe10fe..b7114bb 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -346,7 +346,7 @@ export default function Community() {
                       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-[#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"
+                      className="w-full border border-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-4 focus:ring-orange-500/10 focus:bg-white bg-slate-50/30 resize-none transition-all mb-3.5"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <input
@@ -354,7 +354,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-[#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"
+                      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-[#F97316] focus:ring-4 focus:ring-orange-500/10 focus:bg-white bg-slate-50/30 transition-all mb-4"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">

From beb075f9b90aab23e6b06ba3ac808d4f673376a5 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 14:10:07 +0530
Subject: [PATCH 16/24] ui: remove empty answers helper text fallback in Q&A
 cards

---
 src/pages/Community/Community.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index b7114bb..53a2dcc 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -586,11 +586,7 @@ export default function Community() {
                                               </div>
                                             ))}
                                           </div>
-                                        ) : (
-                                          <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>
-                                        )}
+                                        ) : null}
                                       </div>
                                     )}
                                   </div>

From 528071ec4d7f5f100c5c23bed064af3b924b12a6 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 14:16:48 +0530
Subject: [PATCH 17/24] ui: remove duplicate description text in one-line Q&A
 cards

---
 src/pages/Community/Community.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 53a2dcc..02d86e1 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -495,10 +495,12 @@ export default function Community() {
                                       {q.title}
                                     </h3>
 
-                                    <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>
+                                    {q.body && q.body.trim() !== q.title.trim() && (
+                                      <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-2.5 border-t border-slate-100/60">
                                       {/* Left side: Replies & Likes & Tags inline */}

From 83f1a29d0d9f7ad53be41758668367b81172a84c Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 14:24:06 +0530
Subject: [PATCH 18/24] ui: change empty replies placeholder button text from
 'No replies yet' to '0 replies'

---
 src/pages/Community/Community.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 02d86e1..ba48977 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -515,7 +515,7 @@ export default function Community() {
                                         >
                                           <MessageCircle className="w-3.5 h-3.5" />
                                           <span style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                            {ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : 'No replies yet'}
+                                            {ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : '0 replies'}
                                           </span>
                                         </button>
 

From 7aa1fc52fba9ae5d0fcf3be29caa6ecd19ccc8d0 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 21:22:05 +0530
Subject: [PATCH 19/24] ui: remove mock confessions in frontend and add empty
 state placeholder card

---
 src/constants/index.ts            |  24 +------
 src/pages/Community/Community.tsx | 104 +++++++++++++++++-------------
 2 files changed, 59 insertions(+), 69 deletions(-)

diff --git a/src/constants/index.ts b/src/constants/index.ts
index eb3d9d1..5cceef1 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -861,29 +861,7 @@ export const QUESTIONS_DATA: Question[] = [
 ];
 
 // ─── Confessions ─────────────────────────────────────────────────────────────
-export const CONFESSIONS_DATA: Confession[] = [
-  {
-    id: '1',
-    content: 'I was so nervous on my first day that I went to the wrong department. A senior helped me out and became my best friend. RIT has such a warm community! 🧡',
-    createdAt: '2025-07-19T11:00:00Z',
-    reactions: 87,
-    category: 'Wholesome',
-  },
-  {
-    id: '2',
-    content: 'The library WiFi is actually faster than my home connection. No complaints from me 😂',
-    createdAt: '2025-07-18T15:30:00Z',
-    reactions: 134,
-    category: 'Funny',
-  },
-  {
-    id: '3',
-    content: 'I have a crush on someone in my class but I\'m too shy to talk. We have been in the same group project for 2 months now 😅',
-    createdAt: '2025-07-17T09:00:00Z',
-    reactions: 212,
-    category: 'Crush',
-  },
-];
+export const CONFESSIONS_DATA: Confession[] = [];
 
 // ─── Toolkit Items ───────────────────────────────────────────────────────────
 export const TOOLKIT_ITEMS: ToolkitItem[] = [
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index ba48977..005479e 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -765,52 +765,64 @@ export default function Community() {
                   </div>
 
                   {/* Confessions Feed */}
-                  <StaggerContainer className="flex flex-col gap-4">
-                    {CONFESSIONS_DATA.map((conf) => (
-                      <StaggerItem key={conf.id}>
-                        <motion.div
-                          whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
-                          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">
-                              <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-slate-50 border border-slate-100">
-                                <Shield className="w-4 h-4 text-slate-500" />
-                              </div>
-                              <div>
-                                <span className="text-xs font-bold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
-                                <p className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(conf.createdAt)}</p>
-                              </div>
-                            </div>
-                            {conf.category && (
-                              <span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-55 text-slate-650 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                {conf.category}
-                              </span>
-                            )}
-                          </div>
-                          <p className="text-[13px] text-slate-750 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
-                          <div className="flex items-center justify-between">
-                            <button
-                              onClick={() => toggleLike(conf.id)}
-                              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
-                                  ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
-                                  : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
-                                }`}
-                            >
-                              <Heart
-                                className="w-3.5 h-3.5"
-                                fill={likedIds.has(conf.id) ? '#e11d48' : 'none'}
-                                color={likedIds.has(conf.id) ? '#e11d48' : 'currentColor'}
-                              />
-                              <span>{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
-                            </button>
-                          </div>
-                        </motion.div>
-                      </StaggerItem>
-                    ))}
-                  </StaggerContainer>
+                   {CONFESSIONS_DATA.length > 0 ? (
+                     <StaggerContainer className="flex flex-col gap-4">
+                       {CONFESSIONS_DATA.map((conf) => (
+                         <StaggerItem key={conf.id}>
+                           <motion.div
+                             whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
+                             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">
+                                 <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-slate-50 border border-slate-100">
+                                   <Shield className="w-4 h-4 text-slate-500" />
+                                 </div>
+                                 <div>
+                                   <span className="text-xs font-bold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
+                                   <p className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(conf.createdAt)}</p>
+                                 </div>
+                               </div>
+                               {conf.category && (
+                                 <span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-50 text-slate-600 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                                   {conf.category}
+                                 </span>
+                               )}
+                             </div>
+                             <p className="text-[13px] text-slate-755 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
+                             <div className="flex items-center justify-between">
+                               <button
+                                 onClick={() => toggleLike(conf.id)}
+                                 className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
+                                     ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
+                                     : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
+                                   }`}
+                               >
+                                 <Heart
+                                   className="w-3.5 h-3.5"
+                                   fill={likedIds.has(conf.id) ? '#e11d48' : 'none'}
+                                   color={likedIds.has(conf.id) ? '#e11d48' : 'currentColor'}
+                                 />
+                                 <span>{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
+                               </button>
+                             </div>
+                           </motion.div>
+                         </StaggerItem>
+                       ))}
+                     </StaggerContainer>
+                   ) : (
+                     <div className="bg-white rounded-2xl border border-[#E5E7EB] p-8 text-center" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
+                       <Shield className="w-8 h-8 text-slate-300 mx-auto mb-3" />
+                       <p className="text-sm font-semibold text-slate-700 mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                         No Confessions Yet
+                       </p>
+                       <p className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
+                         Be the first to post a confession anonymously!
+                       </p>
+                     </div>
+                   )}
                 </div>
 
                 {/* Sidebar */}

From 3d948e3192316fc5f72d1c00c5c220c72f223fe2 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 21:27:36 +0530
Subject: [PATCH 20/24] ui: remove confessions tab and layout from the
 community page completely

---
 src/pages/Community/Community.tsx | 212 +-----------------------------
 1 file changed, 1 insertion(+), 211 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 005479e..730ba07 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -9,8 +9,6 @@ import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/An
 import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
 import { CONFESSIONS_DATA } from '@/constants';
 
-type Tab = 'qa' | 'confession';
-
 const TRENDING_TAGS = ['hostel', 'academics', 'clubs', 'campus', 'canteen', 'sports', 'placement', 'library', 'cat exam', 'semester', 'labs', 'exams'];
 
 const AVATARS: Record<string, string> = {
@@ -66,11 +64,8 @@ const getRelativeTime = (dateString: string) => {
 export default function Community() {
   const PAGE_SIZE = 5;
 
-  const [activeTab, setActiveTab] = useState<Tab>('qa');
-  const [confessionText, setConfessionText] = useState('');
   const [questionText, setQuestionText] = useState('');
   const [authorName, setAuthorName] = useState('');
-  const [confessionPosted, setConfessionPosted] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
   const [expandedQuestionIds, setExpandedQuestionIds] = useState<Set<string>>(new Set());
@@ -170,13 +165,6 @@ export default function Community() {
     document.getElementById('qa-questions-list')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   };
 
-  const handleConfess = () => {
-    if (!confessionText.trim()) return;
-    setConfessionPosted(true);
-    setConfessionText('');
-    setTimeout(() => setConfessionPosted(false), 3000);
-  };
-
   const handleLike = async (id: string) => {
     let isLikedNow = false;
     setLikedIds((prev) => {
@@ -300,44 +288,7 @@ export default function Community() {
       </div>
 
       <div className="container-custom py-10">
-        {/* Tabs */}
-        <div className="flex gap-1.5 bg-slate-100 rounded-xl p-1.5 border border-slate-200/40 mb-8 w-fit">
-          {[
-            { id: 'qa' as Tab, label: 'Freshers Q&A', icon: MessageCircle },
-            { id: 'confession' as Tab, label: 'Confessions', icon: Heart },
-          ].map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className="relative flex items-center gap-2 px-4 py-2 rounded-lg text-[13px] font-medium transition-all cursor-pointer"
-              style={{ fontFamily: 'Poppins, sans-serif', color: activeTab === tab.id ? '#ffffff' : '#64748B' }}
-            >
-              {activeTab === tab.id && (
-                <motion.div
-                  layoutId="community-tab"
-                  className="absolute inset-0 rounded-lg bg-slate-950"
-                  transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
-                />
-              )}
-              <span className="relative z-10 flex items-center gap-2">
-                <tab.icon className="w-3.5 h-3.5" />
-                {tab.label}
-              </span>
-            </button>
-          ))}
-        </div>
-
-        <AnimatePresence mode="wait">
-          {/* Q&A Tab */}
-          {activeTab === 'qa' && (
-            <motion.div
-              key="qa"
-              initial={{ opacity: 0, y: 12 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -12 }}
-              transition={{ duration: 0.25 }}
-            >
-              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 <div className="lg:col-span-2">                  {/* 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)' }}>
                     <h3 className="text-base font-semibold text-[#1E293B] mb-3 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3>
@@ -689,167 +640,6 @@ export default function Community() {
                   </AnimatedContainer>
                 </div>
               </div>
-            </motion.div>
-          )}
-
-          {/* Confessions Tab */}
-          {activeTab === 'confession' && (
-            <motion.div
-              key="confession"
-              initial={{ opacity: 0, y: 12 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -12 }}
-              transition={{ duration: 0.25 }}
-            >
-              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                <div className="lg:col-span-2">
-                  {/* Post confession */}
-                  <div
-                    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">
-                      <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-slate-800">
-                        <Lock className="w-4.5 h-4.5 text-slate-300" />
-                      </div>
-                      <div>
-                        <h3 className="text-white font-semibold text-sm tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Share Anonymously</h3>
-                        <p className="text-slate-400 text-[11px]">Your identity is never revealed</p>
-                      </div>
-                    </div>
-
-                    <textarea
-                      value={confessionText}
-                      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-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-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.
-                      </span>
-                    </div>
-
-                    <div className="flex items-center gap-3">
-                      <motion.button
-                        whileHover={{ scale: 1.01 }}
-                        whileTap={{ scale: 0.99 }}
-                        onClick={handleConfess}
-                        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" />
-                        Post Anonymously
-                      </motion.button>
-
-                      <AnimatePresence>
-                        {confessionPosted && (
-                          <motion.span
-                            initial={{ opacity: 0, x: -10 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            exit={{ opacity: 0 }}
-                            className="text-xs text-emerald-400"
-                            style={{ fontFamily: 'Inter, sans-serif' }}
-                          >
-                            ✓ Posted successfully!
-                          </motion.span>
-                        )}
-                      </AnimatePresence>
-                    </div>
-                  </div>
-
-                  {/* Confessions Feed */}
-                   {CONFESSIONS_DATA.length > 0 ? (
-                     <StaggerContainer className="flex flex-col gap-4">
-                       {CONFESSIONS_DATA.map((conf) => (
-                         <StaggerItem key={conf.id}>
-                           <motion.div
-                             whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
-                             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">
-                                 <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-slate-50 border border-slate-100">
-                                   <Shield className="w-4 h-4 text-slate-500" />
-                                 </div>
-                                 <div>
-                                   <span className="text-xs font-bold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
-                                   <p className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(conf.createdAt)}</p>
-                                 </div>
-                               </div>
-                               {conf.category && (
-                                 <span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-50 text-slate-600 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                   {conf.category}
-                                 </span>
-                               )}
-                             </div>
-                             <p className="text-[13px] text-slate-755 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
-                             <div className="flex items-center justify-between">
-                               <button
-                                 onClick={() => toggleLike(conf.id)}
-                                 className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
-                                     ? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
-                                     : 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
-                                   }`}
-                               >
-                                 <Heart
-                                   className="w-3.5 h-3.5"
-                                   fill={likedIds.has(conf.id) ? '#e11d48' : 'none'}
-                                   color={likedIds.has(conf.id) ? '#e11d48' : 'currentColor'}
-                                 />
-                                 <span>{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
-                               </button>
-                             </div>
-                           </motion.div>
-                         </StaggerItem>
-                       ))}
-                     </StaggerContainer>
-                   ) : (
-                     <div className="bg-white rounded-2xl border border-[#E5E7EB] p-8 text-center" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                       <Shield className="w-8 h-8 text-slate-300 mx-auto mb-3" />
-                       <p className="text-sm font-semibold text-slate-700 mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                         No Confessions Yet
-                       </p>
-                       <p className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
-                         Be the first to post a confession anonymously!
-                       </p>
-                     </div>
-                   )}
-                </div>
-
-                {/* Sidebar */}
-                <AnimatedContainer direction="right" delay={0.15}>
-                  <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-[#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>
-                    {[
-                      'Be respectful and kind',
-                      'No hate speech or bullying',
-                      'No personal information',
-                      'Keep it relevant to campus life',
-                      'Confessions are 100% anonymous',
-                    ].map((rule, i) => (
-                      <div key={i} className="flex items-start gap-2.5 py-2.5 border-b border-slate-100 last:border-0">
-                        <ChevronRight className="w-3.5 h-3.5 text-slate-400 mt-0.5 shrink-0" />
-                        <span className="text-xs text-slate-650" style={{ fontFamily: 'Inter, sans-serif' }}>{rule}</span>
-                      </div>
-                    ))}
-                  </div>
-                </AnimatedContainer>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
       </div>
     </div>
   );

From f1010e01b5dcb8e9c5efab7d45468b9dae27450a Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 21:31:42 +0530
Subject: [PATCH 21/24] ui: make inputs focus state clean, single border with
 no double outlines

---
 src/pages/Community/Community.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 730ba07..5410a19 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -297,7 +297,7 @@ export default function Community() {
                       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-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-4 focus:ring-orange-500/10 focus:bg-white bg-slate-50/30 resize-none transition-all mb-3.5"
+                      className="w-full border border-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-0 focus:bg-white bg-slate-50/30 resize-none transition-all mb-3.5"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <input
@@ -305,7 +305,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-[#E5E7EB] rounded-2xl px-4 py-2.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-4 focus:ring-orange-500/10 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-[#F97316] focus:ring-0 focus:bg-white bg-slate-50/30 transition-all mb-4"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">

From e37d935324cc9b71168472ace892b7b7b4f55cb8 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 21:35:47 +0530
Subject: [PATCH 22/24] ui: implement soft glow fade-in focus design for Q&A
 inputs

---
 src/pages/Community/Community.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index 5410a19..f6361a7 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -297,7 +297,7 @@ export default function Community() {
                       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-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-0 focus:bg-white bg-slate-50/30 resize-none transition-all mb-3.5"
+                      className="w-full border border-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-4 focus:ring-orange-500/[0.12] focus:bg-orange-500/[0.02] bg-slate-50/30 resize-none transition-all duration-250 ease-in-out mb-3.5"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <input
@@ -305,7 +305,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-[#E5E7EB] rounded-2xl px-4 py-2.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-0 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-[#F97316] focus:ring-4 focus:ring-orange-500/[0.12] focus:bg-orange-500/[0.02] bg-slate-50/30 transition-all duration-250 ease-in-out mb-4"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">

From fc94b5081f5114beb9cd0ec03a9105e78cde7a41 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 21:52:57 +0530
Subject: [PATCH 23/24] ui: implement verified-card focus state style on Q&A
 inputs

---
 src/index.css                     | 14 ++++++++++++++
 src/pages/Community/Community.tsx |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 74c3655..dc0e58c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -294,3 +294,17 @@ h1, h2, h3, h4, h5, h6 {
   align-self: flex-start;
   border: 1px solid #E5E7EB;
 }
+
+/* Verified card style input focus state */
+.verified-focus-input {
+  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+  background-color: #FFFFFF;
+  border: 1.5px solid #E5E7EB !important;
+}
+
+.verified-focus-input:focus {
+  outline: none !important;
+  border-color: #F97316 !important;
+  background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFF7ED 100%) !important;
+  box-shadow: none !important;
+}
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index f6361a7..b5ad697 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -297,7 +297,7 @@ export default function Community() {
                       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-[#E5E7EB] rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-4 focus:ring-orange-500/[0.12] focus:bg-orange-500/[0.02] bg-slate-50/30 resize-none transition-all duration-250 ease-in-out mb-3.5"
+                      className="w-full verified-focus-input rounded-2xl p-3.5 text-[13px] text-slate-800 placeholder-slate-400 resize-none mb-3.5"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <input
@@ -305,7 +305,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-[#E5E7EB] rounded-2xl px-4 py-2.5 text-[13px] text-slate-800 placeholder-slate-400 focus:outline-none focus:border-[#F97316] focus:ring-4 focus:ring-orange-500/[0.12] focus:bg-orange-500/[0.02] bg-slate-50/30 transition-all duration-250 ease-in-out mb-4"
+                      className="w-full md:w-64 verified-focus-input rounded-2xl px-4 py-2.5 text-[13px] text-slate-800 placeholder-slate-400 mb-4"
                       style={{ fontFamily: 'Inter, sans-serif' }}
                     />
                     <div className="flex items-center justify-between">

From 599df3254d975690370e79ffeb02f9dde13e9283 Mon Sep 17 00:00:00 2001
From: Devesh S <deveshdhanush73@gmail.com.com>
Date: Thu, 23 Jul 2026 21:59:38 +0530
Subject: [PATCH 24/24] ui: preserve input border radius and remove inner
 shaded gradient on focus

---
 src/index.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index dc0e58c..c5a32cf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -84,7 +84,6 @@ h1, h2, h3, h4, h5, h6 {
 :focus-visible {
   outline: 2px solid #F97316;
   outline-offset: 2px;
-  border-radius: 4px;
 }
 
 /* Animations */
@@ -305,6 +304,5 @@ h1, h2, h3, h4, h5, h6 {
 .verified-focus-input:focus {
   outline: none !important;
   border-color: #F97316 !important;
-  background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFF7ED 100%) !important;
   box-shadow: none !important;
 }