From a6ab8deff6b2c03dd2475126fae5f36a90e14705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Salavisa?= <joao.salavisa@gmail.com>
Date: Sat, 23 May 2026 16:13:31 +0100
Subject: [PATCH] feat(github): mobile-friendly /github page with sidebar
 drawer (#1041)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 apps/web/app/github/github-page-client.tsx    | 63 +++++++++++++-
 .../github/my-github/list-toolbar.tsx         | 84 ++++++++++++++-----
 apps/web/e2e/pages/mobile-github-page.ts      | 27 ++++++
 .../github/mobile-github-sidebar.spec.ts      | 48 +++++++++++
 4 files changed, 195 insertions(+), 27 deletions(-)
 create mode 100644 apps/web/e2e/pages/mobile-github-page.ts
 create mode 100644 apps/web/e2e/tests/github/mobile-github-sidebar.spec.ts

diff --git a/apps/web/app/github/github-page-client.tsx b/apps/web/app/github/github-page-client.tsx
index 649c45916c..5065c89af8 100644
--- a/apps/web/app/github/github-page-client.tsx
+++ b/apps/web/app/github/github-page-client.tsx
@@ -2,8 +2,10 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { IconBrandGithub } from "@tabler/icons-react";
+import { IconBrandGithub, IconMenu2 } from "@tabler/icons-react";
 import { Alert, AlertDescription } from "@kandev/ui/alert";
+import { Button } from "@kandev/ui/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@kandev/ui/sheet";
 import { PageTopbar } from "@/components/page-topbar";
 import { useGitHubStatus } from "@/hooks/domains/github/use-github-status";
 import { usePRKeyToTasks } from "@/hooks/domains/github/use-pr-key-to-tasks";
@@ -50,12 +52,26 @@ type GitHubPageClientProps = {
   repositories: Repository[];
 };
 
-function PageHeader() {
+function PageHeader({ onOpenMobileSidebar }: { onOpenMobileSidebar?: () => void }) {
   return (
     <PageTopbar
       title="GitHub"
       subtitle="Pull requests and issues across your repos."
       icon={<IconBrandGithub className="h-4 w-4" />}
+      actions={
+        onOpenMobileSidebar && (
+          <Button
+            variant="outline"
+            size="icon-lg"
+            onClick={onOpenMobileSidebar}
+            className="md:hidden cursor-pointer"
+            data-testid="github-mobile-menu-button"
+            aria-label="Open GitHub filters"
+          >
+            <IconMenu2 className="h-4 w-4" />
+          </Button>
+        )
+      }
     />
   );
 }
@@ -295,7 +311,10 @@ function AuthenticatedLayout({
   useAllWorkflowSnapshots(workspaceId ?? null);
   return (
     <div className="flex-1 flex min-h-0">
-      <aside className="w-60 border-r overflow-y-auto shrink-0">
+      <aside
+        className="hidden md:flex md:flex-col w-60 border-r overflow-y-auto shrink-0"
+        data-testid="github-presets-sidebar-inline"
+      >
         <PresetsSidebar
           selected={selection}
           onSelect={state.onSelect}
@@ -354,6 +373,7 @@ export function GitHubPageClient({
 }: GitHubPageClientProps) {
   const { status, loaded } = useGitHubStatus();
   const [launchPayload, setLaunchPayload] = useState<LaunchPayload | null>(null);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const state = useGitHubPageState();
   const { presets: storedPresets } = useGitHubActionPresets(workspaceId ?? null);
   const prPresets = useMemo(() => resolvePRPresets(storedPresets), [storedPresets]);
@@ -366,10 +386,24 @@ export function GitHubPageClient({
   const onStartTask = useCallback((payload: LaunchPayload) => setLaunchPayload(payload), []);
   const onCloseLaunch = useCallback(() => setLaunchPayload(null), []);
   const authed = !!status?.authenticated;
+  const onOpenMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
+  // Close the mobile sheet after any sidebar selection. KindToggle clicks also
+  // route through onSelect — closing on every selection is acceptable UX since
+  // the user always wants to see the list after picking a kind or preset.
+  // No useCallback: `state` is a fresh object every render, so memoizing
+  // these handlers would be deceptive — they'd still be new refs each pass.
+  const onMobileSidebarSelect = (s: Parameters<typeof state.onSelect>[0]) => {
+    state.onSelect(s);
+    setMobileSidebarOpen(false);
+  };
+  const onMobileSaveCurrent = () => {
+    setMobileSidebarOpen(false);
+    state.onOpenSaveDialog();
+  };
 
   return (
     <div className="h-screen w-full flex flex-col bg-background">
-      <PageHeader />
+      <PageHeader onOpenMobileSidebar={loaded && authed ? onOpenMobileSidebar : undefined} />
       {!loaded && <div className="p-6 text-sm text-muted-foreground">Checking GitHub status…</div>}
       {loaded && !authed && (
         <div className="p-6 max-w-2xl">
@@ -385,6 +419,27 @@ export function GitHubPageClient({
           onStartTask={onStartTask}
         />
       )}
+      <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
+        <SheetContent
+          side="right"
+          className="w-full sm:max-w-sm overflow-y-auto p-0"
+          data-testid="github-mobile-sidebar"
+        >
+          <SheetHeader className="px-4 pt-4 pb-2">
+            <SheetTitle>Filters</SheetTitle>
+          </SheetHeader>
+          <PresetsSidebar
+            selected={state.selection}
+            onSelect={onMobileSidebarSelect}
+            savedPresets={state.savedPresets}
+            onDeleteSaved={state.onDeleteSaved}
+            canSaveCurrent={state.canSaveCurrent}
+            onSaveCurrent={onMobileSaveCurrent}
+            prPresets={state.resolvedPrPresets}
+            issuePresets={state.resolvedIssuePresets}
+          />
+        </SheetContent>
+      </Sheet>
       <QuickTaskLauncher
         workspaceId={workspaceId ?? null}
         workflows={workflows}
diff --git a/apps/web/components/github/my-github/list-toolbar.tsx b/apps/web/components/github/my-github/list-toolbar.tsx
index 88e928e22c..b27f0b587e 100644
--- a/apps/web/components/github/my-github/list-toolbar.tsx
+++ b/apps/web/components/github/my-github/list-toolbar.tsx
@@ -24,6 +24,39 @@ type ListToolbarProps = {
   onRefresh: () => void;
 };
 
+function RefreshControls({
+  loading,
+  lastFetchedAt,
+  onRefresh,
+  showUpdatedPrefix,
+}: {
+  loading: boolean;
+  lastFetchedAt: Date | null;
+  onRefresh: () => void;
+  showUpdatedPrefix: boolean;
+}) {
+  return (
+    <>
+      {lastFetchedAt && !loading && (
+        <span className="text-xs text-muted-foreground whitespace-nowrap">
+          {showUpdatedPrefix ? "Updated " : ""}
+          {formatRelativeTime(lastFetchedAt.toISOString())}
+        </span>
+      )}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8 cursor-pointer"
+        onClick={onRefresh}
+        disabled={loading}
+        title="Refresh"
+      >
+        <IconRefresh className={cn("h-4 w-4", loading && "animate-spin")} />
+      </Button>
+    </>
+  );
+}
+
 export function ListToolbar({
   title,
   count,
@@ -41,16 +74,30 @@ export function ListToolbar({
   const selectValue = repoFilter || ALL_REPOS;
   const dirty = customQuery !== committedQuery;
   return (
-    <div className="px-6 py-2.5 border-b shrink-0 flex items-center gap-3 flex-wrap">
-      <div className="flex items-baseline gap-2 min-w-0">
-        <h2 className="text-sm font-semibold truncate">{title}</h2>
-        <span className="text-xs text-muted-foreground tabular-nums">{loading ? "…" : count}</span>
+    <div className="px-4 sm:px-6 py-2.5 border-b shrink-0 flex flex-col md:flex-row md:items-center md:flex-wrap gap-2 md:gap-3">
+      <div className="flex items-center gap-2 min-w-0">
+        <div className="flex items-baseline gap-2 min-w-0 flex-1 md:flex-initial">
+          <h2 className="text-sm font-semibold truncate" data-testid="github-list-toolbar-title">
+            {title}
+          </h2>
+          <span className="text-xs text-muted-foreground tabular-nums">
+            {loading ? "…" : count}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 md:hidden">
+          <RefreshControls
+            loading={loading}
+            lastFetchedAt={lastFetchedAt}
+            onRefresh={onRefresh}
+            showUpdatedPrefix={false}
+          />
+        </div>
       </div>
       <Select
         value={selectValue}
         onValueChange={(v) => onRepoFilterChange(v === ALL_REPOS ? "" : v)}
       >
-        <SelectTrigger className="w-[220px] h-8 cursor-pointer">
+        <SelectTrigger className="w-full md:w-[220px] h-8 cursor-pointer">
           <SelectValue placeholder="All repos" />
         </SelectTrigger>
         <SelectContent>
@@ -64,7 +111,7 @@ export function ListToolbar({
           ))}
         </SelectContent>
       </Select>
-      <div className="flex-1 min-w-[240px] relative">
+      <div className="w-full md:flex-1 md:min-w-[240px] relative">
         <Input
           value={customQuery}
           onChange={(e) => onCustomQueryChange(e.target.value)}
@@ -81,27 +128,18 @@ export function ListToolbar({
           className="h-8 pr-20"
         />
         {dirty && (
-          <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] uppercase tracking-wider text-muted-foreground">
+          <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] uppercase tracking-wider text-muted-foreground hidden sm:inline">
             Press Enter
           </span>
         )}
       </div>
-      <div className="flex items-center gap-2 ml-auto">
-        {lastFetchedAt && !loading && (
-          <span className="text-xs text-muted-foreground whitespace-nowrap">
-            Updated {formatRelativeTime(lastFetchedAt.toISOString())}
-          </span>
-        )}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 cursor-pointer"
-          onClick={onRefresh}
-          disabled={loading}
-          title="Refresh"
-        >
-          <IconRefresh className={cn("h-4 w-4", loading && "animate-spin")} />
-        </Button>
+      <div className="hidden md:flex items-center gap-2 md:ml-auto">
+        <RefreshControls
+          loading={loading}
+          lastFetchedAt={lastFetchedAt}
+          onRefresh={onRefresh}
+          showUpdatedPrefix
+        />
       </div>
     </div>
   );
diff --git a/apps/web/e2e/pages/mobile-github-page.ts b/apps/web/e2e/pages/mobile-github-page.ts
new file mode 100644
index 0000000000..a4503076da
--- /dev/null
+++ b/apps/web/e2e/pages/mobile-github-page.ts
@@ -0,0 +1,27 @@
+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 });
+  }
+}
diff --git a/apps/web/e2e/tests/github/mobile-github-sidebar.spec.ts b/apps/web/e2e/tests/github/mobile-github-sidebar.spec.ts
new file mode 100644
index 0000000000..7e9c7786e5
--- /dev/null
+++ b/apps/web/e2e/tests/github/mobile-github-sidebar.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from "../../fixtures/test-base";
+import { MobileGitHubPage } from "../../pages/mobile-github-page";
+
+test.describe("Mobile /github sidebar", () => {
+  test("hamburger opens sheet and selecting a preset updates the toolbar", async ({
+    testPage,
+    apiClient,
+  }) => {
+    await apiClient.mockGitHubReset();
+    await apiClient.mockGitHubSetUser("test-user");
+    await apiClient.mockGitHubAddPRs([
+      {
+        number: 200,
+        title: "Mobile sidebar PR",
+        state: "open",
+        head_branch: "feat/mobile",
+        base_branch: "main",
+        author_login: "test-user",
+        repo_owner: "testorg",
+        repo_name: "testrepo",
+      },
+    ]);
+
+    const page = new MobileGitHubPage(testPage);
+    await page.goto();
+
+    // On a mobile viewport the inline desktop sidebar is hidden and the
+    // hamburger menu button is visible.
+    await expect(page.mobileMenuButton).toBeVisible();
+    await expect(page.inlineSidebar).toBeHidden();
+
+    // Default selection is the first PR preset.
+    await expect(page.toolbarTitle).toContainText("Review requested");
+
+    // Sheet is closed initially.
+    await expect(page.mobileSidebar).toBeHidden();
+
+    // Open the drawer.
+    await page.mobileMenuButton.tap();
+    await expect(page.mobileSidebar).toBeVisible();
+
+    // Tap a different preset → the drawer closes and the toolbar title
+    // reflects the new selection.
+    await page.presetByLabel("Mentions").tap();
+    await expect(page.mobileSidebar).toBeHidden();
+    await expect(page.toolbarTitle).toContainText("Mentions");
+  });
+});