Terraform and layout optimizations

README.md

@@ -29,11 +29,11 @@ to store the to-do list items.
 
 ## Explore the app's codebase
 
-- In `src/environments/environments.ts`, you can find important configuration values:
+- In `src/bootstrap.js`, you can find important configuration values:
 
   - Within `firebase`, find the values needed to connect your app to Firebase
     (most importantly `apiKey`, `projectId`, and `appId`).
-  - Find your Gemini API key (`gemini_api_key`).
+  - Find your Gemini API key (`geminiApiKey`).
 
   Note that if you
   [run the sample app in IDX](https://github.com/FirebaseExtended/make-it-so-angular/main/README.md#set-up-and-run-the-app),
@@ -105,12 +105,12 @@ to complete some manual setup steps.
     c. Create a new Firebase web app in your new project.
     You can skip setting up Firebase Hosting.
     d. Copy your Firebase config object, and replace the placeholder values in the
-    `src/environments/environments.ts` file of the sample app.
+    `src/bootstrap.js` file of the sample app.
 
 2.  Set up the Gemini API:
     a. [Get a Gemini API key](https://aistudio.google.com/app/apikey) in Google AI Studio.
     Use the Firebase project you just created.
-    b. Add your Gemini API key into the `src/environments/environments.ts` file of the sample app.
+    b. Add your Gemini API key into the `src/bootstrap.js` file of the sample app.
 
 3.  Run `npm install` to install the app's dependencies.
 
@@ -173,7 +173,7 @@ your Firebase project (as described below).
         view and delete your Gemini API key.
       - In the sample app's codebase, delete references to the Gemini API key in the following places:
         - `google_apikeys_key` resource entry in `main.tf`
-        - `gemini_api_key` in both `src/environments/environments.ts` and `src/environments/environments.ts.tmpl`
+        - `geminiApiKey` in both `src/bootstrap.js` and `src/bootstrap.js.tmpl`
 
     - If you're no longer using the Google AI Gemini API, then disable it in your project
       and delete references to it in your sample app's codebase:

angular.json

@@ -34,7 +34,12 @@
               }
             ],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [
+              {
+                "input": "src/bootstrap.js",
+                "inject": false
+              }
+            ]
           },
           "configurations": {
             "production": {

idx-template.json

@@ -14,6 +14,12 @@
             "name": "Firebase Project ID",
             "type": "string",
             "required": true
+        },
+        {
+            "id": "bootstrapJs",
+            "name": "Sample App Bootstrap",
+            "type": "string",
+            "required": false
         }
     ]
 }

idx-template.nix

@@ -1,12 +1,18 @@
-{ pkgs, projectId, ... }:
+{ pkgs, projectId, bootstrapJs, ... }:
 {
   bootstrap = ''
     cp -rf ${./.} "$out/"
     chmod -R +w "$out"
-
+    echo 'bootstrapJs was set to: ${bootstrapJs}'
     # Apply project ID to configs
-    sed -e 's/<project-id>/${projectId}/' ${.idx/dev.nix} > "$out/.idx/dev.nix"
-
+    if [ -z '${bootstrapJs}' ] || [ '${bootstrapJs}' = 'false' ]
+    then
+      sed -e 's/<project-id>/${projectId}/' ${.idx/dev.nix} > "$out/.idx/dev.nix"
+    else
+      sed -e 's/<project-id>/${projectId}/' ${.idx/dev.nix} | sed -e 's/terraform init/# terraform init/' | sed -e 's/terraform apply/# terraform apply/' > "$out/.idx/dev.nix"
+      echo '${bootstrapJs}' > "$out/src/bootstrap.js"
+      echo '{"projects":{"default":"${projectId}"}}' > "$out/.firebaserc"
+    fi
     # Remove the template files themselves and any connection to the template's
     # Git repository
     rm -rf "$out/.git" "$out/idx-template".{nix,json} "$out/node_modules"

main.tf

@@ -71,7 +71,7 @@ resource "google_apikeys_key" "generativelanguage" {
   project = var.project
 
   name         = "gemini-api-key"
-  display_name = "Gemini API Key"
+  display_name = "Generative language Gemini API Key"
 
   restrictions {
     api_targets {
@@ -118,7 +118,7 @@ resource "google_firebaserules_release" "firestore" {
 resource "google_firebase_web_app" "example" {
   project = var.project
 
-  display_name = "Make It So AI!"
+  display_name = "Sample Firebase AI App"
 }
 
 data "google_firebase_web_app_config" "example" {
@@ -144,13 +144,13 @@ resource "local_file" "firebaserc" {
 }
 
 resource "local_file" "environment_ts" {
-  content = templatefile("${path.module}/src/environments/environments.ts.tmpl", merge(
+  content = templatefile("${path.module}/src/bootstrap.js.tmpl", merge(
     data.google_firebase_web_app_config.example,
     {
       project_id     = data.google_project.project.project_id,
       gemini_api_key = google_apikeys_key.generativelanguage.key_string,
       debug_token    = "" # Use local.uuid4 in when using Vertex AI in Firebase
     }
   ))
-  filename = "${path.module}/src/environments/environments.ts"
+  filename = "${path.module}/src/bootstrap.js"
 }

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@google/generative-ai": "^0.19.0",
+    "backoff-rxjs": "^7.0.0",
     "firebase": "^10.13.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app.component.html

@@ -1,5 +1,5 @@
 <!--
- Copyright 2024 Google LLC
+ Copyright 2025 Google LLC
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
@@ -16,19 +16,29 @@
 <div class="site-layout h-screen overflow-scroll">
   <div class="w-full py-4 flex flex-col lg:px-12 mb-8">
     <!-- Icon and Title Section -->
-    <div class="flex items-center p-8 pl-[10%] justify-start">
+    @if (viewCodeLink) {
+    <div
+      class="w-full mr-8 flex items-center justify-center ">
+      <div class="pl-[10%] pr-[10%] banner font-light flex flex-col sm:flex-row items-center">
+        <img src="assets/link.svg" class="link">
+        <span>{{viewCodeMessage}}</span>
+        <a mat-button class="m-1" [href]="viewCodeLink" target="_blank" rel="noopener">Create Workspace</a>
+      </div>
+    </div>
+    }
+    <div class="flex items-center p-6 pb-0 pl-[10%] justify-start">
       <img
-        src="../assets/Spark_Gradient.png"
+        src="../assets/gemini_logo.svg"
         alt="Icon"
         class="w-12 h-12 mr-4"
       />
-      <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
+      <h1 class="text-2xl md:text-3xl">
         Planning with the Gemini API
       </h1>
     </div>
 
     <div
-      class="w-full p-4 flex flex-col lg:items-start lg:flex-row lg:gap-6 justify-between items-center mx-auto"
+      class="w-full p-4 py-0 flex flex-col lg:items-start lg:flex-row lg:gap-6 justify-between items-center mx-auto"
     >
       <!-- Task Generation -->
       <div
@@ -37,7 +47,7 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
         <div class="flex-grow flex flex-col justify-between overflow-scroll">
           <div>
             <!-- Checkbox Images Section -->
-            <div class="w-[90%] flex gap-12 justify-center mx-auto">
+            <div class="w-full flex gap-12 mb-4 p-4 justify-center mx-auto">
               <app-checkboximage
                 #location
                 [src]="'/assets/location.png'"
@@ -55,7 +65,7 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
             <!-- Prompt Input Section -->
             <form>
               <div class="w-full flex flex-col justify-between gap-4 mb-4 p-4 lg:flex-row xl:flex-row">
-                <mat-form-field class="w-11/12 mb-8" appearance="outline">
+                <mat-form-field class="w-full mb-8" appearance="outline">
                   <mat-label>Add a prompt</mat-label>
                   <textarea
                     [formControl]="formControls.prompt"
@@ -80,15 +90,15 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
                 </mat-form-field>
                 <button
                 mat-button
-                class="mt-6 flex items-center gap-2 pr-4"
+                class="mt-6 flex items-center gap-2 pr-4 with-bg"
                 (click)="onGoClick()"
                 [disabled]="!formControls.prompt.value"
               >
                 <span class="flex items-center">
                   <img
                     src="../assets/spark_icon_24.svg"
                     alt="Gemini Icon"
-                    class="w-6 h-6"
+                    class="w-12 h-6"
                   />
                   <span class="p-2">Go</span>
                 </span>
@@ -118,8 +128,8 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
           <div class="flex flex-row gap-4 w-full justify-end">
             <button
               mat-button
-              [disabled]="!generatedTask"
-              class="w-36 text-md"
+              [disabled]="!generatedTask || !(firestoreReady | async)"
+              class="w-36 text-md with-bg"
               (click)="onSave()"
             >
               Save

src/app/app.component.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024 Google LLC
+ * Copyright 2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,11 +21,29 @@
 }
 
 .mat-mdc-button {
-  background-color: #bbdefb;
+  --mdc-text-button-label-text-color: #0B57D0;
   height: 48px;
-  border-radius: 0.75rem
+  border-radius: 0.75rem;
+}
+
+.with-bg {
+  --mdc-text-button-label-text-color: 181C20;
+  background-color: #bbdefb;
 }
 
 ::ng-deep .mdc-notched-outline__notch {
   border-right: none;
 }
+
+.banner {
+  border-radius: 24px;
+  border-color: #0B57D0;
+  border-width: 1px;
+  font-family: 'Google Sans Text';
+  font-size: 14px;
+}
+
+.link {
+  float:left;
+  margin: 12px;
+}

src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024 Google LLC
+ * Copyright 2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

src/app/app.component.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024 Google LLC
+ * Copyright 2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -41,6 +41,7 @@ import { TaskComponent } from './task.component';
 import { CheckboximageComponent } from './checkboximage.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ChangeDetectionStrategy } from '@angular/core';
+import { environment } from '../environments/environments';
 
 const HELP_ME_CLEAN = 'You are an organization expert transforming this place to be enjoyed by a child and a toddler who love superheroes';
 const HELP_ME_PLAN = 'You are a travel expert planning a trip here for 5 people including one toddler and my mom who is turning 50.';
@@ -80,9 +81,13 @@ export class AppComponent {
       validators: Validators.required,
     }),
   };
+  readonly viewCodeLink = environment.viewCodeLink;
+  readonly viewCodeMessage = environment.viewCodeMessage;
+
   isLoading = signal(false);
   tasks: TaskWithSubtasks[] = [];
   generatedTask?: TaskWithSubtasks;
+  firestoreReady: Observable<boolean>;
 
   @ViewChild('location') locationImage! : CheckboximageComponent;
   @ViewChild('room') roomImage! : CheckboximageComponent;
@@ -93,11 +98,12 @@ export class AppComponent {
   constructor(
     public taskService: TaskService,
     private cdr: ChangeDetectorRef,
-  ) {}
+  ) {
+    this.firestoreReady = this.taskService.firestoreReady;
+  }
 
   ngOnInit(): void {
     this.loadTasks().subscribe();
-    this.onGoClick() // Generate the first task
   }
 
   async ngAfterViewInit() {

src/app/app.config.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024 Google LLC
+ * Copyright 2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

src/app/services/task.service.spec.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024 Google LLC
+ * Copyright 2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.