Complete modern forum UI with admin announcements and moderation

- Redesigned ForumOverview with modern, professional UI
- Added admin announcements banner with 4 priority types (info/warning/success/critical)
- Implemented upvote/downvote system with real-time updates
- Added forum statistics dashboard showing discussions, categories, users, replies
- Created category grid with visual icons and discussion counts
- Enhanced discussion cards with pin/lock/trending badges
- Integrated search, filtering, and sorting functionality
- Added comprehensive moderation panel with:
  - Reports queue management
  - Auto-moderation settings with AI sentiment analysis
  - User management with warn/suspend/ban actions
  - Moderation stats dashboard
- Created useForum hook with real-time Supabase subscriptions
- All data connected to Supabase with RLS policies for security

This completes the modern forum implementation as requested.

web/src/components/forum/ForumOverview.tsx

@@ -1,105 +1,100 @@
 import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { TrendingUp, TrendingDown, MessageSquare, Users, BarChart3, Search, Filter, Clock, Flame, Award } from 'lucide-react';
+import {
+  MessageSquare,
+  Users,
+  Search,
+  Filter,
+  Clock,
+  Flame,
+  Pin,
+  Lock,
+  TrendingUp,
+  ThumbsUp,
+  ThumbsDown,
+  Plus,
+  Megaphone,
+  AlertTriangle,
+  Info,
+  CheckCircle,
+  Eye,
+  Loader2
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useForum } from '@/hooks/useForum';
 import { DiscussionThread } from './DiscussionThread';
-
-interface Discussion {
-  id: string;
-  title: string;
-  proposalId: string;
-  author: string;
-  category: string;
-  replies: number;
-  views: number;
-  lastActivity: string;
-  sentiment: number;
-  trending: boolean;
-  pinned: boolean;
-  tags: string[];
-}
+import { useAuth } from '@/contexts/AuthContext';
+import { formatDistanceToNow } from 'date-fns';
 
 export function ForumOverview() {
   const { t } = useTranslation();
+  const { user } = useAuth();
+  const { announcements, categories, discussions, loading, error, reactToDiscussion } = useForum();
   const [selectedDiscussion, setSelectedDiscussion] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('recent');
   const [filterCategory, setFilterCategory] = useState('all');
 
-  const discussions: Discussion[] = [
-    {
-      id: '1',
-      title: 'Treasury Allocation for Developer Grants - Q1 2024',
-      proposalId: 'prop-001',
-      author: 'Dr. Rojin Ahmed',
-      category: 'Treasury',
-      replies: 45,
-      views: 1234,
-      lastActivity: '2 hours ago',
-      sentiment: 72,
-      trending: true,
-      pinned: true,
-      tags: ['treasury', 'grants', 'development']
-    },
-    {
-      id: '2',
-      title: 'Technical Upgrade: Implementing Zero-Knowledge Proofs',
-      proposalId: 'prop-002',
-      author: 'Kawa Mustafa',
-      category: 'Technical',
-      replies: 28,
-      views: 890,
-      lastActivity: '5 hours ago',
-      sentiment: 85,
-      trending: true,
-      pinned: false,
-      tags: ['technical', 'zkp', 'privacy']
-    },
-    {
-      id: '3',
-      title: 'Community Initiative: Education Program for New Users',
-      proposalId: 'prop-003',
-      author: 'Dilan Karim',
-      category: 'Community',
-      replies: 62,
-      views: 2100,
-      lastActivity: '1 day ago',
-      sentiment: 45,
-      trending: false,
-      pinned: false,
-      tags: ['community', 'education', 'onboarding']
+  const getAnnouncementStyle = (type: string) => {
+    switch (type) {
+      case 'critical':
+        return {
+          variant: 'destructive' as const,
+          icon: AlertTriangle,
+          bgClass: 'bg-red-500/10 border-red-500/20'
+        };
+      case 'warning':
+        return {
+          variant: 'default' as const,
+          icon: AlertTriangle,
+          bgClass: 'bg-yellow-500/10 border-yellow-500/20'
+        };
+      case 'success':
+        return {
+          variant: 'default' as const,
+          icon: CheckCircle,
+          bgClass: 'bg-green-500/10 border-green-500/20'
+        };
+      default:
+        return {
+          variant: 'default' as const,
+          icon: Info,
+          bgClass: 'bg-blue-500/10 border-blue-500/20'
+        };
     }
-  ];
-
-  const sentimentStats = {
-    positive: 42,
-    neutral: 35,
-    negative: 23
   };
 
-  const getSentimentColor = (sentiment: number) => {
-    if (sentiment >= 70) return 'text-green-600';
-    if (sentiment >= 40) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
-  const getSentimentIcon = (sentiment: number) => {
-    if (sentiment >= 70) return <TrendingUp className="h-4 w-4" />;
-    if (sentiment >= 40) return <BarChart3 className="h-4 w-4" />;
-    return <TrendingDown className="h-4 w-4" />;
-  };
+  const filteredDiscussions = discussions
+    .filter(d => {
+      const matchesSearch = d.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        d.content.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory = filterCategory === 'all' || d.category?.name.toLowerCase() === filterCategory.toLowerCase();
+      return matchesSearch && matchesCategory;
+    })
+    .sort((a, b) => {
+      switch (sortBy) {
+        case 'popular':
+          return (b.upvotes || 0) - (a.upvotes || 0);
+        case 'replies':
+          return b.replies_count - a.replies_count;
+        case 'views':
+          return b.views_count - a.views_count;
+        default:
+          return new Date(b.last_activity_at).getTime() - new Date(a.last_activity_at).getTime();
+      }
+    });
 
   if (selectedDiscussion) {
     return (
       <div className="space-y-6">
-        <Button 
-          variant="outline" 
+        <Button
+          variant="outline"
           onClick={() => setSelectedDiscussion(null)}
         >
           ← Back to Forum
@@ -109,41 +104,103 @@ export function ForumOverview() {
     );
   }
 
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="ml-3 text-muted-foreground">Loading forum...</span>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
-      {/* Sentiment Overview */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Community Sentiment Analysis</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm font-medium">Positive</span>
-                <span className="text-sm text-green-600">{sentimentStats.positive}%</span>
-              </div>
-              <Progress value={sentimentStats.positive} className="h-2 bg-green-100" />
-            </div>
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm font-medium">Neutral</span>
-                <span className="text-sm text-yellow-600">{sentimentStats.neutral}%</span>
-              </div>
-              <Progress value={sentimentStats.neutral} className="h-2 bg-yellow-100" />
-            </div>
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm font-medium">Negative</span>
-                <span className="text-sm text-red-600">{sentimentStats.negative}%</span>
-              </div>
-              <Progress value={sentimentStats.negative} className="h-2 bg-red-100" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      {/* Admin Announcements Banner */}
+      {announcements.length > 0 && (
+        <div className="space-y-3">
+          {announcements.map((announcement) => {
+            const style = getAnnouncementStyle(announcement.type);
+            const Icon = style.icon;
 
-      {/* Search and Filters */}
+            return (
+              <Alert key={announcement.id} className={style.bgClass}>
+                <div className="flex items-start gap-3">
+                  <Megaphone className="h-5 w-5 mt-0.5 flex-shrink-0" />
+                  <div className="flex-1">
+                    <AlertTitle className="text-lg font-semibold mb-2">
+                      {announcement.title}
+                    </AlertTitle>
+                    <AlertDescription className="text-sm">
+                      {announcement.content}
+                    </AlertDescription>
+                    <div className="mt-2 text-xs text-muted-foreground">
+                      Posted {formatDistanceToNow(new Date(announcement.created_at), { addSuffix: true })}
+                    </div>
+                  </div>
+                  <Icon className="h-5 w-5 flex-shrink-0" />
+                </div>
+              </Alert>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Forum Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Total Discussions</p>
+                <p className="text-2xl font-bold">{discussions.length}</p>
+              </div>
+              <MessageSquare className="h-8 w-8 text-blue-500" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Categories</p>
+                <p className="text-2xl font-bold">{categories.length}</p>
+              </div>
+              <Filter className="h-8 w-8 text-purple-500" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Active Users</p>
+                <p className="text-2xl font-bold">
+                  {new Set(discussions.map(d => d.author_id)).size}
+                </p>
+              </div>
+              <Users className="h-8 w-8 text-green-500" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Total Replies</p>
+                <p className="text-2xl font-bold">
+                  {discussions.reduce((sum, d) => sum + d.replies_count, 0)}
+                </p>
+              </div>
+              <TrendingUp className="h-8 w-8 text-yellow-500" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Search, Filters & Actions */}
       <Card>
         <CardContent className="pt-6">
           <div className="flex flex-col md:flex-row gap-4">
@@ -158,13 +215,15 @@ export function ForumOverview() {
             </div>
             <Select value={filterCategory} onValueChange={setFilterCategory}>
               <SelectTrigger className="w-full md:w-[180px]">
-                <SelectValue placeholder="Category" />
+                <SelectValue placeholder="All Categories" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Categories</SelectItem>
-                <SelectItem value="treasury">Treasury</SelectItem>
-                <SelectItem value="technical">Technical</SelectItem>
-                <SelectItem value="community">Community</SelectItem>
+                {categories.map((cat) => (
+                  <SelectItem key={cat.id} value={cat.name.toLowerCase()}>
+                    {cat.icon} {cat.name}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
             <Select value={sortBy} onValueChange={setSortBy}>
@@ -175,76 +234,155 @@ export function ForumOverview() {
                 <SelectItem value="recent">Most Recent</SelectItem>
                 <SelectItem value="popular">Most Popular</SelectItem>
                 <SelectItem value="replies">Most Replies</SelectItem>
-                <SelectItem value="sentiment">Best Sentiment</SelectItem>
+                <SelectItem value="views">Most Viewed</SelectItem>
               </SelectContent>
             </Select>
+            {user && (
+              <Button>
+                <Plus className="h-4 w-4 mr-2" />
+                New Discussion
+              </Button>
+            )}
           </div>
         </CardContent>
       </Card>
 
-      {/* Discussions List */}
-      <div className="space-y-4">
-        {discussions.map((discussion) => (
-          <Card 
-            key={discussion.id}
-            className="cursor-pointer hover:shadow-lg transition-shadow"
-            onClick={() => setSelectedDiscussion(discussion.proposalId)}
+      {/* Categories Grid */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+        {categories.map((category) => (
+          <Card
+            key={category.id}
+            className="cursor-pointer hover:shadow-lg transition-all hover:scale-105"
+            onClick={() => setFilterCategory(category.name.toLowerCase())}
           >
-            <CardContent className="pt-6">
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center gap-2 mb-2">
-                    {discussion.pinned && (
-                      <Badge variant="secondary">
-                        📌 Pinned
-                      </Badge>
-                    )}
-                    {discussion.trending && (
-                      <Badge variant="destructive">
-                        <Flame className="h-3 w-3 mr-1" />
-                        Trending
-                      </Badge>
-                    )}
-                    <Badge variant="outline">{discussion.category}</Badge>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">{discussion.title}</h3>
-                  <div className="flex items-center gap-4 text-sm text-gray-600">
-                    <span>by {discussion.author}</span>
-                    <span className="flex items-center gap-1">
-                      <MessageSquare className="h-4 w-4" />
-                      {discussion.replies} replies
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <Users className="h-4 w-4" />
-                      {discussion.views} views
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <Clock className="h-4 w-4" />
-                      {discussion.lastActivity}
-                    </span>
-                  </div>
-                  <div className="flex gap-2 mt-3">
-                    {discussion.tags.map((tag) => (
-                      <Badge key={tag} variant="secondary" className="text-xs">
-                        #{tag}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-                <div className="text-center ml-6">
-                  <div className={`text-2xl font-bold ${getSentimentColor(discussion.sentiment)}`}>
-                    {discussion.sentiment}%
-                  </div>
-                  <div className="flex items-center gap-1 text-sm text-gray-600">
-                    {getSentimentIcon(discussion.sentiment)}
-                    <span>Sentiment</span>
-                  </div>
-                </div>
-              </div>
+            <CardContent className="pt-6 text-center">
+              <div className="text-4xl mb-2">{category.icon}</div>
+              <h3 className="font-semibold">{category.name}</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                {discussions.filter(d => d.category?.id === category.id).length} discussions
+              </p>
             </CardContent>
           </Card>
         ))}
       </div>
+
+      {/* Discussions List */}
+      <div className="space-y-4">
+        {filteredDiscussions.length === 0 ? (
+          <Card>
+            <CardContent className="py-12 text-center">
+              <MessageSquare className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+              <p className="text-muted-foreground">No discussions found</p>
+              <p className="text-sm text-muted-foreground mt-2">
+                Try adjusting your search or filters
+              </p>
+            </CardContent>
+          </Card>
+        ) : (
+          filteredDiscussions.map((discussion) => (
+            <Card
+              key={discussion.id}
+              className="cursor-pointer hover:shadow-lg transition-shadow"
+              onClick={() => setSelectedDiscussion(discussion.id)}
+            >
+              <CardContent className="pt-6">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1">
+                    {/* Badges */}
+                    <div className="flex items-center gap-2 mb-3 flex-wrap">
+                      {discussion.is_pinned && (
+                        <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-700 border-yellow-500/20">
+                          <Pin className="h-3 w-3 mr-1" />
+                          Pinned
+                        </Badge>
+                      )}
+                      {discussion.is_locked && (
+                        <Badge variant="secondary" className="bg-red-500/10 text-red-700 border-red-500/20">
+                          <Lock className="h-3 w-3 mr-1" />
+                          Locked
+                        </Badge>
+                      )}
+                      {discussion.category && (
+                        <Badge variant="outline">
+                          {discussion.category.icon} {discussion.category.name}
+                        </Badge>
+                      )}
+                      {(discussion.upvotes || 0) > 10 && (
+                        <Badge variant="destructive">
+                          <Flame className="h-3 w-3 mr-1" />
+                          Trending
+                        </Badge>
+                      )}
+                    </div>
+
+                    {/* Title */}
+                    <h3 className="text-lg font-semibold mb-2 hover:text-primary transition-colors">
+                      {discussion.title}
+                    </h3>
+
+                    {/* Meta Info */}
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
+                      <span>by {discussion.author_name}</span>
+                      <span className="flex items-center gap-1">
+                        <MessageSquare className="h-4 w-4" />
+                        {discussion.replies_count} replies
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Eye className="h-4 w-4" />
+                        {discussion.views_count} views
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-4 w-4" />
+                        {formatDistanceToNow(new Date(discussion.last_activity_at), { addSuffix: true })}
+                      </span>
+                    </div>
+
+                    {/* Tags */}
+                    {discussion.tags && discussion.tags.length > 0 && (
+                      <div className="flex gap-2 mt-3 flex-wrap">
+                        {discussion.tags.map((tag) => (
+                          <Badge key={tag} variant="secondary" className="text-xs">
+                            #{tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Voting */}
+                  <div className="flex flex-col items-center gap-2 min-w-[60px]">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        reactToDiscussion(discussion.id, 'upvote');
+                      }}
+                      className="hover:text-green-500"
+                    >
+                      <ThumbsUp className="h-4 w-4" />
+                    </Button>
+                    <span className="text-lg font-bold">
+                      {(discussion.upvotes || 0) - (discussion.downvotes || 0)}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        reactToDiscussion(discussion.id, 'downvote');
+                      }}
+                      className="hover:text-red-500"
+                    >
+                      <ThumbsDown className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
     </div>
   );
-}
+}