Update flare-ui/src/app/components/main/main.component.ts

flare-ui/src/app/components/main/main.component.ts

@@ -1,164 +1,189 @@
-import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { AuthService } from '../../services/auth.service';
-import { ActivityLogComponent } from '../activity-log/activity-log.component';
-
-@Component({
-  selector: 'app-main',
-  standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, ActivityLogComponent],
-  template: `
-    <div class="main-layout">
-      <header class="header">
-        <div class="header-content">
-          <h1>Flare Administration</h1>
-          <div class="header-actions">
-            <span class="username">{{ username }}</span>
-            <button class="notification-btn" (click)="toggleActivityLog()">
-              🔔
-              @if (showActivityLog) {
-                <app-activity-log (close)="toggleActivityLog()"></app-activity-log>
-              }
-            </button>
-            <button class="btn btn-secondary" (click)="logout()">Logout</button>
-          </div>
-        </div>
-      </header>
-
-      <nav class="tabs">
-        <a
-          routerLink="/user-info"
-          routerLinkActive="active"
-          class="tab"
-        >
-          User Info
-        </a>
-        <a
-          routerLink="/environment"
-          routerLinkActive="active"
-          class="tab"
-        >
-          Environment
-        </a>
-        <a
-          routerLink="/apis"
-          routerLinkActive="active"
-          class="tab"
-        >
-          APIs
-        </a>
-        <a
-          routerLink="/projects"
-          routerLinkActive="active"
-          class="tab"
-        >
-          Projects
-        </a>
-        <a
-          routerLink="/test"
-          routerLinkActive="active"
-          class="tab"
-        >
-          Test
-        </a>
-      </nav>
-
-      <main class="content">
-        <router-outlet></router-outlet>
-      </main>
-    </div>
-  `,
-  styles: [`
-    .main-layout {
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .header {
-      background-color: #fff;
-      border-bottom: 1px solid #dee2e6;
-      padding: 1rem 0;
-
-      .header-content {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        h1 {
-          font-size: 1.5rem;
-          color: #333;
-          margin: 0;
-        }
-      }
-
-      .header-actions {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-
-        .username {
-          font-weight: 500;
-          color: #495057;
-        }
-
-        .notification-btn {
-          position: relative;
-          background: none;
-          border: none;
-          font-size: 1.25rem;
-          cursor: pointer;
-          padding: 0.25rem;
-
-          &:hover {
-            opacity: 0.7;
-          }
-        }
-      }
-    }
-
-    .tabs {
-      background-color: #fff;
-      border-bottom: 2px solid #dee2e6;
-      max-width: 1200px;
-      width: 100%;
-      margin: 0 auto;
-      padding: 0 20px;
-      display: flex;
-
-      a {
-        text-decoration: none;
-      }
-    }
-
-    .content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 2rem 0;
-
-      > * {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
-      }
-    }
-  `]
-})
-export class MainComponent {
-  private authService = inject(AuthService);
-
-  username = this.authService.getUsername() || '';
-  showActivityLog = false;
-
-  logout() {
-    this.authService.logout();
-  }
-
-  toggleActivityLog() {
-    this.showActivityLog = !this.showActivityLog;
-  }
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+import { ActivityLogComponent } from '../activity-log/activity-log.component';
+
+@Component({
+  selector: 'app-main',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, ActivityLogComponent],
+  template: `
+    <div class="main-layout">
+      <header class="header">
+        <div class="header-content">
+          <h1>Flare Administration</h1>
+          <div class="header-actions">
+            <span class="username">{{ username }}</span>
+            <button class="notification-btn" (click)="toggleActivityLog()">
+              🔔
+              @if (showActivityLog) {
+                <app-activity-log (close)="toggleActivityLog()"></app-activity-log>
+              }
+            </button>
+            <button class="btn btn-secondary" (click)="logout()">Logout</button>
+          </div>
+        </div>
+      </header>
+
+      <nav class="tabs">
+        <a
+          routerLink="/user-info"
+          routerLinkActive="active"
+          class="tab"
+        >
+          User Info
+        </a>
+        <a
+          routerLink="/environment"
+          routerLinkActive="active"
+          class="tab"
+        >
+          Environment
+        </a>
+        <a
+          routerLink="/apis"
+          routerLinkActive="active"
+          class="tab"
+        >
+          APIs
+        </a>
+        <a
+          routerLink="/projects"
+          routerLinkActive="active"
+          class="tab"
+        >
+          Projects
+        </a>
+        <a
+          routerLink="/test"
+          routerLinkActive="active"
+          class="tab"
+        >
+          Test
+        </a>
+      </nav>
+
+      <main class="content">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
+  `,
+styles: [`
+    .main-layout {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
+      background-color: #fff;
+      border-bottom: 1px solid #dee2e6;
+      padding: 1rem 0;
+
+      .header-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h1 {
+          font-size: 1.5rem;
+          color: #333;
+          margin: 0;
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        .username {
+          font-weight: 500;
+          color: #495057;
+        }
+
+        .notification-btn {
+          position: relative;
+          background: none;
+          border: 1px solid #dee2e6;
+          border-radius: 4px;
+          font-size: 1.25rem;
+          cursor: pointer;
+          padding: 0.5rem;
+          transition: all 0.2s;
+          
+          &:hover {
+            background-color: #f8f9fa;
+            border-color: #adb5bd;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      background-color: #fff;
+      border-bottom: 2px solid #dee2e6;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 0 20px;
+      display: flex;
+
+      a {
+        text-decoration: none;
+      }
+      
+      .tab {
+        padding: 0.75rem 1.25rem;
+        cursor: pointer;
+        border: none;
+        background: none;
+        font-weight: 500;
+        color: #6c757d;
+        transition: all 0.3s ease;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -2px;
+
+        &.active {
+          color: #007bff;
+          border-bottom-color: #007bff;
+        }
+
+        &:hover:not(.active) {
+          color: #495057;
+          background-color: #f8f9fa;
+        }
+      }
+    }
+
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 2rem 0;
+
+      > * {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+      }
+    }
+  `]
+})
+export class MainComponent {
+  private authService = inject(AuthService);
+
+  username = this.authService.getUsername() || '';
+  showActivityLog = false;
+
+  logout() {
+    this.authService.logout();
+  }
+
+  toggleActivityLog() {
+    this.showActivityLog = !this.showActivityLog;
+  }
 }