feat: Enhance header component with alert navigation and styling improvements

Author: stephanebouget

src/app/shared/components/alerts-list/alerts-list.component.scss

@@ -51,6 +51,7 @@ $border-color: #2a2a4a;
     align-items: center;
     justify-content: center;
     gap: 8px;
+    margin-top: 10px;
     color: $text-secondary;
 
     .spinning {

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

@@ -1,5 +1,5 @@
 <div class="header">
-  <div class="header-left">
+  <div class="header-left" (click)="showAlerts()" style="cursor: pointer;">
     <span class="logo">🔒</span>
     <span class="title">GitHub Alerts</span>
   </div>

src/app/shared/components/header/header.component.scss

@@ -19,7 +19,9 @@ $border-color: #2a2a4a;
   .header-left {
     display: flex;
     align-items: center;
+    cursor: pointer;
     gap: 8px;
+    -webkit-app-region: no-drag;
 
     .logo {
       font-size: 18px;

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

@@ -20,6 +20,10 @@ export class HeaderComponent {
     this.refresh.emit();
   }
 
+  showAlerts(): void {
+    this.viewChange.emit('alerts');
+  }
+
   showRepos(): void {
     this.viewChange.emit('repos');
   }