refactor(ui): replace radio buttons with Tabs in AddRepoDialog

- Replace native radio buttons with Radix UI Tabs component
- Add mobile fullscreen support for dialog
- Improve touch targets with consistent min-height on inputs
- Simplify help text and branch descriptions
- Reduce code complexity while maintaining functionality

Author: chriswritescode-dev

frontend/src/components/repo/AddRepoDialog.tsx

@@ -4,6 +4,7 @@ import { createRepo, discoverRepos } from '@/api/repos'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Loader2 } from 'lucide-react'
 import { showToast } from '@/lib/toast'
 import type { DiscoverReposResponse } from '@opencode-manager/shared/types'
@@ -99,53 +100,22 @@ export function AddRepoDialog({ open, onOpenChange }: AddRepoDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px] bg-[#141414] border-[#2a2a2a]">
-        <DialogHeader>
+      <DialogContent mobileFullscreen className="content-start gap-0 sm:max-w-[500px] sm:max-h-[80vh] sm:h-auto sm:top-[50%] sm:translate-y-[-50%] bg-[#141414] border-[#2a2a2a]">
+        <DialogHeader className="px-4 sm:px-6 pt-2 sm:pt-6 pb-2 sm:pb-3 h-fit">
           <DialogTitle className="text-xl bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
             Add Repository
           </DialogTitle>
         </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+        <form onSubmit={handleSubmit} className="space-y-4 px-4 sm:px-6">
           <div className="space-y-2">
             <label className="text-sm text-zinc-400">Repository Type</label>
-            <div className="flex gap-4">
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name="repoType"
-                  value="remote"
-                  checked={repoType === 'remote'}
-                  onChange={(e) => setRepoType(e.target.value as 'remote')}
-                  disabled={mutation.isPending}
-                  className="text-blue-600 bg-[#1a1a1a] border-[#2a2a2a]"
-                />
-                <span className="text-sm text-white">Remote Repository</span>
-              </label>
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name="repoType"
-                  value="local"
-                  checked={repoType === 'local'}
-                  onChange={(e) => setRepoType(e.target.value as 'local')}
-                  disabled={mutation.isPending}
-                  className="text-blue-600 bg-[#1a1a1a] border-[#2a2a2a]"
-                />
-                <span className="text-sm text-white">Local Repository</span>
-              </label>
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name="repoType"
-                  value="folder"
-                  checked={repoType === 'folder'}
-                  onChange={(e) => setRepoType(e.target.value as 'folder')}
-                  disabled={mutation.isPending}
-                  className="text-blue-600 bg-[#1a1a1a] border-[#2a2a2a]"
-                />
-                <span className="text-sm text-white">Folder Discovery</span>
-              </label>
-            </div>
+            <Tabs value={repoType} onValueChange={(value) => setRepoType(value as 'remote' | 'local' | 'folder')}>
+              <TabsList className="grid w-full grid-cols-3 bg-[#1a1a1a]">
+                <TabsTrigger value="remote">Remote</TabsTrigger>
+                <TabsTrigger value="local">Local</TabsTrigger>
+                <TabsTrigger value="folder">Folder</TabsTrigger>
+              </TabsList>
+            </Tabs>
           </div>
 
           {repoType === 'remote' ? (
@@ -156,7 +126,7 @@ export function AddRepoDialog({ open, onOpenChange }: AddRepoDialogProps) {
                 value={repoUrl}
                 onChange={(e) => handleRepoUrlChange(e.target.value)}
                 disabled={mutation.isPending}
-                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500"
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500 min-h-[44px] text-base"
               />
               <p className="text-xs text-zinc-500">
                 Full URL or shorthand format (owner/repo for GitHub)
@@ -170,10 +140,10 @@ export function AddRepoDialog({ open, onOpenChange }: AddRepoDialogProps) {
                 value={localPath}
                 onChange={(e) => setLocalPath(e.target.value)}
                 disabled={mutation.isPending}
-                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500"
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500 min-h-[44px] text-base"
               />
               <p className="text-xs text-zinc-500">
-                Directory name for a new repo, or an absolute path to link an existing Git repo in place so its OpenCode sessions stay attached
+                Directory name for a new repo, or an absolute path to link an existing Git repo
               </p>
             </div>
           ) : (
@@ -184,57 +154,49 @@ export function AddRepoDialog({ open, onOpenChange }: AddRepoDialogProps) {
                 value={folderPath}
                 onChange={(e) => setFolderPath(e.target.value)}
                 disabled={mutation.isPending}
-                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500"
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500 min-h-[44px] text-base"
               />
               <p className="text-xs text-zinc-500">
-                Scans the folder for nested Git repositories and links each one in place so existing OpenCode sessions show up immediately
+                Scans the folder for nested Git repositories and links each one
               </p>
             </div>
           )}
 
           <div className="space-y-2">
-            <label className="text-sm text-zinc-400">Branch</label>
+            <label className="text-sm text-zinc-400">Branch (optional)</label>
             <Input
-              placeholder="Optional - uses default if empty"
+              placeholder="Uses default if empty"
               value={branch}
               onChange={(e) => setBranch(e.target.value)}
               disabled={mutation.isPending || repoType === 'folder'}
-              className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500"
+              className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-zinc-500 min-h-[44px] text-base"
             />
             <p className="text-xs text-zinc-500">
-              {repoType === 'folder'
-                ? 'Folder discovery links each repository on its current branch'
+              {repoType === 'folder' 
+                ? 'Links each repository on its current branch'
                 : branch 
-                ? repoType === 'remote' 
-                  ? `Clones repository directly to '${branch}' branch`
-                  : localPath?.startsWith('/') 
-                    ? `Links the repo in place and checks out '${branch}' branch`
-                    : `Initializes repository with '${branch}' branch`
-                : repoType === 'remote'
-                  ? "Clones repository to default branch"
-                  : localPath?.startsWith('/')
-                    ? 'Links the repo in place and keeps its current branch'
-                    : "Initializes repository with 'main' branch"
+                  ? `Uses '${branch}' branch`
+                  : 'Uses default branch'
               }
             </p>
           </div>
 
           {showSkipSSHCheckbox && (
-            <div className="flex items-start space-x-2">
+            <div className="flex items-start space-x-3">
               <input
                 type="checkbox"
                 id="skip-ssh-verification"
                 checked={skipSSHVerification}
                 onChange={(e) => setSkipSSHVerification(e.target.checked)}
                 disabled={mutation.isPending}
-                className="mt-1 h-4 w-4 rounded border-[#2a2a2a] bg-[#1a1a1a] text-blue-600 focus:ring-blue-600"
+                className="mt-1 h-5 w-5 rounded border-[#2a2a2a] bg-[#1a1a1a] text-blue-600 focus:ring-blue-600"
               />
               <div className="flex-1">
                 <label htmlFor="skip-ssh-verification" className="cursor-pointer text-sm text-white">
                   Skip SSH host key verification
                 </label>
                 <p className="text-xs text-zinc-500">
-                  Auto-accept the SSH host key. Use for self-hosted or internal Git servers.
+                  Auto-accept the SSH host key for self-hosted or internal servers
                 </p>
               </div>
             </div>
@@ -243,7 +205,7 @@ export function AddRepoDialog({ open, onOpenChange }: AddRepoDialogProps) {
           <Button 
             type="submit" 
             disabled={(!repoUrl && repoType === 'remote') || (!localPath && repoType === 'local') || (!folderPath && repoType === 'folder') || mutation.isPending}
-            className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+            className="w-full min-h-[48px] bg-blue-600 hover:bg-blue-700 text-white text-base font-medium"
           >
             {mutation.isPending ? (
               <>