refactor(repos): redesign RepoList in editorial style

Align the repo manager with WelcomeWorld and PublicNoteView: editorial
top nav, serif hero, pastel favorite tiles, A-Z grouped list, skeleton
and credential-error states, and a name filter.

src/components/AuthorizeUser.vue

@@ -19,8 +19,7 @@ onBeforeMount(async () => {
     if ("error" in token) {
       hasError.value = true
     } else {
-      token.access_token
+      await saveCredentials(token)
-      saveCredentials(token)
     }
 
     router.replace({ name: "Home" })

src/hooks/useRepos.hook.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
@@ -15,9 +15,18 @@ const currentPage = ref(0)
 const totalCount = ref(0)
 let lastFetchedAt = 0
 
-export const useRepos = () => {
 const { username, accessToken } = useGitHubLogin()
 
+const resetState = () => {
+  repos.value = []
+  currentPage.value = 0
+  totalCount.value = 0
+  isReady.value = false
+  isLoading.value = false
+  hasCredentialError.value = false
+  lastFetchedAt = 0
+}
+
 const loadMore = async () => {
   if (!accessToken.value || !username.value) {
     isReady.value = true
@@ -60,6 +69,16 @@ export const useRepos = () => {
   }
 }
 
+watch(accessToken, (next, prev) => {
+  if (next === prev) return
+  resetState()
+  if (next && username.value) {
+    lastFetchedAt = Date.now()
+    loadMore()
+  }
+})
+
+export const useRepos = () => {
   const canLoadMore = computed(
     () => !isLoading.value && repos.value.length < totalCount.value
   )
@@ -67,12 +86,7 @@ export const useRepos = () => {
   const isStale = Date.now() - lastFetchedAt > STALE_TIME_MS
   if (!isReady.value || isStale) {
     if (isStale && isReady.value) {
-      repos.value = []
+      resetState()
-      currentPage.value = 0
-      totalCount.value = 0
-      isReady.value = false
-      isLoading.value = false
-      hasCredentialError.value = false
     }
     lastFetchedAt = Date.now()
     loadMore()

src/styles/app.css

@@ -109,6 +109,10 @@ a {
 a.title-stacked-note-link {
   display: block;
   overflow: visible;
+  &:hover {
+    cursor: pointer;
+    text-decoration: none;
+  }
 }
 
 .title-stacked-note ul,