mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-23 17:52:49 +00:00
Mohamed Boudra
cc744cc669
* feat(app): let users set the chat and Markdown content width Wide and ultrawide screens were stuck with an 820px reading column. The width is now an Appearance setting that flows through the Unistyles theme, like the font sizes, so every content surface picks it up. The stored value stays null until the user picks a width, so a future change to the default reaches everyone who never customized it. Reset writes null back. The native composer dock keeps plain React Native styles and takes the width inline because those styles land on Reanimated views, where theme-driven Unistyles crash on theme changes. * fix(app): pass the content width into the web stream viewport The viewport read app settings itself, which required a QueryClient in every render of the stream strategy. The agent stream view already reads settings, so it hands the width over with the rest of the render input.
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { expect, type Locator, type Page } from "@playwright/test";
|
|
import { openSettings } from "./app";
|
|
import { openSettingsSection } from "./settings";
|
|
|
|
const APP_SETTINGS_KEY = "@paseo:app-settings";
|
|
|
|
function contentWidthInput(page: Page): Locator {
|
|
return page.getByLabel("Content width in pixels", { exact: true });
|
|
}
|
|
|
|
function resetContentWidthButton(page: Page): Locator {
|
|
return page.getByRole("button", { name: "Reset content width to default", exact: true });
|
|
}
|
|
|
|
export async function openAppearanceSettings(page: Page): Promise<void> {
|
|
await openSettings(page);
|
|
await openSettingsSection(page, "appearance");
|
|
}
|
|
|
|
export async function setContentWidth(page: Page, width: number): Promise<void> {
|
|
const input = contentWidthInput(page);
|
|
await input.fill(String(width));
|
|
await input.press("Tab");
|
|
}
|
|
|
|
export async function resetContentWidth(page: Page): Promise<void> {
|
|
await resetContentWidthButton(page).click();
|
|
}
|
|
|
|
export async function expectDefaultContentWidthSetting(page: Page, width: number): Promise<void> {
|
|
await expect(contentWidthInput(page)).toHaveValue(String(width));
|
|
await expect(resetContentWidthButton(page)).toHaveCount(0);
|
|
await expect.poll(() => readStoredContentWidth(page)).toBeNull();
|
|
}
|
|
|
|
export async function expectCustomContentWidthSetting(page: Page, width: number): Promise<void> {
|
|
await expect(contentWidthInput(page)).toHaveValue(String(width));
|
|
await expect(resetContentWidthButton(page)).toBeVisible();
|
|
await expect.poll(() => readStoredContentWidth(page)).toBe(width);
|
|
}
|
|
|
|
/** Asserts the rendered width of a content-column element stays within `max` and above `min`. */
|
|
export async function expectContentColumnWidth(
|
|
element: Locator,
|
|
bounds: { min?: number; max: number },
|
|
): Promise<void> {
|
|
await expect(element).toBeVisible({ timeout: 30_000 });
|
|
await expect
|
|
.poll(async () => (await element.boundingBox())?.width ?? 0)
|
|
.toBeLessThanOrEqual(bounds.max);
|
|
await expect
|
|
.poll(async () => (await element.boundingBox())?.width ?? 0)
|
|
.toBeGreaterThan(bounds.min ?? 0);
|
|
}
|
|
|
|
async function readStoredContentWidth(page: Page): Promise<unknown> {
|
|
return page.evaluate((key) => {
|
|
const raw = localStorage.getItem(key);
|
|
return raw === null
|
|
? undefined
|
|
: (JSON.parse(raw) as { contentMaxWidth?: unknown }).contentMaxWidth;
|
|
}, APP_SETTINGS_KEY);
|
|
}
|