can now import repos and have more settings for creating new ones.

frontend/src/pages/CreateRepoPage.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useCreateRepo } from '../api/queries/repos'
+
+export default function CreateRepoPage() {
+  const navigate = useNavigate()
+  const createRepo = useCreateRepo()
+
+  const [name, setName] = useState('')
+  const [isPrivate, setIsPrivate] = useState(true)
+  const [initReadme, setInitReadme] = useState<'none' | 'blank' | 'tutorial'>('none')
+  const [defaultBranch, setDefaultBranch] = useState('')
+  const [initGitignore, setInitGitignore] = useState(true)
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [description, setDescription] = useState('')
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!name.trim()) return
+    const repo = await createRepo.mutateAsync({
+      name: name.trim(),
+      description,
+      isPrivate,
+      defaultBranch: defaultBranch.trim() || 'main',
+      initReadme,
+      initGitignore,
+    })
+    navigate(`/repos/${repo.ownerName}/${repo.name}`)
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-10">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-semibold text-[#172B4D]">Create a new repository</h1>
+        <Link to="/repos/import" className="text-sm text-[#0052CC] hover:underline">
+          Import repository
+        </Link>
+      </div>
+      <div className="border-t border-[#DFE1E6] mb-6" />
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+
+        {/* Repository name */}
+        <Field label="Repository name" required>
+          <input
+            value={name}
+            onChange={e => setName(e.target.value.replace(/[^a-zA-Z0-9._-]/g, '-'))}
+            placeholder="my-repository"
+            required
+            autoFocus
+            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
+          />
+          {name && !/^[a-zA-Z0-9._-]+$/.test(name) && (
+            <p className="text-xs text-[#DE350B] mt-1">Only letters, numbers, hyphens, underscores and dots are allowed.</p>
+          )}
+        </Field>
+
+        {/* Access level */}
+        <Field label="Access level">
+          <label className="flex items-start gap-2.5 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPrivate}
+              onChange={e => setIsPrivate(e.target.checked)}
+              className="mt-0.5 w-4 h-4 accent-[#0052CC]"
+            />
+            <div>
+              <span className="text-sm font-medium text-[#172B4D]">Private repository</span>
+              <p className="text-xs text-[#0052CC] mt-0.5 leading-relaxed">
+                {isPrivate
+                  ? 'Uncheck to make this repository public. Public repositories typically contain open-source code and can be viewed by anyone.'
+                  : 'Check to make this repository private. Only invited collaborators can see and push to it.'}
+              </p>
+            </div>
+          </label>
+        </Field>
+
+        {/* Include README */}
+        <Field label="Include a README?">
+          <select
+            value={initReadme}
+            onChange={e => setInitReadme(e.target.value as 'none' | 'blank' | 'tutorial')}
+            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] bg-white"
+          >
+            <option value="none">No</option>
+            <option value="blank">Yes, blank</option>
+            <option value="tutorial">Yes, with a tutorial (for beginners)</option>
+          </select>
+        </Field>
+
+        {/* Default branch */}
+        <Field label="Default branch name">
+          <input
+            value={defaultBranch}
+            onChange={e => setDefaultBranch(e.target.value)}
+            placeholder="e.g., 'main'"
+            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
+          />
+        </Field>
+
+        {/* Include .gitignore */}
+        <Field label="Include .gitignore?">
+          <select
+            value={initGitignore ? 'yes' : 'no'}
+            onChange={e => setInitGitignore(e.target.value === 'yes')}
+            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] bg-white"
+          >
+            <option value="yes">Yes (recommended)</option>
+            <option value="no">No</option>
+          </select>
+        </Field>
+
+        {/* Advanced settings */}
+        <div>
+          <button
+            type="button"
+            onClick={() => setShowAdvanced(s => !s)}
+            className="flex items-center gap-1.5 text-sm text-[#0052CC] hover:underline font-medium"
+          >
+            <svg
+              width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"
+              className={`transition-transform ${showAdvanced ? 'rotate-180' : ''}`}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+            </svg>
+            Advanced settings
+          </button>
+
+          {showAdvanced && (
+            <div className="mt-4 space-y-4 border-t border-[#DFE1E6] pt-4">
+              <Field label="Description">
+                <textarea
+                  value={description}
+                  onChange={e => setDescription(e.target.value)}
+                  rows={4}
+                  className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] resize-y"
+                  placeholder="Describe your repository…"
+                />
+              </Field>
+            </div>
+          )}
+        </div>
+
+        {createRepo.isError && (
+          <p className="text-xs text-[#DE350B]">
+            {createRepo.error instanceof Error ? createRepo.error.message : 'Failed to create repository.'}
+          </p>
+        )}
+
+        {/* Footer actions */}
+        <div className="border-t border-[#DFE1E6] pt-5 flex items-center justify-end gap-3">
+          <Link
+            to="/repos"
+            className="px-4 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] min-h-[36px] flex items-center"
+          >
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            disabled={createRepo.isPending || !name.trim()}
+            className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[36px]"
+          >
+            {createRepo.isPending ? 'Creating…' : 'Create repository'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[180px_1fr] gap-4 items-start">
+      <label className="text-sm text-[#172B4D] text-right pt-2 leading-tight">
+        {label}{required && <span className="text-[#DE350B] ml-0.5">*</span>}
+      </label>
+      <div>{children}</div>
+    </div>
+  )
+}

frontend/src/pages/ImportRepoPage.tsx

@@ -0,0 +1,206 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useImportRepo } from '../api/queries/repos'
+
+export default function ImportRepoPage() {
+  const navigate = useNavigate()
+  const importRepo = useImportRepo()
+
+  const [url, setUrl] = useState('')
+  const [requiresAuth, setRequiresAuth] = useState(false)
+  const [authUser, setAuthUser] = useState('')
+  const [authPass, setAuthPass] = useState('')
+  const [name, setName] = useState('')
+  const [isPrivate, setIsPrivate] = useState(true)
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [description, setDescription] = useState('')
+
+  // Auto-fill name from URL
+  function handleUrlChange(val: string) {
+    setUrl(val)
+    if (!name) {
+      const segment = val.split('/').pop()?.replace(/\.git$/, '') ?? ''
+      if (segment) setName(segment)
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!url.trim() || !name.trim()) return
+    const repo = await importRepo.mutateAsync({
+      url: url.trim(),
+      name: name.trim(),
+      description,
+      isPrivate,
+      authUser: requiresAuth ? authUser : undefined,
+      authPass: requiresAuth ? authPass : undefined,
+    })
+    navigate(`/repos/${repo.ownerName}/${repo.name}`)
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-10">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-semibold text-[#172B4D]">Import existing code</h1>
+        <Link to="/repos/new" className="text-sm text-[#0052CC] hover:underline">
+          Create new repository
+        </Link>
+      </div>
+      <div className="border-t border-[#DFE1E6] mb-6" />
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+
+        {/* Old repository section */}
+        <div>
+          <h2 className="text-sm font-semibold text-[#172B4D] mb-4">Old repository</h2>
+          <div className="space-y-4">
+            <Field label="URL" required>
+              <input
+                value={url}
+                onChange={e => handleUrlChange(e.target.value)}
+                placeholder="https://github.com/user/repo.git"
+                required
+                autoFocus
+                className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
+              />
+            </Field>
+
+            <Field label="">
+              <label className="flex items-center gap-2.5 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={requiresAuth}
+                  onChange={e => setRequiresAuth(e.target.checked)}
+                  className="w-4 h-4 accent-[#0052CC]"
+                />
+                <span className="text-sm text-[#172B4D]">Requires authorization</span>
+              </label>
+
+              {requiresAuth && (
+                <div className="mt-3 space-y-3">
+                  <input
+                    value={authUser}
+                    onChange={e => setAuthUser(e.target.value)}
+                    placeholder="Username"
+                    className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
+                  />
+                  <input
+                    type="password"
+                    value={authPass}
+                    onChange={e => setAuthPass(e.target.value)}
+                    placeholder="Password or access token"
+                    className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
+                  />
+                </div>
+              )}
+            </Field>
+          </div>
+        </div>
+
+        <div className="border-t border-[#DFE1E6]" />
+
+        {/* New repository section */}
+        <div>
+          <h2 className="text-sm font-semibold text-[#172B4D] mb-4">New repository</h2>
+          <div className="space-y-4">
+
+            <Field label="Repository name" required>
+              <input
+                value={name}
+                onChange={e => setName(e.target.value.replace(/[^a-zA-Z0-9._-]/g, '-'))}
+                placeholder="my-repository"
+                required
+                className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
+              />
+            </Field>
+
+            <Field label="Access level">
+              <label className="flex items-start gap-2.5 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={isPrivate}
+                  onChange={e => setIsPrivate(e.target.checked)}
+                  className="mt-0.5 w-4 h-4 accent-[#0052CC]"
+                />
+                <div>
+                  <span className="text-sm font-medium text-[#172B4D]">Private repository</span>
+                  <p className="text-xs text-[#0052CC] mt-0.5 leading-relaxed">
+                    {isPrivate
+                      ? 'Uncheck to make this repository public. Public repositories typically contain open-source code and can be viewed by anyone.'
+                      : 'Check to make this repository private. Only invited collaborators can see and push to it.'}
+                  </p>
+                </div>
+              </label>
+            </Field>
+
+            {/* Advanced settings */}
+            <div>
+              <button
+                type="button"
+                onClick={() => setShowAdvanced(s => !s)}
+                className="flex items-center gap-1.5 text-sm text-[#0052CC] hover:underline font-medium"
+              >
+                <svg
+                  width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"
+                  className={`transition-transform ${showAdvanced ? 'rotate-180' : ''}`}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+                Advanced settings
+              </button>
+
+              {showAdvanced && (
+                <div className="mt-4 space-y-4 border-t border-[#DFE1E6] pt-4">
+                  <Field label="Description">
+                    <textarea
+                      value={description}
+                      onChange={e => setDescription(e.target.value)}
+                      rows={4}
+                      className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] resize-y"
+                      placeholder="Describe your repository…"
+                    />
+                  </Field>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {importRepo.isError && (
+          <p className="text-xs text-[#DE350B]">
+            {importRepo.error instanceof Error ? importRepo.error.message : 'Import failed.'}
+          </p>
+        )}
+
+        {/* Footer */}
+        <div className="border-t border-[#DFE1E6] pt-5 flex items-center justify-end gap-3">
+          <Link
+            to="/repos"
+            className="px-4 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] min-h-[36px] flex items-center"
+          >
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            disabled={importRepo.isPending || !url.trim() || !name.trim()}
+            className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[36px]"
+          >
+            {importRepo.isPending ? 'Importing…' : 'Import repository'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[180px_1fr] gap-4 items-start">
+      <label className="text-sm text-[#172B4D] text-right pt-2 leading-tight">
+        {label}{required && <span className="text-[#DE350B] ml-0.5">*</span>}
+      </label>
+      <div>{children}</div>
+    </div>
+  )
+}

frontend/src/pages/ReposPage.tsx

@@ -1,12 +1,10 @@
-import { useState } from 'react'
-import { useRepos, useCreateRepo } from '../api/queries/repos'
+import { useRepos } from '../api/queries/repos'
 import { RepoCard } from '../components/repos/RepoCard'
 import { RepoListSkeleton } from '../ui/Skeleton'
 import { Link } from 'react-router-dom'
 
 export default function ReposPage() {
   const { data: repos, isLoading, isError } = useRepos()
-  const [showCreate, setShowCreate] = useState(false)
 
   return (
     <div className="max-w-4xl mx-auto px-4 md:px-6 py-6">
@@ -17,27 +15,39 @@ export default function ReposPage() {
             <p className="text-sm text-[#5E6C84] mt-0.5">{repos.length} repositor{repos.length === 1 ? 'y' : 'ies'}</p>
           )}
         </div>
-        <button
-          onClick={() => setShowCreate(true)}
-          className="flex items-center gap-2 px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px]"
-        >
-          <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          New
-        </button>
+        <div className="flex items-center gap-2">
+          <Link
+            to="/repos/import"
+            className="flex items-center gap-1.5 px-3 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] font-medium min-h-[36px]"
+          >
+            Import
+          </Link>
+          <Link
+            to="/repos/new"
+            className="flex items-center gap-2 px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[36px]"
+          >
+            <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            New repository
+          </Link>
+        </div>
       </div>
 
-      {showCreate && <CreateRepoForm onClose={() => setShowCreate(false)} />}
-
       {isLoading ? (
         <RepoListSkeleton />
       ) : isError ? (
         <NotSignedIn />
       ) : !repos?.length ? (
-        <div className="py-12 text-center text-sm text-[#5E6C84]">
-          No repositories yet.{' '}
-          <button onClick={() => setShowCreate(true)} className="text-[#0052CC] hover:underline">Create your first one.</button>
+        <div className="py-16 text-center">
+          <svg width="48" height="48" fill="none" stroke="#97A0AF" strokeWidth="1" viewBox="0 0 24 24" className="mx-auto mb-4">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
+          </svg>
+          <p className="text-sm font-medium text-[#172B4D] mb-1">No repositories yet</p>
+          <p className="text-xs text-[#5E6C84] mb-4">Create your first repository to get started.</p>
+          <Link to="/repos/new" className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF]">
+            Create repository
+          </Link>
         </div>
       ) : (
         <div className="flex flex-col gap-2">
@@ -64,61 +74,3 @@ function NotSignedIn() {
     </div>
   )
 }
-
-function CreateRepoForm({ onClose }: { onClose: () => void }) {
-  const createRepo = useCreateRepo()
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [isPrivate, setIsPrivate] = useState(false)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!name.trim()) return
-    await createRepo.mutateAsync({ name: name.trim(), description, isPrivate })
-    onClose()
-  }
-
-  return (
-    <div className="mb-6 p-5 border border-[#4C9AFF] rounded bg-white shadow-sm">
-      <h2 className="text-sm font-semibold text-[#172B4D] mb-4">New Repository</h2>
-      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-        <div>
-          <label className="block text-xs font-medium text-[#172B4D] mb-1">Name *</label>
-          <input
-            value={name}
-            onChange={e => setName(e.target.value)}
-            placeholder="my-project"
-            required
-            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
-          />
-        </div>
-        <div>
-          <label className="block text-xs font-medium text-[#172B4D] mb-1">Description</label>
-          <input
-            value={description}
-            onChange={e => setDescription(e.target.value)}
-            placeholder="Optional"
-            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
-          />
-        </div>
-        <label className="flex items-center gap-2 cursor-pointer">
-          <input type="checkbox" checked={isPrivate} onChange={e => setIsPrivate(e.target.checked)} />
-          <span className="text-sm text-[#172B4D]">Private</span>
-        </label>
-        {createRepo.isError && (
-          <p className="text-xs text-[#DE350B]">{createRepo.error instanceof Error ? createRepo.error.message : 'Error'}</p>
-        )}
-        <div className="flex gap-2">
-          <button type="submit" disabled={createRepo.isPending || !name.trim()}
-            className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[44px]">
-            {createRepo.isPending ? 'Creating…' : 'Create'}
-          </button>
-          <button type="button" onClick={onClose}
-            className="px-4 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] min-h-[44px]">
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}