Implement button that removes repo from suggestion list

src/app/shared/layout/header.component.css

@@ -53,3 +53,29 @@
     align-items: center;
   }
 }
+
+.repo-button-text {
+  margin-right: 32px;
+}
+
+.remove-btn {
+  position: absolute;
+  right: 2px;
+  inset-block: 0;
+  margin-block: auto;
+  border: none;
+  color: lightgray;
+  width: 28px;
+  height: 28px;
+  font-size: 28px;
+  line-height: 28px;
+  display: none;
+}
+
+.remove-btn:hover {
+  color: red;
+}
+
+button.mat-menu-item:hover .remove-btn {
+  display: inline-block;
+}

src/app/shared/layout/header.component.html

@@ -45,7 +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="repo-button-text">{{ repo }}</span>
+              <mat-icon class="remove-btn" (click)="this.removeRepo(repo, $event)">close</mat-icon>
             </button>
           </div>
         </div>

src/app/shared/layout/header.component.ts

@@ -302,4 +302,14 @@ 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();
+    this.repoUrlCacheService.removeFromSuggestions(repo);
+  }
 }