From 739f4d3d5cb8afb52244106531043ea5a78223d2 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Thu, 22 Oct 2026 09:20:24 -0400
Subject: [PATCH 1/2] feat(frontend): move the mobile add-repo action into the
 search row

The header ran out of room on narrow screens now that the server switcher is
always present. The Repo button is desktop-only and mobile gets a bordered
icon button beside the search input instead. The empty state carries its own
add button, since it renders no search row.
---
 frontend/src/components/repo/RepoList.tsx     | 10 ++-
 .../components/repo/RepoListControls.test.tsx | 70 +++++++++++++++++++
 .../src/components/repo/RepoListControls.tsx  | 25 ++++++-
 frontend/src/pages/Repos.tsx                  |  8 ++-
 4 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/repo/RepoListControls.test.tsx

diff --git a/frontend/src/components/repo/RepoList.tsx b/frontend/src/components/repo/RepoList.tsx
index b222b2af2..968f3af41 100644
--- a/frontend/src/components/repo/RepoList.tsx
+++ b/frontend/src/components/repo/RepoList.tsx
@@ -6,8 +6,9 @@ import { CSS } from "@dnd-kit/utilities"
 import { listRepos, deleteRepo, updateRepoOrder, type DeleteBranchChoice } from "@/api/repos"
 import { fetchReposGitStatus } from "@/api/git"
 import { DeleteDialog } from "@/components/ui/delete-dialog"
+import { Button } from "@/components/ui/button"
 import { RadioOptionGroup, type RadioOption } from "@/components/ui/radio-option-group"
-import { GitBranch, Search, GripVertical } from "lucide-react"
+import { GitBranch, Search, GripVertical, Plus } from "lucide-react"
 import type { Repo } from "@/api/types"
 import type { GitStatusResponse } from "@/types/git"
 import { RepoCard } from "./RepoCard"
@@ -135,7 +136,7 @@ function StaticRepoCard({
   )
 }
 
-export function RepoList() {
+export function RepoList({ onAddRepo }: { onAddRepo: () => void }) {
   const queryClient = useQueryClient()
   const isMobile = useMobile()
   const { preferences, updateSettings } = useSettings()
@@ -341,6 +342,10 @@ export function RepoList() {
             <p className="text-muted-foreground">
               No repositories yet. Add one to get started.
             </p>
+            <Button size="sm" className="mt-4" onClick={onAddRepo}>
+              <Plus className="w-4 h-4 mr-1" />
+              Add repository
+            </Button>
           </div>
         )
 
@@ -413,6 +418,7 @@ export function RepoList() {
           hasClonedRepos={hasClonedRepos}
           selectionMode={selectionMode}
           onSelectionModeChange={handleSelectionModeChange}
+          onAddRepo={onAddRepo}
         />
 
         <div className="mx-2 md:mx-0 flex-1 min-h-0">
diff --git a/frontend/src/components/repo/RepoListControls.test.tsx b/frontend/src/components/repo/RepoListControls.test.tsx
new file mode 100644
index 000000000..f4b2ceb36
--- /dev/null
+++ b/frontend/src/components/repo/RepoListControls.test.tsx
@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { RepoListControls } from './RepoListControls'
+
+const mocks = vi.hoisted(() => ({ mobile: { current: false } }))
+
+vi.mock('@/hooks/useMobile', () => ({
+  isMobileViewport: () => mocks.mobile.current,
+  useMobile: () => mocks.mobile.current,
+}))
+
+function baseProps() {
+  return {
+    searchQuery: '',
+    onSearchChange: vi.fn(),
+    filterMode: 'recent' as const,
+    onFilterModeChange: vi.fn(),
+    sortMode: 'recent' as const,
+    onSortModeChange: vi.fn(),
+    filteredCount: 3,
+    attentionCount: 0,
+    selectedCount: 0,
+    allVisibleSelected: false,
+    onSelectAll: vi.fn(),
+    onClearSelection: vi.fn(),
+    onDelete: vi.fn(),
+    hasLocalRepos: false,
+    hasClonedRepos: false,
+    selectionMode: false,
+    onSelectionModeChange: vi.fn(),
+    onAddRepo: vi.fn(),
+  }
+}
+
+describe('RepoListControls', () => {
+  beforeEach(() => {
+    mocks.mobile.current = false
+  })
+
+  it('renders the add repository button after the search input on mobile', () => {
+    mocks.mobile.current = true
+
+    render(<RepoListControls {...baseProps()} />)
+
+    const search = screen.getByRole('textbox')
+    const addButton = screen.getByRole('button', { name: 'Add repository' })
+
+    expect(
+      search.compareDocumentPosition(addButton) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy()
+  })
+
+  it('calls onAddRepo once when the mobile button is clicked', async () => {
+    mocks.mobile.current = true
+    const props = baseProps()
+    const user = userEvent.setup()
+
+    render(<RepoListControls {...props} />)
+    await user.click(screen.getByRole('button', { name: 'Add repository' }))
+
+    expect(props.onAddRepo).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render the add repository button on desktop', () => {
+    render(<RepoListControls {...baseProps()} />)
+
+    expect(screen.queryByRole('button', { name: 'Add repository' })).not.toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/components/repo/RepoListControls.tsx b/frontend/src/components/repo/RepoListControls.tsx
index ba24ca882..ce069de7e 100644
--- a/frontend/src/components/repo/RepoListControls.tsx
+++ b/frontend/src/components/repo/RepoListControls.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { SlidersHorizontal, Trash2, X } from "lucide-react";
+import { Plus, SlidersHorizontal, Trash2, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { RepoSearchInput } from "./RepoSearchInput";
 import {
@@ -31,6 +31,7 @@ interface RepoListControlsProps {
   hasClonedRepos: boolean;
   selectionMode: boolean;
   onSelectionModeChange: (enabled: boolean) => void;
+  onAddRepo: () => void;
 }
 
 const FILTER_OPTIONS: { value: RepoFilterMode; label: string }[] = [
@@ -65,6 +66,7 @@ export function RepoListControls({
   hasClonedRepos,
   selectionMode,
   onSelectionModeChange,
+  onAddRepo,
 }: RepoListControlsProps) {
   const isMobile = useMobile();
   const [showMenu, setShowMenu] = useState(false);
@@ -122,10 +124,29 @@ export function RepoListControls({
       <div className="flex items-center gap-2">
         <RepoSearchInput value={searchQuery} onValueChange={onSearchChange} />
 
+        {isMobile && (
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Add repository"
+            title="Add repository"
+            className="h-9 w-9 shrink-0"
+            onClick={onAddRepo}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        )}
+
         {isMobile ? (
           <DropdownMenu open={showMenu} onOpenChange={setShowMenu}>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm">
+              <Button
+                variant="outline"
+                size="icon"
+                aria-label="Filter and sort repositories"
+                title="Filter and sort repositories"
+                className="h-9 w-9 shrink-0"
+              >
                 <SlidersHorizontal className="w-4 h-4" />
               </Button>
             </DropdownMenuTrigger>
diff --git a/frontend/src/pages/Repos.tsx b/frontend/src/pages/Repos.tsx
index 753858c0f..394b22f8a 100644
--- a/frontend/src/pages/Repos.tsx
+++ b/frontend/src/pages/Repos.tsx
@@ -62,7 +62,11 @@ export function Repos() {
             All Schedules
           </Button>
           {isLocalServer ? (
-            <Button onClick={() => setAddRepoOpen(true)} size="sm">
+            <Button
+              onClick={() => setAddRepoOpen(true)}
+              size="sm"
+              className="hidden md:inline-flex"
+            >
               <Plus className="w-4 h-4 mr-1" />
               Repo
             </Button>
@@ -73,7 +77,7 @@ export function Repos() {
         </Header.Actions>
       </Header>
       <div className="container mx-auto flex-1 pt-2 px-2 min-h-0 overflow-auto pb-[calc(env(safe-area-inset-bottom)+60px)] sm:pb-0">
-        {isLocalServer ? <RepoList /> : <RemoteProjectList serverId={selectedServerId} />}
+        {isLocalServer ? <RepoList onAddRepo={() => setAddRepoOpen(true)} /> : <RemoteProjectList serverId={selectedServerId} />}
       </div>
       {isLocalServer ? (
         <AddRepoDialog open={addRepoOpen} onOpenChange={setAddRepoOpen} />

From 6ac264f9d0aaf47e842cf4ac4883aea4a24885a0 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Thu, 22 Oct 2026 09:30:07 -0400
Subject: [PATCH 2/2] test(frontend): cover RepoList empty-state add action

Asserts the empty-state Add repository button calls onAddRepo once, the only add path left on mobile after the header action became desktop-only.
---
 .../src/components/repo/RepoList.test.tsx     | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 frontend/src/components/repo/RepoList.test.tsx

diff --git a/frontend/src/components/repo/RepoList.test.tsx b/frontend/src/components/repo/RepoList.test.tsx
new file mode 100644
index 000000000..f61bf1c78
--- /dev/null
+++ b/frontend/src/components/repo/RepoList.test.tsx
@@ -0,0 +1,44 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createUseSettingsMock } from '@/test/test-utils'
+import { RepoList } from './RepoList'
+
+const mocks = vi.hoisted(() => ({ listRepos: vi.fn() }))
+
+vi.mock('@/api/repos', () => ({
+  listRepos: mocks.listRepos,
+  deleteRepo: vi.fn(),
+  updateRepoOrder: vi.fn(),
+}))
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => createUseSettingsMock(),
+}))
+
+vi.mock('@/hooks/useMobile', () => ({ useMobile: () => true }))
+
+function renderRepoList(onAddRepo: () => void) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RepoList onAddRepo={onAddRepo} />
+    </QueryClientProvider>,
+  )
+}
+
+describe('RepoList', () => {
+  it('calls onAddRepo once from the empty state', async () => {
+    mocks.listRepos.mockResolvedValue([])
+    const onAddRepo = vi.fn()
+    const user = userEvent.setup()
+
+    renderRepoList(onAddRepo)
+
+    await user.click(await screen.findByRole('button', { name: 'Add repository' }))
+
+    expect(onAddRepo).toHaveBeenCalledTimes(1)
+  })
+})