Add Start Task button to repositories view

Add a button to create a new task directly from the repositories list
and detail views with the repository prepopulated. This streamlines the
workflow when users want to start working on a specific repository.

- Add defaultRepository prop to CreateTaskModal to prepopulate the form
- Add Task01Icon button to repository cards in the list view
- Add Task01Icon button to repository detail view header

Author: knowsuchagency

src/components/kanban/create-task-modal.tsx

@@ -40,6 +40,7 @@ import { useBranches, checkIsGitRepo } from '@/hooks/use-filesystem'
 import { useWorktreeBasePath, useDefaultGitReposDir } from '@/hooks/use-config'
 import { useRepositories, useCreateRepository } from '@/hooks/use-repositories'
 import { FilesystemBrowser } from '@/components/ui/filesystem-browser'
+import type { Repository } from '@/types'
 
 function slugify(text: string): string {
   return text
@@ -58,9 +59,10 @@ function generateBranchName(text: string): string {
 interface CreateTaskModalProps {
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  defaultRepository?: Repository
 }
 
-export function CreateTaskModal({ open: controlledOpen, onOpenChange }: CreateTaskModalProps = {}) {
+export function CreateTaskModal({ open: controlledOpen, onOpenChange, defaultRepository }: CreateTaskModalProps = {}) {
   const { t } = useTranslation('tasks')
   const { t: tc } = useTranslation('common')
   const [internalOpen, setInternalOpen] = useState(false)
@@ -116,6 +118,16 @@ export function CreateTaskModal({ open: controlledOpen, onOpenChange }: CreateTa
     }
   }, [repositories])
 
+  // Initialize with default repository when modal opens
+  useEffect(() => {
+    if (open && defaultRepository) {
+      setSelectedRepoId(defaultRepository.id)
+      setRepoPath(defaultRepository.path)
+      setRepoSearchQuery(defaultRepository.displayName)
+      setRepoTab('saved')
+    }
+  }, [open, defaultRepository])
+
   // Set default base branch when branches are loaded, reset when repo changes
   useEffect(() => {
     if (branchData) {

src/routes/repositories/$repoId.tsx

@@ -23,9 +23,11 @@ import {
   Loading03Icon,
   Alert02Icon,
   VisualStudioCodeIcon,
+  Task01Icon,
 } from '@hugeicons/core-free-icons'
 import { useHostname, useSshPort } from '@/hooks/use-config'
 import { buildVSCodeUrl } from '@/lib/vscode-url'
+import { CreateTaskModal } from '@/components/kanban/create-task-modal'
 
 export const Route = createFileRoute('/repositories/$repoId')({
   component: RepositoryDetailView,
@@ -44,6 +46,7 @@ function RepositoryDetailView() {
   const [startupScript, setStartupScript] = useState('')
   const [copyFiles, setCopyFiles] = useState('')
   const [hasChanges, setHasChanges] = useState(false)
+  const [taskModalOpen, setTaskModalOpen] = useState(false)
 
   // Initialize form state when repository loads
   useEffect(() => {
@@ -136,6 +139,16 @@ function RepositoryDetailView() {
         </div>
 
         <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => setTaskModalOpen(true)}
+            className="text-muted-foreground hover:text-foreground"
+            title="Start Task"
+          >
+            <HugeiconsIcon icon={Task01Icon} size={14} strokeWidth={2} />
+          </Button>
+
           <Button
             variant="ghost"
             size="icon-sm"
@@ -233,6 +246,12 @@ function RepositoryDetailView() {
           </FieldGroup>
         </div>
       </div>
+
+      <CreateTaskModal
+        open={taskModalOpen}
+        onOpenChange={setTaskModalOpen}
+        defaultRepository={repository}
+      />
     </div>
   )
 }

src/routes/repositories/index.tsx

@@ -40,11 +40,13 @@ import {
   CommandLineIcon,
   Copy01Icon,
   VisualStudioCodeIcon,
+  Task01Icon,
 } from '@hugeicons/core-free-icons'
 import { FilesystemBrowser } from '@/components/ui/filesystem-browser'
 import { useDefaultGitReposDir, useHostname, useSshPort } from '@/hooks/use-config'
 import { buildVSCodeUrl } from '@/lib/vscode-url'
 import type { Repository } from '@/types'
+import { CreateTaskModal } from '@/components/kanban/create-task-modal'
 
 export const Route = createFileRoute('/repositories/')({
   component: RepositoriesView,
@@ -53,9 +55,11 @@ export const Route = createFileRoute('/repositories/')({
 function RepositoryCard({
   repository,
   onDelete,
+  onStartTask,
 }: {
   repository: Repository
   onDelete: () => Promise<void>
+  onStartTask: () => void
 }) {
   const [dialogOpen, setDialogOpen] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
@@ -69,6 +73,12 @@ function RepositoryCard({
     window.open(url, '_blank')
   }
 
+  const handleStartTask = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onStartTask()
+  }
+
   const handleDelete = async (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -93,6 +103,7 @@ function RepositoryCard({
               <div className="flex shrink-0 gap-1">
                 <div className="size-6" />
                 <div className="size-6" />
+                <div className="size-6" />
               </div>
             </div>
 
@@ -126,6 +137,16 @@ function RepositoryCard({
       </Link>
 
       <div className="absolute right-3 top-3 flex gap-1">
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={handleStartTask}
+          className="shrink-0 text-muted-foreground hover:text-foreground"
+          title="Start Task"
+        >
+          <HugeiconsIcon icon={Task01Icon} size={14} strokeWidth={2} />
+        </Button>
+
         <Button
           variant="ghost"
           size="icon-sm"
@@ -326,6 +347,7 @@ function CreateRepositoryDialog() {
 function RepositoriesView() {
   const { data: repositories, isLoading, error } = useRepositories()
   const deleteRepository = useDeleteRepository()
+  const [taskModalRepo, setTaskModalRepo] = useState<Repository | null>(null)
 
   const handleDelete = async (id: string) => {
     await deleteRepository.mutateAsync(id)
@@ -377,10 +399,17 @@ function RepositoriesView() {
               key={repo.id}
               repository={repo}
               onDelete={() => handleDelete(repo.id)}
+              onStartTask={() => setTaskModalRepo(repo)}
             />
           ))}
         </div>
       </div>
+
+      <CreateTaskModal
+        open={taskModalRepo !== null}
+        onOpenChange={(open) => !open && setTaskModalRepo(null)}
+        defaultRepository={taskModalRepo ?? undefined}
+      />
     </div>
   )
 }