making progress

2026-05-07 02:06:54 +02:00
parent 7b7e2d399c
commit dea186c995
39 changed files with 2021 additions and 67 deletions
@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { useRepo, useUpdateRepo, useDeleteRepo } from '../api/queries/repos'
+
+export default function RepoSettingsPage() {
+  const { owner = '', repo: repoName = '' } = useParams<{ owner: string; repo: string }>()
+  const navigate = useNavigate()
+  const { data: repo } = useRepo(owner, repoName)
+  const updateRepo = useUpdateRepo(owner, repoName)
+  const deleteRepo = useDeleteRepo(owner, repoName)
+
+  const [description, setDescription] = useState(repo?.description ?? '')
+  const [isPrivate, setIsPrivate] = useState(repo?.isPrivate ?? false)
+  const [confirmDelete, setConfirmDelete] = useState('')
+  const [saved, setSaved] = useState(false)
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await updateRepo.mutateAsync({ description, isPrivate })
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  const handleDelete = async () => {
+    if (confirmDelete !== repoName) return
+    await deleteRepo.mutateAsync()
+    navigate('/repos')
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 md:px-6 py-6 space-y-8">
+      <div className="flex items-center gap-1 text-sm">
+        <Link to={`/repos/${owner}/${repoName}`} className="text-[#0052CC] hover:underline">{repoName}</Link>
+        <span className="text-[#5E6C84]">/</span>
+        <span className="font-semibold text-[#172B4D]">Settings</span>
+      </div>
+
+      <h1 className="text-xl font-semibold text-[#172B4D]">Repository Settings</h1>
+
+      <section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
+        <div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC]">
+          <h2 className="text-sm font-semibold text-[#172B4D]">General</h2>
+        </div>
+        <form onSubmit={handleSave} className="px-5 py-5 space-y-4">
+          <div>
+            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Repository name</label>
+            <input value={repoName} disabled
+              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm bg-[#F4F5F7] text-[#5E6C84] cursor-not-allowed" />
+            <p className="text-xs text-[#5E6C84] mt-1">Renaming requires migrating git remotes — coming soon.</p>
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Description</label>
+            <input value={description} onChange={e => setDescription(e.target.value)}
+              placeholder="Short description of this repository"
+              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 repository</span>
+          </label>
+          <div className="flex items-center gap-3">
+            <button type="submit" disabled={updateRepo.isPending}
+              className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[44px]">
+              {updateRepo.isPending ? 'Saving…' : 'Save changes'}
+            </button>
+            {saved && <span className="text-xs text-[#00875A] font-medium">Saved!</span>}
+          </div>
+        </form>
+      </section>
+
+      <section className="border border-[#FFEBE6] rounded-lg overflow-hidden">
+        <div className="px-5 py-4 border-b border-[#FFEBE6] bg-[#FFEBE6]/50">
+          <h2 className="text-sm font-semibold text-[#BF2600]">Danger zone</h2>
+        </div>
+        <div className="px-5 py-5 space-y-3">
+          <p className="text-sm text-[#172B4D] font-medium">Delete this repository</p>
+          <p className="text-xs text-[#5E6C84]">
+            This action is permanent. Type <code className="font-mono bg-[#F4F5F7] px-1 rounded">{repoName}</code> to confirm.
+          </p>
+          <input value={confirmDelete} onChange={e => setConfirmDelete(e.target.value)}
+            placeholder={repoName}
+            className="w-full border border-[#DE350B] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#DE350B]" />
+          <button onClick={handleDelete}
+            disabled={confirmDelete !== repoName || deleteRepo.isPending}
+            className="px-4 py-2 rounded bg-[#DE350B] text-white text-sm font-medium hover:bg-[#BF2600] disabled:opacity-40 min-h-[44px]">
+            {deleteRepo.isPending ? 'Deleting…' : 'Delete repository'}
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}