repo details page working completely

frontend/src/api/client.ts

@@ -65,6 +65,7 @@ async function request<T>(
     throw new ApiError(res.status, message)
   }
 
+  if (res.status === 204) return schema.parse(null)
   const data = await res.json()
   return schema.parse(data)
 }

frontend/src/hooks/useRecentRepos.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 
 export interface RecentRepo {
   ownerName: string
@@ -8,6 +8,7 @@ export interface RecentRepo {
 
 const KEY = 'fb_recent_repos'
 const MAX = 5
+const EVENT = 'fb:recent-repos-changed'
 
 function read(): RecentRepo[] {
   try {
@@ -17,14 +18,28 @@ function read(): RecentRepo[] {
   }
 }
 
+function write(repos: RecentRepo[]) {
+  localStorage.setItem(KEY, JSON.stringify(repos))
+  window.dispatchEvent(new Event(EVENT))
+}
+
 export function useRecentRepos() {
-  const repos = read()
+  const [repos, setRepos] = useState<RecentRepo[]>(read)
+
+  useEffect(() => {
+    const handler = () => setRepos(read())
+    window.addEventListener(EVENT, handler)
+    return () => window.removeEventListener(EVENT, handler)
+  }, [])
 
   const track = useCallback((ownerName: string, name: string) => {
     const existing = read().filter(r => !(r.ownerName === ownerName && r.name === name))
-    const updated: RecentRepo[] = [{ ownerName, name, visitedAt: Date.now() }, ...existing].slice(0, MAX)
-    localStorage.setItem(KEY, JSON.stringify(updated))
+    write([{ ownerName, name, visitedAt: Date.now() }, ...existing].slice(0, MAX))
   }, [])
 
-  return { repos, track }
+  const remove = useCallback((ownerName: string, name: string) => {
+    write(read().filter(r => !(r.ownerName === ownerName && r.name === name)))
+  }, [])
+
+  return { repos, track, remove }
 }

frontend/src/pages/RepoSettingsPage.tsx

@@ -1,6 +1,7 @@
 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 { useRecentRepos } from '../hooks/useRecentRepos'
 import { Skeleton } from '../ui/Skeleton'
 import { RepoAvatar } from '../ui/RepoAvatar'
 
@@ -152,6 +153,7 @@ function RepositoryDetailsSection({ owner, repo }: { owner: string; repo: string
   const updateRepo = useUpdateRepo(owner, repo)
   const deleteRepo = useDeleteRepo(owner, repo)
   const uploadAvatar = useUploadRepoAvatar(owner, repo)
+  const { remove: removeRecent } = useRecentRepos()
 
   // Form state
   const [name, setName] = useState('')
@@ -231,6 +233,7 @@ function RepositoryDetailsSection({ owner, repo }: { owner: string; repo: string
   async function handleDelete() {
     if (confirmDelete !== repo) return
     await deleteRepo.mutateAsync()
+    removeRecent(owner, repo)
     navigate('/repos')
   }