ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Devesh S
2026-07-23 11:18:47 +05:30
parent 3060491914
commit 293104cab3
3 changed files with 279 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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

420
src/pages/Community/Community.tsx
View File

@@ -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>

2
telegram-bot/config.json
View File

@@ -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"
}