@mounaji_npm/forum 0.1.0

package/src/ForumPage.jsx

@@ -0,0 +1,193 @@
+/**
+ * ForumPage — @mounaji_npm/forum
+ *
+ * Full forum listing page: category sidebar + search/sort header + post list.
+ * Self-contained — no router assumptions, all navigation via callbacks.
+ *
+ * Props:
+ *   categories       — Category[]           sidebar list (default: DEMO_CATEGORIES)
+ *   posts            — Post[]               (default: DEMO_POSTS)
+ *   activeCategory   — string               category id (default: 'all')
+ *   searchQuery      — string
+ *   sortBy           — 'newest'|'top'|'unanswered'
+ *   onCategoryChange — (id) => void
+ *   onSearch         — (q) => void
+ *   onSortChange     — (sort) => void
+ *   onPostClick      — (postId) => void
+ *   onNewPost        — () => void
+ *   onVote           — (postId, vote) => void
+ *   isLoading        — boolean
+ *   isDark           — boolean (default: true)
+ *   header           — React node
+ *   title            — string  (default: 'Forum')
+ *   subtitle         — string
+ *   style            — CSSProperties
+ */
+
+import { useState, useMemo } from 'react';
+import { CategoryNav }               from './components/CategoryNav.jsx';
+import { PostList }                  from './components/PostCard.jsx';
+import { DEMO_POSTS, DEMO_CATEGORIES } from './demo.js';
+
+const SORTS = [
+  { id: 'newest', label: 'Newest'     },
+  { id: 'top',    label: 'Top Voted'  },
+  { id: 'unanswered', label: 'Unanswered' },
+];
+
+export function ForumPage({
+  categories     = DEMO_CATEGORIES,
+  posts          = DEMO_POSTS,
+  activeCategory = 'all',
+  searchQuery    = '',
+  sortBy         = 'newest',
+  onCategoryChange,
+  onSearch,
+  onSortChange,
+  onPostClick,
+  onNewPost,
+  onVote,
+  isLoading      = false,
+  isDark         = true,
+  header,
+  title          = 'Forum',
+  subtitle       = 'Discussions, questions, and ideas from the community.',
+  style,
+}) {
+  const [localSearch, setLocalSearch]   = useState(searchQuery);
+  const [localSort, setLocalSort]       = useState(sortBy);
+  const [localCategory, setLocalCategory] = useState(activeCategory);
+
+  const textPri = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)'   : 'var(--mn-text-primary-light, #1A1A2E)';
+  const textSec = isDark ? 'var(--mn-text-secondary-dark, #94A3B8)' : 'var(--mn-text-secondary-light, #64748B)';
+  const border  = isDark ? 'rgba(255,255,255,0.07)'                  : 'rgba(0,0,0,0.08)';
+  const inputBg = isDark ? 'rgba(255,255,255,0.05)'                  : 'rgba(0,0,0,0.04)';
+
+  function handleSearch(q) {
+    setLocalSearch(q);
+    onSearch?.(q);
+  }
+
+  function handleSort(s) {
+    setLocalSort(s);
+    onSortChange?.(s);
+  }
+
+  function handleCategory(id) {
+    setLocalCategory(id);
+    onCategoryChange?.(id);
+  }
+
+  // Client-side filter + sort (overridden by server data when posts prop changes)
+  const displayed = useMemo(() => {
+    let list = posts;
+    if (localCategory !== 'all') {
+      list = list.filter(p => p.category?.id === localCategory);
+    }
+    if (localSearch.trim()) {
+      const q = localSearch.toLowerCase();
+      list = list.filter(p => p.title.toLowerCase().includes(q) || p.body?.toLowerCase().includes(q));
+    }
+    if (localSort === 'top')        list = [...list].sort((a, b) => b.votes - a.votes);
+    if (localSort === 'newest')     list = [...list].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+    if (localSort === 'unanswered') list = list.filter(p => !p.isSolved && (p.replyCount ?? 0) === 0);
+    // Pinned always first
+    return [...list].sort((a, b) => (b.isPinned ? 1 : 0) - (a.isPinned ? 1 : 0));
+  }, [posts, localCategory, localSearch, localSort]);
+
+  return (
+    <div style={{
+      padding: 'var(--mn-spacing-xl, 32px)',
+      display: 'flex', flexDirection: 'column', gap: 24,
+      fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',
+      ...style,
+    }}>
+      {/* Header */}
+      {header ?? (
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 12 }}>
+          <div>
+            <h1 style={{ margin: 0, fontSize: 'var(--mn-font-size-2xl, 1.5rem)', fontWeight: 700, color: textPri }}>{title}</h1>
+            {subtitle && <p style={{ margin: '4px 0 0', fontSize: '0.875rem', color: textSec }}>{subtitle}</p>}
+          </div>
+          <button
+            onClick={onNewPost}
+            style={{ padding: '8px 18px', borderRadius: 'var(--mn-radius-md, 0.5rem)', border: 'none', cursor: 'pointer', backgroundColor: 'var(--mn-color-primary, #3B82F6)', color: '#fff', fontSize: '0.875rem', fontWeight: 600, fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 6 }}
+          >
+            + New Post
+          </button>
+        </div>
+      )}
+
+      {/* Body: sidebar + main */}
+      <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
+        {/* Sidebar */}
+        <div style={{ width: 200, flexShrink: 0, position: 'sticky', top: 80 }}>
+          <CategoryNav
+            categories={categories}
+            active={localCategory}
+            onChange={handleCategory}
+            isDark={isDark}
+          />
+        </div>
+
+        {/* Main column */}
+        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {/* Search + sort bar */}
+          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
+            {/* Search */}
+            <div style={{ position: 'relative', flex: '1 1 200px' }}>
+              <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: textSec, pointerEvents: 'none', fontSize: 14 }}>🔍</span>
+              <input
+                value={localSearch}
+                onChange={e => handleSearch(e.target.value)}
+                placeholder="Search posts…"
+                style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px 8px 32px', borderRadius: 'var(--mn-radius-md, 0.5rem)', backgroundColor: inputBg, border: `1px solid ${border}`, color: textPri, fontSize: '0.875rem', fontFamily: 'inherit', outline: 'none' }}
+                onFocus={e => { e.target.style.borderColor = 'var(--mn-color-primary, #3B82F6)'; }}
+                onBlur={e => { e.target.style.borderColor = border; }}
+              />
+            </div>
+
+            {/* Sort tabs */}
+            <div style={{ display: 'flex', gap: 2, backgroundColor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)', padding: 3, borderRadius: 'var(--mn-radius-md, 0.5rem)' }}>
+              {SORTS.map(s => {
+                const isActive = localSort === s.id;
+                return (
+                  <button
+                    key={s.id}
+                    onClick={() => handleSort(s.id)}
+                    style={{
+                      padding: '4px 12px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                      backgroundColor: isActive ? (isDark ? 'rgba(255,255,255,0.09)' : '#fff') : 'transparent',
+                      color: isActive ? textPri : textSec,
+                      fontSize: '0.8125rem', fontWeight: isActive ? 600 : 400, fontFamily: 'inherit',
+                      transition: 'all 100ms',
+                    }}
+                  >
+                    {s.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Post count */}
+          {!isLoading && (
+            <p style={{ margin: 0, fontSize: '0.8125rem', color: textSec }}>
+              {displayed.length} {displayed.length === 1 ? 'post' : 'posts'}
+              {localSearch ? ` matching "${localSearch}"` : ''}
+            </p>
+          )}
+
+          {/* Post list */}
+          <PostList
+            posts={displayed}
+            onPostClick={onPostClick}
+            onVote={onVote}
+            isLoading={isLoading}
+            isDark={isDark}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/PostPage.jsx

@@ -0,0 +1,122 @@
+/**
+ * PostPage — @mounaji_npm/forum
+ *
+ * Full post detail page: back button, post content, reply thread.
+ * No router assumptions — navigation via callbacks.
+ *
+ * Props:
+ *   post         — Post object (required)
+ *   replies      — Reply[]
+ *   currentUser  — { id, name, avatar? } | null
+ *   onBack       — () => void
+ *   onVotePost   — (postId, vote) => void
+ *   onVoteReply  — (replyId, vote) => void
+ *   onAccept     — (replyId) => void
+ *   onSubmitReply — (body: string) => void | Promise<void>
+ *   isLoading    — boolean
+ *   isDark       — boolean (default: true)
+ *   style        — CSSProperties
+ */
+
+import { PostDetail }  from './components/PostDetail.jsx';
+import { ReplyThread } from './components/ReplyThread.jsx';
+import { DEMO_POSTS, DEMO_REPLIES } from './demo.js';
+
+export function PostPage({
+  post         = DEMO_POSTS[0],
+  replies      = DEMO_REPLIES,
+  currentUser  = null,
+  onBack,
+  onVotePost,
+  onVoteReply,
+  onAccept,
+  onSubmitReply,
+  isLoading    = false,
+  isDark       = true,
+  style,
+}) {
+  const textPri = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)'   : 'var(--mn-text-primary-light, #1A1A2E)';
+  const textSec = isDark ? 'var(--mn-text-secondary-dark, #94A3B8)' : 'var(--mn-text-secondary-light, #64748B)';
+
+  // Only the post author can accept replies
+  const canAccept = currentUser && post?.author?.id === currentUser?.id;
+
+  if (isLoading) {
+    return (
+      <div style={{ padding: 'var(--mn-spacing-xl, 32px)', fontFamily: 'var(--mn-font-family, system-ui, sans-serif)', ...style }}>
+        <PostSkeleton isDark={isDark} />
+      </div>
+    );
+  }
+
+  if (!post) {
+    return (
+      <div style={{ padding: 'var(--mn-spacing-xl, 32px)', textAlign: 'center', color: textSec, fontFamily: 'var(--mn-font-family, system-ui, sans-serif)', ...style }}>
+        <p style={{ fontSize: 32, margin: '0 0 12px' }}>🔍</p>
+        <p style={{ margin: 0, fontWeight: 600, color: textPri }}>Post not found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      padding: 'var(--mn-spacing-xl, 32px)',
+      display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 860,
+      fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',
+      ...style,
+    }}>
+      {/* Back nav */}
+      <button
+        onClick={onBack}
+        style={{
+          alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: 6,
+          padding: '6px 12px', borderRadius: 'var(--mn-radius-md, 0.5rem)', border: 'none',
+          cursor: 'pointer', backgroundColor: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
+          color: textSec, fontSize: '0.875rem', fontFamily: 'inherit', transition: 'background 100ms',
+        }}
+        onMouseEnter={e => { e.currentTarget.style.backgroundColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'; }}
+        onMouseLeave={e => { e.currentTarget.style.backgroundColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'; }}
+      >
+        ← Back to Forum
+      </button>
+
+      {/* Post content */}
+      <PostDetail
+        post={post}
+        onVote={onVotePost}
+        isDark={isDark}
+      />
+
+      {/* Reply thread */}
+      <ReplyThread
+        replies={replies}
+        onVote={onVoteReply}
+        onAccept={onAccept}
+        canAccept={canAccept}
+        currentUser={currentUser}
+        onSubmit={onSubmitReply}
+        isLocked={post.isLocked}
+        isDark={isDark}
+      />
+    </div>
+  );
+}
+
+function PostSkeleton({ isDark }) {
+  const bg = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)';
+  const border = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.08)';
+  const card = isDark ? 'var(--mn-color-card-dark, #0B0F23)' : 'var(--mn-color-card-light, #FAFAF8)';
+  const S = (w, h = 12) => ({ width: w, height: h, borderRadius: 6, backgroundColor: bg, animation: 'mn-pulse 1.4s ease infinite' });
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={S(80)} />
+      <div style={{ borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: card, border: `1px solid ${border}`, padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <div style={S('30%', 8)} />
+        <div style={S('70%', 20)} />
+        <div style={S('45%', 10)} />
+        <div style={{ height: 80, borderRadius: 6, backgroundColor: bg }} />
+      </div>
+      <style>{`@keyframes mn-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }`}</style>
+    </div>
+  );
+}

package/src/components/CategoryNav.jsx

@@ -0,0 +1,83 @@
+/**
+ * CategoryNav — @mounaji_npm/forum
+ *
+ * Sidebar category list with counts and active state.
+ *
+ * Props:
+ *   categories    — { id, label, icon?, count?, pinned? }[]
+ *   active        — string  (category id)
+ *   onChange(id)  — callback
+ *   isDark        — boolean
+ *   title         — string (default: 'Categories')
+ *   style         — CSSProperties
+ */
+
+export function CategoryNav({ categories = [], active = 'all', onChange, isDark = true, title = 'Categories', style }) {
+  const card    = isDark ? 'var(--mn-color-card-dark, #0B0F23)'     : 'var(--mn-color-card-light, #FAFAF8)';
+  const border  = isDark ? 'rgba(255,255,255,0.07)'                  : 'rgba(0,0,0,0.08)';
+  const textPri = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)'   : 'var(--mn-text-primary-light, #1A1A2E)';
+  const textSec = isDark ? 'var(--mn-text-secondary-dark, #94A3B8)' : 'var(--mn-text-secondary-light, #64748B)';
+
+  return (
+    <div style={{
+      borderRadius: 'var(--mn-radius-lg, 0.75rem)',
+      backgroundColor: card,
+      border: `1px solid ${border}`,
+      overflow: 'hidden',
+      ...style,
+    }}>
+      {title && (
+        <div style={{ padding: '12px 16px', borderBottom: `1px solid ${border}` }}>
+          <p style={{ margin: 0, fontSize: '0.75rem', fontWeight: 600, color: textSec, textTransform: 'uppercase', letterSpacing: '0.07em' }}>
+            {title}
+          </p>
+        </div>
+      )}
+      <div style={{ padding: '8px 0' }}>
+        {categories.map(cat => {
+          const isActive = active === cat.id;
+          return (
+            <button
+              key={cat.id}
+              onClick={() => onChange?.(cat.id)}
+              style={{
+                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '7px 16px', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                backgroundColor: isActive
+                  ? (isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.07)')
+                  : 'transparent',
+                borderLeft: `3px solid ${isActive ? 'var(--mn-color-primary, #3B82F6)' : 'transparent'}`,
+                transition: 'all 100ms',
+                gap: 8,
+              }}
+              onMouseEnter={e => { if (!isActive) e.currentTarget.style.backgroundColor = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)'; }}
+              onMouseLeave={e => { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                {cat.icon && <span style={{ fontSize: 14, flexShrink: 0 }}>{cat.icon}</span>}
+                <span style={{
+                  fontSize: '0.875rem',
+                  fontWeight: isActive ? 600 : 400,
+                  color: isActive ? 'var(--mn-color-primary, #3B82F6)' : textPri,
+                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                }}>
+                  {cat.label}
+                </span>
+              </div>
+              {cat.count != null && (
+                <span style={{
+                  fontSize: '0.7rem', fontWeight: 500, padding: '1px 7px', borderRadius: 9999,
+                  backgroundColor: isActive ? 'rgba(59,130,246,0.15)' : (isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'),
+                  color: isActive ? 'var(--mn-color-primary, #3B82F6)' : textSec,
+                  flexShrink: 0,
+                }}>
+                  {cat.count}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/PostCard.jsx

@@ -0,0 +1,186 @@
+/**
+ * PostCard — @mounaji_npm/forum
+ *
+ * Compact card shown in the forum listing. Displays vote count, category badge,
+ * title, preview text, author meta, reply/view counts, and status badges.
+ *
+ * Props (single post):
+ *   post      — Post object (see data shape in demo.js)
+ *   onClick   — () => void
+ *   onVote    — (postId, vote: 1|0|-1) => void
+ *   isDark    — boolean
+ *   compact   — boolean  (smaller variant, no body preview)
+ *   style     — CSSProperties
+ *
+ * PostList:
+ *   posts, onPostClick, onVote, isLoading, isDark
+ */
+
+import { VoteButton, AuthorMeta, TagChip, CategoryBadge } from './shared.jsx';
+
+// ─── PostCard ────────────────────────────────────────────────────────────────
+
+export function PostCard({ post, onClick, onVote, isDark = true, compact = false, style }) {
+  const card    = isDark ? 'var(--mn-color-card-dark, #0B0F23)'     : 'var(--mn-color-card-light, #FAFAF8)';
+  const border  = isDark ? 'rgba(255,255,255,0.07)'                  : 'rgba(0,0,0,0.08)';
+  const textPri = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)'   : 'var(--mn-text-primary-light, #1A1A2E)';
+  const textSec = isDark ? 'var(--mn-text-secondary-dark, #94A3B8)' : 'var(--mn-text-secondary-light, #64748B)';
+
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        display: 'flex', gap: 14, padding: compact ? '12px 16px' : '16px 18px',
+        borderRadius: 'var(--mn-radius-lg, 0.75rem)',
+        backgroundColor: card, border: `1px solid ${border}`,
+        cursor: onClick ? 'pointer' : 'default',
+        transition: 'border-color 120ms, background 120ms',
+        ...style,
+      }}
+      onMouseEnter={e => { if (onClick) { e.currentTarget.style.borderColor = isDark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.16)'; } }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = border; }}
+    >
+      {/* Vote column */}
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{ flexShrink: 0, paddingTop: 2 }}
+      >
+        <VoteButton
+          count={post.votes}
+          userVote={post.userVote ?? 0}
+          onChange={v => onVote?.(post.id, v)}
+          vertical
+          isDark={isDark}
+          size="sm"
+        />
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {/* Badges row */}
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
+          {post.isPinned && (
+            <span style={{ fontSize: '0.7rem', fontWeight: 600, padding: '2px 7px', borderRadius: 9999, backgroundColor: 'rgba(245,158,11,0.12)', color: '#FCD34D', border: '1px solid rgba(245,158,11,0.25)' }}>
+              📌 Pinned
+            </span>
+          )}
+          {post.isSolved && (
+            <span style={{ fontSize: '0.7rem', fontWeight: 600, padding: '2px 7px', borderRadius: 9999, backgroundColor: 'rgba(16,185,129,0.12)', color: '#34D399', border: '1px solid rgba(16,185,129,0.25)' }}>
+              ✓ Solved
+            </span>
+          )}
+          <CategoryBadge category={post.category} />
+        </div>
+
+        {/* Title */}
+        <h3 style={{ margin: 0, fontSize: compact ? '0.9375rem' : '1rem', fontWeight: 600, color: textPri, lineHeight: 1.4 }}>
+          {post.title}
+        </h3>
+
+        {/* Body preview */}
+        {!compact && post.body && (
+          <p style={{ margin: 0, fontSize: '0.8125rem', color: textSec, lineHeight: 1.55, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+            {post.body}
+          </p>
+        )}
+
+        {/* Tags */}
+        {post.tags?.length > 0 && (
+          <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+            {post.tags.map(t => <TagChip key={t} label={t} isDark={isDark} />)}
+          </div>
+        )}
+
+        {/* Footer meta */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 2 }}>
+          <AuthorMeta author={post.author} date={post.createdAt} isDark={isDark} size="sm" />
+          <MetaCount icon="💬" value={post.replyCount} label="replies" isDark={isDark} />
+          <MetaCount icon="👁" value={post.viewCount}  label="views"   isDark={isDark} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MetaCount({ icon, value, label, isDark }) {
+  const color = isDark ? '#64748B' : '#94A3B8';
+  return (
+    <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', color }}>
+      <span style={{ fontSize: 12 }}>{icon}</span>
+      {value} {label}
+    </span>
+  );
+}
+
+// ─── PostList ─────────────────────────────────────────────────────────────────
+
+export function PostList({ posts = [], onPostClick, onVote, isLoading = false, isDark = true }) {
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <SkeletonCard key={i} isDark={isDark} />
+        ))}
+      </div>
+    );
+  }
+
+  if (posts.length === 0) {
+    return <EmptyPostList isDark={isDark} />;
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+      {posts.map(post => (
+        <PostCard
+          key={post.id}
+          post={post}
+          onClick={() => onPostClick?.(post.id)}
+          onVote={onVote}
+          isDark={isDark}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function EmptyPostList({ isDark = true, message = 'No posts yet', cta, onCta }) {
+  const textPri = isDark ? '#F0F4FF' : '#1A1A2E';
+  const textSec = isDark ? '#94A3B8' : '#64748B';
+  return (
+    <div style={{ textAlign: 'center', padding: '64px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+      <p style={{ fontSize: 40, margin: 0 }}>💬</p>
+      <p style={{ margin: 0, fontSize: '1rem', fontWeight: 600, color: textPri }}>{message}</p>
+      <p style={{ margin: 0, fontSize: '0.875rem', color: textSec }}>Be the first to start a discussion.</p>
+      {cta && (
+        <button
+          onClick={onCta}
+          style={{ marginTop: 8, padding: '8px 20px', borderRadius: 'var(--mn-radius-md, 0.5rem)', border: 'none', cursor: 'pointer', backgroundColor: 'var(--mn-color-primary, #3B82F6)', color: '#fff', fontSize: '0.875rem', fontWeight: 600, fontFamily: 'inherit' }}
+        >
+          {cta}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function SkeletonCard({ isDark }) {
+  const bg = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
+  const border = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.08)';
+  const S = (w, h = 12) => ({ width: w, height: h, borderRadius: 6, backgroundColor: bg, animation: 'mn-pulse 1.4s ease infinite' });
+  return (
+    <div style={{ display: 'flex', gap: 14, padding: '16px 18px', borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: isDark ? 'var(--mn-color-card-dark, #0B0F23)' : 'var(--mn-color-card-light, #FAFAF8)', border: `1px solid ${border}` }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, paddingTop: 2, flexShrink: 0 }}>
+        <div style={S(22, 10)} />
+        <div style={S(22, 10)} />
+      </div>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 9 }}>
+        <div style={S('60%', 8)} />
+        <div style={S('85%', 14)} />
+        <div style={S('50%', 8)} />
+        <div style={S('40%', 8)} />
+      </div>
+      <style>{`@keyframes mn-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }`}</style>
+    </div>
+  );
+}

package/src/components/PostDetail.jsx

@@ -0,0 +1,89 @@
+/**
+ * PostDetail — @mounaji_npm/forum
+ *
+ * Full post content view: title, body, metadata, tags.
+ * Used inside PostPage.
+ *
+ * Props:
+ *   post    — Post object
+ *   onVote  — (postId, vote) => void
+ *   isDark  — boolean
+ */
+
+import { VoteButton, AuthorMeta, TagChip, CategoryBadge } from './shared.jsx';
+
+export function PostDetail({ post, onVote, isDark = true }) {
+  const card    = isDark ? 'var(--mn-color-card-dark, #0B0F23)'     : 'var(--mn-color-card-light, #FAFAF8)';
+  const border  = isDark ? 'rgba(255,255,255,0.07)'                  : 'rgba(0,0,0,0.08)';
+  const textPri = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)'   : 'var(--mn-text-primary-light, #1A1A2E)';
+  const textSec = isDark ? 'var(--mn-text-secondary-dark, #94A3B8)' : 'var(--mn-text-secondary-light, #64748B)';
+
+  return (
+    <div style={{ borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: card, border: `1px solid ${border}`, overflow: 'hidden' }}>
+      {/* Post header */}
+      <div style={{ padding: '20px 24px', borderBottom: `1px solid ${border}` }}>
+        {/* Badges */}
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
+          {post.isPinned && <StatusBadge color="warning">📌 Pinned</StatusBadge>}
+          {post.isSolved && <StatusBadge color="success">✓ Solved</StatusBadge>}
+          {post.isLocked && <StatusBadge color="muted">🔒 Locked</StatusBadge>}
+          <CategoryBadge category={post.category} />
+        </div>
+
+        {/* Title */}
+        <h1 style={{ margin: '0 0 14px', fontSize: 'var(--mn-font-size-xl, 1.25rem)', fontWeight: 700, color: textPri, lineHeight: 1.4 }}>
+          {post.title}
+        </h1>
+
+        {/* Author + date + stats */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
+          <AuthorMeta author={post.author} date={post.createdAt} prefix="posted" isDark={isDark} />
+          <span style={{ fontSize: '0.8125rem', color: textSec }}>👁 {post.viewCount ?? 0} views</span>
+          <span style={{ fontSize: '0.8125rem', color: textSec }}>💬 {post.replyCount ?? 0} replies</span>
+        </div>
+      </div>
+
+      {/* Post body + vote */}
+      <div style={{ display: 'flex', gap: 0 }}>
+        {/* Vote column */}
+        <div style={{ padding: '20px 16px', borderRight: `1px solid ${border}`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+          <VoteButton
+            count={post.votes}
+            userVote={post.userVote ?? 0}
+            onChange={v => onVote?.(post.id, v)}
+            vertical
+            isDark={isDark}
+          />
+        </div>
+
+        {/* Body */}
+        <div style={{ flex: 1, padding: '20px 24px' }}>
+          <div style={{ fontSize: '0.9375rem', color: textPri, lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+            {post.body}
+          </div>
+
+          {/* Tags */}
+          {post.tags?.length > 0 && (
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 18 }}>
+              {post.tags.map(t => <TagChip key={t} label={t} isDark={isDark} />)}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ color, children }) {
+  const COLORS = {
+    warning: { bg: 'rgba(245,158,11,0.12)', text: '#FCD34D', border: 'rgba(245,158,11,0.25)' },
+    success: { bg: 'rgba(16,185,129,0.12)',  text: '#34D399', border: 'rgba(16,185,129,0.25)' },
+    muted:   { bg: 'rgba(107,114,128,0.12)', text: '#9CA3AF', border: 'rgba(107,114,128,0.2)' },
+  };
+  const c = COLORS[color] ?? COLORS.muted;
+  return (
+    <span style={{ fontSize: '0.7rem', fontWeight: 600, padding: '2px 8px', borderRadius: 9999, backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}>
+      {children}
+    </span>
+  );
+}