@geenius/docs 0.1.0 → 0.4.0

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

@@ -1,129 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,330 +0,0 @@
-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>
-  )
-}