repo permissions section is not functional

frontend/src/pages/RepoSettingsPage.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useParams, Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { useRepo, useUpdateRepo, useDeleteRepo, useUploadRepoAvatar } from '../api/queries/repos'
+import { useRepoMembers, useAddMember, useUpdateMember, useRemoveMember } from '../api/queries/members'
 import { useRecentRepos } from '../hooks/useRecentRepos'
+import { useAuth } from '../contexts/AuthContext'
 import { Skeleton } from '../ui/Skeleton'
 import { RepoAvatar } from '../ui/RepoAvatar'
 
@@ -128,10 +130,9 @@ export default function RepoSettingsPage() {
             {SIDEBAR.map(g => g.items.map(i => <option key={i.id} value={i.id}>{g.group} → {i.label}</option>))}
           </select>
         </div>
-        {section === 'repository-details'
-          ? <RepositoryDetailsSection owner={owner} repo={repoName} />
-          : <ComingSoon sectionId={section} />
-        }
+        {section === 'repository-details' && <RepositoryDetailsSection owner={owner} repo={repoName} />}
+        {section === 'repository-permissions' && <RepositoryPermissionsSection owner={owner} repo={repoName} />}
+        {section !== 'repository-details' && section !== 'repository-permissions' && <ComingSoon sectionId={section} />}
       </main>
     </div>
   )
@@ -500,6 +501,214 @@ function RepositoryDetailsSection({ owner, repo }: { owner: string; repo: string
   )
 }
 
+// ─── Repository permissions section ──────────────────────────────────────────
+
+const PERMISSION_LABELS: Record<string, { label: string; description: string; color: string }> = {
+  read:  { label: 'Read',  description: 'Can clone and pull',             color: 'bg-[var(--c-surface-muted)] text-[var(--c-muted)]' },
+  write: { label: 'Write', description: 'Can push branches and commits',  color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' },
+  admin: { label: 'Admin', description: 'Can manage settings and members', color: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300' },
+}
+
+function PermissionBadge({ permission }: { permission: string }) {
+  const p = PERMISSION_LABELS[permission] ?? PERMISSION_LABELS.read
+  return (
+    <span className={`text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-full ${p.color}`}>
+      {p.label}
+    </span>
+  )
+}
+
+function RepositoryPermissionsSection({ owner, repo }: { owner: string; repo: string }) {
+  const { user } = useAuth()
+  const { data: members, isLoading } = useRepoMembers(owner, repo)
+  const addMember = useAddMember(owner, repo)
+  const updateMember = useUpdateMember(owner, repo)
+  const removeMember = useRemoveMember(owner, repo)
+
+  const [username, setUsername] = useState('')
+  const [permission, setPermission] = useState('write')
+  const [addError, setAddError] = useState('')
+
+  const isOwner = members?.find(m => m.isOwner)?.username === user?.username
+
+  async function handleAdd(e: React.FormEvent) {
+    e.preventDefault()
+    setAddError('')
+    if (!username.trim()) return
+    try {
+      await addMember.mutateAsync({ username: username.trim(), permission })
+      setUsername('')
+    } catch (err) {
+      setAddError((err as Error).message)
+    }
+  }
+
+  async function handlePermissionChange(memberUsername: string, newPermission: string) {
+    await updateMember.mutateAsync({ username: memberUsername, permission: newPermission })
+  }
+
+  async function handleRemove(memberUsername: string) {
+    await removeMember.mutateAsync(memberUsername)
+  }
+
+  return (
+    <div className="max-w-2xl px-6 py-6 space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-[var(--c-text)]">Repository permissions</h1>
+        <p className="text-sm text-[var(--c-muted)] mt-1">
+          Manage who has access to this repository and what they can do.
+        </p>
+      </div>
+
+      <div className="border-t border-[var(--c-border)]" />
+
+      {/* Permission level reference */}
+      <div className="grid grid-cols-3 gap-3">
+        {Object.entries(PERMISSION_LABELS).map(([key, val]) => (
+          <div key={key} className="border border-[var(--c-border)] rounded-lg p-3 bg-[var(--c-surface)]">
+            <PermissionBadge permission={key} />
+            <p className="text-xs text-[var(--c-muted)] mt-2">{val.description}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Member list */}
+      <div className="border border-[var(--c-border)] rounded-lg overflow-hidden bg-[var(--c-surface)]">
+        <div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)] flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-[var(--c-text)]">Members</h2>
+          <span className="text-xs text-[var(--c-muted)]">{members?.length ?? 0} {members?.length === 1 ? 'person' : 'people'}</span>
+        </div>
+
+        {isLoading ? (
+          <div className="p-4 space-y-3">
+            {[1,2].map(i => (
+              <div key={i} className="flex items-center gap-3">
+                <Skeleton className="w-8 h-8 rounded-full" />
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-16 ml-auto" />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <ul className="divide-y divide-[var(--c-border)]">
+            {members?.map(member => (
+              <li key={member.userId} className="flex items-center gap-3 px-4 py-3">
+                {/* Avatar */}
+                <div className="w-8 h-8 rounded-full overflow-hidden shrink-0 bg-[var(--c-brand)] flex items-center justify-center text-white text-sm font-bold">
+                  {member.avatarUrl
+                    ? <img src={member.avatarUrl} alt={member.username} className="w-full h-full object-cover" />
+                    : member.username[0]?.toUpperCase()
+                  }
+                </div>
+
+                {/* Name */}
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium text-[var(--c-text)]">{member.username}</span>
+                  {member.isOwner && (
+                    <span className="ml-2 text-[10px] text-[var(--c-muted)]">owner</span>
+                  )}
+                </div>
+
+                {/* Permission selector or badge */}
+                {member.isOwner ? (
+                  <PermissionBadge permission="admin" />
+                ) : isOwner ? (
+                  <div className="flex items-center gap-2">
+                    <select
+                      value={member.permission}
+                      onChange={e => handlePermissionChange(member.username, e.target.value)}
+                      disabled={updateMember.isPending}
+                      className="text-xs border border-[var(--c-border)] rounded px-2 py-1 bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
+                    >
+                      <option value="read">Read</option>
+                      <option value="write">Write</option>
+                      <option value="admin">Admin</option>
+                    </select>
+                    <button
+                      onClick={() => handleRemove(member.username)}
+                      disabled={removeMember.isPending}
+                      className="text-[var(--c-danger)] hover:text-[var(--c-danger-dark)] disabled:opacity-40 p-1 rounded hover:bg-[var(--c-danger-tint)] transition-colors"
+                      title="Remove member"
+                    >
+                      <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                ) : (
+                  <PermissionBadge permission={member.permission} />
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Add member form — only for owner/admin */}
+      {isOwner && (
+        <div className="border border-[var(--c-border)] rounded-lg overflow-hidden bg-[var(--c-surface)]">
+          <div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)]">
+            <h2 className="text-sm font-semibold text-[var(--c-text)]">Add a member</h2>
+          </div>
+          <form onSubmit={handleAdd} className="p-4 space-y-4">
+            <div className="flex gap-3 flex-wrap">
+              <div className="flex-1 min-w-[180px]">
+                <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Username</label>
+                <input
+                  value={username}
+                  onChange={e => { setUsername(e.target.value); setAddError('') }}
+                  placeholder="e.g. alice"
+                  className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)] focus:ring-1 focus:ring-[var(--c-brand-focus)]"
+                />
+              </div>
+              <div className="w-36">
+                <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Permission</label>
+                <select
+                  value={permission}
+                  onChange={e => setPermission(e.target.value)}
+                  className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
+                >
+                  <option value="read">Read</option>
+                  <option value="write">Write</option>
+                  <option value="admin">Admin</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="text-xs text-[var(--c-muted)]">
+              {PERMISSION_LABELS[permission]?.description}
+            </div>
+
+            {addError && (
+              <p className="text-xs text-[var(--c-danger)]">{addError}</p>
+            )}
+
+            <button
+              type="submit"
+              disabled={addMember.isPending || !username.trim()}
+              className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] disabled:opacity-50"
+            >
+              {addMember.isPending ? 'Adding…' : 'Add member'}
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Info for non-owners */}
+      {!isOwner && !isLoading && (
+        <div className="flex items-start gap-3 p-4 border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-raised)]">
+          <svg width="16" height="16" fill="none" stroke="var(--c-muted)" strokeWidth="1.5" viewBox="0 0 24 24" className="shrink-0 mt-0.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+          <p className="text-sm text-[var(--c-muted)]">
+            Only the repository owner and admins can manage member permissions.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
 // ─── Coming soon ──────────────────────────────────────────────────────────────
 
 function ComingSoon({ sectionId }: { sectionId: SectionId }) {