Flexweg CMS

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.

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