Md3

.github/copilot-instructions.md

@@ -0,0 +1,55 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## 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
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- 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.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- 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
+- When using external templates/styles, use paths relative to the component TS file.
+
+## 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
+- Do not assume globals like (`new Date()`) are available.
+- Do not write arrow functions in templates (they are not supported).
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

angular.json

@@ -45,8 +45,8 @@
                             }
                         ],
                         "styles": [
-                            "client/styles/_themes.scss",
                             "client/styles.scss",
+                            "client/styles/artisans.scss",
                             "node_modules/@ecodev/natural-layout/natural-layout.css"
                         ],
                         "scripts": [],
@@ -113,8 +113,9 @@
                         "tsConfig": "client/tsconfig.spec.json",
                         "karmaConfig": "client/karma.conf.js",
                         "styles": [
-                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-                            "client/styles.scss"
+                            "client/styles.scss",
+                            "client/styles/artisans.scss",
+                            "node_modules/@ecodev/natural-layout/natural-layout.css"
                         ],
                         "scripts": [],
                         "assets": [
@@ -145,7 +146,10 @@
     "cli": {
         "schematicCollections": ["@angular-eslint/schematics"],
         "packageManager": "yarn",
-        "analytics": false
+        "analytics": false,
+        "cache": {
+            "enabled": false
+        }
     },
     "schematics": {
         "@angular-eslint/schematics:application": {

client/app/admin/admin/admin.component.html

@@ -1,71 +1,75 @@
-<div class="nat-fill nat-vertical">
-    <mat-toolbar class="nat-horizontal nat-align" id="header-mobile">
-        <button mat-icon-button (click)="menu.toggle()">
-            <mat-icon naturalIcon="menu" />
-        </button>
+<mat-toolbar class="header-toolbar nat-horizontal nat-align">
+    <button matIconButton (click)="menu.toggle()">
+        <mat-icon naturalIcon="menu" />
+    </button>
 
-        <div class="nat-expand"></div>
+    <div class="nat-expand"></div>
 
-        <a class="nat-horizontal nat-center" routerLink="/">
-            <img alt="logo" height="50" src="assets/logo-artisans-de-la-transition.svg" />
-        </a>
+    <a class="nat-horizontal nat-center" routerLink="/">
+        <img alt="logo" height="40" src="assets/logo-artisans-de-la-transition.svg" />
+    </a>
 
-        <div class="nat-expand"></div>
-    </mat-toolbar>
+    <div class="nat-expand"></div>
+</mat-toolbar>
 
-    <natural-sidenav-container #menu class="nat-expand" name="adminMenu" [noScroll]="true">
-        <natural-sidenav>
-            <div class="nat-margin overflow">
-                <mat-accordion displayMode="flat">
-                    <mat-expansion-panel class="mat-elevation-z0">
-                        <mat-expansion-panel-header>
-                            <mat-panel-title>Utilisateurs</mat-panel-title>
-                        </mat-expansion-panel-header>
-                        <mat-nav-list>
-                            <a mat-list-item routerLinkActive="active" routerLink="user">Tous les utilisateurs</a>
-                            <a mat-list-item routerLinkActive="active" routerLink="import">Import</a>
-                        </mat-nav-list>
-                    </mat-expansion-panel>
+<natural-sidenav-container #menu class="nat-expand" name="adminMenu" [noScroll]="true">
+    <natural-sidenav>
+        <div class="nat-margin overflow">
+            <mat-accordion displayMode="flat">
+                <mat-expansion-panel class="mat-elevation-z0">
+                    <mat-expansion-panel-header>
+                        <mat-panel-title>Utilisateurs</mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <mat-nav-list>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="user"
+                            >Tous les utilisateurs</a
+                        >
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="import">Import</a>
+                    </mat-nav-list>
+                </mat-expansion-panel>
 
-                    <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
-                        <mat-expansion-panel-header>
-                            <mat-panel-title>Produits</mat-panel-title>
-                        </mat-expansion-panel-header>
-                        <mat-nav-list>
-                            <a mat-list-item routerLinkActive="active" routerLink="product">Tous les produits</a>
-                        </mat-nav-list>
-                    </mat-expansion-panel>
+                <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
+                    <mat-expansion-panel-header>
+                        <mat-panel-title>Produits</mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <mat-nav-list>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="product"
+                            >Tous les produits</a
+                        >
+                    </mat-nav-list>
+                </mat-expansion-panel>
 
-                    <mat-expansion-panel class="mat-elevation-z0">
-                        <mat-expansion-panel-header>
-                            <mat-panel-title>Communauté</mat-panel-title>
-                        </mat-expansion-panel-header>
-                        <mat-nav-list>
-                            <a mat-list-item routerLinkActive="active" routerLink="news">Actualités</a>
-                            <a mat-list-item routerLinkActive="active" routerLink="event">Événements</a>
-                            <a mat-list-item routerLinkActive="active" routerLink="comment">Commentaires</a>
-                            <a mat-list-item routerLinkActive="active" routerLink="session">Conversations carbone</a>
-                            <a mat-list-item routerLinkActive="active" routerLink="facilitator-document">
-                                Documents facilitateurs
-                            </a>
-                        </mat-nav-list>
-                    </mat-expansion-panel>
+                <mat-expansion-panel class="mat-elevation-z0">
+                    <mat-expansion-panel-header>
+                        <mat-panel-title>Communauté</mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <mat-nav-list>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="news">Actualités</a>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="event">Événements</a>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="comment">Commentaires</a>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="session"
+                            >Conversations carbone</a
+                        >
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="facilitator-document"
+                            >Documents facilitateurs</a
+                        >
+                    </mat-nav-list>
+                </mat-expansion-panel>
 
-                    <mat-expansion-panel class="mat-elevation-z0">
-                        <mat-expansion-panel-header>
-                            <mat-panel-title>Comptabilité</mat-panel-title>
-                        </mat-expansion-panel-header>
-                        <mat-nav-list>
-                            <a mat-list-item routerLinkActive="active" routerLink="order">Ventes</a>
-                        </mat-nav-list>
-                    </mat-expansion-panel>
-                </mat-accordion>
-            </div>
-        </natural-sidenav>
-        <natural-sidenav-content>
-            <div class="nat-expand admin-body nat-vertical">
-                <router-outlet />
-            </div>
-        </natural-sidenav-content>
-    </natural-sidenav-container>
-</div>
+                <mat-expansion-panel class="mat-elevation-z0">
+                    <mat-expansion-panel-header>
+                        <mat-panel-title>Comptabilité</mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <mat-nav-list>
+                        <a mat-list-item routerLinkActive="nat-gradient-secondary" routerLink="order">Ventes</a>
+                    </mat-nav-list>
+                </mat-expansion-panel>
+            </mat-accordion>
+        </div>
+    </natural-sidenav>
+    <natural-sidenav-content>
+        <div class="nat-expand admin-body nat-vertical">
+            <router-outlet />
+        </div>
+    </natural-sidenav-content>
+</natural-sidenav-container>

client/app/admin/admin/admin.component.scss

@@ -1,4 +1,41 @@
-.admin-body {
-    padding: 20px;
+@use '@angular/material' as mat;
+
+natural-sidenav-container {
+    @include mat.sidenav-overrides(
+        (
+            container-width: 280px,
+        )
+    );
+}
+
+mat-accordion {
+    @include mat.expansion-overrides(
+        (
+            container-background-color: transparent,
+        )
+    );
+}
+
+natural-sidenav-content {
+    border-top-left-radius: var(--mat-sys-corner-large);
+    background-color: var(--mat-sys-surface-bright);
+    padding: 20px clamp(5px, 2vw, 20px);
+    min-height: calc(100vh - 160px);
     overflow: auto;
+    @media (max-width: 400px) {
+        padding: 6px;
+    }
+}
+
+.header-toolbar {
+    @include mat.toolbar-overrides(
+        (
+            container-background-color: var(--mat-sys-surface-container),
+            container-text-color: var(--mat-sys-on-surface),
+        )
+    );
+}
+
+::ng-deep app-admin .mat-font-title-lg {
+    margin-bottom: 0.3em;
 }

client/app/admin/comments/comments/comments.component.html

@@ -1,7 +1,7 @@
 @if (dataSource) {
     <div class="nat-vertical">
         <div class="nat-horizontal">
-            <div class="mat-h1 nat-no-margin nat-expand">
+            <div class="mat-font-headline-sm nat-expand">
                 {{ routeData?.seo.title }}
             </div>
             <natural-columns-picker

client/app/admin/events/event/event.component.html

@@ -6,7 +6,7 @@
         [newLabel]="data.seo.title"
     >
         @if (isUpdatePage()) {
-            <a color="primary" mat-raised-button [routerLink]="['/agenda', data.model.id]">
+            <a matButton="filled" [routerLink]="['/agenda', data.model.id]">
                 <mat-icon naturalIcon="remove_red_eye" />
                 Voir la page
             </a>

client/app/admin/events/events/events.component.html

@@ -1,7 +1,7 @@
 @if (dataSource) {
     <div class="nat-vertical">
         <div class="nat-horizontal">
-            <div class="mat-h1 nat-no-margin nat-expand">
+            <div class="mat-font-headline-sm nat-expand">
                 {{ routeData?.seo.title }}
             </div>
             <natural-columns-picker

client/app/admin/facilitator-documents/facilitator-document/facilitator-document.component.html

@@ -6,7 +6,7 @@
         [newLabel]="data.seo.title"
     >
         @if (isUpdatePage()) {
-            <a routerLink="/agir-avec-nous/conversation-carbone/facilitateurs-prive" color="primary" mat-raised-button>
+            <a routerLink="/agir-avec-nous/conversation-carbone/facilitateurs-prive" matButton="filled">
                 <mat-icon naturalIcon="remove_red_eye" />
                 Voir la page
             </a>
@@ -30,7 +30,7 @@
                 </div>
 
                 <div class="nat-md-expand-33 nat-gap nat-vertical">
-                    <h2 class="mat-h2">Document</h2>
+                    <h2 class="mat-font-title-lg">Document</h2>
 
                     <natural-file
                         action="upload"

client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.html

@@ -1,7 +1,7 @@
 @if (dataSource) {
     <div class="nat-vertical">
         <div class="nat-horizontal">
-            <div class="mat-h1 nat-no-margin nat-expand">
+            <div class="mat-font-headline-sm nat-expand">
                 {{ routeData?.seo.title }}
             </div>
         </div>