maddo/WorkTracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: add theme mode support with AppThemeMode enum and AppThemeState service

Browse source 
- Introduced AppThemeMode enum to define theme options: System, Light, Dark.
- Updated AppSettingsDocument to include ThemeMode property.
- Created AppThemeState service to manage current theme mode and handle changes.
- Integrated theme mode handling in CouchbaseLiteAppSettingsService for persistence.
- Added JavaScript for theme management in the frontend, supporting system preference detection.
- Enhanced CSS with theme variables for consistent styling across light and dark modes.
- Updated Playwright tests to ensure sidebar functionality and responsiveness.
This commit is contained in:
MaddoScientisto 2026-04-20 22:58:25 +02:00
commit 158906fa28
19 changed files with 889 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

34
tests/playwright/auth-bypass.spec.ts
View file

@ -1,9 +1,14 @@
import { expect, test } from '@playwright/test';
async function waitForBlazorConnection(page: Parameters<typeof test>[0]['page']) {
await page.waitForTimeout(750);
}
test.describe('sidebar collapse', () => {
test('starts collapsed and expands through the toggle button', async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 960 });
await page.goto('/');
await page.goto('/', { waitUntil: 'networkidle' });
await waitForBlazorConnection(page);
const sidebar = page.getByTestId('sidebar-shell');
const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
@ -13,16 +18,43 @@ test.describe('sidebar collapse', () => {
await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();
await toggle.click();
await page.waitForTimeout(500);
await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
await expect(page.getByText('Dashboard')).toBeVisible();
await toggle.click();
await page.waitForTimeout(500);
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
});
test('renders sidebar styles and toggles on narrow layouts', async ({ page }) => {
await page.setViewportSize({ width: 500, height: 900 });
await page.goto('/', { waitUntil: 'networkidle' });
await waitForBlazorConnection(page);
const sidebar = page.getByTestId('sidebar-shell');
const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
const navScrollable = page.locator('.nav-scrollable');
const sidebarPanel = page.locator('.sidebar');
const toggleBar = page.locator('.sidebar-toggle-bar').first();
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
await expect(navScrollable).toBeHidden();
await expect(sidebarPanel).toHaveCSS('background-image', /linear-gradient/);
await expect(toggleBar).toHaveCSS('background-color', 'rgb(255, 255, 255)');
await toggle.click();
await page.waitForTimeout(500);
await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
await expect(navScrollable).toBeVisible();
});
});
test('home loads without a login screen', async ({ page }) => {