Wiki Phase 1: categories, drafts/publish, HTML sanitization

Foundation & safety phase of the wiki upgrade (see WIKI_UPGRADE.md).

Schema (additive, idempotent via ensureSchema):
- new wiki_categories table; wiki_pages gains category_id, excerpt,
  published, published_at, sort_order, and a FULLTEXT index
- migration ALTERs guarded with IF NOT EXISTS for existing databases
- seed reworked into 4 sections with the 8 starter pages assigned

Security:
- new utils/sanitizeHtml.js (sanitize-html allowlist); wiki bodies are
  sanitized on every save, and the article renders through DOMPurify
- strips <script>, event handlers (onerror), and javascript: URLs

Backend:
- public: published-only list with ?category filter + /wiki/categories
- admin: extended page CRUD, PATCH publish toggle, category CRUD;
  drafts visible to admin, hidden from public
- all writes logged to activity_log

Frontend:
- data-driven public wiki index (sections + real descriptions; removed
  hardcoded blurbs/Roman numerals) with ?category filtering
- article: category breadcrumb + sanitized render
- admin: Section/Status columns, draft/publish + section + excerpt in the
  editor, and a Manage sections modal

Verified end-to-end against MariaDB 11: migration clean, XSS neutralized,
drafts hidden, client builds, server boots.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/routes/wiki/Wiki.jsx

@@ -1,27 +1,54 @@
-import { Link } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import PublicLayout from '../../components/PublicLayout.jsx'
 import PageHeader from '../../components/PageHeader.jsx'
 import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
 import { useAsync } from '../../lib/useAsync.js'
 import { api } from '../../api/client.js'
 
-const ROMAN = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII']
+// Group published pages under their category, preserving category sort order and
+// collecting anything uncategorized into a trailing section.
+function groupByCategory(categories, pages) {
+  const byId = new Map(categories.map((c) => [c.id, { ...c, pages: [] }]))
+  const uncategorized = []
+  for (const page of pages) {
+    const bucket = page.category_id != null ? byId.get(page.category_id) : null
+    if (bucket) bucket.pages.push(page)
+    else uncategorized.push(page)
+  }
+  const sections = [...byId.values()].filter((c) => c.pages.length > 0)
+  if (uncategorized.length) {
+    sections.push({ id: 'uncategorized', title: 'Other Pages', description: '', pages: uncategorized })
+  }
+  return sections
+}
 
-// Short blurbs for the seeded categories (the list endpoint returns title/slug only).
-const BLURBS = {
-  'new-player-guide': 'First steps, basic survival, and early goals.',
-  'maps-atlas': 'Regions, towns, routes, and travel notes.',
-  systems: 'Shard mechanics and custom features.',
-  items: 'Equipment, treasures, rewards, and curiosities.',
-  monsters: 'Creatures, bosses, spawns, and dangers.',
-  crafting: 'Professions, materials, recipes, and tools.',
-  lore: 'Stories, places, factions, and mysteries.',
-  rules: 'Player conduct, shard expectations, and policies.',
+function PageCard({ page }) {
+  return (
+    <Link to={`/wiki/${page.slug}`} className="card" style={{ padding: 22 }}>
+      <h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.1rem', color: 'var(--head)' }}>
+        {page.title}
+      </h3>
+      <p className="muted" style={{ margin: 0, fontSize: '0.92rem' }}>
+        {page.excerpt || 'Open the guide →'}
+      </p>
+    </Link>
+  )
 }
 
 export default function Wiki() {
-  const { loading, error, data } = useAsync(() => api.wiki())
-  const pages = data || []
+  const [searchParams] = useSearchParams()
+  const activeCategory = searchParams.get('category')
+  const { loading, error, data } = useAsync(() =>
+    Promise.all([api.wikiCategories(), api.wiki()]).then(([categories, pages]) => ({
+      categories,
+      pages,
+    })),
+  )
+  const allSections = data ? groupByCategory(data.categories, data.pages) : []
+  const sections = activeCategory
+    ? allSections.filter((s) => s.slug === activeCategory)
+    : allSections
+  const hasPages = data && data.pages.length > 0
 
   return (
     <PublicLayout section="wiki">
@@ -30,26 +57,43 @@ export default function Wiki() {
           center
           eyebrow="Knowledge base"
           title="Mysticmoon Wiki"
-          lead="A calm starting point for shard guides, maps, systems, items, monsters, crafting, lore, and rules."
+          lead="A calm starting point for shard guides, the world and its lore, gameplay systems, and community rules."
         />
         {loading && <Loading />}
         {error && <ErrorState message="Could not load the wiki right now." />}
-        {!loading && !error && pages.length === 0 && <EmptyState>No wiki pages yet.</EmptyState>}
-        <section className="grid-4">
-          {pages.map((p, i) => (
-            <Link key={p.slug} to={`/wiki/${p.slug}`} className="card" style={{ padding: 22 }}>
-              <span className="display" style={{ color: 'var(--accent)', fontSize: '1.4rem', marginBottom: 10 }}>
-                {ROMAN[i] || i + 1}
-              </span>
-              <h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.1rem', color: 'var(--head)' }}>
-                {p.title}
-              </h3>
-              <p className="muted" style={{ margin: 0, fontSize: '0.92rem' }}>
-                {BLURBS[p.slug] || 'Open the guide →'}
-              </p>
+        {!loading && !error && !hasPages && <EmptyState>No wiki pages yet.</EmptyState>}
+
+        {!loading && !error && activeCategory && (
+          <p className="sans" style={{ margin: '0 0 8px', fontSize: '0.85rem' }}>
+            <Link to="/wiki" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
+              ← All sections
             </Link>
-          ))}
-        </section>
+          </p>
+        )}
+        {!loading && !error && hasPages && activeCategory && sections.length === 0 && (
+          <EmptyState>No pages in this section yet.</EmptyState>
+        )}
+
+        {sections.map((section) => (
+          <section key={section.id} style={{ marginTop: 36 }}>
+            <h2
+              className="display"
+              style={{ margin: '0 0 4px', fontSize: '1.5rem', color: 'var(--accent)' }}
+            >
+              {section.title}
+            </h2>
+            {section.description && (
+              <p className="muted" style={{ margin: '0 0 16px', fontSize: '0.95rem' }}>
+                {section.description}
+              </p>
+            )}
+            <div className="grid-4" style={{ marginTop: section.description ? 0 : 12 }}>
+              {section.pages.map((p) => (
+                <PageCard key={p.slug} page={p} />
+              ))}
+            </div>
+          </section>
+        ))}
       </div>
     </PublicLayout>
   )