Develop

.eslintignore

@@ -50,6 +50,7 @@ package-lock.json
 yarn.lock
 
 # Generated
+libs/
 src/app/shared/generated/
 firebase-export*
 

.eslintrc.json

@@ -1,6 +1,11 @@
 {
   "root": true,
-  "ignorePatterns": ["projects/**/*", "src/app/shared/generated/**/*"],
+  "ignorePatterns": [
+    "projects/**/*",
+    "src/app/shared/generated/**/*",
+    "src/app/shared/components/ui/**/*",
+    "src/app/shared/utils/**/*"
+  ],
   "plugins": [
     "prettier"
   ],

.github/copilot-instructions.md

@@ -0,0 +1,114 @@
+# Persona
+
+You are a dedicated Angular developer who thrives on leveraging the absolute latest features of the framework to build cutting-edge applications. You are currently immersed in Angular v20+, passionately adopting signals for reactive state management, embracing standalone components for streamlined architecture, and utilizing the new control flow for more intuitive template logic. Performance is paramount to you, who constantly seeks to optimize change detection and improve user experience through these modern Angular paradigms. When prompted, assume You are familiar with all the newest APIs and best practices, valuing clean, efficient, and maintainable code.
+
+## Examples
+
+These are modern examples of how to write an Angular 20 component with signals
+
+```ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+
+@Component({
+  selector: '{{tag-name}}-root',
+  templateUrl: '{{tag-name}}.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class {{ClassName}} {
+  protected readonly isServerRunning = signal(true);
+  toggleServerStatus() {
+    this.isServerRunning.update(isServerRunning => !isServerRunning);
+  }
+}
+```
+
+```css
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+
+    button {
+        margin-top: 10px;
+    }
+}
+```
+
+```html
+<section class="container">
+    @if (isServerRunning()) {
+        <span>Yes, the server is running</span>
+    } @else {
+        <span>No, the server is not running</span>
+    }
+    <button (click)="toggleServerStatus()">Toggle Server Status</button>
+</section>
+```
+
+When you update a component, be sure to put the logic in the ts file, the styles in the css file and the html template in the html file.
+
+## Resources
+
+Here are some links to the essentials for building Angular applications. Use these to get an understanding of how some of the core functionality works
+https://angular.dev/essentials/components
+https://angular.dev/essentials/signals
+https://angular.dev/essentials/templates
+https://angular.dev/essentials/dependency-injection
+
+## Best practices & Style guide
+
+Here are the best practices and the style guide information.
+
+### Coding Style guide
+
+Here is a link to the most recent Angular style guide https://angular.dev/style-guide
+
+### TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+### Angular Best Practices
+
+- Always use standalone components over `NgModules`
+- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` signal instead of decorators, learn more here https://angular.dev/guide/components/inputs
+- Use `output()` function instead of decorators, learn more here https://angular.dev/guide/components/outputs
+- Use `computed()` for derived state learn more about signals here https://angular.dev/guide/signals.
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
+- Do NOT use `ngStyle`, use `style` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
+
+### State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+### Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes#
+
+### Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

.junie/guidelines.md

@@ -1,202 +1,47 @@
-# Localess Project Guidelines
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
 
-This document provides essential information for developers working on the Localess project.
+## TypeScript Best Practices
 
-## Build/Configuration Instructions
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
 
-### Project Setup
+## Angular Best Practices
 
-1. **Node.js Version**: This project requires Node.js version 20 as specified in both the root and functions package.json files.
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
 
-2. **Install Dependencies**:
-   ```bash
-   # Install root project dependencies
-   npm install
-
-   # Install Firebase Functions dependencies
-   cd functions
-   npm install
-   ```
+## Components
 
-### Building the Project
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
 
-The project consists of an Angular frontend and Firebase Functions backend:
+## State Management
 
-#### Frontend (Angular)
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
 
-```bash
-# Development build
-npm run build
+## Templates
 
-# Production build
-npm run build:prod
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
 
-# Docker configuration build
-npm run build:docker
-```
+## Services
 
-#### Backend (Firebase Functions)
-
-```bash
-# Build Firebase Functions
-cd functions
-npm run build
-```
-
-### Running the Project
-
-```bash
-# Start Angular development server with proxy configuration
-npm run start
-
-# Start Firebase emulators with data import/export
-npm run emulator
-
-# Start Firebase emulators with debug mode
-npm run emulator:debug
-```
-
-## Testing Information
-
-### Running Tests
-
-The project uses Karma and Jasmine for testing the Angular application:
-
-```bash
-# Run all tests
-npm run test
-
-# Run specific tests
-npm test -- --include=path/to/test.spec.ts
-```
-
-### Writing Tests
-
-Tests follow the standard Angular testing patterns using Jasmine:
-
-1. **File Naming**: Test files should be named with the `.spec.ts` suffix and placed alongside the file they are testing.
-
-2. **Basic Test Structure**:
-   ```typescript
-   import { YourService } from './your-service';
-
-   describe('YourService', () => {
-     describe('specificMethod', () => {
-       it('should do something specific', () => {
-         expect(YourService.specificMethod('input')).toBe('expected output');
-       });
-     });
-   });
-   ```
-
-### Example Test
-
-Here's an example of a simple utility service and its test:
-
-**string-utils.service.ts**:
-```typescript
-export class StringUtils {
-  /**
-   * Reverses a string
-   * @param input The string to reverse
-   * @returns The reversed string
-   */
-  static reverse(input: string): string {
-    return input.split('').reverse().join('');
-  }
-
-  /**
-   * Checks if a string is a palindrome (reads the same forward and backward)
-   * @param input The string to check
-   * @returns True if the string is a palindrome, false otherwise
-   */
-  static isPalindrome(input: string): boolean {
-    const normalized = input.toLowerCase().replace(/[^a-z0-9]/g, '');
-    return normalized === this.reverse(normalized);
-  }
-}
-```
-
-**string-utils.service.spec.ts**:
-```typescript
-import { StringUtils } from './string-utils.service';
-
-describe('StringUtils', () => {
-  describe('reverse', () => {
-    it('should reverse a string', () => {
-      expect(StringUtils.reverse('hello')).toBe('olleh');
-      expect(StringUtils.reverse('world')).toBe('dlrow');
-      expect(StringUtils.reverse('')).toBe('');
-    });
-  });
-
-  describe('isPalindrome', () => {
-    it('should return true for palindromes', () => {
-      expect(StringUtils.isPalindrome('racecar')).toBe(true);
-      expect(StringUtils.isPalindrome('A man, a plan, a canal: Panama')).toBe(true);
-      expect(StringUtils.isPalindrome('No lemon, no melon')).toBe(true);
-    });
-
-    it('should return false for non-palindromes', () => {
-      expect(StringUtils.isPalindrome('hello')).toBe(false);
-      expect(StringUtils.isPalindrome('world')).toBe(false);
-    });
-
-    it('should handle empty strings', () => {
-      expect(StringUtils.isPalindrome('')).toBe(true);
-    });
-  });
-});
-```
-
-## Additional Development Information
-
-### Code Style
-
-The project uses ESLint and Prettier for code formatting and linting:
-
-```bash
-# Lint the code
-npm run lint
-
-# Fix linting issues
-npm run lint:fix
-
-# Check formatting
-npm run prettier
-
-# Fix formatting issues
-npm run prettier:fix
-```
-
-### Angular Component Naming Conventions
-
-- **Component Selector Prefix**: All component selectors should use the `ll` prefix (e.g., `ll-my-component`).
-- **Component Selector Style**: Component selectors should use kebab-case.
-- **Directive Selector Prefix**: All directive selectors should use the `ll` prefix.
-- **Directive Selector Style**: Directive selectors should use camelCase.
-
-### Firebase Configuration
-
-The project uses multiple Firebase services:
-
-- **Firestore**: Database for storing application data.
-- **Hosting**: For hosting the Angular application.
-- **Functions**: Backend services written in TypeScript.
-- **Storage**: For storing files.
-
-Local development uses Firebase Emulators which can be started with `npm run emulator`.
-
-### Project Structure
-
-- **src/app**: Angular application code.
-- **functions/src**: Firebase Functions code.
-- **src/app/core**: Core functionality used throughout the application.
-- **src/app/shared**: Shared components, services, and utilities.
-
-### Path Aliases
-
-The project uses TypeScript path aliases for cleaner imports:
-
-- `@shared/*`: Maps to `src/app/shared/*`
-- `@core/*`: Maps to `src/app/core/*`
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

.postcssrc.json

@@ -1,5 +1,9 @@
 {
   "plugins": {
-    "@tailwindcss/postcss": {}
+    "@tailwindcss/postcss": {
+      "optimize": {
+        "minify": true
+      }
+    }
   }
 }

.prettierignore

@@ -9,6 +9,8 @@ node_modules
 dist
 package-lock.json
 
+libs/
+
 src/app/shared/generated/
 
 functions