From 6388c9dc89484633c3982901f4b8eb0f9a1fbe48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melchior=20Kannengie=C3=9Fer?= Date: Sun, 15 Feb 2026 23:37:54 +0100 Subject: [PATCH 01/15] Feature/phase2 layout settings branding (#2) * Refactor chat UI for i18n and theme settings - Update nuxt.config.ts and remove the unused test-utils module. - Improve Vitest integration configuration for reliable setup. - Add useAppI18n to manage translations and locale state. - Add useThemePreference to persist light/dark/system selection. - Apply translated labels across login, chat, and settings pages. - Add member and room navigation components for chat layout. - Refine shell background styles and interaction states. - Add favicon asset and register it in app head metadata. - Organize space and room handling for the new sidebar flow. * Update CHANGELOG and enhance chat UI components - Add a four-column chat layout with responsive sidebars and overlays. - Introduce a compact and expanded space rail with a create-space stub. - Add account settings and space settings base pages. - Add member presence badges and persist theme preference locally. - Refine shell styling and improve space navigation interactions. - Fix space parent mapping and use authenticated media avatar URLs. * Enhance chat presence, receipts, and smoke tests - Add presence selection in account settings with server capability checks. - Show event notices and improve read receipt avatar rendering in chat. - Reduce receipt avatar size and pin each reader to last-read message. - Add @smoke E2E tags and a dedicated smoke test npm script. - Ignore generated coverage and cucumber report artifacts in git. * Add GitHub CI, E2E env setup, and test docs * Fix CI Playwright dependency installation * Remove unused Nuxt test-utils to fix CI * Add note on Nuxt test-utils in README.md to clarify its exclusion from the test runtime * Update changelog for Phase 2 completion - Add Phase 2 notes for presence, notices, and read receipts. - Document E2E env setup, smoke tests, and CI lanes. - Note CI dependency fix after removing unused Nuxt test-utils. * Update CI workflow conditions for job execution - Modify conditions for the 'Fast lane' job to exclude master branch pushes and specific pull requests. - Adjust 'Full lane' job conditions to only run on master branch pushes and relevant pull requests, as well as scheduled events and specific workflow dispatch inputs. --- .github/workflows/ci.yml | 101 +++ .gitignore | 5 + .nuxtrc | 1 - .vscode/settings.json | 8 + CHANGELOG.md | 29 + README.md | 55 ++ app/app.vue | 10 + app/assets/css/main.css | 7 + app/components/Chat/MemberList.vue | 96 ++ app/components/Chat/MessageInput.vue | 7 +- app/components/Chat/MessageList.vue | 91 +- app/components/Chat/RoomCategoryList.vue | 99 +++ app/components/Chat/RoomList.vue | 4 +- app/components/Chat/SpaceList.vue | 131 +++ app/composables/useAppI18n.ts | 187 ++++ app/composables/useThemePreference.ts | 45 + app/pages/chat.vue | 825 ++++++++++++++++-- app/pages/index.vue | 5 +- app/pages/login.vue | 19 +- app/pages/settings/account.vue | 248 ++++++ app/pages/settings/space/[spaceId].vue | 76 ++ app/pages/spaces/new.vue | 49 ++ nuxt.config.ts | 10 +- package-lock.json | 468 +++++----- package.json | 4 +- public/favicon.svg | 29 + tests/e2e/.env.e2e.example | 5 + tests/e2e/features/chat.feature | 9 + tests/e2e/features/login.feature | 8 + tests/e2e/reports/cucumber-report.html | 50 -- tests/e2e/step-definitions/chat.steps.mjs | 10 +- tests/e2e/step-definitions/login.steps.mjs | 40 +- tests/e2e/support/hooks.mjs | 38 + tests/integration/appI18n.spec.ts | 18 + tests/setup.ts | 18 + tests/unit/components/Chat/MemberList.spec.ts | 28 + tests/unit/components/Chat/RoomList.spec.ts | 2 +- vitest.config.ts | 8 +- vitest.integration.config.ts | 16 +- 39 files changed, 2444 insertions(+), 415 deletions(-) create mode 100644 .github/workflows/ci.yml delete mode 100644 .nuxtrc create mode 100644 .vscode/settings.json create mode 100644 app/components/Chat/MemberList.vue create mode 100644 app/components/Chat/RoomCategoryList.vue create mode 100644 app/components/Chat/SpaceList.vue create mode 100644 app/composables/useAppI18n.ts create mode 100644 app/composables/useThemePreference.ts create mode 100644 app/pages/settings/account.vue create mode 100644 app/pages/settings/space/[spaceId].vue create mode 100644 app/pages/spaces/new.vue create mode 100644 public/favicon.svg create mode 100644 tests/e2e/.env.e2e.example delete mode 100644 tests/e2e/reports/cucumber-report.html create mode 100644 tests/integration/appI18n.spec.ts create mode 100644 tests/unit/components/Chat/MemberList.spec.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..6d19e90 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,101 @@ +name: CI + +on: + push: + branches: + - develop + - master + - feature/** + pull_request: + branches: + - develop + - master + workflow_dispatch: + inputs: + run_full: + description: Run full pipeline (coverage + full E2E) + required: false + type: boolean + default: false + schedule: + - cron: '0 2 * * *' + +concurrency: + group: ci-${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +jobs: + fast: + name: Fast lane (unit + integration + e2e smoke) + runs-on: ubuntu-latest + if: > + (github.event_name == 'push' && github.ref != 'refs/heads/master') || + (github.event_name == 'pull_request' && github.base_ref != 'master') || + (github.event_name == 'workflow_dispatch' && inputs.run_full != true) + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + + - name: Install dependencies + run: npm ci + + - name: Install Playwright browser and system deps + run: npx playwright install --with-deps chromium + + - name: Run fast CI lane + run: npm run test:ci:fast + + full: + name: Full lane (coverage + full e2e) + runs-on: ubuntu-latest + if: > + (github.event_name == 'push' && github.ref == 'refs/heads/master') || + (github.event_name == 'pull_request' && github.base_ref == 'master') || + github.event_name == 'schedule' || + (github.event_name == 'workflow_dispatch' && + inputs.run_full == true) + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + + - name: Install dependencies + run: npm ci + + - name: Install Playwright browser and system deps + run: npx playwright install --with-deps chromium + + - name: Create E2E env file from secrets + env: + E2E_MATRIX_HOMESERVER: ${{ secrets.E2E_MATRIX_HOMESERVER }} + E2E_MATRIX_USERNAME: ${{ secrets.E2E_MATRIX_USERNAME }} + E2E_MATRIX_PASSWORD: ${{ secrets.E2E_MATRIX_PASSWORD }} + BASE_URL: http://localhost:3000 + run: | + if [ -z "$E2E_MATRIX_USERNAME" ] || [ -z "$E2E_MATRIX_PASSWORD" ]; then + echo "Missing E2E matrix credentials in repository secrets." + exit 1 + fi + mkdir -p tests/e2e + { + echo "BASE_URL=$BASE_URL" + echo "E2E_MATRIX_HOMESERVER=${E2E_MATRIX_HOMESERVER:-https://matrix.org}" + echo "E2E_MATRIX_USERNAME=$E2E_MATRIX_USERNAME" + echo "E2E_MATRIX_PASSWORD=$E2E_MATRIX_PASSWORD" + } > tests/e2e/.env.e2e.local + + - name: Run full CI lane + run: npm run test:ci:full diff --git a/.gitignore b/.gitignore index 4a7f73a..551917e 100644 --- a/.gitignore +++ b/.gitignore @@ -17,8 +17,13 @@ logs .DS_Store .fleet .idea +coverage +coverage/ +tests/e2e/reports +tests/e2e/reports/ # Local env files .env .env.* !.env.example +!tests/e2e/.env.e2e.example diff --git a/.nuxtrc b/.nuxtrc deleted file mode 100644 index 1e1fe83..0000000 --- a/.nuxtrc +++ /dev/null @@ -1 +0,0 @@ -setups.@nuxt/test-utils="4.0.0" \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2d83409 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "cucumberautocomplete.steps": [ + "tests/e2e/step-definitions/**/*.mjs", + "tests/e2e/support/**/*.mjs" + ], + "cucumberautocomplete.syncfeatures": "tests/e2e/features/**/*.feature", + "cucumberautocomplete.strictGherkinCompletion": true +} diff --git a/CHANGELOG.md b/CHANGELOG.md index 84dbcd3..fdacb54 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Four-column chat layout with responsive sidebars and mobile overlays +- Space rail with compact/expanded modes and create-space stub route +- Account settings page and space settings base page +- Member list with presence badges (online, away, offline, unknown) +- Presence selector in account settings with homeserver capability check +- Theme preference composable with explicit localStorage persistence +- App i18n composable with English/German locale persistence +- SVG favicon and global head registration +- Message timeline event notices for join/leave/profile and room metadata changes +- E2E env template and loader for credential-based login scenarios +- Smoke-tagged E2E scenarios and dedicated smoke test script +- GitHub Actions CI workflow with fast and full test lanes + +### Changed + +- Space navigation now separates icon-button interaction from text-click area +- Room navigation supports home categories for personal/unassigned rooms +- Chat shell styling refined with distinct visual background accents +- Read receipts now show smaller avatars on each reader's last-read message +- README extended with CI and E2E credential setup documentation + +### Fixed + +- Space-to-room parent mapping now uses Matrix `m.space.parent` state +- Space avatar resolution now supports Matrix mxc avatar URLs with fallback +- CI install issues from unused `@nuxt/test-utils` setup were resolved + ## [0.1.0] - 2025-02-13 ### Added diff --git a/README.md b/README.md index d843867..ab4c8ec 100644 --- a/README.md +++ b/README.md @@ -49,13 +49,68 @@ npm run test:integration # E2E tests (builds app, starts server, runs Cucumber) npm run test:e2e +# E2E smoke tests only (@smoke-tagged scenarios) +npm run test:e2e:smoke + # E2E with visible browser npm run test:e2e:headed +# Coverage (currently from unit Vitest config) +npm run test:coverage + +# CI fast lane (unit + integration + e2e smoke) +npm run test:ci:fast + +# CI full lane (unit + integration + coverage + full e2e) +npm run test:ci:full + # Install Playwright browser (one-time) npm run prepare:e2e ``` +### E2E Credentials + +For credential-based E2E scenarios, create a local env file: + +```bash +cp tests/e2e/.env.e2e.example tests/e2e/.env.e2e.local +``` + +Then fill `E2E_MATRIX_USERNAME` and `E2E_MATRIX_PASSWORD`. +The local file stays untracked. + +## GitHub Actions CI + +This repo uses `.github/workflows/ci.yml` with two lanes: + +- **Fast lane:** runs on push + pull request (`test:ci:fast`). +- **Full lane:** runs nightly and optionally manual + (`test:ci:full`). + +### Required repository secrets (for full lane) + +Set these in GitHub under **Settings > Secrets and variables > Actions**: + +- `E2E_MATRIX_HOMESERVER` (optional, defaults to `https://matrix.org`) +- `E2E_MATRIX_USERNAME` +- `E2E_MATRIX_PASSWORD` + +### How to run manually + +1. Open your repository on GitHub. +2. Go to **Actions**. +3. Select workflow **CI**. +4. Click **Run workflow**. +5. Set `run_full` to `true` if you want the full lane. + +### Note on Nuxt test-utils + +`@nuxt/test-utils` is intentionally not part of the current test runtime. +In our current dependency set, it caused peer dependency conflicts in CI while +its Nuxt runtime helpers were not actively used by our tests. +We can reintroduce it later when we add dedicated Nuxt runtime integration +tests (`setupTest()`, plugin/runtime integration, Nitro route tests). + ## Project Structure ``` diff --git a/app/app.vue b/app/app.vue index a0cbd02..41d6260 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,3 +1,13 @@ + +