feat: hello-furniture starter app

[Mukamik]

No description provided.

[gemini-code-assist]

Hello @Mukamik, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

Hello team, gemini-code-assist here to provide a summary of this pull request. This PR, authored by Mukamik, introduces the initial setup for a new Angular application named 'tour-of-furniture'. Based on the title and the files included, the primary goal is to create a standard Angular starter project structure, likely as a foundation for a new feature or tutorial.

Highlights

• New Angular Project Initialization: This PR adds all the necessary files and configurations to set up a basic Angular application using the Angular CLI, including project structure, build configurations, and initial component files.
• Development Environment Configuration: Configuration files for common development tools like EditorConfig and VS Code launch/task settings are included to ensure consistent formatting and ease of development setup.
• Dependency and Script Setup: The package.json file is added, defining the core Angular dependencies, development dependencies (like the CLI, testing frameworks), and standard npm scripts for serving, building, and testing the application.

Changelog

Click here to see the changelog

• tour-of-furniture/.editorconfig
  • Adds standard EditorConfig rules for consistent code style (indentation, charset, trailing whitespace, TS quotes, MD line length).
• tour-of-furniture/.gitignore
  • Adds standard Git ignore rules for common build artifacts, dependencies, and IDE files.
• tour-of-furniture/.vscode/extensions.json
  • Recommends the Angular Language Service extension for VS Code.
• tour-of-furniture/.vscode/launch.json
  • Configures VS Code launch settings for 'ng serve' and 'ng test'.
• tour-of-furniture/.vscode/tasks.json
  • Configures VS Code tasks for 'npm start' and 'npm test'.
• tour-of-furniture/README.md
  • Adds the default Angular CLI README with instructions for development, building, and testing.
• tour-of-furniture/angular.json
  • Configures the Angular project settings, including build options, serve configurations, i18n extraction, and test setup using Karma. Sets default style language to SCSS.
• tour-of-furniture/package.json
  • Adds project dependencies and dev dependencies for Angular and related tools.
  • Defines standard npm scripts for common development tasks.
• tour-of-furniture/src/app/app.component.html
  • Adds the default Angular welcome template HTML, including an Angular logo, welcome message, links to resources, and social media icons.
  • Includes the <router-outlet /> for routing.
• tour-of-furniture/src/app/app.component.spec.ts
  • Adds basic unit tests for the root AppComponent using Jasmine and Karma.
• tour-of-furniture/src/app/app.component.ts
  • Defines the root AppComponent as a standalone component.
  • Sets the selector, template URL, style URL, and includes RouterOutlet in imports.
  • Initializes the title property.
• tour-of-furniture/src/app/app.config.ts
  • Configures the application using bootstrapApplication.
  • Provides zone change detection and router setup.
• tour-of-furniture/src/app/app.routes.ts
  • Defines the application's routing configuration (initially empty).
• tour-of-furniture/src/index.html
  • Adds the main HTML file structure for the application, including meta tags, title, base href, favicon link, and the root component tag.
• tour-of-furniture/src/main.ts
  • Adds the application entry point, bootstrapping the AppComponent.
• tour-of-furniture/src/styles.scss
  • Adds an empty global SCSS file with a comment.
• tour-of-furniture/tsconfig.app.json
  • Adds TypeScript configuration specific to the application build.
• tour-of-furniture/tsconfig.json
  • Adds base TypeScript configuration for the project, including strict mode options and compiler targets.
• tour-of-furniture/tsconfig.spec.json
  • Adds TypeScript configuration specific to the test build, including Jasmine types.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

New project starts now,
Angular structure takes its form,
Code awaits its shape.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This PR successfully initializes the 'hello-furniture' Angular application, setting up the basic project structure, configurations, and a default landing page. The use of recent Angular versions and features like standalone components (intended) and SCSS is a good foundation.

Style Guide Adherence:
The code generally adheres to the provided team style guide:

• String Literal Quoting (Rule #5, Lines 76-88 in the style guide): Single quotes are correctly used for strings in TypeScript files (e.g., app.component.ts, app.component.spec.ts). This is also reinforced by the .editorconfig which specifies quote_type = single for *.ts files.
• Other team style guide rules (Variable Declarations, Arrow Function Syntax, Function Definition Preference, Type vs. Interface Usage) had limited direct applicability in the new boilerplate code, but no violations were observed.

I've identified a few important issues concerning AppComponent's configuration and styling that should be addressed to ensure correctness and maintainability. These are detailed in the specific review comments.

Summary of Findings

• AppComponent not standalone: AppComponent is bootstrapped with bootstrapApplication but is missing standalone: true in its @Component decorator. This is critical for the application's standalone architecture.
• Incorrect style placement for AppComponent: Styles for AppComponent are in an inline <style> tag in app.component.html instead of the linked app.component.scss file. This is critical for maintainability and Angular best practices.
• Undefined CSS variable --inter-font: The CSS variable --inter-font is used in app.component.html for .pill styles but is not defined, potentially leading to incorrect font rendering. This is a medium severity issue.

Merge Readiness

This pull request lays the groundwork for the 'hello-furniture' application. However, there are critical issues identified concerning the AppComponent's standalone configuration and style encapsulation, as well as a medium severity issue with an undefined CSS variable. These issues should be addressed before merging to ensure the application functions correctly, is maintainable, and adheres to Angular best practices.

As a reviewer, I am not authorized to approve pull requests. Once the suggested changes are made, the PR should be re-reviewed for final approval.

[gemini-code-assist]

The AppComponent is bootstrapped using bootstrapApplication in main.ts. This requires AppComponent to be a standalone component. However, the standalone: true property is missing from the @Component decorator.

Could you please add standalone: true to the decorator to correctly mark this component as standalone? This is crucial for the application to work as intended with the standalone architecture.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

[gemini-code-assist]

The AppComponent is configured with styleUrl: './app.component.scss' in its TypeScript file, indicating that its styles should reside in app.component.scss. However, a large <style> block (lines 10-178) is currently embedded directly within this HTML template. The app.component.scss file itself is empty.

According to Angular best practices (specifically, aligning with the principle of Style 05-20: Component Structure from the Angular Style Guide, which advises separating HTML, CSS, and TypeScript logic into their own files unless the component is very small), these styles should be moved to the app.component.scss file. This component's style block is quite substantial (~170 lines), making separation beneficial for:

• Maintainability: Keeping template, styles, and logic separate.
• SCSS Capabilities: Allowing the use of SCSS features like variables, mixins, and nesting in the dedicated .scss file.

Could you move the CSS rules from this <style> block into app.component.scss and then remove the entire <style>...</style> block (lines 10-178) from this HTML file?

[gemini-code-assist]

The CSS variable --inter-font is used here for the .pill class's font-family. However, this variable does not appear to be defined within this component's <style> block (lines 11-177) or in the global styles.scss (which is currently empty).

This will likely result in the font-family property falling back to a default or inherited value, which might not be the intended appearance.

To resolve this, you could consider:

1. Defining --inter-font within the :host CSS variables (e.g., --inter-font: "Inter", sans-serif;).
2. Replacing var(--inter-font) with a specific font stack directly, such as the main font stack defined for :host on line 39 ("Inter", -apple-system, ...).
3. Using font-family: inherit; if the intention is to use the font family of the parent element.

Which approach would be most suitable here?

Suggested change

	font-family: var(--inter-font);
	font-family: inherit; /* Or define --inter-font, or use a specific font stack like \"Inter\", sans-serif */

[Mukamik]

/gemini review

[Mukamik]

/gemini help

[gemini-code-assist]

Code Review

This pull request introduces the basic structure for the tour-of-furniture Angular starter application, generated using the Angular CLI. The setup includes standard configuration files, a basic app component, and initial routing setup. The changes are straightforward and represent a good starting point for the project.

Summary of Findings

• Inline Styles in HTML Template: The component's styles are embedded directly in the HTML template using <style> tags. It is recommended to move these styles to the dedicated SCSS file for better maintainability and separation of concerns. (Medium severity, commented)
• Basic Test Coverage: The generated test file provides minimal coverage. While acceptable for a starter, more comprehensive tests should be added as the component evolves. (Low severity, not commented due to review settings)
• Standard README: The README is the standard one generated by the CLI. It could be enhanced with project-specific details later. (Low severity, not commented due to review settings)

Merge Readiness

The pull request provides a solid foundation for the Angular application. The primary area for improvement is the use of inline styles in the HTML template, which impacts maintainability. I recommend addressing this medium severity issue by moving the styles to the component's SCSS file before merging. As a reviewer, I am unable to directly approve the pull request; please ensure other designated reviewers provide their approval.

[gemini-code-assist]

Embedding a large block of CSS directly within <style> tags in the component's HTML template is generally discouraged in Angular applications. It mixes presentation logic with the template structure, which can make the component harder to read and maintain. It's a best practice to keep component-specific styles in the dedicated .scss file (app.component.scss) referenced by the styleUrl property in the component decorator. This promotes better separation of concerns and allows for easier management of styles, including leveraging SCSS features.

[gemini-code-assist]

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.