feat(github): mobile-friendly /github page with sidebar drawer (#1041)

* 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/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>
   );