Frontend update

2026-06-26 21:51:27 -05:00
parent eef79e2403
commit 6dba6a017c
48 changed files with 5004 additions and 0 deletions
--- a/client/src/routes/admin/AdminLayout.jsx
+++ b/client/src/routes/admin/AdminLayout.jsx
@@ -0,0 +1,154 @@
+import { useEffect } from 'react'
+import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
+import MoonDot from '../../components/MoonDot.jsx'
+import { useAuth } from '../../contexts/AuthContext.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'
+
+const NAV = [
+  { to: '/admin', label: 'Dashboard', end: true },
+  { to: '/admin/posts', label: 'Posts' },
+  { to: '/admin/wiki', label: 'Wiki' },
+  { to: '/admin/settings', label: 'Settings' },
+  { to: '/admin/activity', label: 'Activity' },
+  { to: '/admin/users', label: 'Users' },
+]
+
+const TITLES = {
+  '/admin': 'Dashboard',
+  '/admin/posts': 'Posts',
+  '/admin/wiki': 'Wiki Pages',
+  '/admin/settings': 'Site Settings',
+  '/admin/activity': 'Activity Log',
+  '/admin/users': 'Users',
+}
+
+const navBtnBase = {
+  textAlign: 'left',
+  borderRadius: 8,
+  padding: '10px 14px',
+  fontFamily: 'var(--sans)',
+  fontSize: '0.92rem',
+  textDecoration: 'none',
+  display: 'block',
+  transition: 'background .15s,color .15s',
+}
+
+export default function AdminLayout() {
+  const { user, logout } = useAuth()
+  const { mode } = useSite()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const title = TITLES[location.pathname] || 'Admin'
+  const modeDot = mode === 'live' ? 'var(--mode-live)' : 'var(--mode-maint)'
+
+  // Keep the admin out of search indexes (belt-and-suspenders with robots.txt).
+  useEffect(() => {
+    const meta = document.createElement('meta')
+    meta.name = 'robots'
+    meta.content = 'noindex, nofollow'
+    document.head.appendChild(meta)
+    return () => document.head.removeChild(meta)
+  }, [])
+
+  async function signOut() {
+    await logout()
+    navigate('/admin/login', { replace: true })
+  }
+
+  return (
+    <div className="admin-grid">
+      {/* Sidebar */}
+      <aside
+        style={{
+          borderRight: '1px solid var(--line)',
+          background: 'var(--bg)',
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'sticky',
+          top: 0,
+          height: '100vh',
+        }}
+      >
+        <div style={{ padding: '22px 22px 18px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 10 }}>
+          <MoonDot />
+          <div>
+            <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
+              UOMysticmoon
+            </div>
+            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
+              Admin
+            </div>
+          </div>
+        </div>
+
+        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+          {NAV.map((n) => (
+            <NavLink
+              key={n.to}
+              to={n.to}
+              end={n.end}
+              style={({ isActive }) => ({
+                ...navBtnBase,
+                background: isActive ? 'var(--blue)' : 'transparent',
+                color: isActive ? 'var(--ink)' : 'var(--muted)',
+                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+              })}
+            >
+              {n.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div style={{ padding: '14px 16px', borderTop: '1px solid var(--line-soft)' }}>
+          <div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: '0.78rem', color: 'var(--muted)' }}>
+            <span style={{ width: 9, height: 9, borderRadius: '50%', background: modeDot, boxShadow: `0 0 8px ${modeDot}` }} />
+            Site is&nbsp;<strong style={{ color: 'var(--ink)', textTransform: 'capitalize' }}>{mode}</strong>
+          </div>
+          <button
+            onClick={signOut}
+            className="sans"
+            style={{ display: 'block', width: '100%', textAlign: 'center', border: '1px solid var(--line)', borderRadius: 8, padding: 9, color: 'var(--muted)', background: 'transparent', fontSize: '0.84rem', cursor: 'pointer' }}
+          >
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <header
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 16,
+            padding: '20px 32px',
+            borderBottom: '1px solid var(--line-soft)',
+            background: 'var(--bg)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+          }}
+        >
+          <h1 className="display" style={{ margin: 0, fontSize: '1.5rem', color: 'var(--head)' }}>
+            {title}
+          </h1>
+          <div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: '0.84rem', color: 'var(--muted)' }}>
+            <a href="/" target="_blank" rel="noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
+              View site →
+            </a>
+            <span
+              style={{ width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(180deg,#2a3a52,#1a2536)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#d8e2ef', fontSize: '0.8rem', textTransform: 'uppercase' }}
+            >
+              {(user?.username || 'A').charAt(0)}
+            </span>
+          </div>
+        </header>
+
+        <div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: 1000, width: '100%' }}>
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  )
+}