From 83f5f774043d87a89fccf99c4c5efe3cb2b5734d Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 15 May 2023 16:11:10 +0800
Subject: [PATCH 01/28] Add up and down arrows to selected lookup repositories

---
 web_src/js/components/DashboardRepoList.vue | 25 +++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 84ee8866181ab..27e4426daae71 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -70,8 +70,8 @@
       </div>
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
-          <li v-for="repo in repos" :key="repo.id">
-            <a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link">
+          <li v-for="repo, index in repos" :key="repo.id">
+            <a class="repo-list-link gt-df gt-ac gt-sb ui attached" :class="{'button primary': index === 0}" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1">
                 <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
                 <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
@@ -255,6 +255,27 @@ const sfc = {
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
       this.$refs.search.focus();
+      this.$refs.search.addEventListener('keydown', (e) => {
+          const firstItems = document.querySelector('#dashboard-repo-list .repo-owner-name-list a');
+          const activeItem = document.querySelector('#dashboard-repo-list .primary');
+          if (activeItem) {
+            switch (e.key) {
+              case 'Enter':
+                activeItem.click();
+                break;
+              case 'ArrowUp':
+                activeItem.classList.remove('button', 'primary');
+                if (activeItem.closest('li').previousSibling.querySelector) activeItem.closest('li').previousSibling.querySelector('a').classList.add('button', 'primary');
+                else firstItems.classList.add('button', 'primary');
+                break;
+              case 'ArrowDown':
+                activeItem.classList.remove('button', 'primary');
+                if (activeItem.closest('li').nextSibling.querySelector) activeItem.closest('li').nextSibling.querySelector('a').classList.add('button', 'primary');
+                else firstItems.classList.add('button', 'primary');
+                break;
+            }
+          }
+        });
     });
 
     this.textArchivedFilterTitles = {

From d602c6c370266ce16c2fc1f59d15d0c968035557 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 15 May 2023 16:35:07 +0800
Subject: [PATCH 02/28] Fix lint problem and add right and left arrow for page
 switch

---
 web_src/js/components/DashboardRepoList.vue | 46 ++++++++++++---------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 27e4426daae71..d349571d57a83 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -256,26 +256,34 @@ const sfc = {
     nextTick(() => {
       this.$refs.search.focus();
       this.$refs.search.addEventListener('keydown', (e) => {
-          const firstItems = document.querySelector('#dashboard-repo-list .repo-owner-name-list a');
-          const activeItem = document.querySelector('#dashboard-repo-list .primary');
-          if (activeItem) {
-            switch (e.key) {
-              case 'Enter':
-                activeItem.click();
-                break;
-              case 'ArrowUp':
-                activeItem.classList.remove('button', 'primary');
-                if (activeItem.closest('li').previousSibling.querySelector) activeItem.closest('li').previousSibling.querySelector('a').classList.add('button', 'primary');
-                else firstItems.classList.add('button', 'primary');
-                break;
-              case 'ArrowDown':
-                activeItem.classList.remove('button', 'primary');
-                if (activeItem.closest('li').nextSibling.querySelector) activeItem.closest('li').nextSibling.querySelector('a').classList.add('button', 'primary');
-                else firstItems.classList.add('button', 'primary');
-                break;
-            }
+        const firstItems = document.querySelector('#dashboard-repo-list .repo-owner-name-list a');
+        const activeItem = document.querySelector('#dashboard-repo-list .primary');
+        const rightPage = document.querySelector('#dashboard-repo-list .octicon-chevron-right');
+        const leftPage = document.querySelector('#dashboard-repo-list .octicon-chevron-left');
+        if (activeItem) {
+          switch (e.key) {
+            case 'Enter':
+              activeItem.click();
+              break;
+            case 'ArrowUp':
+              activeItem.classList.remove('button', 'primary');
+              if (activeItem.closest('li').previousSibling.querySelector) activeItem.closest('li').previousSibling.querySelector('a').classList.add('button', 'primary');
+              else firstItems.classList.add('button', 'primary');
+              break;
+            case 'ArrowDown':
+              activeItem.classList.remove('button', 'primary');
+              if (activeItem.closest('li').nextSibling.querySelector) activeItem.closest('li').nextSibling.querySelector('a').classList.add('button', 'primary');
+              else firstItems.classList.add('button', 'primary');
+              break;
+            case 'ArrowRight':
+              if (rightPage && !rightPage.parentElement.classList.contains('disabled')) rightPage.parentElement.click();
+              break;
+            case 'ArrowLeft':
+              if (leftPage && !leftPage.parentElement.classList.contains('disabled')) leftPage.parentElement.click();
+              break;
           }
-        });
+        }
+      });
     });
 
     this.textArchivedFilterTitles = {

From d04c4fbd0c1bdf29b1d6cc1c8b5e409910d5cf5c Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 15 May 2023 16:50:15 +0800
Subject: [PATCH 03/28] Improve class define

---
 web_src/js/components/DashboardRepoList.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index d349571d57a83..58e1a20babf68 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -251,6 +251,7 @@ const sfc = {
 
   mounted() {
     const el = document.getElementById('dashboard-repo-list');
+    const activeClass = ['button', 'primary'];
     this.changeReposFilter(this.reposFilter);
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
@@ -266,14 +267,14 @@ const sfc = {
               activeItem.click();
               break;
             case 'ArrowUp':
-              activeItem.classList.remove('button', 'primary');
-              if (activeItem.closest('li').previousSibling.querySelector) activeItem.closest('li').previousSibling.querySelector('a').classList.add('button', 'primary');
-              else firstItems.classList.add('button', 'primary');
+              activeItem.classList.remove(...activeClass);
+              if (activeItem.closest('li').previousSibling.querySelector) activeItem.closest('li').previousSibling.querySelector('a').classList.add(...activeClass);
+              else firstItems.classList.add(...activeClass);
               break;
             case 'ArrowDown':
-              activeItem.classList.remove('button', 'primary');
-              if (activeItem.closest('li').nextSibling.querySelector) activeItem.closest('li').nextSibling.querySelector('a').classList.add('button', 'primary');
-              else firstItems.classList.add('button', 'primary');
+              activeItem.classList.remove(...activeClass);
+              if (activeItem.closest('li').nextSibling.querySelector) activeItem.closest('li').nextSibling.querySelector('a').classList.add(...activeClass);
+              else firstItems.classList.add(...activeClass);
               break;
             case 'ArrowRight':
               if (rightPage && !rightPage.parentElement.classList.contains('disabled')) rightPage.parentElement.click();

From fb5143ed0237fd978f8d5e8524e80ac3fd60993b Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 15 May 2023 17:12:10 +0800
Subject: [PATCH 04/28] Improve up and down arrow key if last item to next page

---
 web_src/js/components/DashboardRepoList.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 58e1a20babf68..8af0929cde323 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -257,7 +257,6 @@ const sfc = {
     nextTick(() => {
       this.$refs.search.focus();
       this.$refs.search.addEventListener('keydown', (e) => {
-        const firstItems = document.querySelector('#dashboard-repo-list .repo-owner-name-list a');
         const activeItem = document.querySelector('#dashboard-repo-list .primary');
         const rightPage = document.querySelector('#dashboard-repo-list .octicon-chevron-right');
         const leftPage = document.querySelector('#dashboard-repo-list .octicon-chevron-left');
@@ -267,14 +266,16 @@ const sfc = {
               activeItem.click();
               break;
             case 'ArrowUp':
-              activeItem.classList.remove(...activeClass);
-              if (activeItem.closest('li').previousSibling.querySelector) activeItem.closest('li').previousSibling.querySelector('a').classList.add(...activeClass);
-              else firstItems.classList.add(...activeClass);
+              if (activeItem.closest('li').previousSibling.querySelector) {
+                activeItem.classList.remove(...activeClass);
+                activeItem.closest('li').previousSibling.querySelector('a').classList.add(...activeClass);
+              } else if (leftPage && !leftPage.parentElement.classList.contains('disabled')) leftPage.parentElement.click();
               break;
             case 'ArrowDown':
-              activeItem.classList.remove(...activeClass);
-              if (activeItem.closest('li').nextSibling.querySelector) activeItem.closest('li').nextSibling.querySelector('a').classList.add(...activeClass);
-              else firstItems.classList.add(...activeClass);
+              if (activeItem.closest('li').nextSibling.querySelector) {
+                activeItem.classList.remove(...activeClass);
+                activeItem.closest('li').nextSibling.querySelector('a').classList.add(...activeClass);
+              } else if (rightPage && !rightPage.parentElement.classList.contains('disabled')) rightPage.parentElement.click();
               break;
             case 'ArrowRight':
               if (rightPage && !rightPage.parentElement.classList.contains('disabled')) rightPage.parentElement.click();

From 6b5d183f7b942f601ae947064c1e5637ea57ede3 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Tue, 16 May 2023 09:53:30 +0800
Subject: [PATCH 05/28] Improve up and down arrow function with vuejs

---
 web_src/css/dashboard.css                   |  2 +-
 web_src/js/components/DashboardRepoList.vue | 57 ++++++++++-----------
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 6048c0cdad73a..3a76d01dd0988 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -176,7 +176,7 @@
   display: block;
 }
 
-.feeds .list ul li .repo-list-link .svg {
+.feeds .list ul li .repo-list-link:not(.primary) .svg {
   color: var(--color-text-light-2);
 }
 
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 8af0929cde323..a0dfc9bd38a75 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -71,7 +71,7 @@
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
           <li v-for="repo, index in repos" :key="repo.id">
-            <a class="repo-list-link gt-df gt-ac gt-sb ui attached" :class="{'button primary': index === 0}" :href="repo.link">
+            <a class="repo-list-link gt-df gt-ac gt-sb ui attached" :ref="'repoIndex'+ index" :class="{'button primary': index === repoIndex}" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1">
                 <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
                 <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
@@ -93,14 +93,14 @@
               <svg-icon name="gitea-double-chevron-left" :size="16" class-name="gt-mr-2"/>
             </a>
             <a
-              class="item navigation gt-py-2" :class="{'disabled': page === 1}"
+              class="item navigation gt-py-2" ref="previousPageLink" :class="{'disabled': page === 1}"
               @click="changePage(page - 1)" :title="textPreviousPage"
             >
               <svg-icon name="octicon-chevron-left" :size="16" clsas-name="gt-mr-2"/>
             </a>
             <a class="active item gt-py-2">{{ page }}</a>
             <a
-              class="item navigation" :class="{'disabled': page === finalPage}"
+              class="item navigation" ref="nextPageLink" :class="{'disabled': page === finalPage}"
               @click="changePage(page + 1)" :title="textNextPage"
             >
               <svg-icon name="octicon-chevron-right" :size="16" class-name="gt-ml-2"/>
@@ -217,6 +217,7 @@ const sfc = {
 
       subUrl: appSubUrl,
       ...pageData.dashboardRepoList,
+      repoIndex: 0,
     };
   },
 
@@ -251,39 +252,33 @@ const sfc = {
 
   mounted() {
     const el = document.getElementById('dashboard-repo-list');
-    const activeClass = ['button', 'primary'];
     this.changeReposFilter(this.reposFilter);
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
       this.$refs.search.focus();
       this.$refs.search.addEventListener('keydown', (e) => {
-        const activeItem = document.querySelector('#dashboard-repo-list .primary');
-        const rightPage = document.querySelector('#dashboard-repo-list .octicon-chevron-right');
-        const leftPage = document.querySelector('#dashboard-repo-list .octicon-chevron-left');
-        if (activeItem) {
-          switch (e.key) {
-            case 'Enter':
-              activeItem.click();
-              break;
-            case 'ArrowUp':
-              if (activeItem.closest('li').previousSibling.querySelector) {
-                activeItem.classList.remove(...activeClass);
-                activeItem.closest('li').previousSibling.querySelector('a').classList.add(...activeClass);
-              } else if (leftPage && !leftPage.parentElement.classList.contains('disabled')) leftPage.parentElement.click();
-              break;
-            case 'ArrowDown':
-              if (activeItem.closest('li').nextSibling.querySelector) {
-                activeItem.classList.remove(...activeClass);
-                activeItem.closest('li').nextSibling.querySelector('a').classList.add(...activeClass);
-              } else if (rightPage && !rightPage.parentElement.classList.contains('disabled')) rightPage.parentElement.click();
-              break;
-            case 'ArrowRight':
-              if (rightPage && !rightPage.parentElement.classList.contains('disabled')) rightPage.parentElement.click();
-              break;
-            case 'ArrowLeft':
-              if (leftPage && !leftPage.parentElement.classList.contains('disabled')) leftPage.parentElement.click();
-              break;
-          }
+        const selectedRepo = this.$refs[`repoIndex${this.repoIndex}`];
+        switch (e.key) {
+          case 'Enter':
+            selectedRepo[0].click();
+            break;
+          case 'ArrowUp':
+            if (this.repoIndex > 0) this.repoIndex--;
+            else if (this.$refs.previousPageLink && !this.$refs.previousPageLink.classList.contains('disabled')) this.$refs.previousPageLink.click();
+            break;
+          case 'ArrowDown':
+            if (this.repoIndex < this.repos.length - 1) this.repoIndex++;
+            else if (this.$refs.nextPageLink && this.$refs.nextPageLink.classList && !this.$refs.nextPageLink.classList.contains('disabled')) {
+              this.repoIndex = 0;
+              this.$refs.nextPageLink.click();
+            }
+            break;
+          case 'ArrowRight':
+            if (this.$refs.nextPageLink && !this.$refs.nextPageLink.classList.contains('disabled')) this.$refs.nextPageLink.click();
+            break;
+          case 'ArrowLeft':
+            if (this.$refs.previousPageLink && !this.$refs.previousPageLink.classList.contains('disabled')) this.$refs.previousPageLink.click();
+            break;
         }
       });
     });

From af4c6b24a95d10edb7e38955cefc9b33a50e83f4 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Tue, 16 May 2023 09:55:39 +0800
Subject: [PATCH 06/28] Improve enter key click define

---
 web_src/js/components/DashboardRepoList.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index a0dfc9bd38a75..eeb956c33175c 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -257,10 +257,9 @@ const sfc = {
     nextTick(() => {
       this.$refs.search.focus();
       this.$refs.search.addEventListener('keydown', (e) => {
-        const selectedRepo = this.$refs[`repoIndex${this.repoIndex}`];
         switch (e.key) {
           case 'Enter':
-            selectedRepo[0].click();
+            this.$refs[`repoIndex${this.repoIndex}`][0].click();
             break;
           case 'ArrowUp':
             if (this.repoIndex > 0) this.repoIndex--;

From 9f26fdf00ad793695f6f6a849addfd0528c533b5 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Thu, 18 May 2023 09:42:23 +0800
Subject: [PATCH 07/28] Improve code

---
 web_src/js/components/DashboardRepoList.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index eeb956c33175c..33118a7928d80 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -257,26 +257,28 @@ const sfc = {
     nextTick(() => {
       this.$refs.search.focus();
       this.$refs.search.addEventListener('keydown', (e) => {
+        const previousPageLink = this.$refs.previousPageLink;
+        const nextPageLink = this.$refs.nextPageLink;
         switch (e.key) {
           case 'Enter':
             this.$refs[`repoIndex${this.repoIndex}`][0].click();
             break;
           case 'ArrowUp':
             if (this.repoIndex > 0) this.repoIndex--;
-            else if (this.$refs.previousPageLink && !this.$refs.previousPageLink.classList.contains('disabled')) this.$refs.previousPageLink.click();
+            else if (previousPageLink && !previousPageLink.classList.contains('disabled')) previousPageLink.click();
             break;
           case 'ArrowDown':
             if (this.repoIndex < this.repos.length - 1) this.repoIndex++;
-            else if (this.$refs.nextPageLink && this.$refs.nextPageLink.classList && !this.$refs.nextPageLink.classList.contains('disabled')) {
+            else if (nextPageLink && nextPageLink.classList && !nextPageLink.classList.contains('disabled')) {
               this.repoIndex = 0;
-              this.$refs.nextPageLink.click();
+              nextPageLink.click();
             }
             break;
           case 'ArrowRight':
-            if (this.$refs.nextPageLink && !this.$refs.nextPageLink.classList.contains('disabled')) this.$refs.nextPageLink.click();
+            if (nextPageLink && !nextPageLink.classList.contains('disabled')) nextPageLink.click();
             break;
           case 'ArrowLeft':
-            if (this.$refs.previousPageLink && !this.$refs.previousPageLink.classList.contains('disabled')) this.$refs.previousPageLink.click();
+            if (previousPageLink && !previousPageLink.classList.contains('disabled')) previousPageLink.click();
             break;
         }
       });

From cc9d98b44e80fe38adc5dedfea235a9eb8d35d5c Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Sun, 21 May 2023 11:08:18 +0800
Subject: [PATCH 08/28] Modify of proposed

---
 web_src/css/dashboard.css                   | 11 +++++++-
 web_src/js/components/DashboardRepoList.vue | 28 +++++++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 3a76d01dd0988..7dab497706f8e 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -176,7 +176,7 @@
   display: block;
 }
 
-.feeds .list ul li .repo-list-link:not(.primary) .svg {
+.feeds .list ul li .repo-list-link .svg {
   color: var(--color-text-light-2);
 }
 
@@ -184,6 +184,15 @@
   font-size: 12px;
 }
 
+.feeds .list ul li .repo-list-link.active {
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+
+.feeds .list ul li .repo-list-link.active svg {
+  color: inherit;
+}
+
 .feeds .list #privateFilterCheckbox .svg {
   color: var(--color-grey);
   margin-right: 0.25rem;
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 2acecac4950ac..118f0492c531a 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -71,7 +71,7 @@
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
           <li v-for="repo, index in repos" :key="repo.id">
-            <a class="repo-list-link muted gt-df gt-ac gt-sb ui attached" :ref="'repoIndex'+ index" :class="{'button primary': index === repoIndex}" :href="repo.link">
+            <a class="repo-list-link muted gt-df gt-ac gt-sb" :ref="'activeIndex'+ index" :class="{'active': index === activeIndex}" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1">
                 <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
                 <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
@@ -217,7 +217,7 @@ const sfc = {
 
       subUrl: appSubUrl,
       ...pageData.dashboardRepoList,
-      repoIndex: 0,
+      activeIndex: 0,
     };
   },
 
@@ -261,24 +261,32 @@ const sfc = {
         const nextPageLink = this.$refs.nextPageLink;
         switch (e.key) {
           case 'Enter':
-            this.$refs[`repoIndex${this.repoIndex}`][0].click();
+            this.$refs[`activeIndex${this.activeIndex}`][0].click();
             break;
           case 'ArrowUp':
-            if (this.repoIndex > 0) this.repoIndex--;
-            else if (previousPageLink && !previousPageLink.classList.contains('disabled')) previousPageLink.click();
+            if (this.activeIndex > 0) {
+              this.activeIndex--;
+            } else if (previousPageLink && !previousPageLink.classList.contains('disabled')) {
+              previousPageLink.click();
+            }
             break;
           case 'ArrowDown':
-            if (this.repoIndex < this.repos.length - 1) this.repoIndex++;
-            else if (nextPageLink && nextPageLink.classList && !nextPageLink.classList.contains('disabled')) {
-              this.repoIndex = 0;
+            if (this.activeIndex < this.repos.length - 1) {
+              this.activeIndex++;
+            } else if (nextPageLink && nextPageLink.classList && !nextPageLink.classList.contains('disabled')) {
+              this.activeIndex = 0;
               nextPageLink.click();
             }
             break;
           case 'ArrowRight':
-            if (nextPageLink && !nextPageLink.classList.contains('disabled')) nextPageLink.click();
+            if (nextPageLink && !nextPageLink.classList.contains('disabled')) {
+              nextPageLink.click();
+            }
             break;
           case 'ArrowLeft':
-            if (previousPageLink && !previousPageLink.classList.contains('disabled')) previousPageLink.click();
+            if (previousPageLink && !previousPageLink.classList.contains('disabled')) {
+              previousPageLink.click();
+            }
             break;
         }
       });

From 9c203ec0b86dc7067e3913a53613d5d37325792d Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 22 May 2023 08:48:18 +0800
Subject: [PATCH 09/28] keydown change to Vue define

---
 web_src/js/components/DashboardRepoList.vue | 75 ++++++++++-----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 118f0492c531a..3ff0a3a359f0f 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -17,7 +17,7 @@
       </h4>
       <div class="ui attached segment repos-search">
         <div class="ui fluid right action left icon input" :class="{loading: isLoading}">
-          <input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" :placeholder="textSearchRepos">
+          <input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">
             <i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
@@ -93,14 +93,14 @@
               <svg-icon name="gitea-double-chevron-left" :size="16" class-name="gt-mr-2"/>
             </a>
             <a
-              class="item navigation gt-py-2" ref="previousPageLink" :class="{'disabled': page === 1}"
+              class="item navigation gt-py-2" :class="{'disabled': page === 1}"
               @click="changePage(page - 1)" :title="textPreviousPage"
             >
               <svg-icon name="octicon-chevron-left" :size="16" clsas-name="gt-mr-2"/>
             </a>
             <a class="active item gt-py-2">{{ page }}</a>
             <a
-              class="item navigation" ref="nextPageLink" :class="{'disabled': page === finalPage}"
+              class="item navigation" :class="{'disabled': page === finalPage}"
               @click="changePage(page + 1)" :title="textNextPage"
             >
               <svg-icon name="octicon-chevron-right" :size="16" class-name="gt-ml-2"/>
@@ -256,40 +256,6 @@ const sfc = {
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
       this.$refs.search.focus();
-      this.$refs.search.addEventListener('keydown', (e) => {
-        const previousPageLink = this.$refs.previousPageLink;
-        const nextPageLink = this.$refs.nextPageLink;
-        switch (e.key) {
-          case 'Enter':
-            this.$refs[`activeIndex${this.activeIndex}`][0].click();
-            break;
-          case 'ArrowUp':
-            if (this.activeIndex > 0) {
-              this.activeIndex--;
-            } else if (previousPageLink && !previousPageLink.classList.contains('disabled')) {
-              previousPageLink.click();
-            }
-            break;
-          case 'ArrowDown':
-            if (this.activeIndex < this.repos.length - 1) {
-              this.activeIndex++;
-            } else if (nextPageLink && nextPageLink.classList && !nextPageLink.classList.contains('disabled')) {
-              this.activeIndex = 0;
-              nextPageLink.click();
-            }
-            break;
-          case 'ArrowRight':
-            if (nextPageLink && !nextPageLink.classList.contains('disabled')) {
-              nextPageLink.click();
-            }
-            break;
-          case 'ArrowLeft':
-            if (previousPageLink && !previousPageLink.classList.contains('disabled')) {
-              previousPageLink.click();
-            }
-            break;
-        }
-      });
     });
 
     this.textArchivedFilterTitles = {
@@ -466,7 +432,40 @@ const sfc = {
 
     statusColor(status) {
       return commitStatus[status].color;
-    }
+    },
+
+    reposFilterKeyControl(e) {
+        switch (e.key) {
+          case 'Enter':
+            this.$refs[`activeIndex${this.activeIndex}`][0].click();
+            break;
+          case 'ArrowUp':
+            if (this.activeIndex > 0) {
+              this.activeIndex--;
+            } else if (this.page > 1) {
+              this.changePage(this.page - 1);
+            }
+            break;
+          case 'ArrowDown':
+            if (this.activeIndex < this.repos.length - 1) {
+              this.activeIndex++;
+            } else if (this.page < this.finalPage) {
+              this.activeIndex = 0;
+              this.changePage(this.page + 1);
+            }
+            break;
+          case 'ArrowRight':
+            if (this.page < this.finalPage) {
+              this.changePage(this.page + 1);
+            }
+            break;
+          case 'ArrowLeft':
+            if (this.page > 1) {
+              this.changePage(this.page - 1);
+            }
+            break;
+        }
+      }
   },
 };
 

From 322f3323854f5939b803bbdd04844ae1f7c13f59 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 22 May 2023 09:06:19 +0800
Subject: [PATCH 10/28] Fix tab indent issue

---
 web_src/js/components/DashboardRepoList.vue | 60 ++++++++++-----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 3ff0a3a359f0f..d71a23ec6ab6d 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -435,37 +435,37 @@ const sfc = {
     },
 
     reposFilterKeyControl(e) {
-        switch (e.key) {
-          case 'Enter':
-            this.$refs[`activeIndex${this.activeIndex}`][0].click();
-            break;
-          case 'ArrowUp':
-            if (this.activeIndex > 0) {
-              this.activeIndex--;
-            } else if (this.page > 1) {
-              this.changePage(this.page - 1);
-            }
-            break;
-          case 'ArrowDown':
-            if (this.activeIndex < this.repos.length - 1) {
-              this.activeIndex++;
-            } else if (this.page < this.finalPage) {
-              this.activeIndex = 0;
-              this.changePage(this.page + 1);
-            }
-            break;
-          case 'ArrowRight':
-            if (this.page < this.finalPage) {
-              this.changePage(this.page + 1);
-            }
-            break;
-          case 'ArrowLeft':
-            if (this.page > 1) {
-              this.changePage(this.page - 1);
-            }
-            break;
-        }
+      switch (e.key) {
+        case 'Enter':
+          this.$refs[`activeIndex${this.activeIndex}`][0].click();
+          break;
+        case 'ArrowUp':
+          if (this.activeIndex > 0) {
+            this.activeIndex--;
+          } else if (this.page > 1) {
+            this.changePage(this.page - 1);
+          }
+          break;
+        case 'ArrowDown':
+          if (this.activeIndex < this.repos.length - 1) {
+            this.activeIndex++;
+          } else if (this.page < this.finalPage) {
+            this.activeIndex = 0;
+            this.changePage(this.page + 1);
+          }
+          break;
+        case 'ArrowRight':
+          if (this.page < this.finalPage) {
+            this.changePage(this.page + 1);
+          }
+          break;
+        case 'ArrowLeft':
+          if (this.page > 1) {
+            this.changePage(this.page - 1);
+          }
+          break;
       }
+    }
   },
 };
 

From da32e354f848c4b21fe653c54c55842dfd24d8da Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 22 May 2023 10:45:23 +0800
Subject: [PATCH 11/28] Modify call click to querySelector

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index d71a23ec6ab6d..ea58495ad7f75 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -437,7 +437,7 @@ const sfc = {
     reposFilterKeyControl(e) {
       switch (e.key) {
         case 'Enter':
-          this.$refs[`activeIndex${this.activeIndex}`][0].click();
+          document.querySelector('.repo-list-link.active').click();
           break;
         case 'ArrowUp':
           if (this.activeIndex > 0) {

From fc2bc73e4764f69c0b1efa1319a1a914daf9461e Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 22 May 2023 10:51:51 +0800
Subject: [PATCH 12/28] Remove ref define

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index ea58495ad7f75..e287270682e3c 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -71,7 +71,7 @@
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
           <li v-for="repo, index in repos" :key="repo.id">
-            <a class="repo-list-link muted gt-df gt-ac gt-sb" :ref="'activeIndex'+ index" :class="{'active': index === activeIndex}" :href="repo.link">
+            <a class="repo-list-link muted gt-df gt-ac gt-sb" :class="{'active': index === activeIndex}" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1">
                 <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
                 <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>

From b4f6ceaf6d0106e9211065845b8faff585294b8b Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 24 May 2023 13:05:48 +0800
Subject: [PATCH 13/28] Add ?

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index e287270682e3c..19d7b7473a63e 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -437,7 +437,7 @@ const sfc = {
     reposFilterKeyControl(e) {
       switch (e.key) {
         case 'Enter':
-          document.querySelector('.repo-list-link.active').click();
+          document.querySelector('.repo-list-link.active')?.click();
           break;
         case 'ArrowUp':
           if (this.activeIndex > 0) {

From 6bd2ee7623a49578b30b0c16f5d2051f9c4d3289 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 24 May 2023 13:38:18 +0800
Subject: [PATCH 14/28] Change page to the previous page to select the last
 repository

---
 web_src/js/components/DashboardRepoList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 19d7b7473a63e..dc28df5a0557b 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -444,6 +444,7 @@ const sfc = {
             this.activeIndex--;
           } else if (this.page > 1) {
             this.changePage(this.page - 1);
+            this.activeIndex = this.searchLimit - 1;
           }
           break;
         case 'ArrowDown':

From bc30faf62bd654df7d784d1f23eaa04f61539a7c Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Tue, 30 May 2023 09:30:43 +0800
Subject: [PATCH 15/28] Fix merge css wrong

---
 web_src/css/dashboard.css | 36 ------------------------------------
 1 file changed, 36 deletions(-)

diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 7dab497706f8e..454274ea9c615 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -161,29 +161,6 @@
   display: none !important;
 }
 
-.feeds .list ul {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-}
-
-.feeds .list ul li:not(:last-child) {
-  border-bottom: 1px solid var(--color-secondary);
-}
-
-.feeds .list ul li .repo-list-link {
-  padding: 6px 1em;
-  display: block;
-}
-
-.feeds .list ul li .repo-list-link .svg {
-  color: var(--color-text-light-2);
-}
-
-.feeds .list ul li .repo-list-link .star-num {
-  font-size: 12px;
-}
-
 .feeds .list ul li .repo-list-link.active {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
@@ -192,16 +169,3 @@
 .feeds .list ul li .repo-list-link.active svg {
   color: inherit;
 }
-
-.feeds .list #privateFilterCheckbox .svg {
-  color: var(--color-grey);
-  margin-right: 0.25rem;
-}
-
-.feeds .list .repo-owner-name-list .item-name {
-  min-width: 0;
-}
-
-.feeds .list .repo-owner-name-list .item-name svg {
-  min-width: 16px;
-}

From 8c7df4e2457ce6c6c3622b84679af05ddd80d379 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Tue, 30 May 2023 10:47:51 +0800
Subject: [PATCH 16/28] Fixed the problem that the selection area is not full
 after merged

---
 web_src/css/dashboard.css                   | 4 ++--
 web_src/js/components/DashboardRepoList.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 454274ea9c615..a2b35daed8217 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -161,11 +161,11 @@
   display: none !important;
 }
 
-.feeds .list ul li .repo-list-link.active {
+.feeds .list ul li.active {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
 }
 
-.feeds .list ul li .repo-list-link.active svg {
+.feeds .list ul li.active svg {
   color: inherit;
 }
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 2ccd6d05ba961..5c5e5d8e4409c 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -70,8 +70,8 @@
       </div>
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
-          <li class="gt-df gt-ac" v-for="repo, index in repos" :key="repo.id">
-            <a class="repo-list-link muted gt-df gt-ac gt-f1" :class="{'active': index === activeIndex}" :href="repo.link">
+          <li class="gt-df gt-ac" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
+            <a class="repo-list-link muted gt-df gt-ac gt-f1" :href="repo.link">
               <svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
               <div class="text truncate">{{ repo.full_name }}</div>
               <div v-if="repo.archived">

From 8623e21ce9a69b556f3d929eb82aa7c8b564fdeb Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Tue, 30 May 2023 11:27:22 +0800
Subject: [PATCH 17/28] Move css define to vue file

---
 web_src/css/dashboard.css                   | 9 ---------
 web_src/js/components/DashboardRepoList.vue | 9 +++++++++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index a2b35daed8217..863dc51dbf9d4 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -160,12 +160,3 @@
 .feeds .news:last-of-type .divider {
   display: none !important;
 }
-
-.feeds .list ul li.active {
-  background: var(--color-primary);
-  color: var(--color-primary-contrast);
-}
-
-.feeds .list ul li.active svg {
-  color: inherit;
-}
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 5c5e5d8e4409c..5ef8be33a0606 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -515,4 +515,13 @@ ul li:not(:last-child) {
   margin-left: 1px;
   margin-right: 3px;
 }
+
+.feeds .list ul li.active {
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+
+.feeds .list ul li.active svg {
+  color: inherit;
+}
 </style>

From be77c05252659718edd444d02787dfc136d77d31 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 30 May 2023 22:37:58 +0200
Subject: [PATCH 18/28] fix hover style

---
 web_src/js/components/DashboardRepoList.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 5ef8be33a0606..e6197fd661211 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -516,7 +516,8 @@ ul li:not(:last-child) {
   margin-right: 3px;
 }
 
-.feeds .list ul li.active {
+.feeds .list ul li.active,
+.feeds .list ul li.active a:hover {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
 }

From 46be9c60184f9d8f272c3ec09f61c57ad09d90d6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 30 May 2023 22:39:45 +0200
Subject: [PATCH 19/28] set initial activeIndex to -1 on page load

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index e6197fd661211..250867b2fda71 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -215,7 +215,7 @@ const sfc = {
 
       subUrl: appSubUrl,
       ...pageData.dashboardRepoList,
-      activeIndex: 0,
+      activeIndex: -1, // don't select anything at load, first cursor down will select
     };
   },
 

From ed96e553124b99c70c8337b7e6c579b01b4a8d96 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 30 May 2023 22:43:21 +0200
Subject: [PATCH 20/28] fix commit status icon

---
 web_src/js/components/DashboardRepoList.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 250867b2fda71..6ffcb263ea900 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -517,9 +517,10 @@ ul li:not(:last-child) {
 }
 
 .feeds .list ul li.active,
-.feeds .list ul li.active a:hover {
+.feeds .list ul li.active a:hover,
+.feeds .list ul li.active .commit-status {
   background: var(--color-primary);
-  color: var(--color-primary-contrast);
+  color: var(--color-primary-contrast) !important;
 }
 
 .feeds .list ul li.active svg {

From 6c28d1f9b9551fe69947972eeaabef97daf3a36d Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 31 May 2023 10:19:22 +0800
Subject: [PATCH 21/28] Fix enter key no effect

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 6ffcb263ea900..eed9f7c663b91 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -435,7 +435,7 @@ const sfc = {
     reposFilterKeyControl(e) {
       switch (e.key) {
         case 'Enter':
-          document.querySelector('.repo-list-link.active')?.click();
+          document.querySelector('.repo-owner-name-list li.active a')?.click();
           break;
         case 'ArrowUp':
           if (this.activeIndex > 0) {

From 18b126e67671a5bfea73f4aa2c9e42f3cf2d80d3 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 31 May 2023 12:32:24 +0800
Subject: [PATCH 22/28] Add default case for search result to select first item

---
 web_src/js/components/DashboardRepoList.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index eed9f7c663b91..365f1a1f10490 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -463,6 +463,11 @@ const sfc = {
             this.changePage(this.page - 1);
           }
           break;
+        default:
+          if (this.activeIndex === -1) {
+            this.activeIndex = 0;
+          }
+          break;
       }
     }
   },

From ddb6279ff4372b6b177c0d13e427e95250707c6d Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 31 May 2023 13:48:05 +0800
Subject: [PATCH 23/28] Improve active select for missing item to first

---
 web_src/js/components/DashboardRepoList.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 365f1a1f10490..116c9fed591d5 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -463,11 +463,9 @@ const sfc = {
             this.changePage(this.page - 1);
           }
           break;
-        default:
-          if (this.activeIndex === -1) {
-            this.activeIndex = 0;
-          }
-          break;
+      }
+      if (this.activeIndex === -1 || this.activeIndex > this.repoTypeCount - 1) {
+        this.activeIndex = 0;
       }
     }
   },

From bb08e53c4d9e6ee869008eed7a90025de93b3a0b Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 31 May 2023 14:28:26 +0800
Subject: [PATCH 24/28] Change active item style

---
 web_src/js/components/DashboardRepoList.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 116c9fed591d5..65f8d5e3948f3 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -520,13 +520,15 @@ ul li:not(:last-child) {
 }
 
 .feeds .list ul li.active,
-.feeds .list ul li.active a:hover,
 .feeds .list ul li.active .commit-status {
-  background: var(--color-primary);
-  color: var(--color-primary-contrast) !important;
+  background: var(--color-active);
 }
 
 .feeds .list ul li.active svg {
   color: inherit;
 }
+
+.feeds .list ul li.active .octicon-check {
+  background: transparent;
+}
 </style>

From 40d02486227aa4e2b143a1909e4c6e3eaece9c5d Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 31 May 2023 15:25:28 +0800
Subject: [PATCH 25/28] Remove left icon style define

---
 web_src/js/components/DashboardRepoList.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 65f8d5e3948f3..1c127b3dbafa3 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -524,10 +524,6 @@ ul li:not(:last-child) {
   background: var(--color-active);
 }
 
-.feeds .list ul li.active svg {
-  color: inherit;
-}
-
 .feeds .list ul li.active .octicon-check {
   background: transparent;
 }

From d57672860d08fceece07cead8f8c7f68687b2f1c Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Wed, 31 May 2023 15:36:49 +0800
Subject: [PATCH 26/28] Fix goto previous page to first issue

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 1c127b3dbafa3..fdbfaac948ef2 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -464,7 +464,7 @@ const sfc = {
           }
           break;
       }
-      if (this.activeIndex === -1 || this.activeIndex > this.repoTypeCount - 1) {
+      if (this.activeIndex === -1 || (this.repoTypeCount > 0 && this.activeIndex > this.repoTypeCount - 1)) {
         this.activeIndex = 0;
       }
     }

From 34c55ab35e30855942b1269b4edfdfc9de674c4a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 31 May 2023 23:53:27 +0200
Subject: [PATCH 27/28] new style

---
 web_src/js/components/DashboardRepoList.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index fdbfaac948ef2..f057939b04857 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -519,12 +519,7 @@ ul li:not(:last-child) {
   margin-right: 3px;
 }
 
-.feeds .list ul li.active,
-.feeds .list ul li.active .commit-status {
-  background: var(--color-active);
-}
-
-.feeds .list ul li.active .octicon-check {
-  background: transparent;
+.repo-owner-name-list li.active {
+  background: var(--color-hover);
 }
 </style>

From e424f76f9d57b38daab7a878732f16d3e4ca347e Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Thu, 1 Jun 2023 13:39:40 +0800
Subject: [PATCH 28/28] Fix get repo count issue

---
 web_src/js/components/DashboardRepoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index f057939b04857..ee7d805e77a3b 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -464,7 +464,7 @@ const sfc = {
           }
           break;
       }
-      if (this.activeIndex === -1 || (this.repoTypeCount > 0 && this.activeIndex > this.repoTypeCount - 1)) {
+      if (this.activeIndex === -1 || this.activeIndex > this.repos.length - 1) {
         this.activeIndex = 0;
       }
     }