@geenius/docs 0.1.0

package/packages/react/src/pages/DocSearchPage.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useMemo } from 'react'
+import type { DocPage, DocSection, SearchResult } from '@geenius-docs/shared'
+import { buildDocsIndex, searchDocs, highlightMatch } from '@geenius-docs/shared'
+import { useDocSearch } from '../hooks/useDocSearch'
+
+interface DocSearchPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  onSelectPage?: (page: DocPage, section: DocSection) => void
+}
+
+export function DocSearchPage({ tree, onSelectPage }: DocSearchPageProps) {
+  const sections = useMemo(() => tree ?? [], [tree])
+  const flatPages = useMemo(() => sections.flatMap((s) => s.pages ?? []), [sections])
+
+  const searchFn = useCallback(
+    (q: string): SearchResult[] => {
+      const index = buildDocsIndex(flatPages, sections)
+      return searchDocs(q, index)
+    },
+    [flatPages, sections]
+  )
+
+  const { results, isSearching, query, setQuery } = useDocSearch(searchFn)
+
+  // Loading
+  if (tree === undefined) {
+    return (
+      <div className="min-h-screen bg-[#090a0f] px-6 py-16">
+        <div className="mx-auto max-w-2xl">
+          <div className="mb-8 h-12 animate-pulse rounded-xl bg-white/5" />
+          <div className="space-y-3">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="h-20 animate-pulse rounded-xl bg-white/5" />
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-[#090a0f] text-white">
+      <div className="mx-auto max-w-2xl px-6 py-16">
+        <h1 className="mb-8 text-2xl font-bold">Search Documentation</h1>
+
+        {/* Search input */}
+        <div className="relative mb-8">
+          <svg className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-white/30" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenorid" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" />
+          </svg>
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Type to search…"
+            autoFocus
+            className="w-full rounded-xl border border-white/10 bg-white/5 py-3.5 pl-12 pr-4 text-sm text-white placeholder-white/30 outline-none transition-colors focus:border-indigo-500/40 focus:ring-1 focus:ring-indigo-500/20"
+          />
+          {isSearching && (
+            <div className="absolute right-4 top-1/2 -translate-y-1/2">
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/10 border-t-indigo-400" />
+            </div>
+          )}
+        </div>
+
+        {/* Results */}
+        {results.length > 0 && (
+          <div className="space-y-2">
+            {results.map((result) => {
+              const section = sections.find((s) => s.slug === result.sectionSlug)
+              const page = flatPages.find((p) => p.id === result.pageId)
+              return (
+                <button
+                  key={result.pageId}
+                  type="button"
+                  onClick={() => {
+                    if (page && section && onSelectPage) onSelectPage(page, section)
+                  }}
+                  className="flex w-full flex-col gap-1.5 rounded-xl border border-white/5 bg-white/[0.02] p-4 text-left transition-all hover:border-indigo-500/20 hover:bg-white/[0.05]"
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="rounded bg-indigo-500/20 px-2 py-0.5 text-[10px] font-medium text-indigo-300">
+                      {result.sectionTitle}
+                    </span>
+                    <span className="text-sm font-medium text-white/90">{result.pageTitle}</span>
+                    <span className="ml-auto text-xs tabular-nums text-white/20">
+                      {page?.readingTime ?? 0} min
+                    </span>
+                  </div>
+                  <p className="text-xs leading-relaxed text-white/40">
+                    {highlightMatch(result.highlight, query)}
+                  </p>
+                  {result.tags.length > 0 && (
+                    <div className="flex gap-1 mt-1">
+                      {result.tags.slice(0, 4).map((tag) => (
+                        <span key={tag} className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/30">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {query.trim() && results.length === 0 && !isSearching && (
+          <div className="flex flex-col items-center py-16 text-center">
+            <div className="mb-4 text-5xl opacity-30">🔍</div>
+            <h3 className="mb-2 text-lg font-medium text-white/60">No results found</h3>
+            <p className="text-sm text-white/30">
+              Try different keywords or check your spelling.
+            </p>
+          </div>
+        )}
+
+        {/* Initial state */}
+        {!query.trim() && (
+          <div className="flex flex-col items-center py-16 text-center">
+            <div className="mb-4 text-5xl opacity-20">📖</div>
+            <p className="text-sm text-white/30">Start typing to search across all documentation</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/packages/react/src/pages/DocViewPage.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useMemo } from 'react'
+import type { DocPage as DocPageType, DocSection } from '@geenius-docs/shared'
+import { buildBreadcrumbs } from '@geenius-docs/shared'
+import { useDocs } from '../hooks/useDocs'
+import { useTableOfContents } from '../hooks/useTableOfContents'
+import { DocsLayout } from '../components/DocsLayout'
+import { DocPage } from '../components/DocPage'
+import { EditButton } from '../components/EditButton'
+import { PageNavigation } from '../components/PageNavigation'
+
+interface DocViewPageProps {
+  tree: (DocSection & { pages: DocPageType[]; pageCount: number })[] | undefined
+  page: DocPageType | null | undefined
+  editPageUrl?: string
+  onNavigate: (page: DocPageType, section: DocSection) => void
+  onIncrementView?: (pageId: string) => void
+}
+
+export function DocViewPage({
+  tree,
+  page,
+  editPageUrl,
+  onNavigate,
+  onIncrementView,
+}: DocViewPageProps) {
+  const docs = useDocs(tree)
+  const { toc, activeId } = useTableOfContents(page?.content)
+
+  // Increment view count on mount
+  useEffect(() => {
+    if (page?.id && onIncrementView) {
+      onIncrementView(page.id)
+    }
+  }, [page?.id, onIncrementView])
+
+  // Build breadcrumbs
+  const breadcrumbs = useMemo(() => {
+    if (!page) return []
+    return buildBreadcrumbs(docs.sections, page.sectionId, page.slug)
+  }, [docs.sections, page])
+
+  // Find prev/next pages
+  const { prev, next } = useMemo(() => {
+    if (!page) return { prev: undefined, next: undefined }
+    const allPages = docs.flatPages
+    const idx = allPages.findIndex((p) => p.id === page.id)
+    const section = docs.sections.find((s) => s.id === page.sectionId)
+    return {
+      prev: idx > 0
+        ? { title: allPages[idx - 1].title, href: `/docs/${section?.slug ?? ''}/${allPages[idx - 1].slug}` }
+        : undefined,
+      next: idx < allPages.length - 1
+        ? { title: allPages[idx + 1].title, href: `/docs/${section?.slug ?? ''}/${allPages[idx + 1].slug}` }
+        : undefined,
+    }
+  }, [page, docs.flatPages, docs.sections])
+
+  // Loading
+  if (docs.isLoading || page === undefined) {
+    return (
+      <div className="flex min-h-screen bg-[#090a0f]">
+        <div className="hidden w-[260px] shrink-0 border-r border-white/5 bg-[#0b0c12] lg:block">
+          <div className="space-y-3 p-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="h-8 animate-pulse rounded-lg bg-white/5" />
+            ))}
+          </div>
+        </div>
+        <div className="flex-1 px-10 py-8">
+          <div className="mx-auto max-w-3xl space-y-4">
+            <div className="h-5 w-48 animate-pulse rounded bg-white/5" />
+            <div className="h-10 w-96 animate-pulse rounded bg-white/5" />
+            <div className="mt-8 space-y-3">
+              {Array.from({ length: 12 }).map((_, i) => (
+                <div key={i} className="h-4 animate-pulse rounded bg-white/5" style={{ width: `${60 + Math.random() * 40}%` }} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Not found
+  if (!page) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center">
+        <div className="mb-4 text-6xl opacity-30">🔍</div>
+        <h2 className="mb-2 text-xl font-semibold text-white/80">Page not found</h2>
+        <p className="text-sm text-white/40">The documentation page you&apos;re looking for doesn&apos;t exist.</p>
+      </div>
+    )
+  }
+
+  return (
+    <DocsLayout
+      sections={docs.sections}
+      currentPage={page}
+      toc={toc}
+      activeHeadingId={activeId}
+      breadcrumbs={breadcrumbs}
+      currentPageId={page.id}
+      onNavigate={onNavigate}
+    >
+      {/* Page header */}
+      <div className="mb-8">
+        <h1 className="mb-3 text-3xl font-bold tracking-tight">{page.title}</h1>
+        <div className="flex flex-wrap items-center gap-4 text-sm text-white/40">
+          <span className="flex items-center gap-1.5">
+            {page.author.avatar ? (
+              <img src={page.author.avatar} alt="" className="h-5 w-5 rounded-full" />
+            ) : (
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500/20 text-[10px] text-indigo-300">
+                {page.author.name[0]}
+              </span>
+            )}
+            {page.author.name}
+          </span>
+          {page.readingTime > 0 && (
+            <span>{page.readingTime} min read</span>
+          )}
+          {page.lastEditedBy && (
+            <span>
+              Edited by {page.lastEditedBy.name}
+            </span>
+          )}
+          {page.viewCount > 0 && (
+            <span>{page.viewCount.toLocaleString()} views</span>
+          )}
+        </div>
+
+        {/* Tags */}
+        {page.tags.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {page.tags.map((tag) => (
+              <span key={tag} className="rounded-full bg-white/5 px-2.5 py-0.5 text-xs text-white/40">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <DocPage page={page} />
+
+      {/* Footer */}
+      <div className="mt-10 flex items-center justify-between border-t border-white/5 pt-6">
+        <EditButton pageSlug={page.slug} editUrl={editPageUrl} />
+        {page.version && (
+          <span className="text-xs text-white/25">v{page.version}</span>
+        )}
+      </div>
+
+      <PageNavigation prev={prev} next={next} />
+    </DocsLayout>
+  )
+}

package/packages/react/src/pages/DocsAdminPage.tsx

@@ -0,0 +1,330 @@
+import React, { useState, useMemo } from 'react'
+import type { DocPage, DocSection } from '@geenius-docs/shared'
+import type { DocsAdminActions } from '../hooks/useDocsAdmin'
+
+interface DocsAdminPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  allPages?: DocPage[]
+  admin: DocsAdminActions
+}
+
+export function DocsAdminPage({ tree, allPages, admin }: DocsAdminPageProps) {
+  const sections = useMemo(() => tree ?? [], [tree])
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null)
+  const [sectionForm, setSectionForm] = useState({ title: '', slug: '', description: '', icon: '', access: 'team' as const })
+  const [pageForm, setPageForm] = useState({ title: '', slug: '', content: '', access: 'team' as const, tags: '' })
+  const [showSectionForm, setShowSectionForm] = useState(false)
+  const [showPageForm, setShowPageForm] = useState(false)
+
+  const selectedSection = sections.find((s) => s.id === selectedSectionId)
+  const sectionPages = useMemo(() => {
+    if (!selectedSection) return []
+    if (allPages) return allPages.filter((p) => p.sectionId === selectedSectionId)
+    return selectedSection.pages ?? []
+  }, [selectedSection, allPages, selectedSectionId])
+
+  // Loading
+  if (tree === undefined) {
+    return (
+      <div className="min-h-screen bg-[#090a0f] px-6 py-12">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-8 h-10 w-48 animate-pulse rounded bg-white/5" />
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="h-96 animate-pulse rounded-xl bg-white/5" />
+            <div className="h-96 animate-pulse rounded-xl bg-white/5" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-[#090a0f] text-white">
+      <div className="mx-auto max-w-6xl px-6 py-12">
+        <h1 className="mb-8 text-2xl font-bold">Docs Admin</h1>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* Left panel — Sections */}
+          <div className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-white/80">Sections</h2>
+              <button
+                type="button"
+                onClick={() => setShowSectionForm(!showSectionForm)}
+                className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium transition-colors hover:bg-indigo-500"
+              >
+                + Add Section
+              </button>
+            </div>
+
+            {/* Section form */}
+            {showSectionForm && (
+              <div className="mb-4 space-y-2 rounded-lg border border-white/10 bg-white/5 p-4">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={sectionForm.title}
+                  onChange={(e) => setSectionForm({ ...sectionForm, title: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <input
+                  type="text"
+                  placeholder="Slug"
+                  value={sectionForm.slug}
+                  onChange={(e) => setSectionForm({ ...sectionForm, slug: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <input
+                  type="text"
+                  placeholder="Icon (emoji)"
+                  value={sectionForm.icon}
+                  onChange={(e) => setSectionForm({ ...sectionForm, icon: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <input
+                  type="text"
+                  placeholder="Description"
+                  value={sectionForm.description}
+                  onChange={(e) => setSectionForm({ ...sectionForm, description: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <select
+                  value={sectionForm.access}
+                  onChange={(e) => setSectionForm({ ...sectionForm, access: e.target.value as 'public' | 'team' | 'admin' })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none"
+                >
+                  <option value="public">Public</option>
+                  <option value="team">Team</option>
+                  <option value="admin">Admin</option>
+                </select>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      await admin.createSection({
+                        ...sectionForm,
+                        order: sections.length,
+                        icon: sectionForm.icon || undefined,
+                        description: sectionForm.description || undefined,
+                      })
+                      setSectionForm({ title: '', slug: '', description: '', icon: '', access: 'team' })
+                      setShowSectionForm(false)
+                    }}
+                    className="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium hover:bg-indigo-500"
+                  >
+                    Create
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowSectionForm(false)}
+                    className="rounded-lg border border-white/10 px-4 py-2 text-xs hover:bg-white/5"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Sections list */}
+            <div className="space-y-1">
+              {sections.length === 0 && (
+                <p className="py-8 text-center text-sm text-white/30">No sections yet</p>
+              )}
+              {sections.map((section) => (
+                <div
+                  key={section.id}
+                  className={`group flex items-center gap-2 rounded-lg px-3 py-2.5 transition-colors cursor-pointer ${
+                    selectedSectionId === section.id
+                      ? 'bg-indigo-500/15 text-indigo-300'
+                      : 'hover:bg-white/5 text-white/70'
+                  }`}
+                  onClick={() => setSelectedSectionId(section.id)}
+                >
+                  {section.icon && <span>{section.icon}</span>}
+                  <span className="flex-1 text-sm font-medium truncate">{section.title}</span>
+                  <span className="text-[11px] tabular-nums opacity-40">{section.pageCount ?? 0}</span>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (confirm(`Delete section "${section.title}"?`)) {
+                        admin.deleteSection(section.id)
+                      }
+                    }}
+                    className="rounded p-1 text-white/20 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-400"
+                    title="Delete section"
+                  >
+                    <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="currentColor">
+                      <path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z" />
+                      <path fillRule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 010-2H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right panel — Pages */}
+          <div className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-white/80">
+                {selectedSection ? `Pages — ${selectedSection.title}` : 'Pages'}
+              </h2>
+              {selectedSection && (
+                <button
+                  type="button"
+                  onClick={() => setShowPageForm(!showPageForm)}
+                  className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium transition-colors hover:bg-indigo-500"
+                >
+                  + Add Page
+                </button>
+              )}
+            </div>
+
+            {!selectedSection && (
+              <p className="py-16 text-center text-sm text-white/30">Select a section to manage pages</p>
+            )}
+
+            {/* Page form */}
+            {showPageForm && selectedSection && (
+              <div className="mb-4 space-y-2 rounded-lg border border-white/10 bg-white/5 p-4">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={pageForm.title}
+                  onChange={(e) => setPageForm({ ...pageForm, title: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <input
+                  type="text"
+                  placeholder="Slug"
+                  value={pageForm.slug}
+                  onChange={(e) => setPageForm({ ...pageForm, slug: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <textarea
+                  placeholder="Content (MDX)"
+                  value={pageForm.content}
+                  onChange={(e) => setPageForm({ ...pageForm, content: e.target.value })}
+                  rows={5}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40 resize-y"
+                />
+                <input
+                  type="text"
+                  placeholder="Tags (comma separated)"
+                  value={pageForm.tags}
+                  onChange={(e) => setPageForm({ ...pageForm, tags: e.target.value })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-indigo-500/40"
+                />
+                <select
+                  value={pageForm.access}
+                  onChange={(e) => setPageForm({ ...pageForm, access: e.target.value as 'public' | 'team' | 'admin' })}
+                  className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none"
+                >
+                  <option value="public">Public</option>
+                  <option value="team">Team</option>
+                  <option value="admin">Admin</option>
+                </select>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      await admin.createPage({
+                        title: pageForm.title,
+                        slug: pageForm.slug,
+                        content: pageForm.content,
+                        sectionId: selectedSection.id,
+                        access: pageForm.access,
+                        tags: pageForm.tags ? pageForm.tags.split(',').map((t) => t.trim()) : [],
+                        order: sectionPages.length,
+                      })
+                      setPageForm({ title: '', slug: '', content: '', access: 'team', tags: '' })
+                      setShowPageForm(false)
+                    }}
+                    className="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium hover:bg-indigo-500"
+                  >
+                    Create
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowPageForm(false)}
+                    className="rounded-lg border border-white/10 px-4 py-2 text-xs hover:bg-white/5"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Pages table */}
+            {selectedSection && sectionPages.length > 0 && (
+              <div className="space-y-1">
+                {sectionPages.map((page) => (
+                  <div
+                    key={page.id}
+                    className="group flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-white/5"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-white/80 truncate">{page.title}</p>
+                      <p className="text-[11px] text-white/30">/{page.slug}</p>
+                    </div>
+                    <span
+                      className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                        page.status === 'published'
+                          ? 'bg-emerald-500/15 text-emerald-400'
+                          : page.status === 'archived'
+                            ? 'bg-white/5 text-white/30'
+                            : 'bg-amber-500/15 text-amber-400'
+                      }`}
+                    >
+                      {page.status}
+                    </span>
+                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      {page.status === 'draft' && (
+                        <button
+                          type="button"
+                          onClick={() => admin.publishPage(page.id)}
+                          className="rounded px-2 py-1 text-[11px] text-emerald-400 hover:bg-emerald-500/10"
+                          title="Publish"
+                        >
+                          Publish
+                        </button>
+                      )}
+                      {page.status === 'published' && (
+                        <button
+                          type="button"
+                          onClick={() => admin.archivePage(page.id)}
+                          className="rounded px-2 py-1 text-[11px] text-amber-400 hover:bg-amber-500/10"
+                          title="Archive"
+                        >
+                          Archive
+                        </button>
+                      )}
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (confirm(`Delete page "${page.title}"?`)) admin.deletePage(page.id)
+                        }}
+                        className="rounded p-1 text-white/20 hover:text-red-400"
+                        title="Delete"
+                      >
+                        <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="currentColor">
+                          <path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z" />
+                          <path fillRule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 010-2H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118z" clipRule="evenodd" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {selectedSection && sectionPages.length === 0 && !showPageForm && (
+              <p className="py-12 text-center text-sm text-white/30">No pages in this section</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}