✨ (private repo) display if fav repo is priva…

src/hooks/useRepos.hook.ts

@@ -19,11 +19,13 @@ export const useRepos = () => {
       per_page: 100
     })
 
-    return repoList.data.items.map((item) => ({
+    return repoList.data.items
+      .map((item) => ({
         id: `${item.id}`,
         name: item.name,
         isPrivate: item.private
       }))
+      .sort((a, b) => (a.name < b.name ? -1 : 1))
   }, [])
 
   return {

src/views/RepoList.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="repo-list">
-    <go-back />
     <h1 class="title is-1">Repositories</h1>
+    <go-back />
     <span v-if="!isReady">loading...</span>
     <div v-else class="columns is-centered">
       <div class="column is-one-third">
-        <table class="table is-striped is-hoverable is-fullwidth">
+        <table
+          class="table is-striped is-hoverable"
+          v-if="favoriteRepos.length > 0"
+        >
+          <thead>
+            <tr>
+              <th></th>
+              <th>Favorites</th>
+            </tr>
+          </thead>
+          <tbody>
             <tr v-for="repo in favoriteRepos" :key="repo.id">
               <td>
                 <input
@@ -29,6 +39,17 @@
                 </router-link>
               </td>
             </tr>
+          </tbody>
+        </table>
+        <br v-if="favoriteRepos.length > 0" />
+        <table class="table is-striped is-hoverable">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Repos</th>
+            </tr>
+          </thead>
+          <tbody>
             <tr v-for="repo in otherRepos" :key="repo.id">
               <td>
                 <input
@@ -50,6 +71,7 @@
                 </router-link>
               </td>
             </tr>
+          </tbody>
         </table>
       </div>
     </div>
@@ -95,5 +117,9 @@ export default defineComponent({
   text-align: center;
 
   overflow-y: auto;
+
+  table {
+    margin: auto;
+  }
 }
 </style>