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,99 +1,94 @@
 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';
-
+import { useAuth } from '@/contexts/AuthContext';
-interface Discussion {
+import { formatDistanceToNow } from 'date-fns';
-  id: string;
-  title: string;
-  proposalId: string;
-  author: string;
-  category: string;
-  replies: number;
-  views: number;
-  lastActivity: string;
-  sentiment: number;
-  trending: boolean;
-  pinned: boolean;
-  tags: string[];
-}
 
 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[] = [
+  const getAnnouncementStyle = (type: string) => {
-    {
+    switch (type) {
-      id: '1',
+      case 'critical':
-      title: 'Treasury Allocation for Developer Grants - Q1 2024',
+        return {
-      proposalId: 'prop-001',
+          variant: 'destructive' as const,
-      author: 'Dr. Rojin Ahmed',
+          icon: AlertTriangle,
-      category: 'Treasury',
+          bgClass: 'bg-red-500/10 border-red-500/20'
-      replies: 45,
+        };
-      views: 1234,
+      case 'warning':
-      lastActivity: '2 hours ago',
+        return {
-      sentiment: 72,
+          variant: 'default' as const,
-      trending: true,
+          icon: AlertTriangle,
-      pinned: true,
+          bgClass: 'bg-yellow-500/10 border-yellow-500/20'
-      tags: ['treasury', 'grants', 'development']
+        };
-    },
+      case 'success':
-    {
+        return {
-      id: '2',
+          variant: 'default' as const,
-      title: 'Technical Upgrade: Implementing Zero-Knowledge Proofs',
+          icon: CheckCircle,
-      proposalId: 'prop-002',
+          bgClass: 'bg-green-500/10 border-green-500/20'
-      author: 'Kawa Mustafa',
+        };
-      category: 'Technical',
+      default:
-      replies: 28,
+        return {
-      views: 890,
+          variant: 'default' as const,
-      lastActivity: '5 hours ago',
+          icon: Info,
-      sentiment: 85,
+          bgClass: 'bg-blue-500/10 border-blue-500/20'
-      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 sentimentStats = {
-    positive: 42,
-    neutral: 35,
-    negative: 23
   };
 
-  const getSentimentColor = (sentiment: number) => {
+  const filteredDiscussions = discussions
-    if (sentiment >= 70) return 'text-green-600';
+    .filter(d => {
-    if (sentiment >= 40) return 'text-yellow-600';
+      const matchesSearch = d.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    return 'text-red-600';
+        d.content.toLowerCase().includes(searchQuery.toLowerCase());
-  };
+      const matchesCategory = filterCategory === 'all' || d.category?.name.toLowerCase() === filterCategory.toLowerCase();
-
+      return matchesSearch && matchesCategory;
-  const getSentimentIcon = (sentiment: number) => {
+    })
-    if (sentiment >= 70) return <TrendingUp className="h-4 w-4" />;
+    .sort((a, b) => {
-    if (sentiment >= 40) return <BarChart3 className="h-4 w-4" />;
+      switch (sortBy) {
-    return <TrendingDown className="h-4 w-4" />;
+        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 (
@@ -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 */}
+      {/* Admin Announcements Banner */}
-      <Card>
+      {announcements.length > 0 && (
-        <CardHeader>
+        <div className="space-y-3">
-          <CardTitle>Community Sentiment Analysis</CardTitle>
+          {announcements.map((announcement) => {
-        </CardHeader>
+            const style = getAnnouncementStyle(announcement.type);
-        <CardContent>
+            const Icon = style.icon;
-          <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>
 
-      {/* 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>
+                {categories.map((cat) => (
-                <SelectItem value="technical">Technical</SelectItem>
+                  <SelectItem key={cat.id} value={cat.name.toLowerCase()}>
-                <SelectItem value="community">Community</SelectItem>
+                    {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 */}
+      {/* Categories Grid */}
-      <div className="space-y-4">
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-        {discussions.map((discussion) => (
+        {categories.map((category) => (
           <Card
-            key={discussion.id}
+            key={category.id}
-            className="cursor-pointer hover:shadow-lg transition-shadow"
+            className="cursor-pointer hover:shadow-lg transition-all hover:scale-105"
-            onClick={() => setSelectedDiscussion(discussion.proposalId)}
+            onClick={() => setFilterCategory(category.name.toLowerCase())}
           >
-            <CardContent className="pt-6">
+            <CardContent className="pt-6 text-center">
-              <div className="flex items-start justify-between">
+              <div className="text-4xl mb-2">{category.icon}</div>
-                <div className="flex-1">
+              <h3 className="font-semibold">{category.name}</h3>
-                  <div className="flex items-center gap-2 mb-2">
+              <p className="text-xs text-muted-foreground mt-1">
-                    {discussion.pinned && (
+                {discussions.filter(d => d.category?.id === category.id).length} discussions
-                      <Badge variant="secondary">
+              </p>
-                        📌 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>
           </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>
   );
 }

web/src/hooks/useForum.ts

@@ -0,0 +1,269 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '@/lib/supabase';
+
+export interface AdminAnnouncement {
+  id: string;
+  title: string;
+  content: string;
+  type: 'info' | 'warning' | 'success' | 'critical';
+  priority: number;
+  created_at: string;
+  expires_at?: string;
+}
+
+export interface ForumCategory {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  color: string;
+  discussion_count?: number;
+}
+
+export interface ForumDiscussion {
+  id: string;
+  category_id: string;
+  category?: ForumCategory;
+  proposal_id?: string;
+  title: string;
+  content: string;
+  author_id: string;
+  author_name: string;
+  author_address?: string;
+  is_pinned: boolean;
+  is_locked: boolean;
+  views_count: number;
+  replies_count: number;
+  tags: string[];
+  created_at: string;
+  updated_at: string;
+  last_activity_at: string;
+  upvotes?: number;
+  downvotes?: number;
+}
+
+export interface ForumReply {
+  id: string;
+  discussion_id: string;
+  parent_reply_id?: string;
+  content: string;
+  author_id: string;
+  author_name: string;
+  author_address?: string;
+  is_edited: boolean;
+  edited_at?: string;
+  created_at: string;
+  upvotes?: number;
+  downvotes?: number;
+}
+
+export function useForum() {
+  const [announcements, setAnnouncements] = useState<AdminAnnouncement[]>([]);
+  const [categories, setCategories] = useState<ForumCategory[]>([]);
+  const [discussions, setDiscussions] = useState<ForumDiscussion[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchForumData();
+
+    // Subscribe to real-time updates
+    const discussionsSubscription = supabase
+      .channel('forum_discussions')
+      .on('postgres_changes', {
+        event: '*',
+        schema: 'public',
+        table: 'forum_discussions'
+      }, () => {
+        fetchDiscussions();
+      })
+      .subscribe();
+
+    const announcementsSubscription = supabase
+      .channel('admin_announcements')
+      .on('postgres_changes', {
+        event: '*',
+        schema: 'public',
+        table: 'admin_announcements'
+      }, () => {
+        fetchAnnouncements();
+      })
+      .subscribe();
+
+    return () => {
+      discussionsSubscription.unsubscribe();
+      announcementsSubscription.unsubscribe();
+    };
+  }, []);
+
+  const fetchForumData = async () => {
+    setLoading(true);
+    await Promise.all([
+      fetchAnnouncements(),
+      fetchCategories(),
+      fetchDiscussions()
+    ]);
+    setLoading(false);
+  };
+
+  const fetchAnnouncements = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('admin_announcements')
+        .select('*')
+        .eq('is_active', true)
+        .or(`expires_at.is.null,expires_at.gt.${new Date().toISOString()}`)
+        .order('priority', { ascending: false })
+        .order('created_at', { ascending: false })
+        .limit(3);
+
+      if (error) throw error;
+      setAnnouncements(data || []);
+    } catch (err) {
+      console.error('Error fetching announcements:', err);
+    }
+  };
+
+  const fetchCategories = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('forum_categories')
+        .select('*')
+        .eq('is_active', true)
+        .order('display_order');
+
+      if (error) throw error;
+      setCategories(data || []);
+    } catch (err) {
+      console.error('Error fetching categories:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch categories');
+    }
+  };
+
+  const fetchDiscussions = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('forum_discussions')
+        .select(`
+          *,
+          category:forum_categories(*)
+        `)
+        .order('is_pinned', { ascending: false })
+        .order('last_activity_at', { ascending: false })
+        .limit(50);
+
+      if (error) throw error;
+
+      // Fetch reaction counts for each discussion
+      const discussionsWithReactions = await Promise.all(
+        (data || []).map(async (discussion) => {
+          const { data: reactions } = await supabase
+            .from('forum_reactions')
+            .select('reaction_type')
+            .eq('discussion_id', discussion.id);
+
+          const upvotes = reactions?.filter(r => r.reaction_type === 'upvote').length || 0;
+          const downvotes = reactions?.filter(r => r.reaction_type === 'downvote').length || 0;
+
+          return {
+            ...discussion,
+            upvotes,
+            downvotes
+          };
+        })
+      );
+
+      setDiscussions(discussionsWithReactions);
+    } catch (err) {
+      console.error('Error fetching discussions:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch discussions');
+    }
+  };
+
+  const createDiscussion = async (discussionData: {
+    category_id: string;
+    title: string;
+    content: string;
+    tags?: string[];
+    proposal_id?: string;
+  }) => {
+    try {
+      const user = (await supabase.auth.getUser()).data.user;
+      if (!user) throw new Error('User not authenticated');
+
+      const { data, error } = await supabase
+        .from('forum_discussions')
+        .insert({
+          ...discussionData,
+          author_id: user.id,
+          author_name: user.email || 'Anonymous'
+        })
+        .select()
+        .single();
+
+      if (error) throw error;
+      await fetchDiscussions();
+      return data;
+    } catch (err) {
+      console.error('Error creating discussion:', err);
+      throw err;
+    }
+  };
+
+  const reactToDiscussion = async (discussionId: string, reactionType: 'upvote' | 'downvote') => {
+    try {
+      const user = (await supabase.auth.getUser()).data.user;
+      if (!user) throw new Error('User not authenticated');
+
+      // Check if user already reacted
+      const { data: existing } = await supabase
+        .from('forum_reactions')
+        .select('*')
+        .eq('discussion_id', discussionId)
+        .eq('user_id', user.id)
+        .eq('reaction_type', reactionType)
+        .single();
+
+      if (existing) {
+        // Remove reaction
+        await supabase
+          .from('forum_reactions')
+          .delete()
+          .eq('id', existing.id);
+      } else {
+        // Add reaction (remove opposite reaction first)
+        const oppositeType = reactionType === 'upvote' ? 'downvote' : 'upvote';
+        await supabase
+          .from('forum_reactions')
+          .delete()
+          .eq('discussion_id', discussionId)
+          .eq('user_id', user.id)
+          .eq('reaction_type', oppositeType);
+
+        await supabase
+          .from('forum_reactions')
+          .insert({
+            discussion_id: discussionId,
+            user_id: user.id,
+            reaction_type: reactionType
+          });
+      }
+
+      await fetchDiscussions();
+    } catch (err) {
+      console.error('Error reacting to discussion:', err);
+      throw err;
+    }
+  };
+
+  return {
+    announcements,
+    categories,
+    discussions,
+    loading,
+    error,
+    createDiscussion,
+    reactToDiscussion,
+    refreshData: fetchForumData
+  };
+}