fix(repoList): handle Bad credentials error from GitHub API

Catch 401 responses in useRepos loadMore and expose hasCredentialError,
then show a sign-in prompt in RepoList instead of an unhandled rejection.

src/hooks/useRepos.hook.ts

@@ -9,6 +9,7 @@ const STALE_TIME_MS = 20 * 60 * 1000
 
 const repos = ref<RepoBase[]>([])
 const isReady = ref(false)
+const hasCredentialError = ref(false)
 const currentPage = ref(0)
 const totalCount = ref(0)
 let lastFetchedAt = 0
@@ -21,6 +22,7 @@ export const useRepos = () => {
       isReady.value = true
       return
     }
+    try {
       const octokit = await getOctokit()
       const nextPage = currentPage.value + 1
       const repoList = await octokit.request("GET /search/repositories", {
@@ -38,8 +40,21 @@ export const useRepos = () => {
       repos.value = [...repos.value, ...newItems].sort((a, b) =>
         a.name < b.name ? -1 : 1
       )
+    } catch (err: unknown) {
+      if (
+        typeof err === "object" &&
+        err !== null &&
+        "status" in err &&
+        (err as { status: number }).status === 401
+      ) {
+        hasCredentialError.value = true
+      } else {
+        throw err
+      }
+    } finally {
       isReady.value = true
     }
+  }
 
   const canLoadMore = computed(() => repos.value.length < totalCount.value)
 
@@ -50,10 +65,11 @@ export const useRepos = () => {
       currentPage.value = 0
       totalCount.value = 0
       isReady.value = false
+      hasCredentialError.value = false
     }
     lastFetchedAt = Date.now()
     loadMore()
   }
 
-  return { repos, isReady, canLoadMore, loadMore }
+  return { repos, isReady, hasCredentialError, canLoadMore, loadMore }
 }

src/views/RepoList.vue

@@ -2,12 +2,13 @@
 import { vInfiniteScroll } from "@vueuse/components"
 
 import GoBack from "@/components/GoBack.vue"
+import SignInGithub from "@/components/SignInGithub.vue"
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { useRepos } from "@/hooks/useRepos.hook"
 import { useRepoList } from "@/modules/repo/hooks/useRepoList.hook"
 
 const { username } = useGitHubLogin()
-const { isReady } = useRepos()
+const { isReady, hasCredentialError } = useRepos()
 const {
   favoriteRepos,
   otherRepos,
@@ -26,6 +27,10 @@ const {
     <h1 class="title is-1">Repositories</h1>
     <go-back />
     <div v-if="!isReady">loading...</div>
+    <div v-else-if="hasCredentialError">
+      <p>Your GitHub credentials are invalid or expired.</p>
+      <sign-in-github />
+    </div>
     <div v-else class="columns is-centered">
       <div class="column is-one-third">
         <table