Screenshots – Sparks for Teams Documentation (English)
Status: March 2026
This folder contains all screenshots for the user manual (USER_MANUAL.md). The list is aligned with the concept docs in Vistameet-Teams (e.g. Meeting-Chat “Create on first access”: calendar-context-menu-meeting-chat, meeting-chat-tab).
Language: Deutsch
Screenshots noch zu erstellen / Still to create: SCREENSHOTS_TO_CREATE.md
Available Screenshots
These files live under docs/screenshots/en/ (German screenshots under docs/screenshots/de/):
| File | Description | Use in Manual |
|---|---|---|
login-screen.png | Login screen with logo | Getting Started – First Launch |
keycloak-login-page.png | Keycloak login (after clicking "Sign in") | Getting Started – Login Options |
Further screenshots are generated by script (npm run screenshots) or added manually.
Screenshots Configured in screenshot-config.json
These screens are generated by scripts/generate-screenshots.js when the Vistameet-Teams app runs at http://localhost:5173 and optionally login credentials are set in .env:
| Name (→ filename) | URL | Description | Login required |
|---|---|---|---|
| login-screen | /login | Login screen with SPARKS logo | No |
| keycloak-login-page | /login + actions | Keycloak login form | No (actions) |
| main-interface | / | Main interface with sidebar | Yes |
| chat-list | / | Chat list with rooms | Yes |
| calendar-month-view | /calendar | Calendar month view | Yes |
| calendar-week-view | /calendar | Calendar week view (after click) | Yes |
| planner-board-view | /planner | Planner board view | Yes |
| teams-list | /teams | Teams list | Yes |
| calls-page | /calls | Calls / phone book | Yes |
| contacts-page | /contacts | Contacts / people | Yes |
| settings-general | /settings | General settings | Yes |
| settings-appearance | /settings | Appearance settings | Yes |
| settings-security | /settings | Security settings | Yes |
| settings-accounts | /settings | Accounts & Organisations (providers) | Yes |
| settings-privacy | /settings | Privacy | Yes |
| ms-chat | /ms-chat | Microsoft Teams Chat | Yes |
| ms-channels | /ms-channels | Microsoft Teams Channels | Yes |
| call-log | /calls | Call log / Call history | Yes |
| activity | /activity | Activity feed | Yes |
| assistant | /assistant | AI Assistant | Yes |
| priority-contacts | /settings/priority-contacts | Priority contacts | Yes |
| blocked-contacts | /settings/blocked-contacts | Blocked contacts | Yes |
| marketing-main-interface … marketing-settings-security | various | Marketing variants | Yes |
Note: The screens calendar-context-menu-meeting-chat and meeting-chat-tab are listed in the maintainer checklist in the repo (docs/templates/screenshot-checklist.en.md) and SCREENSHOTS_TO_CREATE.md but not yet in screenshot-config.json; add them there if needed.
Delays: After login and page changes, the script waits automatically (4–7.5 s depending on page) for Calendar, Planner, Contacts, Calls, and MS-Chat to load their data. Too short delays lead to loading spinners or empty screenshots. Details and table: SETUP.md.
After running, files are saved as {name}.png per language in docs/screenshots/en/ and docs/screenshots/de/. Locales are configured in scripts/screenshot-config.json (locales) or via SCREENSHOT_LOCALES=en,de.
User accounts and tenant for screens
| Item | Description |
|---|---|
| Tenant | dev03 – Keycloak realm and tenant of the Vistameet-Teams dev environment (authority e.g. https://keycloak.vistameet.eu/realms/dev03). The app loads this config at startup; for screenshots the app must run with this tenant (e.g. locally with Vistameet-Teams .env). Screenshot auth uses SSO (advanced → “Sign in with SSO”) and screenshot-config.json → login.keycloak.tenant. |
| User 1 | Credentials from E2E_USER1 / E2E_PASSWORD1 (e.g. Keycloak username test). Used for all screens that require login. |
| User 2 | Optional: E2E_USER2 / E2E_PASSWORD2 (e.g. test2) – for screens with a second user or E2E demo; the screenshot script uses only User 1 by default. |
Put credentials in Vista-Teams-Docs/.env or Vistameet-Teams/.env. See SETUP.md → “User-Accounts und Tenant für Screenshots”.
Planned Subfolders (optional)
Screenshots can be grouped by feature:
| Folder | Content |
|---|---|
getting-started/ | Login, initialization, interface |
chat/ | Chat, messages, search |
calendar/ | Calendar, events |
planner/ | Planner, tasks |
teams/ | Teams, channels |
calls/ | Calls, meeting room |
contacts/ | Contacts, priority contacts, blocked contacts |
settings/ | Settings pages |
security/ | Encryption, devices |
troubleshooting/ | Error messages, help |
Currently all screens are in screenshots/. If using subfolders, update paths in USER_MANUAL.md (e.g. screenshots/getting-started/login-screen.png).
Screenshots from Main Project (E2E Demo)
In the Vistameet-Teams repository, Playwright tests under tests/e2e/demo/ generate additional screenshots (meeting room with multiple participants):
tests/e2e/demo/screenshots/3-participants-grid.pngtests/e2e/demo/screenshots/3-participants-speaker.pngtests/e2e/demo/screenshots/10-participants-grid.pngtests/e2e/demo/screenshots/10-participants-grid-scrolled.pngtests/e2e/demo/screenshots/10-participants-speaker.pngtests/e2e/demo/screenshots/10-participants-controls.png
These files remain in the Vistameet-Teams project. For documentation they can be copied to Vista-Teams-Docs/docs/screenshots/ (e.g. in calls/ or meetings/) and referenced in the manual.
Planned extension: Google as provider (Vistameet-Teams)
When Google is integrated as calendar, todo, or contacts provider in Vistameet-Teams (see docs/PLAN_GOOGLE_KALENDER_TODO_KONTAKTE_DATEIEN.md), additional screenshots may be useful:
| Screenshot (optional) | Description |
|---|---|
settings-accounts-google.png | Settings → Accounts & Organisations with connected Google account |
| Calendar/Planner/Contacts with Google badge | Views with Google as active provider (badge “Google” on events/tasks/contacts) |
These are not yet in screenshot-config.json; add them here and in the checklist once the Google integration is implemented in the app.
Naming Conventions
- Lowercase, hyphens:
login-screen.png,calendar-month-view.png - Descriptive:
create-task-dialog.png,encryption-setup-wizard.png
Image Guidelines
- Format: PNG for screenshots
- Size: Max width 1920px (Retina: 3840px)
- File size: Compress images if necessary
- Privacy: No visible sensitive data (blur if needed)
Generating Screenshots
# 1. Start Vistameet-Teams (in another terminal)
cd ../Vistameet-Teams
npm run dev
# 2. In Vista-Teams-Docs directory
npm run screenshots
Configuration: scripts/screenshot-config.json (baseUrl, selectors, login).
Full checklist (repository only): docs/templates/screenshot-checklist.en.md