Full redesign

.eslintrc.js

@@ -62,7 +62,7 @@
                 }
             }
         ],
-        "@typescript-eslint/member-ordering": "error",
+        "@typescript-eslint/member-ordering": "warn",
         "@typescript-eslint/naming-convention": "off",
         "@typescript-eslint/no-empty-function": "off",
         "@typescript-eslint/no-inferrable-types": [
@@ -90,7 +90,7 @@
             "off",
             "off"
         ],
-        "comma-dangle": ["error", "never"],
+        "comma-dangle": "off",
         "eol-last": "off",
         "import/no-deprecated": "warn",
         "import/order": "off",

.github/workflows/on-pull-request-label.yml

@@ -31,6 +31,10 @@ jobs:
     steps:
       - name: Checkout Repo
         uses: actions/checkout@master
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.18.0"
       - name: Download Production Artifact
         uses: actions/download-artifact@master
         with:
@@ -42,4 +46,4 @@ jobs:
           repoToken: ${{ secrets.GITHUB_TOKEN }}
           firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_GIT4SCHOOL }}
           projectId: git4school
-          channelId: 'pr-${{ github.event.number }}-${{ github.event.pull_request.head.ref }}'
+          channelId: "pr-${{ github.event.number }}-${{ github.event.pull_request.head.ref }}"

angular.json

@@ -44,19 +44,21 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
-              "./node_modules/bootstrap/dist/css/bootstrap.css",
               "./src/styles.scss",
               "node_modules/prismjs/themes/prism-okaidia.css"
             ],
             "scripts": [
-              "./node_modules/popper.js/dist/umd/popper.min.js",
-              "./node_modules/jquery/dist/jquery.min.js",
-              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
               "node_modules/marked/lib/marked.js",
               "node_modules/prismjs/prism.js",
               "node_modules/prismjs/components/prism-csharp.min.js",
               "node_modules/prismjs/components/prism-css.min.js"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src",
+                "src/styles"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -113,6 +115,12 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": ["src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src",
+                "src/styles"
+              ]
+            },
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets"]
           }

docs/adr/0001-keycap-design-system.md

@@ -0,0 +1,16 @@
+# 0001 - Standardisation du composant Keycap dans le Design System
+
+## Contexte
+Les touches de raccourcis clavier et indicateurs d'interaction étaient dispersés dans le code avec des implémentations hétérogènes (balises `<span>` vs `<kbd>`, classes locales `.shortcut-badge`, `.cheat-badge`, `.shortcut-key`, styles d'ombres intérieures vs ombres douces, couleurs en dur).
+
+## Décision
+1. **Centralisation dans `_components.scss`** : Définir une source unique de vérité sous `kbd, .shortcut-key, .shortcut-badge` reprenant le style épuré de l'aide-mémoire des raccourcis (`ShortcutsModalComponent`).
+2. **Sémantique HTML** : Standardiser sur la balise native `<kbd class="shortcut-key">` pour tous les raccourcis clavier réels.
+3. **Theming & Dark Mode** : Utiliser exclusivement les tokens CSS globaux (`--color-bg-body`, `--color-border`, `--color-text-primary`, `--color-primary-bg`, `--color-primary`) pour une adaptation automatique aux thèmes clair et sombre sans aucune couleur en dur.
+4. **Dimensions & Combos** : Hauteur standard fixée à 22px (arrondis 5px), variante compacte `.shortcut-key-sm` (18px) pour les zones denses, et conteneur `.shortcut-combo` avec séparateur `.key-sep` pour décomposer les combinaisons multi-touches en touches individuelles.
+5. **Micro-interactions** : Animation réactive d'appui (`.shortcut-pressed-anim` avec `scale(0.92)` et surbrillance primaire) intégrée nativement.
+
+## Conséquences
+- Toute nouvelle touche de raccourci ajoutée dans l'interface doit utiliser la balise `<kbd class="shortcut-key">` ou le conteneur `.shortcut-combo`.
+- Les surcharges CSS locales pour les touches de raccourci sont proscrites au profit de la classe globale et de ses modificateurs.
+- Le composant `questions-chooser` a été entièrement aligné avec la variante compacte `.shortcut-key-sm` et la gestion centralisée des événements clavier via `OsUtils`.

e2e/src/app.e2e-spec.ts

@@ -1,27 +1,24 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
+import { AppPage } from "./app.po";
+import { browser, logging } from "protractor";
 
-describe('workspace-project App', () => {
+describe("workspace-project App", () => {
   let page: AppPage;
 
   beforeEach(() => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it("should display welcome message", () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to git4school!');
+    expect(page.getTitleText()).toEqual("Welcome to git4school!");
   });
 
   afterEach(async () => {
     // Assert that there are no errors emitted from the browser
-    const logs = await browser
-      .manage()
-      .logs()
-      .get(logging.Type.BROWSER);
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     expect(logs).not.toContain(
       jasmine.objectContaining({
-        level: logging.Level.SEVERE
+        level: logging.Level.SEVERE,
       } as logging.Entry)
     );
   });

e2e/src/app.po.ts

@@ -1,4 +1,4 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element } from "protractor";
 
 /**
  * @ignore
@@ -9,6 +9,6 @@ export class AppPage {
   }
 
   getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
+    return element(by.css("app-root h1")).getText() as Promise<string>;
   }
 }

package.json

@@ -50,6 +50,7 @@
     "d3": "^7.9.0",
     "dexie": "^3.0.3",
     "dexie-export-import": "^1.0.0",
+    "driver.js": "1.3.1",
     "file-saver": "^2.0.2",
     "firebase": "^7.13.2",
     "jest-json-schema": "^2.1.0",
@@ -60,7 +61,6 @@
     "ngx-clipboard": "^13.0.0",
     "ngx-markdown": "^9.0.0",
     "ngx-spinner": "^9.0.2",
-    "ngx-toastr": "^12.0.1",
     "popper.js": "^1.16.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "~6.5.5",

src/app/app-routing.module.ts

@@ -7,7 +7,6 @@
 import { StudentsCommitsComponent } from "@components/graphs/students-commits/students-commits.component";
 import { HomeComponent } from "@components/home/home.component";
 import { AppNavLayoutComponent } from "@components/nav-layouts/app-nav-layout/app-nav-layout.component";
-import { HomeNavLayoutComponent } from "@components/nav-layouts/home-nav-layout/home-nav-layout.component";
 import { AuthGuard } from "@guards/auth.guard";
 import { DataLoadingGuard } from "@guards/data-loading.guard";
 import { DataProvidedGuard } from "@guards/data-provided.guard";
@@ -38,8 +37,11 @@
 ];
 
 const ROUTES: Routes = [
-  { path: "", component: AppNavLayoutComponent, children: APP_ROUTES },
-  { path: "", component: HomeNavLayoutComponent, children: HOME_ROUTES },
+  { 
+    path: "", 
+    component: AppNavLayoutComponent, 
+    children: [...APP_ROUTES, ...HOME_ROUTES] 
+  },
   { path: "**", redirectTo: "/not-found" },
 ];
 

src/app/app.component.html

@@ -1 +1,2 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
+<app-toasts></app-toasts>

src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
-import { NgbTooltipConfig } from "@ng-bootstrap/ng-bootstrap";
 import { TranslateService } from "@ngx-translate/core";
 import { AuthService } from "@services/auth.service";
 import { DataService } from "@services/data.service";
+import { ThemeService } from "@services/theme.service";
 import * as Chart from "chart.js";
 // import * as ChartDataLabels from "chartjs-plugin-datalabels";
 import { default as ChartDataLabels } from "chartjs-plugin-datalabels";
@@ -24,19 +24,15 @@ export class AppComponent implements OnInit, OnDestroy {
    * @param dataService Service used to store and get data
    * @param router
    * @param translateService Service used to translate the application
+   * @param themeService Service used to handle theme
    */
   constructor(
     public authService: AuthService,
     public dataService: DataService,
     private router: Router,
     public translateService: TranslateService,
-    private ngbTooltipConfig: NgbTooltipConfig
-  ) {
-    ngbTooltipConfig.openDelay = 500;
-    ngbTooltipConfig.triggers = "hover";
-    ngbTooltipConfig.container = "body";
-    ngbTooltipConfig.animation = true;
-  }
+    private themeService: ThemeService
+  ) {}
 
   /**
    * This method is called once the component is loaded.

src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { LOCATION_INITIALIZED, registerLocaleData } from "@angular/common";
 import { HttpClient, HttpClientModule } from "@angular/common/http";
 import localeFr from "@angular/common/locales/fr";
+import localeRu from "@angular/common/locales/ru";
 import { APP_INITIALIZER, Injector, LOCALE_ID, NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { SharedUiModule } from "./shared/ui/shared-ui.module";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { EditMilestoneComponent } from "@components/edit-milestone/edit-milestone.component";
@@ -14,6 +16,7 @@ import { StudentsCommitsComponent } from "@components/graphs/students-commits/st
 import { AssignmentChooserComponent } from "@components/home/assignment-chooser/assignment-chooser.component";
 import { ConfigurationComponent } from "@components/home/assignment-chooser/configuration/configuration.component";
 import { EditRepositoriesComponent } from "@components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component";
+// eslint-disable-next-line max-len
 import { ModalAddRepositoriesComponent } from "@components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component";
 import { MetadataComponent } from "@components/home/assignment-chooser/configuration/metadata/metadata.component";
 import { HomeComponent } from "@components/home/home.component";
@@ -40,15 +43,15 @@ import { ChartsModule } from "ng2-charts";
 import { ClipboardModule } from "ngx-clipboard";
 import { MarkdownModule } from "ngx-markdown";
 import { NgxSpinnerModule } from "ngx-spinner";
-import { ToastrModule } from "ngx-toastr";
+
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
 import { EditSessionComponent } from "./components/edit-session/edit-session.component";
 import { AuthLangNavItemComponent } from "./components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component";
 import { HelpNavItemComponent } from "./components/nav-items/help-nav-item/help-nav-item.component";
 import { AppNavLayoutComponent } from "./components/nav-layouts/app-nav-layout/app-nav-layout.component";
-import { HomeNavLayoutComponent } from "./components/nav-layouts/home-nav-layout/home-nav-layout.component";
 import { OverviewGraphContextualMenuComponent } from "./components/overview-graph-contextual-menu/overview-graph-contextual-menu.component";
+import { SidebarSettingsComponent } from "./components/nav-layouts/sidebar-settings/sidebar-settings.component";
 
 /**
  * Firebase configuration file
@@ -86,11 +89,14 @@ export function appInitializerFactory(
       );
       locationInitialized.then(() => {
         registerLocaleData(localeFr);
-        translate.addLangs(["en", "fr"]);
+        registerLocaleData(localeRu);
+        translate.addLangs(["en", "fr", "ru"]);
         translate.setDefaultLang("en");
-        const langToSet = window.navigator.language
+        const savedLang = localStorage.getItem("language");
+        const browserLang = window.navigator.language
           ? window.navigator.language.slice(0, 2)
           : "en";
+        const langToSet = savedLang || browserLang;
         translate.use(langToSet).subscribe(
           () => {},
           (err) => {
@@ -120,12 +126,12 @@ export function appInitializerFactory(
     FileChooserComponent,
     EditMilestoneComponent,
     QuestionsChooserComponent,
-    HomeNavLayoutComponent,
     AppNavLayoutComponent,
     AuthLangNavItemComponent,
     HelpNavItemComponent,
     EditSessionComponent,
     OverviewGraphContextualMenuComponent,
+    SidebarSettingsComponent,
   ],
   imports: [
     BrowserModule,
@@ -136,10 +142,7 @@ export function appInitializerFactory(
     ChartsModule,
     NgxSpinnerModule,
     FontAwesomeModule,
-    ToastrModule.forRoot({
-      maxOpened: 3,
-      newestOnTop: false,
-    }),
+    SharedUiModule,
     BrowserAnimationsModule,
     ClipboardModule,
     MarkdownModule.forRoot(),