feat: implement forum moderation features with category management and thread operations

nest-intra/src/pages/intranet/IntranetModeration.tsx

@@ -1,21 +1,80 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { formatDateTime } from '../../utils/format';
-import { settingsApi } from '../../utils/api';
-import type { ForumThread, ForumReply } from '../../types';
+import { forumApi, settingsApi } from '../../utils/api';
+import type { ForumCategory, ForumReply, ForumThread } from '../../types';
 
 export default function IntranetModeration() {
+  const [categories, setCategories] = useState<ForumCategory[]>([]);
   const [threads, setThreads] = useState<ForumThread[]>([]);
   const [replies, setReplies] = useState<ForumReply[]>([]);
   const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
+  const [createTitle, setCreateTitle] = useState('');
+  const [createContent, setCreateContent] = useState('');
+  const [createCategoryId, setCreateCategoryId] = useState('');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
+  const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
+  const [categoryName, setCategoryName] = useState('');
+  const [categoryDescription, setCategoryDescription] = useState('');
+  const [categoryIcon, setCategoryIcon] = useState('📁');
   const [search, setSearch] = useState('');
-  const [activeTab, setActiveTab] = useState<'threads' | 'replies'>('threads');
+  const [activeTab, setActiveTab] = useState<'threads' | 'replies' | 'categories'>('threads');
   const [isEnabled, setIsEnabled] = useState(true);
   const [toggling, setToggling] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [savingCategory, setSavingCategory] = useState(false);
+  const [error, setError] = useState('');
+
+  const loadModerationData = useCallback(async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      const [cats, threadRes] = await Promise.all([
+        forumApi.getCategories(),
+        forumApi.getThreads({ limit: 200 }),
+      ]);
+
+      const loadedThreads = threadRes.data;
+      setCategories(cats);
+      setThreads(loadedThreads);
+
+      const detailed = await Promise.all(
+        loadedThreads.map((thread) => forumApi.getThread(thread.id).catch(() => null))
+      );
+
+      const allReplies = detailed
+        .filter((thread): thread is ForumThread & { replies: ForumReply[] } => Boolean(thread))
+        .flatMap((thread) => thread.replies);
+      setReplies(allReplies);
+    } catch {
+      setError('Failed to load moderation data.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
 
   useEffect(() => {
     settingsApi.get().then((s) => setIsEnabled(s.forumEnabled)).catch(() => {});
   }, []);
 
+  useEffect(() => {
+    void loadModerationData();
+  }, [loadModerationData]);
+
+  useEffect(() => {
+    if (categories.length === 0) {
+      setCreateCategoryId('');
+      return;
+    }
+
+    const exists = categories.some((category) => category.id === createCategoryId);
+    if (!exists) {
+      setCreateCategoryId(categories[0].id);
+    }
+  }, [categories, createCategoryId]);
+
   const handleToggle = useCallback((enabled: boolean) => {
     setToggling(true);
     settingsApi.update({ forumEnabled: enabled })
@@ -36,23 +95,151 @@ export default function IntranetModeration() {
   }, [replies, selectedThreadId]);
 
   const deleteThread = useCallback((id: string) => {
-    setThreads((prev) => prev.filter((t) => t.id !== id));
-    setReplies((prev) => prev.filter((r) => r.threadId !== id));
-    if (selectedThreadId === id) setSelectedThreadId(null);
+    forumApi.deleteThread(id)
+      .then(() => {
+        setThreads((prev) => prev.filter((t) => t.id !== id));
+        setReplies((prev) => prev.filter((r) => r.threadId !== id));
+        if (selectedThreadId === id) setSelectedThreadId(null);
+      })
+      .catch(() => {
+        setError('Failed to delete thread.');
+      });
   }, [selectedThreadId]);
 
   const togglePin = useCallback((id: string) => {
-    setThreads((prev) => prev.map((t) => t.id === id ? { ...t, isPinned: !t.isPinned } : t));
-  }, []);
+    const thread = threads.find((t) => t.id === id);
+    if (!thread) return;
+
+    forumApi.updateThread(id, { isPinned: !thread.isPinned })
+      .then((updated) => {
+        setThreads((prev) => prev.map((t) => (t.id === id ? updated : t)));
+      })
+      .catch(() => {
+        setError('Failed to update pin state.');
+      });
+  }, [threads]);
 
   const toggleLock = useCallback((id: string) => {
-    setThreads((prev) => prev.map((t) => t.id === id ? { ...t, isLocked: !t.isLocked } : t));
-  }, []);
+    const thread = threads.find((t) => t.id === id);
+    if (!thread) return;
+
+    forumApi.updateThread(id, { isLocked: !thread.isLocked })
+      .then((updated) => {
+        setThreads((prev) => prev.map((t) => (t.id === id ? updated : t)));
+      })
+      .catch(() => {
+        setError('Failed to update lock state.');
+      });
+  }, [threads]);
 
   const deleteReply = useCallback((id: string) => {
-    setReplies((prev) => prev.filter((r) => r.id !== id));
+    const removedReply = replies.find((r) => r.id === id);
+
+    forumApi.deleteReply(id)
+      .then(() => {
+        setReplies((prev) => prev.filter((r) => r.id !== id));
+        setThreads((prev) => prev.map((t) => {
+          if (!removedReply || removedReply.threadId !== t.id) return t;
+          return { ...t, replyCount: Math.max(0, t.replyCount - 1) };
+        }));
+      })
+      .catch(() => {
+        setError('Failed to delete reply.');
+      });
+  }, [replies]);
+
+  const createThread = useCallback(() => {
+    const title = createTitle.trim();
+    const content = createContent.trim();
+
+    if (!title || !content || !createCategoryId) {
+      setError('Title, category and content are required.');
+      return;
+    }
+
+    setCreating(true);
+    setError('');
+
+    forumApi.createThread({
+      title,
+      content,
+      categoryId: createCategoryId,
+    })
+      .then((thread) => {
+        setThreads((prev) => [thread, ...prev]);
+        setCategories((prev) => prev.map((cat) => (
+          cat.id === createCategoryId
+            ? { ...cat, threadCount: cat.threadCount + 1 }
+            : cat
+        )));
+        setCreateTitle('');
+        setCreateContent('');
+        setIsCreateModalOpen(false);
+      })
+      .catch(() => {
+        setError('Failed to create thread.');
+      })
+      .finally(() => {
+        setCreating(false);
+      });
+  }, [createCategoryId, createContent, createTitle]);
+
+  const openCreateCategoryModal = useCallback(() => {
+    setEditingCategoryId(null);
+    setCategoryName('');
+    setCategoryDescription('');
+    setCategoryIcon('📁');
+    setIsCategoryModalOpen(true);
   }, []);
 
+  const openEditCategoryModal = useCallback((category: ForumCategory) => {
+    setEditingCategoryId(category.id);
+    setCategoryName(category.name);
+    setCategoryDescription(category.description);
+    setCategoryIcon(category.icon || '📁');
+    setIsCategoryModalOpen(true);
+  }, []);
+
+  const saveCategory = useCallback(() => {
+    const name = categoryName.trim();
+    const description = categoryDescription.trim();
+    const icon = categoryIcon.trim() || '📁';
+
+    if (!name || !description) {
+      setError('Category name and description are required.');
+      return;
+    }
+
+    setSavingCategory(true);
+    setError('');
+
+    const action = editingCategoryId
+      ? forumApi.updateCategory(editingCategoryId, { name, description, icon })
+      : forumApi.createCategory({ name, description, icon });
+
+    action
+      .then(() => loadModerationData())
+      .then(() => setIsCategoryModalOpen(false))
+      .catch(() => {
+        setError(editingCategoryId ? 'Failed to update category.' : 'Failed to create category.');
+      })
+      .finally(() => {
+        setSavingCategory(false);
+      });
+  }, [categoryDescription, categoryIcon, categoryName, editingCategoryId, loadModerationData]);
+
+  const removeCategory = useCallback((id: string) => {
+    const confirmed = window.confirm('Delete this category? This can fail if it still has threads.');
+    if (!confirmed) return;
+
+    setError('');
+    forumApi.deleteCategory(id)
+      .then(() => loadModerationData())
+      .catch(() => {
+        setError('Failed to delete category. Remove or move threads first.');
+      });
+  }, [loadModerationData]);
+
   const recentReplies = useMemo(() => {
     return [...replies].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).slice(0, 20);
   }, [replies]);
@@ -87,6 +274,16 @@ export default function IntranetModeration() {
         </div>
       ) : (
         <div>
+      {loading && (
+        <div style={{ marginBottom: '1rem', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.78rem' }}>
+          Loading moderation data...
+        </div>
+      )}
+      {error && (
+        <div style={{ marginBottom: '1rem', color: 'var(--color-red)', fontFamily: 'var(--font-mono)', fontSize: '0.78rem' }}>
+          {error}
+        </div>
+      )}
       <div style={{ marginBottom: '1.75rem' }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <div>
@@ -123,7 +320,7 @@ export default function IntranetModeration() {
 
       {/* Tabs */}
       <div style={{ display: 'flex', borderBottom: '1px solid var(--color-border)', marginBottom: '1.5rem', gap: 0 }}>
-        {(['threads', 'replies'] as const).map((tab) => (
+        {(['threads', 'replies', 'categories'] as const).map((tab) => (
           <button
             key={tab}
             onClick={() => setActiveTab(tab)}
@@ -140,7 +337,11 @@ export default function IntranetModeration() {
               letterSpacing: '0.08em',
             }}
           >
-            {tab === 'threads' ? `Threads (${threads.length})` : `Replies (${replies.length})`}
+            {tab === 'threads'
+              ? `Threads (${threads.length})`
+              : tab === 'replies'
+                ? `Replies (${replies.length})`
+                : `Categories (${categories.length})`}
           </button>
         ))}
       </div>
@@ -149,6 +350,22 @@ export default function IntranetModeration() {
         <div style={{ display: 'grid', gridTemplateColumns: selectedThreadId ? '1fr 340px' : '1fr', gap: '1.25rem', alignItems: 'start' }}>
           {/* Thread list */}
           <div>
+            <div style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
+              <button
+                className="btn-terminal btn-amber"
+                onClick={() => setIsCreateModalOpen(true)}
+                disabled={loading || categories.length === 0}
+                style={{ opacity: loading || categories.length === 0 ? 0.6 : 1 }}
+              >
+                + Create Thread
+              </button>
+              {categories.length === 0 && (
+                <div style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem' }}>
+                  No categories available.
+                </div>
+              )}
+            </div>
+
             <input
               className="input-terminal"
               type="search"
@@ -192,6 +409,7 @@ export default function IntranetModeration() {
                       className={`btn-terminal ${thread.isPinned ? 'btn-danger' : 'btn-amber'}`}
                       style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
                       onClick={() => togglePin(thread.id)}
+                      disabled={loading}
                     >
                       {thread.isPinned ? 'Unpin' : 'Pin'}
                     </button>
@@ -199,6 +417,7 @@ export default function IntranetModeration() {
                       className="btn-terminal btn-amber"
                       style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
                       onClick={() => toggleLock(thread.id)}
+                      disabled={loading}
                     >
                       {thread.isLocked ? 'Unlock' : 'Lock'}
                     </button>
@@ -206,6 +425,7 @@ export default function IntranetModeration() {
                       className="btn-terminal btn-danger"
                       style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
                       onClick={() => deleteThread(thread.id)}
+                      disabled={loading}
                     >
                       Delete
                     </button>
@@ -292,6 +512,203 @@ export default function IntranetModeration() {
           )}
         </div>
       )}
+
+      {activeTab === 'categories' && (
+        <div>
+          <div style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
+            <button className="btn-terminal btn-amber" onClick={openCreateCategoryModal}>
+              + Create Category
+            </button>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '0.75rem' }}>
+          {categories.map((category) => (
+            <div
+              key={category.id}
+              style={{
+                background: 'var(--color-surface)',
+                border: '1px solid var(--color-border)',
+                padding: '1rem',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.4rem', gap: '0.5rem' }}>
+                <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.9rem' }}>
+                  {category.icon} {category.name}
+                </div>
+                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.68rem' }}>
+                  {category.threadCount} threads
+                </span>
+              </div>
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.75rem', lineHeight: 1.6 }}>
+                {category.description}
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.4rem', marginTop: '0.7rem' }}>
+                <button
+                  className="btn-terminal"
+                  style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
+                  onClick={() => openEditCategoryModal(category)}
+                >
+                  Modify
+                </button>
+                <button
+                  className="btn-terminal btn-danger"
+                  style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
+                  onClick={() => removeCategory(category.id)}
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ))}
+
+          {categories.length === 0 && (
+            <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem', background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}>
+              No categories found.
+            </div>
+          )}
+        </div>
+        </div>
+      )}
+
+      {isCreateModalOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0,0,0,0.55)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 40,
+            padding: '1rem',
+          }}
+        >
+          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', width: 'min(620px, 100%)', padding: '1rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.8rem' }}>
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.75rem', letterSpacing: '0.1em' }}>
+                CREATE THREAD
+              </div>
+              <button
+                onClick={() => setIsCreateModalOpen(false)}
+                style={{ background: 'transparent', border: 'none', color: 'var(--color-text-muted)', cursor: 'pointer' }}
+                aria-label="Close create thread popup"
+              >
+                &#x2715;
+              </button>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.6rem' }}>
+              <input
+                className="input-terminal"
+                type="text"
+                placeholder="Thread title"
+                value={createTitle}
+                onChange={(e) => setCreateTitle(e.target.value)}
+              />
+              <select
+                className="input-terminal"
+                value={createCategoryId}
+                onChange={(e) => setCreateCategoryId(e.target.value)}
+              >
+                {categories.map((category) => (
+                  <option key={category.id} value={category.id}>{category.name}</option>
+                ))}
+              </select>
+              <textarea
+                className="input-terminal"
+                rows={4}
+                placeholder="Thread content"
+                value={createContent}
+                onChange={(e) => setCreateContent(e.target.value)}
+                style={{ resize: 'vertical' }}
+              />
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+                <button className="btn-terminal" onClick={() => setIsCreateModalOpen(false)}>
+                  Cancel
+                </button>
+                <button
+                  className="btn-terminal btn-amber"
+                  onClick={createThread}
+                  disabled={creating || loading || categories.length === 0}
+                  style={{ opacity: creating || loading || categories.length === 0 ? 0.6 : 1 }}
+                >
+                  {creating ? 'Creating...' : 'Create Thread'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {isCategoryModalOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0,0,0,0.55)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 50,
+            padding: '1rem',
+          }}
+        >
+          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', width: 'min(560px, 100%)', padding: '1rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.8rem' }}>
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.75rem', letterSpacing: '0.1em' }}>
+                {editingCategoryId ? 'MODIFY CATEGORY' : 'CREATE CATEGORY'}
+              </div>
+              <button
+                onClick={() => setIsCategoryModalOpen(false)}
+                style={{ background: 'transparent', border: 'none', color: 'var(--color-text-muted)', cursor: 'pointer' }}
+                aria-label="Close category popup"
+              >
+                &#x2715;
+              </button>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.6rem' }}>
+              <input
+                className="input-terminal"
+                type="text"
+                placeholder="Category name"
+                value={categoryName}
+                onChange={(e) => setCategoryName(e.target.value)}
+              />
+              <input
+                className="input-terminal"
+                type="text"
+                placeholder="Icon (emoji)"
+                value={categoryIcon}
+                onChange={(e) => setCategoryIcon(e.target.value)}
+              />
+              <textarea
+                className="input-terminal"
+                rows={3}
+                placeholder="Category description"
+                value={categoryDescription}
+                onChange={(e) => setCategoryDescription(e.target.value)}
+                style={{ resize: 'vertical' }}
+              />
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+                <button className="btn-terminal" onClick={() => setIsCategoryModalOpen(false)}>
+                  Cancel
+                </button>
+                <button
+                  className="btn-terminal btn-amber"
+                  onClick={saveCategory}
+                  disabled={savingCategory}
+                  style={{ opacity: savingCategory ? 0.6 : 1 }}
+                >
+                  {savingCategory ? 'Saving...' : editingCategoryId ? 'Save Changes' : 'Create Category'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
       )}
     </div>

nest-intra/src/utils/api.ts

@@ -1,4 +1,5 @@
 import { getToken } from '../contexts/AuthContext';
+import type { ForumCategory, ForumReply, ForumThread } from '../types';
 
 export const API_BASE = (import.meta.env.VITE_API_URL as string | undefined) ?? '/api';
 
@@ -22,6 +23,84 @@ async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T>
   return res.json() as Promise<T>;
 }
 
+export class ApiError extends Error {
+  status: number;
+
+  constructor(status: number, message: string) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+  }
+}
+
+type ThreadsResponse = {
+  data?: ForumThread[];
+  threads?: ForumThread[];
+  total: number;
+  page: number;
+  pages: number;
+};
+
+export const forumApi = {
+  getCategories: () => apiFetch<ForumCategory[]>('/forum/categories'),
+
+  createCategory: (payload: { name: string; description: string; icon: string }) =>
+    apiFetch<ForumCategory>('/forum/categories', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }),
+
+  updateCategory: (id: string, payload: { name?: string; description?: string; icon?: string }) =>
+    apiFetch<ForumCategory>(`/forum/categories/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(payload),
+    }),
+
+  deleteCategory: (id: string) =>
+    apiFetch<void>(`/forum/categories/${id}`, {
+      method: 'DELETE',
+    }),
+
+  getThreads: async (params?: { categoryId?: string; page?: number; limit?: number }) => {
+    const q = new URLSearchParams();
+    if (params?.categoryId) q.set('categoryId', params.categoryId);
+    q.set('page', String(params?.page ?? 1));
+    q.set('limit', String(params?.limit ?? 100));
+
+    const result = await apiFetch<ThreadsResponse>(`/forum/threads?${q.toString()}`);
+    return {
+      data: result.data ?? result.threads ?? [],
+      total: result.total,
+      page: result.page,
+      pages: result.pages,
+    };
+  },
+
+  getThread: (id: string) => apiFetch<ForumThread & { replies: ForumReply[] }>(`/forum/threads/${id}`),
+
+  createThread: (payload: { title: string; content: string; categoryId: string }) =>
+    apiFetch<ForumThread>('/forum/threads', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }),
+
+  updateThread: (id: string, payload: { isPinned?: boolean; isLocked?: boolean; title?: string; content?: string }) =>
+    apiFetch<ForumThread>(`/forum/threads/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(payload),
+    }),
+
+  deleteThread: (id: string) =>
+    apiFetch<void>(`/forum/threads/${id}`, {
+      method: 'DELETE',
+    }),
+
+  deleteReply: (id: string) =>
+    apiFetch<void>(`/forum/replies/${id}`, {
+      method: 'DELETE',
+    }),
+};
+
 export type SiteSettings = { forumEnabled: boolean; bugsEnabled: boolean };
 
 export const settingsApi = {