✨ (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) => ({
-      id: `${item.id}`,
-      name: item.name,
-      isPrivate: item.private
-    }))
+    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,55 +1,77 @@
 <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">
-          <tr v-for="repo in favoriteRepos" :key="repo.id">
-            <td>
-              <input
-                type="checkbox"
-                name="favorites"
-                :value="repo.id"
-                :checked="favoriteCheckboxes.includes(repo.id)"
-                @click="toggleCheckbox(repo)"
-              />
-            </td>
-            <td>
-              <span v-if="repo.isPrivate">🔏</span>
+        <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
+                  type="checkbox"
+                  name="favorites"
+                  :value="repo.id"
+                  :checked="favoriteCheckboxes.includes(repo.id)"
+                  @click="toggleCheckbox(repo)"
+                />
+              </td>
+              <td>
+                <span v-if="repo.isPrivate">🔏</span>
 
-              <router-link
-                :to="{
-                  name: 'Home',
-                  params: { user: username, repo: repo.name }
-                }"
-              >
-                {{ repo.name }}
-              </router-link>
-            </td>
-          </tr>
-          <tr v-for="repo in otherRepos" :key="repo.id">
-            <td>
-              <input
-                type="checkbox"
-                name="favorites"
-                :value="repo.id"
-                :checked="favoriteCheckboxes.includes(repo.id)"
-                @click="toggleCheckbox(repo)"
-              />
-            </td>
-            <td>
-              <router-link
-                :to="{
-                  name: 'Home',
-                  params: { user: username, repo: repo.name }
-                }"
-              >
-                {{ repo.name }}
-              </router-link>
-            </td>
-          </tr>
+                <router-link
+                  :to="{
+                    name: 'Home',
+                    params: { user: username, repo: repo.name }
+                  }"
+                >
+                  {{ repo.name }}
+                </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
+                  type="checkbox"
+                  name="favorites"
+                  :value="repo.id"
+                  :checked="favoriteCheckboxes.includes(repo.id)"
+                  @click="toggleCheckbox(repo)"
+                />
+              </td>
+              <td>
+                <router-link
+                  :to="{
+                    name: 'Home',
+                    params: { user: username, repo: repo.name }
+                  }"
+                >
+                  {{ repo.name }}
+                </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>