João Salavisa
a6ab8deff6
* feat(github): mobile-friendly /github page with sidebar drawer On narrow viewports the preset sidebar consumed most of the screen and the list toolbar's fixed-width filters wrapped awkwardly. Hide the inline aside below md and add a hamburger button in the topbar that opens the same PresetsSidebar inside a right-side Sheet, mirroring the kanban mobile pattern. Reflow ListToolbar so title + count + refresh stack on top with the repo filter and custom-query input going full-width below. Selecting a preset in the drawer closes it. Includes a Pixel 5 Playwright spec covering the open → select → close flow. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * test(github): use data-testid for mobile toolbar title selector Replace brittle class-based locator (h2.text-sm.font-semibold) in the mobile page object with a stable data-testid on the heading so the spec doesn't silently break if Tailwind classes change. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(github): address mobile /github bot review feedback - Drop useCallback wrappers on onMobileSidebarSelect / onMobileSaveCurrent. `state` from useGitHubPageState() is a fresh object every render, so the [state] dep caused the callbacks to be re-created every pass anyway — the useCallback was deceptive. Use plain arrow functions and document. (Claude inline, Greptile P2) - Remove the sr-only <span> on the hamburger button. `aria-label` takes precedence over child sr-only text for screen readers, so the span was unreachable duplicate content. (Claude inline) - MobileGitHubPage.goto() now waits on the mobile menu button instead of the ambiguous "GitHub" breadcrumb text — deterministic and matches the mobile mount semantics. (CodeRabbit inline) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Kandev Agent <agent@kandev.dev> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import { type Locator, type Page } from "@playwright/test";
|
|
|
|
export class MobileGitHubPage {
|
|
readonly mobileMenuButton: Locator;
|
|
readonly mobileSidebar: Locator;
|
|
readonly inlineSidebar: Locator;
|
|
readonly toolbarTitle: Locator;
|
|
|
|
constructor(private page: Page) {
|
|
this.mobileMenuButton = page.getByTestId("github-mobile-menu-button");
|
|
this.mobileSidebar = page.getByTestId("github-mobile-sidebar");
|
|
this.inlineSidebar = page.getByTestId("github-presets-sidebar-inline");
|
|
this.toolbarTitle = page.getByTestId("github-list-toolbar-title");
|
|
}
|
|
|
|
async goto() {
|
|
await this.page.goto("/github");
|
|
// The hamburger only mounts once auth has resolved on a mobile viewport —
|
|
// waiting on it is deterministic and avoids the ambiguity of matching
|
|
// "GitHub" text (which appears in the breadcrumb AND breadcrumb link aria).
|
|
await this.mobileMenuButton.waitFor({ state: "visible" });
|
|
}
|
|
|
|
presetByLabel(label: string): Locator {
|
|
return this.mobileSidebar.getByRole("button", { name: label });
|
|
}
|
|
}
|