minor fixes

src/app/pages/home/home.component.css

@@ -3,48 +3,6 @@
   background-color: #f5f7fa;
 }
 
-.header {
-  background: white;
-  padding: 20px 40px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header h1 {
-  margin: 0;
-  font-size: 24px;
-  color: #667eea;
-  font-weight: 700;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.username {
-  font-weight: 500;
-  color: #333;
-}
-
-.btn-logout {
-  padding: 8px 20px;
-  background-color: #667eea;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background-color 0.3s;
-}
-
-.btn-logout:hover {
-  background-color: #5568d3;
-}
-
 .content {
   padding: 40px;
   max-width: 1400px;
@@ -57,16 +15,92 @@
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
+  margin-bottom: 30px;
+}
+
+.welcome-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
 .welcome-message h2 {
-  margin: 0 0 15px 0;
+  margin: 0 0 10px 0;
   color: #333;
   font-size: 28px;
 }
 
+.btn-create {
+  padding: 10px 18px;
+  background-color: #10b981;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.btn-create:hover {
+  background-color: #059669;
+}
+
 .welcome-message p {
   margin: 0;
   color: #666;
   font-size: 16px;
 }
+
+/* Projects List */
+.projects-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.loading,
+.error-state {
+  background: white;
+  padding: 30px 24px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.error-state p {
+  color: #c0392b;
+  margin: 0;
+}
+
+.loading p {
+  color: #666;
+  margin: 0;
+}
+
+.no-projects {
+  background: white;
+  padding: 60px 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.no-projects p {
+  margin: 0;
+  color: #95a5a6;
+  font-size: 16px;
+}
+
+.create-link {
+  color: #10b981;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.create-link:hover {
+  color: #059669;
+}

src/app/pages/home/home.component.html

@@ -1,29 +1,27 @@
 <div class="home-container">
-  <header class="header">
-    <h1>Kanban Board</h1>
-    <div class="user-info">
-      @if (authService.currentUser()) {
-        <span class="username">{{ authService.currentUser()?.email }}</span>
-        <button class="btn-logout" (click)="logout()">Logout</button>
-      }
-    </div>
-  </header>
-
   <main class="content">
     <div class="welcome-message">
-      <h2>Welcome, {{ authService.currentUser()?.name }}! 👋</h2>
+      <div class="welcome-header">
+        <h2>Welcome, {{ authService.currentUser()?.name }}! 👋</h2>
+        <button class="btn-create" (click)="onCreateProject()">Create project</button>
+      </div>
     </div>
 
-    <div class="project-list">
-        
-        <ng-template *ngIf="projectList.length > 0; else noProjects">
-            <div class="project-item" *ngFor="let project of projectList">
-                <h3>{{ project.name }}</h3>
-                <p>{{ project.description }}</p>
-            </div>
-        </ng-template>
-        <ng-template #noProjects>
-            <p>You have no projects yet. Create one to get started!</p>
-        </ng-template>
+    <div class="projects-grid">
+      @if (projectList.length > 0) {
+        @for (project of projectList; track project.id) {
+          <app-project-item [project]="project" (projectClick)="onProjectClick($event)" />
+        }
+      } @else {
+        <div class="no-projects">
+          <p>
+            You have no projects.
+            <a class="create-link" href="#" (click)="onCreateProject(); $event.preventDefault()">
+              Create one now
+            </a>
+          </p>
+        </div>
+      }
     </div>
   </main>
+</div>

src/app/pages/home/home.component.ts

@@ -1,23 +1,30 @@
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgIf, NgFor } from '@angular/common';
+import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
-
+import { ProjectItemComponent } from '../../components/project-item/project-item.component';
 import { Project } from '../../models/projects.models';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [CommonModule, NgIf, NgFor],
+  imports: [CommonModule, ProjectItemComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })
 export class HomeComponent {
   protected authService = inject(AuthService);
+  private router = inject(Router);
 
-  protected projectList : Project[] = this.authService.currentUser()?.projects || [];
+  protected get projectList(): Project[] {
+    return this.authService.currentUser()?.projects ?? [];
+  }
 
-  logout() {
-    this.authService.logout().subscribe();
+  onProjectClick(project: Project) {
+    this.router.navigate(['/projects', project.id]);
+  }
+
+  onCreateProject() {
+    this.router.navigate(['/projects/new']);
   }
 }

src/app/pages/login/login.component.ts

@@ -3,23 +3,45 @@ import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { AuthService } from '../../services/auth.service';
+import { catchError, of, throwError } from 'rxjs';
 
 @Component({
   selector: 'app-login',
   standalone: true,
   imports: [FormsModule, CommonModule],
   templateUrl: './login.component.html',
-  styleUrl: './login.component.css'
+  styleUrl: './login.component.css',
 })
 export class LoginComponent implements OnInit {
   private authService = inject(AuthService);
   private router = inject(Router);
 
   ngOnInit() {
-    // If already logged in, redirect to home
     if (this.authService.isAuthenticated()) {
       this.router.navigate(['/']);
+      return;
     }
+
+    this.authService
+      .checkSession()
+      .pipe(
+        catchError((error) => {
+          if (error?.status === 401 || error?.status === 422) {
+            return of(null);
+          }
+          return throwError(() => error);
+        }),
+      )
+      .subscribe({
+        next: (user) => {
+          if (user) {
+            this.router.navigate(['/']);
+          }
+        },
+        error: (error) => {
+          this.errorMessage.set(error?.error?.message || 'Session check failed.');
+        },
+      });
   }
 
   email = '';
@@ -36,25 +58,27 @@ export class LoginComponent implements OnInit {
     this.isLoading.set(true);
     this.errorMessage.set('');
 
-    this.authService.login({
-      email: this.email,
-      password: this.password
-    }).subscribe({
-      next: (response) => {
-        this.isLoading.set(false);
-        if (response.success) {
-          // Redirect to home/dashboard after successful login
-          this.router.navigate(['/']);
-        } else {
-          this.errorMessage.set(response.message || 'Login failed');
-        }
-      },
-      error: (error) => {
-        this.isLoading.set(false);
-        this.errorMessage.set(
-          error.error?.message || 'Login failed. Please check your credentials.'
-        );
-      }
-    });
+    this.authService
+      .login({
+        email: this.email,
+        password: this.password,
+      })
+      .subscribe({
+        next: (response) => {
+          this.isLoading.set(false);
+          if (response.success || response.user) {
+            // Redirect to home/dashboard after successful login
+            this.router.navigate(['/']);
+          } else {
+            this.errorMessage.set(response.message || 'Login failed');
+          }
+        },
+        error: (error) => {
+          this.isLoading.set(false);
+          this.errorMessage.set(
+            error.error?.message || 'Login failed. Please check your credentials.',
+          );
+        },
+      });
   }
 }