From 754246e3951bdd8885d67032124cc8a149e5bab4 Mon Sep 17 00:00:00 2001
From: zhangzhenghao <zhangzhenghao@users.noreply.github.com>
Date: Sun, 26 Apr 2026 15:54:16 +0800
Subject: [PATCH 1/6] feat: add Extensions menu with browser links in
 navigation drawer

- Add v-list-group for Extensions in v-navigation-drawer
- Include Chrome, Edge, Firefox extension links with icons
- Use mdi-puzzle, mdi-google-chrome, mdi-microsoft-edge, mdi-firefox icons
---
 frontend/src/layouts/MainLayout.vue | 30 +++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 35e4cbe..2ba45a8 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -5,6 +5,36 @@
         <v-list-item title="Explore" :active="isExploreRoute" @click="goTo('/')" />
         <v-list-item title="Trending" :active="isTrendingRoute" @click="goTo('/trending')" />
         <v-list-item v-if="isAuthenticated" title="Favorites" :active="$route.path === '/favorites'" @click="goTo('/favorites')" />
+        
+        <v-list-group value="extensions">
+          <template #activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              title="Extensions"
+              prepend-icon="mdi-puzzle"
+            />
+          </template>
+          
+          <v-list-item
+            title="Chrome"
+            prepend-icon="mdi-google-chrome"
+            href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl"
+            target="_blank"
+          />
+          <v-list-item
+            title="Edge"
+            prepend-icon="mdi-microsoft-edge"
+            href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa"
+            target="_blank"
+          />
+          <v-list-item
+            title="Firefox"
+            prepend-icon="mdi-firefox"
+            href="https://addons.mozilla.org/addon/gitrec/"
+            target="_blank"
+          />
+        </v-list-group>
+        
         <v-list-item v-if="isAuthenticated">
           <div class="d-flex align-center w-100">
             <v-btn variant="text" icon="mdi-github" href="https://github.com/gorse-io/gitrec" target="_blank" />

From 8f5941e3ce2cd9ce236a8a5ef960619c64dc788c Mon Sep 17 00:00:00 2001
From: zhangzhenghao <zhangzhenghao@users.noreply.github.com>
Date: Sun, 26 Apr 2026 16:02:33 +0800
Subject: [PATCH 2/6] fix: show error message instead of infinite loading on
 Explore page

- Add error state to Home.vue
- Add .catch() handlers to recommend() and next() methods
- Show v-alert with error message when API fails
- Add Retry button for user to retry fetching
- Clear error state before new requests
---
 frontend/src/views/Home.vue | 47 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index d9ddf4d..c939829 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -42,7 +42,17 @@
           </a>
         </div>
       </div>
-      <Preloader v-if="readme == null" />
+      <Preloader v-if="readme == null && error == null" />
+      <v-alert v-else-if="error" type="error" variant="tonal" class="error-alert">
+        <div class="error-alert__content">
+          <v-icon start>mdi-alert-circle</v-icon>
+          {{ error }}
+        </div>
+        <v-btn color="error" variant="text" @click="retry" class="retry-btn">
+          <v-icon start>mdi-refresh</v-icon>
+          Retry
+        </v-btn>
+      </v-alert>
       <article v-else class="markdown-body" v-html="readme"></article>
     </v-container>
 
@@ -86,6 +96,7 @@ export default {
       subscribers_count: 0,
       language: "",
       readme: null,
+      error: null,
       primaryColor: "blue darken-1",
       textColor: "white-text text-lighten-3",
       topic: "",
@@ -155,13 +166,22 @@ export default {
       if (topic == "/cpp") {
         topic = "/c%2B%2B";
       }
+      this.error = null;
       console.log("/api/repo" + topic);
       axios
         .get("/api/repo" + topic, { withCredentials: true })
         .then((response) => {
           this.setRepository(response.data);
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to fetch repository. Please try again.";
+          console.error("Recommend error:", error);
         });
     },
+    retry() {
+      this.clearRepository();
+      this.recommend();
+    },
     setRepository(repo) {
       this.item_id = repo.item_id;
       this.full_name = repo.full_name;
@@ -176,6 +196,7 @@ export default {
       this.item_id = null;
       this.full_name = "";
       this.readme = null;
+      this.error = null;
       this.stargazers_count = 0;
       this.forks_count = 0;
       this.subscribers_count = 0;
@@ -194,6 +215,7 @@ export default {
         });
     },
     next() {
+      this.error = null;
       axios
         .post("/api/read/" + this.item_id, { withCredentials: true })
         .then(() => {
@@ -203,7 +225,15 @@ export default {
             .get("/api/repo" + this.topic, { withCredentials: true })
             .then((response) => {
               this.setRepository(response.data);
+            })
+            .catch((error) => {
+              this.error = error.response?.data?.error || "Failed to fetch repository. Please try again.";
+              console.error("Next repo error:", error);
             });
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to mark as read. Please try again.";
+          console.error("Read error:", error);
         });
     },
   },
@@ -220,6 +250,21 @@ export default {
   line-height: 1.5;
 }
 
+.error-alert {
+  margin: 20px auto;
+  max-width: 600px;
+}
+
+.error-alert__content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.retry-btn {
+  margin-top: 12px;
+}
+
 .markdown-body {
   box-sizing: border-box;
   min-width: 200px;

From e9a48d5f13183b5ebbba9b2aebdc67837309d509 Mon Sep 17 00:00:00 2001
From: zhangzhenghao <zhangzhenghao@users.noreply.github.com>
Date: Sun, 26 Apr 2026 16:07:24 +0800
Subject: [PATCH 3/6] fix: sync auth state between components on login/logout

- MainLayout dispatches 'gitrec-auth-change' custom event on logout
- MainLayout also dispatches event on successful login check
- Home.vue listens for the event and updates isAuthenticated state
- Fixes issue where Explore page showed login prompt after logout
---
 frontend/src/layouts/MainLayout.vue |  3 +++
 frontend/src/views/Home.vue         | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 2ba45a8..84fcf23 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -237,6 +237,7 @@ export default {
             login: response.data.login,
             timestamp: Date.now()
           }));
+          window.dispatchEvent(new CustomEvent('gitrec-auth-change', { detail: { authenticated: true } }));
         } else {
           localStorage.removeItem("gitrec_auth_state");
         }
@@ -265,6 +266,8 @@ export default {
         await axios.get("/api/logout");
         localStorage.removeItem("gitrec_auth_state");
         this.isAuthenticated = false;
+        // Dispatch logout event for other components
+        window.dispatchEvent(new CustomEvent('gitrec-auth-change', { detail: { authenticated: false } }));
         this.$router.push("/");
       } catch (error) {
         console.error("Logout failed:", error);
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index c939829..9571554 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -124,8 +124,20 @@ export default {
   async mounted() {
     await this.checkAuth();
     this.recommend();
+    
+    // Listen for auth change events from MainLayout
+    window.addEventListener('gitrec-auth-change', this.handleAuthChange);
+  },
+  beforeUnmount() {
+    window.removeEventListener('gitrec-auth-change', this.handleAuthChange);
   },
   methods: {
+    handleAuthChange(event) {
+      this.isAuthenticated = event.detail.authenticated;
+      if (!this.isAuthenticated) {
+        this.hideLoginPrompt = false;
+      }
+    },
     goToLogin() {
       this.$router.push("/login");
     },

From 952927ae695ba94bc67ee8f2fb944585cd3c2a82 Mon Sep 17 00:00:00 2001
From: zhangzhenghao <zhangzhenghao@users.noreply.github.com>
Date: Sun, 26 Apr 2026 16:18:54 +0800
Subject: [PATCH 4/6] refactor: Vue code review optimizations

- Extract auth logic into authMixin.js (DRY principle)
- Remove unused variables (primaryColor, textColor, stargazers_url, forks_url)
- Add loading states for like/next buttons
- Add error handling for like() method
- Use scoped styles to prevent CSS pollution
- Extract constants (TOPICS, LANGUAGES, EXTENSIONS)
- Add formatNumber utility for star counts
- Use computed topicPath for URL encoding
- Use Promise chaining in next() method
- Remove console.log statements
---
 frontend/src/layouts/MainLayout.vue | 179 +++++++++-------------------
 frontend/src/mixins/authMixin.js    |  79 ++++++++++++
 frontend/src/views/Home.vue         | 160 ++++++++++---------------
 3 files changed, 200 insertions(+), 218 deletions(-)
 create mode 100644 frontend/src/mixins/authMixin.js

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 84fcf23..402f387 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -16,35 +16,20 @@
           </template>
           
           <v-list-item
-            title="Chrome"
-            prepend-icon="mdi-google-chrome"
-            href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl"
-            target="_blank"
-          />
-          <v-list-item
-            title="Edge"
-            prepend-icon="mdi-microsoft-edge"
-            href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa"
-            target="_blank"
-          />
-          <v-list-item
-            title="Firefox"
-            prepend-icon="mdi-firefox"
-            href="https://addons.mozilla.org/addon/gitrec/"
+            v-for="ext in extensions"
+            :key="ext.name"
+            :title="ext.name"
+            :prepend-icon="ext.icon"
+            :href="ext.url"
             target="_blank"
           />
         </v-list-group>
         
-        <v-list-item v-if="isAuthenticated">
-          <div class="d-flex align-center w-100">
-            <v-btn variant="text" icon="mdi-github" href="https://github.com/gorse-io/gitrec" target="_blank" />
-            <v-btn variant="text" icon="mdi-logout" @click="logout" />
-          </div>
-        </v-list-item>
-        <v-list-item v-if="!isAuthenticated">
+        <v-list-item>
           <div class="d-flex align-center w-100">
             <v-btn variant="text" icon="mdi-github" href="https://github.com/gorse-io/gitrec" target="_blank" />
-            <v-btn variant="text" icon="mdi-login" @click="goTo('/login')" />
+            <v-btn v-if="isAuthenticated" variant="text" icon="mdi-logout" @click="logout" />
+            <v-btn v-if="!isAuthenticated" variant="text" icon="mdi-login" @click="goTo('/login')" />
           </div>
         </v-list-item>
       </v-list>
@@ -59,9 +44,9 @@
         <span class="route-title">GitRec</span>
         <v-spacer />
         <div class="d-none d-md-flex align-center ga-1">
-          <v-btn variant="text" :to="'/'" :active="isExploreRoute" color="white">Explore</v-btn>
-          <v-btn variant="text" :to="'/trending'" :active="isTrendingRoute" color="white">Trending</v-btn>
-          <v-btn v-if="isAuthenticated" variant="text" :to="'/favorites'" :active="$route.path === '/favorites'" color="white">Favorites</v-btn>
+          <v-btn variant="text" to="/" :active="isExploreRoute" color="white">Explore</v-btn>
+          <v-btn variant="text" to="/trending" :active="isTrendingRoute" color="white">Trending</v-btn>
+          <v-btn v-if="isAuthenticated" variant="text" to="/favorites" :active="$route.path === '/favorites'" color="white">Favorites</v-btn>
 
           <v-menu location="bottom end">
             <template #activator="{ props }">
@@ -71,18 +56,10 @@
             </template>
             <v-list density="compact">
               <v-list-item
-                title="Chrome Extension"
-                href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl"
-                target="_blank"
-              />
-              <v-list-item
-                title="Edge Add-on"
-                href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa"
-                target="_blank"
-              />
-              <v-list-item
-                title="Firefox Add-on"
-                href="https://addons.mozilla.org/addon/gitrec/"
+                v-for="ext in extensions"
+                :key="ext.name"
+                :title="ext.name"
+                :href="ext.url"
                 target="_blank"
               />
             </v-list>
@@ -147,47 +124,54 @@
 </template>
 
 <script>
-import axios from "axios";
+import authMixin from "../mixins/authMixin";
+
+const TOPICS = [
+  "all",
+  "ai",
+  "python",
+  "java",
+  "cpp",
+  "go",
+  "javascript",
+  "typescript",
+  "c",
+  "rust",
+];
+
+const LANGUAGES = [
+  "all",
+  "hackernews",
+  "python",
+  "java",
+  "cpp",
+  "go",
+  "javascript",
+  "typescript",
+  "c",
+  "rust",
+];
+
+const EXTENSIONS = [
+  { name: "Chrome Extension", icon: "mdi-google-chrome", url: "https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl" },
+  { name: "Edge Add-on", icon: "mdi-microsoft-edge", url: "https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa" },
+  { name: "Firefox Add-on", icon: "mdi-firefox", url: "https://addons.mozilla.org/addon/gitrec/" },
+];
 
 export default {
+  mixins: [authMixin],
   data() {
     return {
       drawer: false,
-      isAuthenticated: false,
-      topics: [
-        "all",
-        "ai",
-        "python",
-        "java",
-        "cpp",
-        "go",
-        "javascript",
-        "typescript",
-        "c",
-        "rust",
-      ],
-      languages: [
-        "all",
-        "hackernews",
-        "python",
-        "java",
-        "cpp",
-        "go",
-        "javascript",
-        "typescript",
-        "c",
-        "rust",
-      ],
+      topics: TOPICS,
+      languages: LANGUAGES,
+      extensions: EXTENSIONS,
     };
   },
   computed: {
     routeTitle() {
-      if (this.isTrendingRoute) {
-        return "Trending";
-      }
-      if (this.isExploreRoute) {
-        return "Explore";
-      }
+      if (this.isTrendingRoute) return "Trending";
+      if (this.isExploreRoute) return "Explore";
       return this.$route.name;
     },
     isExploreRoute() {
@@ -202,50 +186,11 @@ export default {
     activeLanguage() {
       return this.$route.params.language || "all";
     },
-    // Filter topics: hide 'ai' for anonymous users
     visibleTopics() {
-      if (this.isAuthenticated) {
-        return this.topics;
-      }
-      return this.topics.filter(topic => topic !== "ai");
+      return this.isAuthenticated ? this.topics : this.topics.filter(t => t !== "ai");
     },
   },
-  async mounted() {
-    await this.checkAuth();
-  },
   methods: {
-    async checkAuth() {
-      const cached = localStorage.getItem("gitrec_auth_state");
-      if (cached) {
-        try {
-          const { is_authenticated, timestamp } = JSON.parse(cached);
-          if (Date.now() - timestamp < 5 * 60 * 1000) {
-            this.isAuthenticated = is_authenticated;
-            return;
-          }
-        } catch (error) {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      }
-      
-      try {
-        const response = await axios.get("/api/me", { withCredentials: true });
-        this.isAuthenticated = response.data.is_authenticated;
-        if (this.isAuthenticated) {
-          localStorage.setItem("gitrec_auth_state", JSON.stringify({
-            is_authenticated: true,
-            login: response.data.login,
-            timestamp: Date.now()
-          }));
-          window.dispatchEvent(new CustomEvent('gitrec-auth-change', { detail: { authenticated: true } }));
-        } else {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      } catch (error) {
-        localStorage.removeItem("gitrec_auth_state");
-        this.isAuthenticated = false;
-      }
-    },
     goTo(path) {
       this.drawer = false;
       if (this.$route.path !== path) {
@@ -261,23 +206,11 @@ export default {
     topicLabel(topic) {
       return topic.replace("-", " ").toUpperCase();
     },
-    async logout() {
-      try {
-        await axios.get("/api/logout");
-        localStorage.removeItem("gitrec_auth_state");
-        this.isAuthenticated = false;
-        // Dispatch logout event for other components
-        window.dispatchEvent(new CustomEvent('gitrec-auth-change', { detail: { authenticated: false } }));
-        this.$router.push("/");
-      } catch (error) {
-        console.error("Logout failed:", error);
-      }
-    },
   },
 };
 </script>
 
-<style>
+<style scoped>
 .route-title {
   font-weight: 300;
   font-size: 1.2rem;
diff --git a/frontend/src/mixins/authMixin.js b/frontend/src/mixins/authMixin.js
new file mode 100644
index 0000000..706f57d
--- /dev/null
+++ b/frontend/src/mixins/authMixin.js
@@ -0,0 +1,79 @@
+import axios from 'axios';
+
+const AUTH_CACHE_KEY = 'gitrec_auth_state';
+const AUTH_CACHE_EXPIRY_MS = 5 * 60 * 1000; // 5 minutes
+
+export default {
+  data() {
+    return {
+      isAuthenticated: false,
+      authLogin: null,
+    };
+  },
+  methods: {
+    async checkAuth() {
+      const cached = localStorage.getItem(AUTH_CACHE_KEY);
+      if (cached) {
+        try {
+          const data = JSON.parse(cached);
+          if (Date.now() - data.timestamp < AUTH_CACHE_EXPIRY_MS) {
+            this.isAuthenticated = data.is_authenticated;
+            this.authLogin = data.login;
+            return;
+          }
+        } catch {
+          localStorage.removeItem(AUTH_CACHE_KEY);
+        }
+      }
+
+      try {
+        const response = await axios.get('/api/me', { withCredentials: true });
+        this.isAuthenticated = response.data.is_authenticated;
+        this.authLogin = response.data.login;
+        if (this.isAuthenticated) {
+          localStorage.setItem(AUTH_CACHE_KEY, JSON.stringify({
+            is_authenticated: true,
+            login: response.data.login,
+            timestamp: Date.now()
+          }));
+          this.dispatchAuthChange(true);
+        } else {
+          localStorage.removeItem(AUTH_CACHE_KEY);
+        }
+      } catch {
+        this.isAuthenticated = false;
+        this.authLogin = null;
+        localStorage.removeItem(AUTH_CACHE_KEY);
+      }
+    },
+    async logout() {
+      try {
+        await axios.get('/api/logout', { withCredentials: true });
+      } catch (error) {
+        console.error('Logout failed:', error);
+      }
+      localStorage.removeItem(AUTH_CACHE_KEY);
+      this.isAuthenticated = false;
+      this.authLogin = null;
+      this.dispatchAuthChange(false);
+    },
+    dispatchAuthChange(authenticated) {
+      window.dispatchEvent(new CustomEvent('gitrec-auth-change', {
+        detail: { authenticated }
+      }));
+    },
+    handleAuthChange(event) {
+      this.isAuthenticated = event.detail.authenticated;
+      if (!event.detail.authenticated) {
+        this.authLogin = null;
+      }
+    },
+  },
+  mounted() {
+    this.checkAuth();
+    window.addEventListener('gitrec-auth-change', this.handleAuthChange);
+  },
+  beforeUnmount() {
+    window.removeEventListener('gitrec-auth-change', this.handleAuthChange);
+  },
+};
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 9571554..264c579 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -30,19 +30,19 @@
           </span>
           <a :href="html_url + '/stargazers'" target="_blank" class="repo-meta-link">
             <v-icon size="16">mdi-star</v-icon>
-            {{ stargazers_count }}
+            {{ formatNumber(stargazers_count) }}
           </a>
           <a :href="html_url + '/network/members'" target="_blank" class="repo-meta-link">
             <v-icon size="16">mdi-source-fork</v-icon>
-            {{ forks_count }}
+            {{ formatNumber(forks_count) }}
           </a>
           <a :href="html_url + '/watchers'" target="_blank" class="repo-meta-link">
             <v-icon size="16">mdi-eye</v-icon>
-            {{ subscribers_count }}
+            {{ formatNumber(subscribers_count) }}
           </a>
         </div>
       </div>
-      <Preloader v-if="readme == null && error == null" />
+      <Preloader v-if="loading" />
       <v-alert v-else-if="error" type="error" variant="tonal" class="error-alert">
         <div class="error-alert__content">
           <v-icon start>mdi-alert-circle</v-icon>
@@ -53,20 +53,28 @@
           Retry
         </v-btn>
       </v-alert>
-      <article v-else class="markdown-body" v-html="readme"></article>
+      <article v-else-if="readme" class="markdown-body" v-html="readme"></article>
     </v-container>
 
     <v-btn
       icon
       size="large"
       :color="like_pressed ? 'red' : 'primary'"
+      :loading="likeLoading"
       class="fab-btn fab-like"
       @click="like"
     >
       <v-icon>{{ like_pressed ? "mdi-heart" : "mdi-heart-outline" }}</v-icon>
     </v-btn>
 
-    <v-btn icon size="large" color="primary" class="fab-btn fab-next" @click="next">
+    <v-btn 
+      icon 
+      size="large" 
+      color="primary" 
+      :loading="nextLoading"
+      class="fab-btn fab-next" 
+      @click="next"
+    >
       <v-icon>mdi-play</v-icon>
     </v-btn>
   </div>
@@ -76,118 +84,80 @@
 <script>
 import Preloader from "../components/Preloader.vue";
 import axios from "axios";
+import authMixin from "../mixins/authMixin";
 
 export default {
   components: {
     Preloader
   },
+  mixins: [authMixin],
   data() {
     return {
       like_pressed: false,
-      isAuthenticated: false,
+      likeLoading: false,
+      nextLoading: false,
+      loading: false,
       authChecked: false,
       item_id: null,
       full_name: "",
       html_url: null,
-      stargazers_url: null,
-      forks_url: null,
       stargazers_count: 0,
       forks_count: 0,
       subscribers_count: 0,
       language: "",
       readme: null,
       error: null,
-      primaryColor: "blue darken-1",
-      textColor: "white-text text-lighten-3",
       topic: "",
     };
   },
+  computed: {
+    topicPath() {
+      let path = this.topic;
+      if (path === "/cpp") {
+        path = "/c%2B%2B";
+      }
+      return path;
+    },
+  },
   watch: {
     $route() {
-      if (this.$route.params.topic != null) {
-        this.topic = "/" + this.$route.params.topic;
-      } else {
-        this.topic = "";
-      }
+      this.topic = this.$route.params.topic ? "/" + this.$route.params.topic : "";
       this.clearRepository();
       this.recommend();
     },
   },
   created() {
-    if (this.$route.params.topic != null) {
-      this.topic = "/" + this.$route.params.topic;
-    } else {
-      this.topic = "";
-    }
+    this.topic = this.$route.params.topic ? "/" + this.$route.params.topic : "";
     this.clearRepository();
   },
   async mounted() {
     await this.checkAuth();
+    this.authChecked = true;
     this.recommend();
-    
-    // Listen for auth change events from MainLayout
-    window.addEventListener('gitrec-auth-change', this.handleAuthChange);
-  },
-  beforeUnmount() {
-    window.removeEventListener('gitrec-auth-change', this.handleAuthChange);
   },
   methods: {
-    handleAuthChange(event) {
-      this.isAuthenticated = event.detail.authenticated;
-      if (!this.isAuthenticated) {
-        this.hideLoginPrompt = false;
-      }
-    },
     goToLogin() {
       this.$router.push("/login");
     },
-    async checkAuth() {
-      const cached = localStorage.getItem("gitrec_auth_state");
-      if (cached) {
-        try {
-          const { is_authenticated, timestamp } = JSON.parse(cached);
-          if (Date.now() - timestamp < 5 * 60 * 1000) {
-            this.isAuthenticated = is_authenticated;
-            return;
-          }
-        } catch (error) {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      }
-      
-      try {
-        const response = await axios.get("/api/me", { withCredentials: true });
-        this.isAuthenticated = response.data.is_authenticated;
-        if (this.isAuthenticated) {
-          localStorage.setItem("gitrec_auth_state", JSON.stringify({
-            is_authenticated: true,
-            login: response.data.login,
-            timestamp: Date.now()
-          }));
-        } else {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      } catch (error) {
-        this.isAuthenticated = false;
-        localStorage.removeItem("gitrec_auth_state");
+    formatNumber(num) {
+      if (num >= 1000) {
+        return (num / 1000).toFixed(1) + "k";
       }
-      this.authChecked = true;
+      return num.toString();
     },
     recommend() {
-      let topic = this.topic;
-      if (topic == "/cpp") {
-        topic = "/c%2B%2B";
-      }
       this.error = null;
-      console.log("/api/repo" + topic);
+      this.loading = true;
       axios
-        .get("/api/repo" + topic, { withCredentials: true })
+        .get("/api/repo" + this.topicPath, { withCredentials: true })
         .then((response) => {
           this.setRepository(response.data);
         })
         .catch((error) => {
           this.error = error.response?.data?.error || "Failed to fetch repository. Please try again.";
-          console.error("Recommend error:", error);
+        })
+        .finally(() => {
+          this.loading = false;
         });
     },
     retry() {
@@ -209,6 +179,7 @@ export default {
       this.full_name = "";
       this.readme = null;
       this.error = null;
+      this.loading = false;
       this.stargazers_count = 0;
       this.forks_count = 0;
       this.subscribers_count = 0;
@@ -220,39 +191,45 @@ export default {
         this.$router.push("/login");
         return;
       }
+      this.likeLoading = true;
       axios
-        .post("/api/like/" + this.item_id, { withCredentials: true })
+        .post("/api/like/" + this.item_id, null, { withCredentials: true })
         .then(() => {
           this.like_pressed = true;
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to like repository.";
+        })
+        .finally(() => {
+          this.likeLoading = false;
         });
     },
     next() {
+      if (!this.item_id) return;
+      
+      this.nextLoading = true;
       this.error = null;
       axios
-        .post("/api/read/" + this.item_id, { withCredentials: true })
+        .post("/api/read/" + this.item_id, null, { withCredentials: true })
         .then(() => {
-          // load next repo
           this.clearRepository();
-          axios
-            .get("/api/repo" + this.topic, { withCredentials: true })
-            .then((response) => {
-              this.setRepository(response.data);
-            })
-            .catch((error) => {
-              this.error = error.response?.data?.error || "Failed to fetch repository. Please try again.";
-              console.error("Next repo error:", error);
-            });
+          return axios.get("/api/repo" + this.topicPath, { withCredentials: true });
+        })
+        .then((response) => {
+          this.setRepository(response.data);
         })
         .catch((error) => {
-          this.error = error.response?.data?.error || "Failed to mark as read. Please try again.";
-          console.error("Read error:", error);
+          this.error = error.response?.data?.error || "Failed to fetch next repository.";
+        })
+        .finally(() => {
+          this.nextLoading = false;
         });
     },
   },
 };
 </script>
 
-<style>
+<style scoped>
 .login-alert {
   cursor: pointer;
 }
@@ -282,10 +259,7 @@ export default {
   min-width: 200px;
   max-width: 980px;
   margin: 0 auto;
-  padding-left: 45px;
-  padding-right: 45px;
-  padding-top: 20px;
-  padding-bottom: 45px;
+  padding: 20px 45px 45px;
 }
 
 @media (max-width: 767px) {
@@ -296,9 +270,7 @@ export default {
 }
 
 .repo-header {
-  padding-top: 10px;
-  padding-left: 45px;
-  padding-right: 45px;
+  padding: 10px 45px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -308,9 +280,7 @@ export default {
 
 @media (max-width: 767px) {
   .repo-header {
-    padding-top: 10px;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding: 10px 15px 0;
   }
 }
 

From fcfc2fdd8c8c233bb427b23ca0917bb8b68f2c67 Mon Sep 17 00:00:00 2001
From: Zhenghao Zhang <zhangzhenghao@hotmail.com>
Date: Tue, 28 Apr 2026 22:50:13 +0800
Subject: [PATCH 5/6] fix: improve error handling and display in Favorites,
 Home, and Trending views

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/src/layouts/MainLayout.vue |  8 +--
 frontend/src/views/Favorites.vue    | 81 +++++++++++++++++++----------
 frontend/src/views/Home.vue         | 50 +++++-------------
 frontend/src/views/Trending.vue     | 28 +++++++---
 4 files changed, 92 insertions(+), 75 deletions(-)

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 402f387..845fb5d 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -6,12 +6,11 @@
         <v-list-item title="Trending" :active="isTrendingRoute" @click="goTo('/trending')" />
         <v-list-item v-if="isAuthenticated" title="Favorites" :active="$route.path === '/favorites'" @click="goTo('/favorites')" />
         
-        <v-list-group value="extensions">
+        <v-list-group class="extensions-list-group" value="extensions">
           <template #activator="{ props }">
             <v-list-item
               v-bind="props"
               title="Extensions"
-              prepend-icon="mdi-puzzle"
             />
           </template>
           
@@ -19,7 +18,6 @@
             v-for="ext in extensions"
             :key="ext.name"
             :title="ext.name"
-            :prepend-icon="ext.icon"
             :href="ext.url"
             target="_blank"
           />
@@ -225,4 +223,8 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
+
+.extensions-list-group :deep(.v-list-group__items) {
+  --indent-padding: 0px;
+}
 </style>
diff --git a/frontend/src/views/Favorites.vue b/frontend/src/views/Favorites.vue
index 9839bb1..5e255cb 100644
--- a/frontend/src/views/Favorites.vue
+++ b/frontend/src/views/Favorites.vue
@@ -1,33 +1,41 @@
 <template>
-  <v-container>
-    <Preloader v-if="feedbacks == null" />
-    <div v-else>
-      <v-list class="feedback-list" lines="one">
-        <v-list-item
-          v-for="feedback in pageFeedbacks"
-          :key="feedback.FeedbackType + feedback.ItemId"
-          :href="'https://github.com/' + feedback.ItemId"
-          target="_blank"
-          rounded="lg"
-          class="feedback-item"
-        >
-          <template #prepend>
-            <v-icon size="18" class="feedback-icon">{{ feedbackIcon(feedback.FeedbackType) }}</v-icon>
-          </template>
+  <div>
+    <v-alert v-if="feedbacks != null && error" type="error" variant="tonal">
+      <div class="login-alert__text">
+        {{ error }}
+      </div>
+    </v-alert>
+
+    <v-container v-else>
+      <Preloader v-if="feedbacks == null" />
+      <div v-else>
+        <v-list class="feedback-list" lines="one">
+          <v-list-item
+            v-for="feedback in pageFeedbacks"
+            :key="feedback.FeedbackType + feedback.ItemId"
+            :href="'https://github.com/' + feedback.ItemId"
+            target="_blank"
+            rounded="lg"
+            class="feedback-item"
+          >
+            <template #prepend>
+              <v-icon size="18" class="feedback-icon">{{ feedbackIcon(feedback.FeedbackType) }}</v-icon>
+            </template>
 
-          <v-list-item-title>{{ feedback.ItemId }}</v-list-item-title>
+            <v-list-item-title>{{ feedback.ItemId }}</v-list-item-title>
 
-          <template #append>
-            <span class="feedback-time">{{ formatTime(feedback.Timestamp) }}</span>
-          </template>
-        </v-list-item>
-      </v-list>
+            <template #append>
+              <span class="feedback-time">{{ formatTime(feedback.Timestamp) }}</span>
+            </template>
+          </v-list-item>
+        </v-list>
 
-      <div v-if="numPage > 1" class="d-flex justify-center my-4">
-        <v-pagination v-model="currentPage" :length="numPage" :total-visible="7" color="primary" />
+        <div v-if="numPage > 1" class="d-flex justify-center my-4">
+          <v-pagination v-model="currentPage" :length="numPage" :total-visible="7" color="primary" />
+        </div>
       </div>
-    </div>
-  </v-container>
+    </v-container>
+  </div>
 </template>
 
 <script>
@@ -45,14 +53,26 @@ export default {
     return {
       currentPage: 1,
       feedbacks: null,
+      error: null,
     };
   },
   mounted() {
-    axios.get("/api/favorites", { withCredentials: true }).then((response) => {
-      this.feedbacks = response.data;
-    });
+    this.fetchFavorites();
   },
   methods: {
+    fetchFavorites() {
+      this.error = null;
+      this.feedbacks = null;
+      axios
+        .get("/api/favorites", { withCredentials: true })
+        .then((response) => {
+          this.feedbacks = response.data;
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to fetch favorites.";
+          this.feedbacks = [];
+        });
+    },
     formatTime(timestamp) {
       return timeago.format(timestamp);
     },
@@ -78,6 +98,11 @@ export default {
 </script>
 
 <style>
+.login-alert__text {
+  white-space: normal;
+  line-height: 1.5;
+}
+
 .feedback-icon {
   font-size: 16px;
   vertical-align: middle;
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 264c579..d1f602b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -2,7 +2,7 @@
   <div>
     <!-- Login prompt for anonymous users -->
     <v-alert
-      v-if="authChecked && !isAuthenticated"
+      v-if="authChecked && !isAuthenticated && !error"
       type="info"
       variant="tonal"
       class="login-alert"
@@ -17,7 +17,13 @@
       </div>
     </v-alert>
 
-    <v-container>
+    <v-alert v-if="!loading && error" type="error" variant="tonal">
+      <div class="login-alert__text">
+        {{ error }}
+      </div>
+    </v-alert>
+
+    <v-container v-else>
       <div v-if="full_name" class="repo-header">
         <a :href="html_url" target="_blank" class="repo-link">
           <v-icon size="18">mdi-link-variant</v-icon>
@@ -43,17 +49,7 @@
         </div>
       </div>
       <Preloader v-if="loading" />
-      <v-alert v-else-if="error" type="error" variant="tonal" class="error-alert">
-        <div class="error-alert__content">
-          <v-icon start>mdi-alert-circle</v-icon>
-          {{ error }}
-        </div>
-        <v-btn color="error" variant="text" @click="retry" class="retry-btn">
-          <v-icon start>mdi-refresh</v-icon>
-          Retry
-        </v-btn>
-      </v-alert>
-      <article v-else-if="readme" class="markdown-body" v-html="readme"></article>
+      <article v-else-if="!error && readme" class="markdown-body" v-html="readme"></article>
     </v-container>
 
     <v-btn
@@ -148,7 +144,7 @@ export default {
     recommend() {
       this.error = null;
       this.loading = true;
-      axios
+      return axios
         .get("/api/repo" + this.topicPath, { withCredentials: true })
         .then((response) => {
           this.setRepository(response.data);
@@ -160,10 +156,6 @@ export default {
           this.loading = false;
         });
     },
-    retry() {
-      this.clearRepository();
-      this.recommend();
-    },
     setRepository(repo) {
       this.item_id = repo.item_id;
       this.full_name = repo.full_name;
@@ -206,17 +198,14 @@ export default {
     },
     next() {
       if (!this.item_id) return;
-      
+
       this.nextLoading = true;
       this.error = null;
       axios
         .post("/api/read/" + this.item_id, null, { withCredentials: true })
         .then(() => {
           this.clearRepository();
-          return axios.get("/api/repo" + this.topicPath, { withCredentials: true });
-        })
-        .then((response) => {
-          this.setRepository(response.data);
+          return this.recommend();
         })
         .catch((error) => {
           this.error = error.response?.data?.error || "Failed to fetch next repository.";
@@ -239,21 +228,6 @@ export default {
   line-height: 1.5;
 }
 
-.error-alert {
-  margin: 20px auto;
-  max-width: 600px;
-}
-
-.error-alert__content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.retry-btn {
-  margin-top: 12px;
-}
-
 .markdown-body {
   box-sizing: border-box;
   min-width: 200px;
diff --git a/frontend/src/views/Trending.vue b/frontend/src/views/Trending.vue
index 4fb355e..e0825c3 100644
--- a/frontend/src/views/Trending.vue
+++ b/frontend/src/views/Trending.vue
@@ -1,9 +1,15 @@
 <template>
   <div>
-    <v-container>
+    <v-alert v-if="!loading && error" type="error" variant="tonal">
+      <div class="login-alert__text">
+        {{ error }}
+      </div>
+    </v-alert>
+
+    <v-container v-else>
       <Preloader v-if="loading" />
 
-      <v-list v-else class="repo-list" lines="one">
+      <v-list v-else-if="!error" class="repo-list" lines="one">
         <v-list-item
           v-for="repo in repos"
           :key="repo.id || repo.url || repo.title || repo.full_name"
@@ -97,6 +103,7 @@ export default {
       loading: true,
       repos: [],
       language: "",
+      error: null,
     };
   },
   computed: {
@@ -119,6 +126,8 @@ export default {
   methods: {
     fetchTrending() {
       this.loading = true;
+      this.error = null;
+      this.repos = [];
       
       if (this.isHackerNews) {
         // Fetch Hacker News stories with GitHub repos
@@ -136,10 +145,11 @@ export default {
           .get("/api/trending?" + params.toString(), { withCredentials: true })
           .then((response) => {
             this.repos = response.data;
-            this.loading = false;
           })
           .catch((error) => {
-            console.error("Error fetching trending:", error);
+            this.error = error.response?.data?.error || "Failed to fetch trending repositories.";
+          })
+          .finally(() => {
             this.loading = false;
           });
       }
@@ -149,10 +159,11 @@ export default {
         .get("/api/hackernews", { withCredentials: true })
         .then((response) => {
           this.repos = response.data;
-          this.loading = false;
         })
         .catch((error) => {
-          console.error("Error fetching Hacker News:", error);
+          this.error = error.response?.data?.error || "Failed to fetch Hacker News repositories.";
+        })
+        .finally(() => {
           this.loading = false;
         });
     },
@@ -232,6 +243,11 @@ export default {
 </script>
 
 <style>
+.login-alert__text {
+  white-space: normal;
+  line-height: 1.5;
+}
+
 .repo-list {
   padding: 0;
 }

From 89422d5d81afb008c931b803a40d7f6e7bae6e5f Mon Sep 17 00:00:00 2001
From: Zhenghao Zhang <zhangzhenghao@hotmail.com>
Date: Tue, 28 Apr 2026 22:55:00 +0800
Subject: [PATCH 6/6] fix: enhance pagination responsiveness and adjust visible
 count based on viewport width

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/src/views/Favorites.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Favorites.vue b/frontend/src/views/Favorites.vue
index 5e255cb..ebf468c 100644
--- a/frontend/src/views/Favorites.vue
+++ b/frontend/src/views/Favorites.vue
@@ -30,8 +30,13 @@
           </v-list-item>
         </v-list>
 
-        <div v-if="numPage > 1" class="d-flex justify-center my-4">
-          <v-pagination v-model="currentPage" :length="numPage" :total-visible="7" color="primary" />
+        <div v-if="numPage > 1" class="pagination-wrapper d-flex justify-center my-4">
+          <v-pagination
+            v-model="currentPage"
+            :length="numPage"
+            :total-visible="paginationVisibleCount"
+            color="primary"
+          />
         </div>
       </div>
     </v-container>
@@ -54,12 +59,20 @@ export default {
       currentPage: 1,
       feedbacks: null,
       error: null,
+      viewportWidth: typeof window === "undefined" ? 1024 : window.innerWidth,
     };
   },
   mounted() {
+    window.addEventListener("resize", this.handleResize);
     this.fetchFavorites();
   },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
+  },
   methods: {
+    handleResize() {
+      this.viewportWidth = window.innerWidth;
+    },
     fetchFavorites() {
       this.error = null;
       this.feedbacks = null;
@@ -81,6 +94,15 @@ export default {
     },
   },
   computed: {
+    paginationVisibleCount: function () {
+      if (this.viewportWidth < 420) {
+        return 3;
+      }
+      if (this.viewportWidth < 600) {
+        return 5;
+      }
+      return 7;
+    },
     numPage: function () {
       if (this.feedbacks == null) {
         return 0;
@@ -117,4 +139,9 @@ export default {
   color: #6b7280;
   font-size: 0.875rem;
 }
+
+.pagination-wrapper {
+  max-width: 100%;
+  overflow-x: auto;
+}
 </style>