feat: public notes directly to list

src/components/RepoList.vue

@@ -1,21 +1,27 @@
 <script setup lang="ts">
-import fontColorContrast from 'font-color-contrast'
-import { getHex } from 'pastel-color'
+import fontColorContrast from "font-color-contrast"
+import { getHex } from "pastel-color"
 
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
+import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
+import { useFavoriteRepos } from "@/modules/repo/hooks/useFavoriteRepos.hook"
 
 const { username } = useGitHubLogin()
 const { savedFavoriteRepos } = useFavoriteRepos()
 
-const getStyle = (repo: string) => {
-  const backgroundColor = getHex(repo)
+const getStyle = (seed: string) => {
+  const backgroundColor = getHex(seed)
   return { backgroundColor, color: fontColorContrast(backgroundColor) }
 }
 </script>
 
 <template>
-  <section v-if="savedFavoriteRepos.length" class="repo-list">
+  <section class="repo-list">
+    <router-link
+      :to="{ name: 'PublicNoteListView' }"
+      class="btn"
+      :style="getStyle(``)"
+      >Public notes</router-link
+    >
     <router-link
       v-for="favoriteRepo in savedFavoriteRepos"
       :key="favoriteRepo._id"
@@ -23,8 +29,8 @@ const getStyle = (repo: string) => {
         name: 'FluxNoteView',
         params: {
           user: username,
-          repo: favoriteRepo.name
-        }
+          repo: favoriteRepo.name,
+        },
       }"
       class="btn"
       :style="getStyle(`${favoriteRepo.name}-${username}`)"
@@ -36,6 +42,10 @@ const getStyle = (repo: string) => {
 
 <style scoped lang="scss">
 .repo-list {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+
   a {
     border: 0;
     width: 160px;