placeholder goost sheets create button

src/app/app.component.html

@@ -334,3 +334,7 @@
 
 
 <router-outlet />
+
+<div *ngIf="isAuthenticated">
+  <button (click)="createSheet()">Create Google Sheet</button>
+</div>

src/app/app.component.ts

@@ -1,13 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterOutlet, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+import { AuthService } from './auth.service';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [
+    RouterOutlet,
+    CommonModule
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'jedi-archive-frontend';
+  isAuthenticated = false;
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  ngOnInit(): void {
+    this.isAuthenticated = !!localStorage.getItem('token');
+  }
+
+  createSheet() {
+    this.authService.createSheet('My New Sheet').subscribe(
+      res => {
+        console.log('Sheet created with ID:', res.sheetId);
+        alert('Sheet created with ID: ' + res.sheetId);
+      },
+      err => console.error(err)
+    );
+  }
+
 }

src/app/auth.service.ts

@@ -1,6 +1,6 @@
 // src/app/auth.service.ts
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 @Injectable({
@@ -26,4 +26,10 @@ export class AuthService {
   handleGoogleCallback(code: string): Observable<any> {
     return this.http.get<any>(`${this.apiUrl}/google/callback?code=${code}`);
   }
+
+  createSheet(title: string): Observable<any> {
+    const token = localStorage.getItem('token');
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
+    return this.http.post<any>(`${this.apiUrl}/create-sheet`, { title }, { headers });
+  }
 }