Admin interface overview
After signing in, the admin opens on the dashboard with a permanent sidebar on the left, a topbar at the top, and the active page filling the rest. Everything else flows from there.
Layout
┌─────────────────────────────────────────────────────────────────┐
│ [Topbar] 🌐 EN [email protected] ⚙ │
├──────────────────┬──────────────────────────────────────────────┤
│ │ │
│ ☰ Logo │ │
│ │ │
│ 📊 Dashboard │ │
│ 📝 Posts │ Active page │
│ 📄 Pages │ renders here │
│ 🏷️ Taxonomies │ │
│ 🖼️ Media │ │
│ 🎨 Themes │ │
│ 🎭 Plugins │ │
│ 📑 Menus │ │
│ 👥 Users │ │
│ ⚙️ Settings │ │
│ │ │
│ ☀️/🌙 │ │
│ 🚪 Sign out │ │
│ │ │
└──────────────────┴──────────────────────────────────────────────┘
On mobile, the sidebar collapses into a slide-out drawer triggered by a hamburger button in the topbar.
Sidebar navigation
The sidebar is the primary navigation. Sections in order:
| Icon | Label | What's there | Page |
|---|---|---|---|
| 📊 | Dashboard | Site stats, plugin-contributed cards | Dashboard |
| 📝 | Posts | List + edit of your posts | Posts |
| 📄 | Pages | List + edit of static pages | Pages |
| 🏷️ | Categories & Tags | Term management for both taxonomies | Categories and tags |
| 🖼️ | Media | Media library — upload, browse, delete images | Media library |
| 🎨 | Themes | Theme switcher + sync assets | Themes |
| 🎭 | Theme settings | Per-theme settings page (only shown when active theme has one) | Theme settings |
| 🔌 | Plugins | List + enable/disable + install/uninstall externals | Plugins |
| 📑 | Menus | Header + footer menu builder | Menus |
| 👥 | Users | Admin only — manage user accounts | Users and roles |
| ⚙️ | Settings | Site title, language, performance, plugin/theme tabs | Settings → General |
Each menu entry highlights when you're on its route. The sidebar is sticky — scrolling the main content doesn't move it.
Topbar
The top of the screen always shows:
- Page title on the left (matches the current section)
- Locale switcher — pick the admin UI language (independent per user). See Language and theme.
- Theme toggle ☀️/🌙 — switch dark / light mode (per browser, persisted in localStorage)
- User menu — your email + a dropdown with profile and sign-out
On mobile, the topbar adds a hamburger button on the left to open the sidebar drawer.
Toasts
Any action that succeeds, fails, or needs attention surfaces a toast notification in the top-right corner. Toasts auto-dismiss after 3.5 s (info / success), 5 s (warn) or 6 s (error). You can hover to keep them visible, or click the × to dismiss immediately.
Common toasts:
- "Saved" after editing a post / settings
- "Published to
/<category>/<slug>.html" after a publish - "Authentication failed. Check your Flexweg API key in Settings." if Flexweg returns 401
- "Network error or CORS blocked. Check your connection." on transient failures
Toasts are emitted from any code path — service calls, event handlers, plugins. They're independent of the routed view, so navigating doesn't dismiss them.
Auto-save and live data
The admin uses live Firestore subscriptions for posts, pages, terms, media metadata, settings and users. That means:
- Open the admin in two tabs → edit a post in tab 1, save → tab 2's list updates automatically without reload
- Two editors saving the same post simultaneously: last-writer-wins. The admin doesn't currently lock posts during editing.
- The dashboard's stat cards (post count, page count, online count, draft count) update in real time as content changes.
There's no auto-save during typing — you click Save draft or Publish explicitly. (Future versions may add periodic auto-save.)
Keyboard shortcuts
The post / page editor supports basic Tiptap keyboard shortcuts:
| Shortcut | Action |
|---|---|
/ | Open the block inserter (FloatingMenu) |
Cmd/Ctrl + B | Bold |
Cmd/Ctrl + I | Italic |
Cmd/Ctrl + U | Underline |
Cmd/Ctrl + K | Insert link |
Cmd/Ctrl + Z / Cmd/Ctrl + Shift + Z | Undo / redo |
Cmd/Ctrl + Enter | Submit form (where applicable) |
Outside the editor, the admin uses native browser shortcuts (Tab to move focus, Enter to activate, Escape to close modals).
Errors and recovery
The admin wraps the entire UI in an error boundary that catches runtime errors and recovers automatically from common transient ones (e.g. React reconciliation race conditions caused by browser extensions). For unrecoverable errors, you see an error screen with the message — refresh the page to recover.
If Firebase auth fails or your session expires, you're redirected to the login page. Sign in again to resume.
Continue
- Dashboard — what the home screen shows
- Language and theme — locale + dark mode
- User profile — your account settings
- Posts — the most-visited page