From f41f3f6416745cf978591c20a33e784f2f3b316e Mon Sep 17 00:00:00 2001
From: SAN-MUYUN <e1121291@u.nus.edu>
Date: Fri, 1 Aug 2025 02:23:41 +0800
Subject: [PATCH 1/4] Implement backend to remove repo from local storage

---
 src/app/shared/layout/header.component.css  | 21 +++++++++++++++++++++
 src/app/shared/layout/header.component.html |  1 +
 src/app/shared/layout/header.component.ts   |  7 +++++++
 3 files changed, 29 insertions(+)

diff --git a/src/app/shared/layout/header.component.css b/src/app/shared/layout/header.component.css
index ec8c0591..45de3476 100644
--- a/src/app/shared/layout/header.component.css
+++ b/src/app/shared/layout/header.component.css
@@ -53,3 +53,24 @@
     align-items: center;
   }
 }
+
+.repo-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.remove-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  border: none;
+  background-color: #f44336;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 16px;
+  cursor: pointer;
+  z-index: 1;
+}
diff --git a/src/app/shared/layout/header.component.html b/src/app/shared/layout/header.component.html
index 5811a4a0..7d16b3b8 100644
--- a/src/app/shared/layout/header.component.html
+++ b/src/app/shared/layout/header.component.html
@@ -46,6 +46,7 @@
           <div *ngFor="let repo of this.repoUrlCacheService.suggestions">
             <button mat-menu-item *ngIf="repo !== this.currentRepo" (click)="this.applyRepoDropdown(repo, true)">
               {{ repo }}
+              <span class="remove-btn" (click)="this.removeRepo(repo, $event)">✕</span>
             </button>
           </div>
         </div>
diff --git a/src/app/shared/layout/header.component.ts b/src/app/shared/layout/header.component.ts
index d8a60e07..28865cc4 100644
--- a/src/app/shared/layout/header.component.ts
+++ b/src/app/shared/layout/header.component.ts
@@ -302,4 +302,11 @@ export class HeaderComponent implements OnInit {
       }
     });
   }
+
+  removeRepo(repo: string, event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    console.log('removing repo');
+    this.repoUrlCacheService.removeFromSuggestions(repo);
+  }
 }

From 0087ac4c976c4da00437e30bbabd05da4dcd333a Mon Sep 17 00:00:00 2001
From: SAN-MUYUN <e1121291@u.nus.edu>
Date: Sun, 3 Aug 2025 18:04:12 +0800
Subject: [PATCH 2/4] Update CSS of the remove button

---
 src/app/shared/layout/header.component.css  | 29 ++++++++++++---------
 src/app/shared/layout/header.component.html |  4 +--
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/app/shared/layout/header.component.css b/src/app/shared/layout/header.component.css
index 45de3476..eb70a356 100644
--- a/src/app/shared/layout/header.component.css
+++ b/src/app/shared/layout/header.component.css
@@ -54,23 +54,26 @@
   }
 }
 
-.repo-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
 .remove-btn {
   position: absolute;
-  top: 2px;
+  top: 50%;
   right: 2px;
+  transform: translateY(-50%);
   border: none;
-  background-color: #f44336;
-  color: white;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  font-size: 12px;
-  line-height: 16px;
+  color: lightgray;
+  width: 28px;
+  height: 28px;
+  font-size: 28px;
+  line-height: 28px;
   cursor: pointer;
   z-index: 1;
+  display: none;
+}
+
+.remove-btn:hover {
+  color: red;
+}
+
+button.mat-menu-item:hover .remove-btn {
+  display: inline-block;
 }
diff --git a/src/app/shared/layout/header.component.html b/src/app/shared/layout/header.component.html
index 7d16b3b8..4d4ba522 100644
--- a/src/app/shared/layout/header.component.html
+++ b/src/app/shared/layout/header.component.html
@@ -45,8 +45,8 @@
         <div class="repo-options">
           <div *ngFor="let repo of this.repoUrlCacheService.suggestions">
             <button mat-menu-item *ngIf="repo !== this.currentRepo" (click)="this.applyRepoDropdown(repo, true)">
-              {{ repo }}
-              <span class="remove-btn" (click)="this.removeRepo(repo, $event)">✕</span>
+              <span>{{ repo }}</span>
+              <mat-icon class="remove-btn" (click)="this.removeRepo(repo, $event)">close</mat-icon>
             </button>
           </div>
         </div>

From 8169295944eb68e470fee328608a5d8db5e73255 Mon Sep 17 00:00:00 2001
From: SAN-MUYUN <e1121291@u.nus.edu>
Date: Sun, 3 Aug 2025 18:46:12 +0800
Subject: [PATCH 3/4] Adjust remove button and repo text css to prevent overlap

---
 src/app/shared/layout/header.component.css  | 10 ++++++----
 src/app/shared/layout/header.component.html |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/shared/layout/header.component.css b/src/app/shared/layout/header.component.css
index eb70a356..e0e4e37a 100644
--- a/src/app/shared/layout/header.component.css
+++ b/src/app/shared/layout/header.component.css
@@ -54,19 +54,21 @@
   }
 }
 
+.repo-button-text {
+  margin-right: 32px;
+}
+
 .remove-btn {
   position: absolute;
-  top: 50%;
   right: 2px;
-  transform: translateY(-50%);
+  inset-block: 0;
+  margin-block: auto;
   border: none;
   color: lightgray;
   width: 28px;
   height: 28px;
   font-size: 28px;
   line-height: 28px;
-  cursor: pointer;
-  z-index: 1;
   display: none;
 }
 
diff --git a/src/app/shared/layout/header.component.html b/src/app/shared/layout/header.component.html
index 4d4ba522..950f31eb 100644
--- a/src/app/shared/layout/header.component.html
+++ b/src/app/shared/layout/header.component.html
@@ -45,7 +45,7 @@
         <div class="repo-options">
           <div *ngFor="let repo of this.repoUrlCacheService.suggestions">
             <button mat-menu-item *ngIf="repo !== this.currentRepo" (click)="this.applyRepoDropdown(repo, true)">
-              <span>{{ repo }}</span>
+              <span class="repo-button-text">{{ repo }}</span>
               <mat-icon class="remove-btn" (click)="this.removeRepo(repo, $event)">close</mat-icon>
             </button>
           </div>

From f79f10279528b8912e576116d194470ed44fb288 Mon Sep 17 00:00:00 2001
From: SAN-MUYUN <e1121291@u.nus.edu>
Date: Sun, 3 Aug 2025 19:29:50 +0800
Subject: [PATCH 4/4] Update documentation

---
 src/app/shared/layout/header.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/layout/header.component.ts b/src/app/shared/layout/header.component.ts
index 28865cc4..5c37b342 100644
--- a/src/app/shared/layout/header.component.ts
+++ b/src/app/shared/layout/header.component.ts
@@ -303,10 +303,13 @@ export class HeaderComponent implements OnInit {
     });
   }
 
+  /**
+   * Removes the repo from the list of suggestions.
+   * This method will update the local storage as well.
+   */
   removeRepo(repo: string, event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
-    console.log('removing repo');
     this.repoUrlCacheService.removeFromSuggestions(repo);
   }
 }