refactor(admin): Extract moderation features into dedicated page
- Move reports, posts, and users management to new moderation page - Simplify admin page to focus on node settings configuration only - Remove unused types (AdminUser, AdminPost, Report) from admin page - Remove report resolution, post actions, and user moderation handlers - Remove tab navigation and related state management from admin page - Update sidebar navigation to include moderation page link - Consolidate moderation dashboard functionality into separate component - Improve code organization by separating concerns between admin and moderation
This commit is contained in:
Christomatt
+25
-378
@@ -1,67 +1,16 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import AutoTextarea from '@/components/AutoTextarea';
|
import AutoTextarea from '@/components/AutoTextarea';
|
||||||
import { Bot } from 'lucide-react';
|
|
||||||
import { useToast } from '@/lib/contexts/ToastContext';
|
import { useToast } from '@/lib/contexts/ToastContext';
|
||||||
import { useAccentColor } from '@/lib/contexts/AccentColorContext';
|
import { useAccentColor } from '@/lib/contexts/AccentColorContext';
|
||||||
|
|
||||||
type AdminUser = {
|
|
||||||
id: string;
|
|
||||||
handle: string;
|
|
||||||
displayName?: string | null;
|
|
||||||
email?: string | null;
|
|
||||||
isSuspended: boolean;
|
|
||||||
isSilenced: boolean;
|
|
||||||
suspensionReason?: string | null;
|
|
||||||
silenceReason?: string | null;
|
|
||||||
createdAt: string;
|
|
||||||
isBot?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
type AdminPost = {
|
|
||||||
id: string;
|
|
||||||
content: string;
|
|
||||||
createdAt: string;
|
|
||||||
isRemoved: boolean;
|
|
||||||
removedReason?: string | null;
|
|
||||||
author: {
|
|
||||||
id: string;
|
|
||||||
handle: string;
|
|
||||||
displayName?: string | null;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type Report = {
|
|
||||||
id: string;
|
|
||||||
targetType: 'post' | 'user';
|
|
||||||
targetId: string;
|
|
||||||
reason: string;
|
|
||||||
status: 'open' | 'resolved';
|
|
||||||
createdAt: string;
|
|
||||||
reporter?: {
|
|
||||||
id: string;
|
|
||||||
handle: string;
|
|
||||||
} | null;
|
|
||||||
target?: AdminPost | AdminUser | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDate = (value: string) => {
|
|
||||||
const date = new Date(value);
|
|
||||||
return date.toLocaleString();
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function AdminPage() {
|
export default function AdminPage() {
|
||||||
const { showToast } = useToast();
|
const { showToast } = useToast();
|
||||||
const { refreshAccentColor } = useAccentColor();
|
const { refreshAccentColor } = useAccentColor();
|
||||||
const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
|
const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
|
||||||
const [tab, setTab] = useState<'reports' | 'posts' | 'users' | 'settings'>('reports');
|
|
||||||
const [reports, setReports] = useState<Report[]>([]);
|
|
||||||
const [posts, setPosts] = useState<AdminPost[]>([]);
|
|
||||||
const [users, setUsers] = useState<AdminUser[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [reportStatus, setReportStatus] = useState<'open' | 'resolved' | 'all'>('open');
|
|
||||||
const [nodeSettings, setNodeSettings] = useState({
|
const [nodeSettings, setNodeSettings] = useState({
|
||||||
name: '',
|
name: '',
|
||||||
description: '',
|
description: '',
|
||||||
@@ -90,45 +39,6 @@ export default function AdminPage() {
|
|||||||
.catch(() => setIsAdmin(false));
|
.catch(() => setIsAdmin(false));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const loadReports = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/admin/reports?status=${reportStatus}`);
|
|
||||||
const data = await res.json();
|
|
||||||
setReports(data.reports || []);
|
|
||||||
} catch {
|
|
||||||
setReports([]);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadPosts = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/admin/posts?status=all');
|
|
||||||
const data = await res.json();
|
|
||||||
setPosts(data.posts || []);
|
|
||||||
} catch {
|
|
||||||
setPosts([]);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadUsers = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/admin/users');
|
|
||||||
const data = await res.json();
|
|
||||||
setUsers(data.users || []);
|
|
||||||
} catch {
|
|
||||||
setUsers([]);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadNodeSettings = async () => {
|
const loadNodeSettings = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
@@ -155,36 +65,10 @@ export default function AdminPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isAdmin) return;
|
if (isAdmin) {
|
||||||
if (tab === 'reports') loadReports();
|
loadNodeSettings();
|
||||||
if (tab === 'posts') loadPosts();
|
|
||||||
if (tab === 'users') loadUsers();
|
|
||||||
if (tab === 'settings') loadNodeSettings();
|
|
||||||
}, [tab, isAdmin, reportStatus]);
|
|
||||||
|
|
||||||
const handleReportResolve = async (id: string, status: 'open' | 'resolved') => {
|
|
||||||
const note = status === 'resolved' ? window.prompt('Resolution note (optional):') || '' : '';
|
|
||||||
await fetch(`/api/admin/reports/${id}`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ status, note }),
|
|
||||||
});
|
|
||||||
loadReports();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePostAction = async (id: string, action: 'remove' | 'restore') => {
|
|
||||||
const reason = action === 'remove' ? window.prompt('Reason (optional):') || '' : '';
|
|
||||||
await fetch(`/api/admin/posts/${id}`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ action, reason }),
|
|
||||||
});
|
|
||||||
if (tab === 'reports') {
|
|
||||||
loadReports();
|
|
||||||
} else {
|
|
||||||
loadPosts();
|
|
||||||
}
|
}
|
||||||
};
|
}, [isAdmin]);
|
||||||
|
|
||||||
const handleSaveSettings = async (override?: typeof nodeSettings) => {
|
const handleSaveSettings = async (override?: typeof nodeSettings) => {
|
||||||
const payload = override ?? nodeSettings;
|
const payload = override ?? nodeSettings;
|
||||||
@@ -313,37 +197,19 @@ export default function AdminPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUserAction = async (id: string, action: 'suspend' | 'unsuspend' | 'silence' | 'unsilence') => {
|
|
||||||
const needsReason = action === 'suspend' || action === 'silence';
|
|
||||||
const reason = needsReason ? window.prompt('Reason (optional):') || '' : '';
|
|
||||||
await fetch(`/api/admin/users/${id}`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ action, reason }),
|
|
||||||
});
|
|
||||||
loadUsers();
|
|
||||||
};
|
|
||||||
|
|
||||||
const reportCounts = useMemo(() => {
|
|
||||||
return {
|
|
||||||
open: reports.filter((r) => r.status === 'open').length,
|
|
||||||
resolved: reports.filter((r) => r.status === 'resolved').length,
|
|
||||||
};
|
|
||||||
}, [reports]);
|
|
||||||
|
|
||||||
if (isAdmin === null) {
|
if (isAdmin === null) {
|
||||||
return (
|
return (
|
||||||
<div className="admin-shell">
|
<div style={{ padding: '24px' }}>
|
||||||
<div className="admin-card">Checking permissions...</div>
|
<div className="card" style={{ padding: '24px' }}>Checking permissions...</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isAdmin) {
|
if (!isAdmin) {
|
||||||
return (
|
return (
|
||||||
<div className="admin-shell">
|
<div style={{ padding: '24px' }}>
|
||||||
<div className="admin-card">
|
<div className="card" style={{ padding: '24px' }}>
|
||||||
<h1>Moderation</h1>
|
<h1 style={{ marginBottom: '12px' }}>Admin Settings</h1>
|
||||||
<p>You do not have access to this page.</p>
|
<p>You do not have access to this page.</p>
|
||||||
<Link href="/" className="btn btn-primary" style={{ marginTop: '12px' }}>
|
<Link href="/" className="btn btn-primary" style={{ marginTop: '12px' }}>
|
||||||
Back to home
|
Back to home
|
||||||
@@ -354,242 +220,23 @@ export default function AdminPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="admin-shell">
|
<>
|
||||||
<div className="admin-header">
|
<header style={{
|
||||||
<div>
|
padding: '16px',
|
||||||
<h1>Moderation Dashboard</h1>
|
borderBottom: '1px solid var(--border)',
|
||||||
<p>Manage reports, posts, and user actions.</p>
|
position: 'sticky',
|
||||||
</div>
|
top: 0,
|
||||||
<Link href="/" className="btn btn-ghost">
|
background: 'var(--background)',
|
||||||
Return to feed
|
zIndex: 10,
|
||||||
</Link>
|
backdropFilter: 'blur(12px)',
|
||||||
</div>
|
}}>
|
||||||
|
<h1 style={{ fontSize: '18px', fontWeight: 600 }}>Admin Settings</h1>
|
||||||
<div className="admin-tabs">
|
</header>
|
||||||
<button className={`admin-tab ${tab === 'reports' ? 'active' : ''}`} onClick={() => setTab('reports')}>
|
|
||||||
Reports
|
|
||||||
</button>
|
|
||||||
<button className={`admin-tab ${tab === 'posts' ? 'active' : ''}`} onClick={() => setTab('posts')}>
|
|
||||||
Posts
|
|
||||||
</button>
|
|
||||||
<button className={`admin-tab ${tab === 'users' ? 'active' : ''}`} onClick={() => setTab('users')}>
|
|
||||||
Users
|
|
||||||
</button>
|
|
||||||
<button className={`admin-tab ${tab === 'settings' ? 'active' : ''}`} onClick={() => setTab('settings')}>
|
|
||||||
Settings
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{tab === 'reports' && (
|
|
||||||
<div className="admin-card">
|
|
||||||
<div className="admin-toolbar">
|
|
||||||
<div className="admin-filters">
|
|
||||||
{(['open', 'resolved', 'all'] as const).map((status) => (
|
|
||||||
<button
|
|
||||||
key={status}
|
|
||||||
className={`pill ${reportStatus === status ? 'active' : ''}`}
|
|
||||||
onClick={() => setReportStatus(status)}
|
|
||||||
>
|
|
||||||
{status}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="admin-stats">
|
|
||||||
<span>Open: {reportCounts.open}</span>
|
|
||||||
<span>Resolved: {reportCounts.resolved}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div style={{ padding: '16px' }}>
|
||||||
|
<div className="card" style={{ padding: '24px' }}>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="admin-empty">Loading reports...</div>
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>Loading settings...</div>
|
||||||
) : reports.length === 0 ? (
|
|
||||||
<div className="admin-empty">No reports found.</div>
|
|
||||||
) : (
|
|
||||||
<div className="admin-list">
|
|
||||||
{reports.map((report) => (
|
|
||||||
<div key={report.id} className="admin-row">
|
|
||||||
<div className="admin-row-main">
|
|
||||||
<div className="admin-row-title">
|
|
||||||
<span className={`status-pill ${report.status}`}>
|
|
||||||
{report.status}
|
|
||||||
</span>
|
|
||||||
<span className="admin-row-meta">
|
|
||||||
{report.targetType.toUpperCase()} report
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-body">
|
|
||||||
{report.reason}
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-sub">
|
|
||||||
Reported by {report.reporter?.handle || 'anonymous'} • {formatDate(report.createdAt)}
|
|
||||||
</div>
|
|
||||||
{report.targetType === 'post' && report.target && 'content' in report.target && (
|
|
||||||
<div className="admin-row-target">
|
|
||||||
<strong>@{report.target.author.handle}:</strong> {report.target.content || '[repost]'}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{report.targetType === 'user' && report.target && 'handle' in report.target && (
|
|
||||||
<div className="admin-row-target">
|
|
||||||
User: @{report.target.handle}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-actions">
|
|
||||||
{report.targetType === 'post' && report.target && 'content' in report.target && (
|
|
||||||
<button
|
|
||||||
className="btn btn-ghost btn-sm"
|
|
||||||
onClick={() => {
|
|
||||||
const target = report.target as AdminPost;
|
|
||||||
handlePostAction(target.id, target.isRemoved ? 'restore' : 'remove');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(report.target as AdminPost).isRemoved ? 'Restore post' : 'Remove post'}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{report.status === 'open' ? (
|
|
||||||
<button className="btn btn-primary btn-sm" onClick={() => handleReportResolve(report.id, 'resolved')}>
|
|
||||||
Resolve
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button className="btn btn-ghost btn-sm" onClick={() => handleReportResolve(report.id, 'open')}>
|
|
||||||
Reopen
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tab === 'posts' && (
|
|
||||||
<div className="admin-card">
|
|
||||||
{loading ? (
|
|
||||||
<div className="admin-empty">Loading posts...</div>
|
|
||||||
) : posts.length === 0 ? (
|
|
||||||
<div className="admin-empty">No posts found.</div>
|
|
||||||
) : (
|
|
||||||
<div className="admin-list">
|
|
||||||
{posts.map((post) => (
|
|
||||||
<div key={post.id} className="admin-row">
|
|
||||||
<div className="admin-row-main">
|
|
||||||
<div className="admin-row-title">
|
|
||||||
<span className={`status-pill ${post.isRemoved ? 'removed' : 'active'}`}>
|
|
||||||
{post.isRemoved ? 'removed' : 'active'}
|
|
||||||
</span>
|
|
||||||
<span className="admin-row-meta">
|
|
||||||
@{post.author.handle} • {formatDate(post.createdAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-body">{post.content || '[repost]'}</div>
|
|
||||||
{post.removedReason && (
|
|
||||||
<div className="admin-row-sub">Reason: {post.removedReason}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-actions">
|
|
||||||
{post.isRemoved ? (
|
|
||||||
<button className="btn btn-ghost btn-sm" onClick={() => handlePostAction(post.id, 'restore')}>
|
|
||||||
Restore
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button className="btn btn-primary btn-sm" onClick={() => handlePostAction(post.id, 'remove')}>
|
|
||||||
Remove
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tab === 'users' && (
|
|
||||||
<div className="admin-card">
|
|
||||||
{loading ? (
|
|
||||||
<div className="admin-empty">Loading users...</div>
|
|
||||||
) : users.length === 0 ? (
|
|
||||||
<div className="admin-empty">No users found.</div>
|
|
||||||
) : (
|
|
||||||
<div className="admin-list">
|
|
||||||
{users.map((user) => (
|
|
||||||
<div key={user.id} className="admin-row">
|
|
||||||
<div className="admin-row-main">
|
|
||||||
<div className="admin-row-title">
|
|
||||||
<span className={`status-pill ${user.isSuspended ? 'suspended' : 'active'}`}>
|
|
||||||
{user.isSuspended ? 'suspended' : 'active'}
|
|
||||||
</span>
|
|
||||||
<span className={`status-pill ${user.isSilenced ? 'silenced' : 'visible'}`}>
|
|
||||||
{user.isSilenced ? 'silenced' : 'visible'}
|
|
||||||
</span>
|
|
||||||
<span className="admin-row-meta">
|
|
||||||
@{user.handle} • {formatDate(user.createdAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-body" style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
|
||||||
{user.displayName || user.handle}
|
|
||||||
{user.isBot && (
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
display: 'inline-flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '3px',
|
|
||||||
fontSize: '10px',
|
|
||||||
padding: '2px 6px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
background: 'var(--accent-muted)',
|
|
||||||
color: 'var(--accent)',
|
|
||||||
fontWeight: 500,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Bot size={12} />
|
|
||||||
AI Account
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{user.suspensionReason && (
|
|
||||||
<div className="admin-row-sub">Suspension: {user.suspensionReason}</div>
|
|
||||||
)}
|
|
||||||
{user.silenceReason && (
|
|
||||||
<div className="admin-row-sub">Silence: {user.silenceReason}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="admin-row-actions">
|
|
||||||
<Link href={`/@${user.handle}`} className="btn btn-ghost btn-sm">
|
|
||||||
View
|
|
||||||
</Link>
|
|
||||||
{user.isSuspended ? (
|
|
||||||
<button className="btn btn-ghost btn-sm" onClick={() => handleUserAction(user.id, 'unsuspend')}>
|
|
||||||
Unsuspend
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button className="btn btn-primary btn-sm" onClick={() => handleUserAction(user.id, 'suspend')}>
|
|
||||||
Suspend
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{user.isSilenced ? (
|
|
||||||
<button className="btn btn-ghost btn-sm" onClick={() => handleUserAction(user.id, 'unsilence')}>
|
|
||||||
Unsilence
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button className="btn btn-ghost btn-sm" onClick={() => handleUserAction(user.id, 'silence')}>
|
|
||||||
Silence
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{tab === 'settings' && (
|
|
||||||
<div className="admin-card">
|
|
||||||
<div style={{ fontWeight: 600, marginBottom: '16px', fontSize: '16px' }}>Node Settings</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="admin-empty">Loading settings...</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div style={{ display: 'grid', gap: '16px', maxWidth: '600px' }}>
|
<div style={{ display: 'grid', gap: '16px', maxWidth: '600px' }}>
|
||||||
<div>
|
<div>
|
||||||
@@ -886,7 +533,7 @@ export default function AdminPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,489 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Bot } from 'lucide-react';
|
||||||
|
|
||||||
|
type AdminUser = {
|
||||||
|
id: string;
|
||||||
|
handle: string;
|
||||||
|
displayName?: string | null;
|
||||||
|
email?: string | null;
|
||||||
|
isSuspended: boolean;
|
||||||
|
isSilenced: boolean;
|
||||||
|
suspensionReason?: string | null;
|
||||||
|
silenceReason?: string | null;
|
||||||
|
createdAt: string;
|
||||||
|
isBot?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type AdminPost = {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
createdAt: string;
|
||||||
|
isRemoved: boolean;
|
||||||
|
removedReason?: string | null;
|
||||||
|
author: {
|
||||||
|
id: string;
|
||||||
|
handle: string;
|
||||||
|
displayName?: string | null;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
type Report = {
|
||||||
|
id: string;
|
||||||
|
targetType: 'post' | 'user';
|
||||||
|
targetId: string;
|
||||||
|
reason: string;
|
||||||
|
status: 'open' | 'resolved';
|
||||||
|
createdAt: string;
|
||||||
|
reporter?: {
|
||||||
|
id: string;
|
||||||
|
handle: string;
|
||||||
|
} | null;
|
||||||
|
target?: AdminPost | AdminUser | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDate = (value: string) => {
|
||||||
|
const date = new Date(value);
|
||||||
|
return date.toLocaleString();
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ModerationPage() {
|
||||||
|
const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
|
||||||
|
const [tab, setTab] = useState<'reports' | 'posts' | 'users'>('reports');
|
||||||
|
const [reports, setReports] = useState<Report[]>([]);
|
||||||
|
const [posts, setPosts] = useState<AdminPost[]>([]);
|
||||||
|
const [users, setUsers] = useState<AdminUser[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [reportStatus, setReportStatus] = useState<'open' | 'resolved' | 'all'>('open');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('/api/admin/me')
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => setIsAdmin(!!data.isAdmin))
|
||||||
|
.catch(() => setIsAdmin(false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadReports = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/admin/reports?status=${reportStatus}`);
|
||||||
|
const data = await res.json();
|
||||||
|
setReports(data.reports || []);
|
||||||
|
} catch {
|
||||||
|
setReports([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadPosts = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/admin/posts?status=all');
|
||||||
|
const data = await res.json();
|
||||||
|
setPosts(data.posts || []);
|
||||||
|
} catch {
|
||||||
|
setPosts([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadUsers = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/admin/users');
|
||||||
|
const data = await res.json();
|
||||||
|
setUsers(data.users || []);
|
||||||
|
} catch {
|
||||||
|
setUsers([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAdmin) return;
|
||||||
|
if (tab === 'reports') loadReports();
|
||||||
|
if (tab === 'posts') loadPosts();
|
||||||
|
if (tab === 'users') loadUsers();
|
||||||
|
}, [tab, isAdmin, reportStatus]);
|
||||||
|
|
||||||
|
const handleReportResolve = async (id: string, status: 'open' | 'resolved') => {
|
||||||
|
const note = status === 'resolved' ? window.prompt('Resolution note (optional):') || '' : '';
|
||||||
|
await fetch(`/api/admin/reports/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ status, note }),
|
||||||
|
});
|
||||||
|
loadReports();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePostAction = async (id: string, action: 'remove' | 'restore') => {
|
||||||
|
const reason = action === 'remove' ? window.prompt('Reason (optional):') || '' : '';
|
||||||
|
await fetch(`/api/admin/posts/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ action, reason }),
|
||||||
|
});
|
||||||
|
if (tab === 'reports') {
|
||||||
|
loadReports();
|
||||||
|
} else {
|
||||||
|
loadPosts();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUserAction = async (id: string, action: 'suspend' | 'unsuspend' | 'silence' | 'unsilence') => {
|
||||||
|
const needsReason = action === 'suspend' || action === 'silence';
|
||||||
|
const reason = needsReason ? window.prompt('Reason (optional):') || '' : '';
|
||||||
|
await fetch(`/api/admin/users/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ action, reason }),
|
||||||
|
});
|
||||||
|
loadUsers();
|
||||||
|
};
|
||||||
|
|
||||||
|
const reportCounts = useMemo(() => {
|
||||||
|
return {
|
||||||
|
open: reports.filter((r) => r.status === 'open').length,
|
||||||
|
resolved: reports.filter((r) => r.status === 'resolved').length,
|
||||||
|
};
|
||||||
|
}, [reports]);
|
||||||
|
|
||||||
|
if (isAdmin === null) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '24px' }}>
|
||||||
|
<div className="card" style={{ padding: '24px' }}>Checking permissions...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAdmin) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '24px' }}>
|
||||||
|
<div className="card" style={{ padding: '24px' }}>
|
||||||
|
<h1 style={{ marginBottom: '12px' }}>Moderation</h1>
|
||||||
|
<p>You do not have access to this page.</p>
|
||||||
|
<Link href="/" className="btn btn-primary" style={{ marginTop: '12px' }}>
|
||||||
|
Back to home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header style={{
|
||||||
|
padding: '16px',
|
||||||
|
borderBottom: '1px solid var(--border)',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
background: 'var(--background)',
|
||||||
|
zIndex: 10,
|
||||||
|
backdropFilter: 'blur(12px)',
|
||||||
|
}}>
|
||||||
|
<h1 style={{ fontSize: '18px', fontWeight: 600 }}>Moderation</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style={{ padding: '16px' }}>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px', borderBottom: '1px solid var(--border)' }}>
|
||||||
|
<button
|
||||||
|
className={`btn btn-ghost ${tab === 'reports' ? '' : ''}`}
|
||||||
|
onClick={() => setTab('reports')}
|
||||||
|
style={{
|
||||||
|
borderRadius: 0,
|
||||||
|
borderBottom: tab === 'reports' ? '2px solid var(--accent)' : '2px solid transparent',
|
||||||
|
fontWeight: tab === 'reports' ? 600 : 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reports
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn btn-ghost ${tab === 'posts' ? '' : ''}`}
|
||||||
|
onClick={() => setTab('posts')}
|
||||||
|
style={{
|
||||||
|
borderRadius: 0,
|
||||||
|
borderBottom: tab === 'posts' ? '2px solid var(--accent)' : '2px solid transparent',
|
||||||
|
fontWeight: tab === 'posts' ? 600 : 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Posts
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn btn-ghost ${tab === 'users' ? '' : ''}`}
|
||||||
|
onClick={() => setTab('users')}
|
||||||
|
style={{
|
||||||
|
borderRadius: 0,
|
||||||
|
borderBottom: tab === 'users' ? '2px solid var(--accent)' : '2px solid transparent',
|
||||||
|
fontWeight: tab === 'users' ? 600 : 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Users
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tab === 'reports' && (
|
||||||
|
<div className="card" style={{ padding: '16px' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', flexWrap: 'wrap', gap: '12px' }}>
|
||||||
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||||||
|
{(['open', 'resolved', 'all'] as const).map((status) => (
|
||||||
|
<button
|
||||||
|
key={status}
|
||||||
|
className={`btn btn-sm ${reportStatus === status ? 'btn-primary' : 'btn-ghost'}`}
|
||||||
|
onClick={() => setReportStatus(status)}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)' }}>
|
||||||
|
<span>Open: {reportCounts.open}</span>
|
||||||
|
<span style={{ margin: '0 8px' }}>•</span>
|
||||||
|
<span>Resolved: {reportCounts.resolved}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>Loading reports...</div>
|
||||||
|
) : reports.length === 0 ? (
|
||||||
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>No reports found.</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'grid', gap: '12px' }}>
|
||||||
|
{reports.map((report) => (
|
||||||
|
<div key={report.id} className="card" style={{ padding: '16px' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px' }}>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
|
||||||
|
<span style={{
|
||||||
|
fontSize: '11px',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: report.status === 'open' ? 'rgba(245, 158, 11, 0.1)' : 'rgba(34, 197, 94, 0.1)',
|
||||||
|
color: report.status === 'open' ? 'rgb(245, 158, 11)' : 'rgb(34, 197, 94)',
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
}}>
|
||||||
|
{report.status}
|
||||||
|
</span>
|
||||||
|
<span style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>
|
||||||
|
{report.targetType.toUpperCase()} report
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '8px' }}>{report.reason}</div>
|
||||||
|
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)', marginBottom: '8px' }}>
|
||||||
|
Reported by {report.reporter?.handle || 'anonymous'} • {formatDate(report.createdAt)}
|
||||||
|
</div>
|
||||||
|
{report.targetType === 'post' && report.target && 'content' in report.target && (
|
||||||
|
<div style={{
|
||||||
|
padding: '12px',
|
||||||
|
background: 'var(--background-secondary)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '14px',
|
||||||
|
}}>
|
||||||
|
<strong>@{report.target.author.handle}:</strong> {report.target.content || '[repost]'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{report.targetType === 'user' && report.target && 'handle' in report.target && (
|
||||||
|
<div style={{
|
||||||
|
padding: '12px',
|
||||||
|
background: 'var(--background-secondary)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '14px',
|
||||||
|
}}>
|
||||||
|
User: @{report.target.handle}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||||
|
{report.targetType === 'post' && report.target && 'content' in report.target && (
|
||||||
|
<button
|
||||||
|
className="btn btn-ghost btn-sm"
|
||||||
|
onClick={() => {
|
||||||
|
const target = report.target as AdminPost;
|
||||||
|
handlePostAction(target.id, target.isRemoved ? 'restore' : 'remove');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(report.target as AdminPost).isRemoved ? 'Restore post' : 'Remove post'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{report.status === 'open' ? (
|
||||||
|
<button className="btn btn-primary btn-sm" onClick={() => handleReportResolve(report.id, 'resolved')}>
|
||||||
|
Resolve
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => handleReportResolve(report.id, 'open')}>
|
||||||
|
Reopen
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'posts' && (
|
||||||
|
<div className="card" style={{ padding: '16px' }}>
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>Loading posts...</div>
|
||||||
|
) : posts.length === 0 ? (
|
||||||
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>No posts found.</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'grid', gap: '12px' }}>
|
||||||
|
{posts.map((post) => (
|
||||||
|
<div key={post.id} className="card" style={{ padding: '16px' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px' }}>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
|
||||||
|
<span style={{
|
||||||
|
fontSize: '11px',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: post.isRemoved ? 'rgba(239, 68, 68, 0.1)' : 'rgba(34, 197, 94, 0.1)',
|
||||||
|
color: post.isRemoved ? 'rgb(239, 68, 68)' : 'rgb(34, 197, 94)',
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
}}>
|
||||||
|
{post.isRemoved ? 'removed' : 'active'}
|
||||||
|
</span>
|
||||||
|
<span style={{ fontSize: '13px', color: 'var(--foreground-secondary)' }}>
|
||||||
|
@{post.author.handle} • {formatDate(post.createdAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '8px' }}>{post.content || '[repost]'}</div>
|
||||||
|
{post.removedReason && (
|
||||||
|
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)' }}>
|
||||||
|
Reason: {post.removedReason}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{post.isRemoved ? (
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => handlePostAction(post.id, 'restore')}>
|
||||||
|
Restore
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button className="btn btn-primary btn-sm" onClick={() => handlePostAction(post.id, 'remove')}>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'users' && (
|
||||||
|
<div className="card" style={{ padding: '16px' }}>
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>Loading users...</div>
|
||||||
|
) : users.length === 0 ? (
|
||||||
|
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>No users found.</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'grid', gap: '12px' }}>
|
||||||
|
{users.map((user) => (
|
||||||
|
<div key={user.id} className="card" style={{ padding: '16px' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px', alignItems: 'flex-start' }}>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px', flexWrap: 'wrap' }}>
|
||||||
|
<span style={{
|
||||||
|
fontSize: '11px',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: user.isSuspended ? 'rgba(239, 68, 68, 0.1)' : 'rgba(34, 197, 94, 0.1)',
|
||||||
|
color: user.isSuspended ? 'rgb(239, 68, 68)' : 'rgb(34, 197, 94)',
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
}}>
|
||||||
|
{user.isSuspended ? 'suspended' : 'active'}
|
||||||
|
</span>
|
||||||
|
{user.isSilenced && (
|
||||||
|
<span style={{
|
||||||
|
fontSize: '11px',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: 'rgba(245, 158, 11, 0.1)',
|
||||||
|
color: 'rgb(245, 158, 11)',
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
}}>
|
||||||
|
silenced
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span style={{ fontSize: '13px', color: 'var(--foreground-secondary)' }}>
|
||||||
|
@{user.handle} • {formatDate(user.createdAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '8px' }}>
|
||||||
|
<span style={{ fontWeight: 500 }}>{user.displayName || user.handle}</span>
|
||||||
|
{user.isBot && (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '3px',
|
||||||
|
fontSize: '10px',
|
||||||
|
padding: '2px 6px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: 'var(--accent-muted)',
|
||||||
|
color: 'var(--accent)',
|
||||||
|
fontWeight: 500,
|
||||||
|
}}>
|
||||||
|
<Bot size={12} />
|
||||||
|
AI Account
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{user.suspensionReason && (
|
||||||
|
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)', marginBottom: '4px' }}>
|
||||||
|
Suspension: {user.suspensionReason}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{user.silenceReason && (
|
||||||
|
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)' }}>
|
||||||
|
Silence: {user.silenceReason}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||||
|
<Link href={`/@${user.handle}`} className="btn btn-ghost btn-sm">
|
||||||
|
View
|
||||||
|
</Link>
|
||||||
|
{user.isSuspended ? (
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => handleUserAction(user.id, 'unsuspend')}>
|
||||||
|
Unsuspend
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button className="btn btn-primary btn-sm" onClick={() => handleUserAction(user.id, 'suspend')}>
|
||||||
|
Suspend
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{user.isSilenced ? (
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => handleUserAction(user.id, 'unsilence')}>
|
||||||
|
Unsilence
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => handleUserAction(user.id, 'silence')}>
|
||||||
|
Silence
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -7,7 +7,7 @@ import { usePathname, useRouter } from 'next/navigation';
|
|||||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||||
import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon, SettingsIcon, BotIcon } from './Icons';
|
import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon, SettingsIcon, BotIcon } from './Icons';
|
||||||
import { formatFullHandle } from '@/lib/utils/handle';
|
import { formatFullHandle } from '@/lib/utils/handle';
|
||||||
import { LogOut } from 'lucide-react';
|
import { LogOut, Settings2 } from 'lucide-react';
|
||||||
|
|
||||||
export function Sidebar() {
|
export function Sidebar() {
|
||||||
const { user, isAdmin } = useAuth();
|
const { user, isAdmin } = useAuth();
|
||||||
@@ -118,8 +118,14 @@ export function Sidebar() {
|
|||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<Link href="/admin" className={`nav-item ${pathname?.startsWith('/admin') ? 'active' : ''}`}>
|
<Link href="/moderation" className={`nav-item ${pathname?.startsWith('/moderation') ? 'active' : ''}`}>
|
||||||
<ShieldIcon />
|
<ShieldIcon />
|
||||||
|
<span>Moderation</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<Link href="/admin" className={`nav-item ${pathname?.startsWith('/admin') ? 'active' : ''}`}>
|
||||||
|
<Settings2 size={24} />
|
||||||
<span>Admin</span>
|
<span>Admin</span>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user