feat: add community sorting/filtering and quote post input

app/(main)/community/page.tsx

@@ -1,13 +1,33 @@
+"use client"
+
 import { ClipboardList, Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
 import Link from "next/link"
+import { useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { roleLabels } from "@/lib/constants"
-import { mockPosts } from "@/lib/mock-data"
+import { mockGames, mockPosts } from "@/lib/mock-data"
 
 export default function CommunityPage() {
+  const [sortMode, setSortMode] = useState<"latest" | "hot">("latest")
+  const [selectedGame, setSelectedGame] = useState<string | null>(null)
+
+  const filteredPosts = mockPosts
+    .filter((post) => {
+      if (!selectedGame) return true
+      return post.tags.includes(selectedGame)
+    })
+    .sort((a, b) => {
+      if (sortMode === "latest") {
+        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      }
+      const scoreA = a.likeCount + a.commentCount
+      const scoreB = b.likeCount + b.commentCount
+      return scoreB - scoreA
+    })
+
   return (
     <div className="container mx-auto py-8 px-4 max-w-2xl">
       <div className="flex items-center justify-between mb-6">
@@ -20,8 +40,41 @@ export default function CommunityPage() {
         </Button>
       </div>
 
+      <div className="flex flex-col gap-4 mb-6">
+        <div className="flex items-center gap-2">
+          <Button
+            variant={sortMode === "latest" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSortMode("latest")}
+            className="h-8"
+          >
+            最新
+          </Button>
+          <Button
+            variant={sortMode === "hot" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSortMode("hot")}
+            className="h-8"
+          >
+            最热
+          </Button>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {mockGames.map((game) => (
+            <Badge
+              key={game.id}
+              variant={selectedGame === game.name ? "default" : "outline"}
+              className="cursor-pointer hover:bg-primary/80 transition-colors px-3 py-1"
+              onClick={() => setSelectedGame(selectedGame === game.name ? null : game.name)}
+            >
+              {game.name}
+            </Badge>
+          ))}
+        </div>
+      </div>
+
       <div className="space-y-4">
-        {mockPosts.map((post) => (
+        {filteredPosts.map((post) => (
           <Link key={post.id} href={`/post/${post.id}`}>
             <Card className="hover:shadow-md transition-shadow">
               <CardHeader className="pb-3">