-
+
{post.author.displayName || post.author.handle}
@{post.author.handle} · {formatTime(post.createdAt)}
diff --git a/src/app/api/users/route.ts b/src/app/api/users/route.ts
new file mode 100644
index 0000000..98d48ca
--- /dev/null
+++ b/src/app/api/users/route.ts
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/db';
+import { users } from '@/db';
+import { desc, sql } from 'drizzle-orm';
+
+export async function GET(request: NextRequest) {
+ try {
+ if (!db) {
+ return NextResponse.json({ users: [] });
+ }
+
+ const searchParams = request.nextUrl.searchParams;
+ const limit = Math.min(parseInt(searchParams.get('limit') || '20'), 50);
+
+ const userList = await db
+ .select({
+ id: users.id,
+ handle: users.handle,
+ displayName: users.displayName,
+ bio: users.bio,
+ avatarUrl: users.avatarUrl,
+ createdAt: users.createdAt,
+ })
+ .from(users)
+ .where(sql`${users.status} IS NULL OR ${users.status} != 'suspended'`)
+ .orderBy(desc(users.createdAt))
+ .limit(limit);
+
+ return NextResponse.json({ users: userList });
+ } catch (error) {
+ console.error('List users error:', error);
+ return NextResponse.json({ users: [] });
+ }
+}
diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx
new file mode 100644
index 0000000..e81a719
--- /dev/null
+++ b/src/app/explore/page.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+interface User {
+ id: string;
+ handle: string;
+ displayName: string;
+ avatarUrl?: string;
+ bio?: string;
+}
+
+interface MediaItem {
+ id: string;
+ url: string;
+ altText?: string | null;
+}
+
+interface Post {
+ id: string;
+ content: string;
+ createdAt: string;
+ likesCount: number;
+ repostsCount: number;
+ repliesCount: number;
+ author: User;
+ media?: MediaItem[];
+}
+
+const SearchIcon = () => (
+
+);
+
+const TrendingIcon = () => (
+
+);
+
+const UsersIcon = () => (
+
+);
+
+const HeartIcon = ({ filled }: { filled?: boolean }) => (
+
+);
+
+const RepeatIcon = () => (
+
+);
+
+const MessageIcon = () => (
+
+);
+
+function PostCard({ post }: { post: Post }) {
+ const [liked, setLiked] = useState(false);
+ const [reposted, setReposted] = useState(false);
+
+ const formatTime = (dateStr: string) => {
+ const date = new Date(dateStr);
+ const now = new Date();
+ const diff = now.getTime() - date.getTime();
+ const minutes = Math.floor(diff / 60000);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (minutes < 1) return 'now';
+ if (minutes < 60) return `${minutes}m`;
+ if (hours < 24) return `${hours}h`;
+ if (days < 7) return `${days}d`;
+ return date.toLocaleDateString();
+ };
+
+ const handleLike = async () => {
+ setLiked(!liked);
+ await fetch(`/api/posts/${post.id}/like`, { method: 'POST' });
+ };
+
+ const handleRepost = async () => {
+ setReposted(!reposted);
+ await fetch(`/api/posts/${post.id}/repost`, { method: 'POST' });
+ };
+
+ return (
+
+
+
+ {post.author.avatarUrl ? (
+
+ ) : (
+ post.author.displayName?.charAt(0).toUpperCase() || post.author.handle.charAt(0).toUpperCase()
+ )}
+
+
+
+ {post.author.displayName || post.author.handle}
+
+ @{post.author.handle} · {formatTime(post.createdAt)}
+
+
{post.content}
+ {post.media && post.media.length > 0 && (
+
+ {post.media.map((item) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+function UserCard({ user }: { user: User }) {
+ return (
+
+
+ {user.avatarUrl ? (
+
+ ) : (
+ user.displayName?.charAt(0).toUpperCase() || user.handle.charAt(0).toUpperCase()
+ )}
+
+
+
{user.displayName || user.handle}
+
@{user.handle}
+ {user.bio &&
{user.bio}
}
+
+
+ );
+}
+
+export default function ExplorePage() {
+ const [query, setQuery] = useState('');
+ const [activeTab, setActiveTab] = useState<'trending' | 'users' | 'search'>('trending');
+ const [trendingPosts, setTrendingPosts] = useState
([]);
+ const [users, setUsers] = useState([]);
+ const [searchResults, setSearchResults] = useState<{ posts: Post[]; users: User[] }>({ posts: [], users: [] });
+ const [loading, setLoading] = useState(true);
+ const [searching, setSearching] = useState(false);
+
+ useEffect(() => {
+ // Load trending posts
+ const loadTrending = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch('/api/posts?type=curated&limit=20');
+ const data = await res.json();
+ setTrendingPosts(data.posts || []);
+ } catch {
+ setTrendingPosts([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadTrending();
+ }, []);
+
+ useEffect(() => {
+ // Load users when tab changes to users
+ if (activeTab === 'users' && users.length === 0) {
+ const loadUsers = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch('/api/users?limit=20');
+ const data = await res.json();
+ setUsers(data.users || []);
+ } catch {
+ setUsers([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+ loadUsers();
+ }
+ }, [activeTab, users.length]);
+
+ const handleSearch = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!query.trim()) return;
+
+ setSearching(true);
+ setActiveTab('search');
+
+ try {
+ const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+ const data = await res.json();
+ setSearchResults({
+ posts: data.posts || [],
+ users: data.users || [],
+ });
+ } catch {
+ setSearchResults({ posts: [], users: [] });
+ } finally {
+ setSearching(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {searchResults.posts.length > 0 || searchResults.users.length > 0 ? (
+
+ ) : null}
+
+
+
+ {activeTab === 'trending' && (
+ loading ? (
+
Loading trending posts...
+ ) : trendingPosts.length === 0 ? (
+
+
+
No trending posts yet
+
+ ) : (
+
+ {trendingPosts.map((post) => (
+
+ ))}
+
+ )
+ )}
+
+ {activeTab === 'users' && (
+ loading ? (
+
Loading users...
+ ) : users.length === 0 ? (
+
+ ) : (
+
+ {users.map((user) => (
+
+ ))}
+
+ )
+ )}
+
+ {activeTab === 'search' && (
+ searching ? (
+
Searching...
+ ) : (
+
+ {searchResults.users.length > 0 && (
+
+
Users
+
+ {searchResults.users.map((user) => (
+
+ ))}
+
+
+ )}
+ {searchResults.posts.length > 0 && (
+
+
Posts
+
+ {searchResults.posts.map((post) => (
+
+ ))}
+
+
+ )}
+ {searchResults.users.length === 0 && searchResults.posts.length === 0 && (
+
+
+
No results found for “{query}”
+
+ )}
+
+ )
+ )}
+
+
-
+
{post.author.displayName || post.author.handle}
@{post.author.handle} · {formatTime(post.createdAt)}
@@ -367,6 +373,7 @@ function Compose({ onPost }: { onPost: (content: string, mediaIds: string[]) =>
export default function Home() {
const [user, setUser] = useState
(null);
+ const [isAdmin, setIsAdmin] = useState(false);
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [feedType, setFeedType] = useState<'latest' | 'curated'>('latest');
@@ -404,6 +411,12 @@ export default function Home() {
.then(res => res.json())
.then(data => setUser(data.user))
.catch(() => { });
+
+ // Check admin status
+ fetch('/api/admin/me')
+ .then(res => res.json())
+ .then(data => setIsAdmin(!!data.isAdmin))
+ .catch(() => { });
}, []);
useEffect(() => {
@@ -457,7 +470,7 @@ export default function Home() {
Notifications
{user ? (
-
+
Profile
@@ -467,6 +480,12 @@ export default function Home() {
Login
)}
+ {isAdmin && (
+
+
+ Admin
+
+ )}
{user && (