Buttons & Module

Die Toolbar zeigt zwei Arten von Buttons: globale, die du immer siehst, und kontextuelle, die nur auf bestimmten Routen erscheinen. Diese Seite gibt dir den vollen Überblick.

Globale Buttons

Globale Buttons sind auf jeder Seite sichtbar (außer auf den ausgeschlossenen Routen). Sie sind nach Priorität sortiert — höhere Priorität = weiter links.

Priorität	Button	Icon	Funktion	Sichtbarkeit
100	Theme Toggle	Mond / Sonne	Wechselt zwischen Dark und Light Mode	Immer
97	Web-Bridge	QR-Code-Scanner	Pairing mit web.blocq.io	Nur wenn ein web-fähiges Modul aktiv ist
95	Hilfe	Fragezeichen	Öffnet kontextbezogene Doku	Immer
90	Edit Mode	Stift	Schaltet Bearbeitungsmodus an/aus	Nur wenn Edit Mode global aktiviert ist
80	App Builder Tools	Werkzeug	Öffnet das Tool-Dashboard	Immer

Theme Toggle Dynamisch

Das Icon dieses Buttons ändert sich mit dem aktuellen Modus:

Mond-Icon → du bist im Light Mode (Tap → Dark Mode)
Sonne-Icon → du bist im Dark Mode (Tap → Light Mode)

Web-Bridge

Erscheint nur dann, wenn mindestens eines dieser Module aktiv ist (web-fähige Module). Ohne aktives Modul wäre ein Pairing sinnlos, daher wird der Button automatisch versteckt.

Beim Tap öffnet sich ein Bottom Sheet mit QR-Code, den du mit der Web-Bridge im Browser scannst.

Hilfe

Beim Tap öffnet sich die kontextuelle Hilfe für die Seite, auf der du gerade bist. Wenn du z. B. im Forum-Editor bist, landest du direkt im Forum-Editor-Kapitel der Doku.

Edit Mode

Schaltet den App-weiten Edit Mode um. Im Edit Mode:

Widgets werden mit Bearbeitungs-Hinweisen angezeigt
Long-Press auf Widgets öffnet Editoren
“Add”-Buttons erscheinen an Stellen, wo du Inhalte hinzufügen kannst

Das Icon wechselt zwischen Stift (Edit aus) und Stift durchgestrichen (Edit an).

App Builder Tools

Öffnet das App Builder Tools Dashboard. Beim erneuten Tap wird das Dashboard wieder geschlossen — der Button verhält sich also als Toggle.

Modul-spezifische Buttons

Sobald ein Modul aktiviert und du auf einer seiner Routen bist, erscheinen automatisch die zugehörigen Modul-Buttons. Sie sind durch eine Trennlinie von den globalen Buttons abgesetzt.

Wann erscheinen sie?

Die Toolbar nutzt ein Route-Pattern-Matching, um zu entscheiden, welche Buttons sichtbar sind:

Pattern-Typ	Beispiel	Bedeutung
Exakt	`/forum`	Matcht nur `/forum`, nicht `/forum/123`
*Sub-Routes mit `/`**	`/forum/*`	Matcht alle Sub-Routes (`/forum/123`), nicht die Basis selbst
Basis + Sub-Routes mit `/`**	`/forum/**`	Matcht Basis-Route und alle Sub-Routes
Dynamische Segmente	`/admin/rooms/spaces/:id/channels`	`:id` matcht jede ID
Zusätzliche Patterns	`additionalRoutePatterns: ['/admin/forum']`	Button erscheint auf mehreren Routes

Beispiel: Forum-Modul

Auf den Routen /forum und /admin/forum erscheinen zwei zusätzliche Buttons:

Button	Icon	Funktion
Einstellungen	Schieberegler	Forum-Konfiguration als Bottom Sheet
Kategorien	Kategorie	Wechsel zur Kategorien-Verwaltung

Beispiel: Feed-Modul

Auf /feed und /admin/feed:

Button	Icon	Funktion
Einstellungen	Schieberegler	Feed-Konfiguration
Vorlagen	Layer	Feed-Template-Galerie

Die folgenden Module registrieren bei Aktivierung eigene Toolbar-Buttons:

Community

Forum, Feed, Chat, Notifications

Inhalte

Wiki, FAQ, News, Blog, Documents, RSS Feed, Gallery, Portfolio

Commerce

Shop, Orders, Payments, Pricing, Coupons, Menu

Buchung

Services, Rooms, Maps

Mitglieder

Members, Membership, Sports

Workforce

Shifts, Time Tracking, Leave Management

Lernen

Quizzes, Courses, Flashcards

Weitere

Inventory, Workouts, Tasks, Events, Email, Profile, Settings

Theme-Suite-Editor-Buttons

Eine Sonderrolle haben die Theme-Suite-Buttons: Sie werden dynamisch angezeigt, abhängig davon, welcher Widget-Editor in der Theme Suite gerade aktiv ist (z. B. Button-Editor, Card-Editor, Input-Editor).

So bekommst du immer genau die Werkzeuge, die zum aktuell bearbeiteten Widget passen — ohne dass die Toolbar mit Buttons überladen wird.

Sortierung & Gruppierung

Buttons werden nach zwei Kriterien sortiert:

Priorität (höher = weiter links)
Gruppen-Divider: Zwischen globalen und modul-spezifischen Buttons erscheint automatisch eine vertikale Trennlinie. Buttons können zusätzlich hasDividerBefore: true setzen, um eine eigene Gruppierung zu erzwingen.

Badges

Buttons können einen Zähler-Badge in der oberen rechten Ecke anzeigen:

Werte 1–99: Zahl wird direkt angezeigt
Werte ≥ 100: 99+ wird angezeigt
Wert 0: Kein Badge

Beispielsweise zeigt der Meldungen-Button im Admin-Bereich die Anzahl offener Reports an. Ist die Toolbar gerade angedockt, erscheint stattdessen ein kleiner Notification-Dot auf dem Indikator — als Hinweis, dass etwas Aufmerksamkeit braucht.