refactor: Update user profile routing from @[handle] to [handle], add an explore page, and introduce a user API route.

src/app/@[handle]/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null;
-}

src/app/[handle]/page.tsx

@@ -89,7 +89,7 @@ const FlagIcon = () => (
 
 function UserRow({ user }: { user: UserSummary }) {
     return (
-        <Link href={`/@${user.handle}`} className="user-row">
+        <Link href={`/${user.handle}`} className="user-row">
             <div className="avatar">
                 {user.avatarUrl ? (
                     <img src={user.avatarUrl} alt={user.displayName || user.handle} />
@@ -139,7 +139,7 @@ function PostCard({ post }: { post: Post }) {
                     )}
                 </div>
                 <div className="post-author">
-                    <Link href={`/@${post.author.handle}`} className="post-handle">
+                    <Link href={`/${post.author.handle}`} className="post-handle">
                         {post.author.displayName || post.author.handle}
                     </Link>
                     <span className="post-time">@{post.author.handle} · {formatTime(post.createdAt)}</span>

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: [] });
+    }
+}

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 = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+);
+
+const TrendingIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+        <polyline points="16 7 22 7 22 13" />
+    </svg>
+);
+
+const UsersIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </svg>
+);
+
+const HeartIcon = ({ filled }: { filled?: boolean }) => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
+        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+    </svg>
+);
+
+const RepeatIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="17 1 21 5 17 9" />
+        <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+        <polyline points="7 23 3 19 7 15" />
+        <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+    </svg>
+);
+
+const MessageIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+    </svg>
+);
+
+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 (
+        <article className="post">
+            <div className="post-header">
+                <div className="avatar">
+                    {post.author.avatarUrl ? (
+                        <img src={post.author.avatarUrl} alt={post.author.displayName} />
+                    ) : (
+                        post.author.displayName?.charAt(0).toUpperCase() || post.author.handle.charAt(0).toUpperCase()
+                    )}
+                </div>
+                <div className="post-author">
+                    <Link href={`/${post.author.handle}`} className="post-handle">
+                        {post.author.displayName || post.author.handle}
+                    </Link>
+                    <span className="post-time">@{post.author.handle} · {formatTime(post.createdAt)}</span>
+                </div>
+            </div>
+            <div className="post-content">{post.content}</div>
+            {post.media && post.media.length > 0 && (
+                <div className="post-media-grid">
+                    {post.media.map((item) => (
+                        <div className="post-media-item" key={item.id}>
+                            <img src={item.url} alt={item.altText || 'Post media'} loading="lazy" />
+                        </div>
+                    ))}
+                </div>
+            )}
+            <div className="post-actions">
+                <button className="post-action" onClick={() => { }}>
+                    <MessageIcon />
+                    <span>{post.repliesCount || ''}</span>
+                </button>
+                <button className={`post-action ${reposted ? 'reposted' : ''}`} onClick={handleRepost}>
+                    <RepeatIcon />
+                    <span>{post.repostsCount + (reposted ? 1 : 0) || ''}</span>
+                </button>
+                <button className={`post-action ${liked ? 'liked' : ''}`} onClick={handleLike}>
+                    <HeartIcon filled={liked} />
+                    <span>{post.likesCount + (liked ? 1 : 0) || ''}</span>
+                </button>
+            </div>
+        </article>
+    );
+}
+
+function UserCard({ user }: { user: User }) {
+    return (
+        <Link href={`/${user.handle}`} className="user-card">
+            <div className="avatar">
+                {user.avatarUrl ? (
+                    <img src={user.avatarUrl} alt={user.displayName} />
+                ) : (
+                    user.displayName?.charAt(0).toUpperCase() || user.handle.charAt(0).toUpperCase()
+                )}
+            </div>
+            <div className="user-card-info">
+                <div className="user-card-name">{user.displayName || user.handle}</div>
+                <div className="user-card-handle">@{user.handle}</div>
+                {user.bio && <div className="user-card-bio">{user.bio}</div>}
+            </div>
+        </Link>
+    );
+}
+
+export default function ExplorePage() {
+    const [query, setQuery] = useState('');
+    const [activeTab, setActiveTab] = useState<'trending' | 'users' | 'search'>('trending');
+    const [trendingPosts, setTrendingPosts] = useState<Post[]>([]);
+    const [users, setUsers] = useState<User[]>([]);
+    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 (
+        <div className="explore-page">
+            <header className="explore-header">
+                <h1>Explore</h1>
+                <form onSubmit={handleSearch} className="explore-search">
+                    <SearchIcon />
+                    <input
+                        type="text"
+                        placeholder="Search posts and users..."
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                    />
+                </form>
+            </header>
+
+            <div className="explore-tabs">
+                <button
+                    className={`explore-tab ${activeTab === 'trending' ? 'active' : ''}`}
+                    onClick={() => setActiveTab('trending')}
+                >
+                    <TrendingIcon />
+                    <span>Trending</span>
+                </button>
+                <button
+                    className={`explore-tab ${activeTab === 'users' ? 'active' : ''}`}
+                    onClick={() => setActiveTab('users')}
+                >
+                    <UsersIcon />
+                    <span>Users</span>
+                </button>
+                {searchResults.posts.length > 0 || searchResults.users.length > 0 ? (
+                    <button
+                        className={`explore-tab ${activeTab === 'search' ? 'active' : ''}`}
+                        onClick={() => setActiveTab('search')}
+                    >
+                        <SearchIcon />
+                        <span>Results</span>
+                    </button>
+                ) : null}
+            </div>
+
+            <div className="explore-content">
+                {activeTab === 'trending' && (
+                    loading ? (
+                        <div className="explore-loading">Loading trending posts...</div>
+                    ) : trendingPosts.length === 0 ? (
+                        <div className="explore-empty">
+                            <TrendingIcon />
+                            <p>No trending posts yet</p>
+                        </div>
+                    ) : (
+                        <div className="explore-posts">
+                            {trendingPosts.map((post) => (
+                                <PostCard key={post.id} post={post} />
+                            ))}
+                        </div>
+                    )
+                )}
+
+                {activeTab === 'users' && (
+                    loading ? (
+                        <div className="explore-loading">Loading users...</div>
+                    ) : users.length === 0 ? (
+                        <div className="explore-empty">
+                            <UsersIcon />
+                            <p>No users found</p>
+                        </div>
+                    ) : (
+                        <div className="explore-users">
+                            {users.map((user) => (
+                                <UserCard key={user.id} user={user} />
+                            ))}
+                        </div>
+                    )
+                )}
+
+                {activeTab === 'search' && (
+                    searching ? (
+                        <div className="explore-loading">Searching...</div>
+                    ) : (
+                        <div className="explore-search-results">
+                            {searchResults.users.length > 0 && (
+                                <div className="search-section">
+                                    <h2>Users</h2>
+                                    <div className="explore-users">
+                                        {searchResults.users.map((user) => (
+                                            <UserCard key={user.id} user={user} />
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                            {searchResults.posts.length > 0 && (
+                                <div className="search-section">
+                                    <h2>Posts</h2>
+                                    <div className="explore-posts">
+                                        {searchResults.posts.map((post) => (
+                                            <PostCard key={post.id} post={post} />
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                            {searchResults.users.length === 0 && searchResults.posts.length === 0 && (
+                                <div className="explore-empty">
+                                    <SearchIcon />
+                                    <p>No results found for &ldquo;{query}&rdquo;</p>
+                                </div>
+                            )}
+                        </div>
+                    )
+                )}
+            </div>
+        </div>
+    );
+}

src/app/globals.css

@@ -1128,3 +1128,184 @@ a.btn-primary:visited {
     padding-bottom: 80px;
   }
 }
+
+/* Explore Page */
+.explore-page {
+  max-width: 700px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+.explore-header {
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--background);
+  z-index: 10;
+  backdrop-filter: blur(12px);
+}
+
+.explore-header h1 {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.explore-search {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--background-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  transition: border-color 0.15s ease;
+}
+
+.explore-search:focus-within {
+  border-color: var(--accent);
+}
+
+.explore-search input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  font-size: 15px;
+}
+
+.explore-search input:focus {
+  outline: none;
+}
+
+.explore-search input::placeholder {
+  color: var(--foreground-tertiary);
+}
+
+.explore-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+
+.explore-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--foreground-tertiary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.explore-tab:hover {
+  color: var(--foreground-secondary);
+}
+
+.explore-tab.active {
+  color: var(--foreground);
+  border-bottom-color: var(--accent);
+}
+
+.explore-content {
+  min-height: 300px;
+}
+
+.explore-loading,
+.explore-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  color: var(--foreground-tertiary);
+  text-align: center;
+}
+
+.explore-empty svg {
+  width: 48px;
+  height: 48px;
+  opacity: 0.5;
+}
+
+.explore-posts,
+.explore-users {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-section {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.search-section h2 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--foreground-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 12px;
+}
+
+.search-section .explore-posts,
+.search-section .explore-users {
+  background: var(--background-secondary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+/* User Card */
+.user-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  color: var(--foreground);
+  transition: background 0.15s ease;
+}
+
+.user-card:hover {
+  background: var(--background-secondary);
+}
+
+.user-card:last-child {
+  border-bottom: none;
+}
+
+.user-card-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.user-card-name {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.user-card-handle {
+  font-size: 13px;
+  color: var(--foreground-tertiary);
+}
+
+.user-card-bio {
+  font-size: 13px;
+  color: var(--foreground-secondary);
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+

src/app/page.tsx

@@ -3,6 +3,12 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 
+const ShieldIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+  </svg>
+);
+
 interface User {
   id: string;
   handle: string;
@@ -190,7 +196,7 @@ function PostCard({ post, onLike, onRepost }: { post: Post; onLike: (id: string)
           )}
         </div>
         <div className="post-author">
-          <Link href={`/@${post.author.handle}`} className="post-handle">
+          <Link href={`/${post.author.handle}`} className="post-handle">
             {post.author.displayName || post.author.handle}
           </Link>
           <span className="post-time">@{post.author.handle} · {formatTime(post.createdAt)}</span>
@@ -367,6 +373,7 @@ function Compose({ onPost }: { onPost: (content: string, mediaIds: string[]) =>
 
 export default function Home() {
   const [user, setUser] = useState<User | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
   const [posts, setPosts] = useState<Post[]>([]);
   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() {
             <span>Notifications</span>
           </Link>
           {user ? (
-            <Link href={`/@${user.handle}`} className="nav-item">
+            <Link href={`/${user.handle}`} className="nav-item">
               <UserIcon />
               <span>Profile</span>
             </Link>
@@ -467,6 +480,12 @@ export default function Home() {
               <span>Login</span>
             </Link>
           )}
+          {isAdmin && (
+            <Link href="/admin" className="nav-item">
+              <ShieldIcon />
+              <span>Admin</span>
+            </Link>
+          )}
         </nav>
         {user && (
           <div style={{ marginTop: 'auto', paddingTop: '16px' }}>