From 9dc3c69027aa2bcce48fa897cbf8cc2463302400 Mon Sep 17 00:00:00 2001
From: Dimitri FAJAL <dimitri.faj@orange.fr>
Date: Mon, 25 May 2026 19:52:22 +0200
Subject: [PATCH] feat(settings): design and implement settings page with
 sub-navigation and layout

---
 src/app/features/settings/settings.html | 131 +++++++++++++++++++++++-
 src/app/features/settings/settings.scss |  68 ++++++++++++
 src/app/features/settings/settings.ts   |  11 +-
 3 files changed, 203 insertions(+), 7 deletions(-)

diff --git a/src/app/features/settings/settings.html b/src/app/features/settings/settings.html
index abbe72f..d3369bd 100755
--- a/src/app/features/settings/settings.html
+++ b/src/app/features/settings/settings.html
@@ -1,8 +1,129 @@
 <div class="settings-container">
-  <h1>Paramètres</h1>
+  <h1 class="mat-display-small">Paramètres du compte</h1>
 
-  <div class="settings-section">
-    <h3>Compte</h3>
-    <p>Aucun paramètre n'est disponible pour le moment.</p>
+  <div class="settings-layout">
+
+    <!-- Sub-navigation -->
+    <mat-nav-list>
+      <a mat-list-item [activated]="activeTab() === 'profile'" (click)="activeTab.set('profile')">
+        <mat-icon matListItemIcon>person</mat-icon>
+        <span matListItemTitle>Mon profil</span>
+      </a>
+      <a mat-list-item [activated]="activeTab() === 'security'" (click)="activeTab.set('security')">
+        <mat-icon matListItemIcon>lock</mat-icon>
+        <span matListItemTitle>Sécurité</span>
+      </a>
+      <a mat-list-item [activated]="activeTab() === 'classes'" (click)="activeTab.set('classes')">
+        <mat-icon matListItemIcon>groups</mat-icon>
+        <span matListItemTitle>Mes classes</span>
+      </a>
+      <a mat-list-item [activated]="activeTab() === 'notifications'" (click)="activeTab.set('notifications')">
+        <mat-icon matListItemIcon>notifications</mat-icon>
+        <span matListItemTitle>Notifications</span>
+      </a>
+      <a mat-list-item [activated]="activeTab() === 'data'" (click)="activeTab.set('data')">
+        <mat-icon matListItemIcon>download</mat-icon>
+        <span matListItemTitle>Mes données</span>
+      </a>
+      <mat-divider></mat-divider>
+      <a mat-list-item class="delete-account-item">
+        <mat-icon matListItemIcon>delete</mat-icon>
+        <span matListItemTitle>Supprimer le compte</span>
+      </a>
+    </mat-nav-list>
+
+    <!-- Content -->
+    <section class="settings-content">
+
+      @switch (activeTab()) {
+        @case ('profile') {
+          <h2 class="mat-headline-small">Mon profil</h2>
+
+          <mat-card>
+            <mat-card-content>
+              <div class="profile-header">
+                <mat-icon class="profile-avatar">person</mat-icon>
+                <div class="profile-details">
+                  <div><strong ngNonBindable>{{user.username}}</strong></div>
+                  <div>
+                    <span ngNonBindable>{{user.role_display}}</span>
+                    ·
+                    <span ngNonBindable>{{user.class_name}}</span>
+                  </div>
+                </div>
+                <button mat-icon-button aria-label="Modifier"><mat-icon>edit</mat-icon></button>
+              </div>
+            </mat-card-content>
+          </mat-card>
+
+          <mat-card>
+            <div class="card-header">
+              <h3 class="mat-title-large">Compte</h3>
+              <button mat-icon-button aria-label="Modifier"><mat-icon>edit</mat-icon></button>
+            </div>
+            <mat-card-content>
+              <p><strong>Nom d'utilisateur :</strong> <span ngNonBindable>{{user.username}}</span></p>
+              <p><strong>Email :</strong> <span ngNonBindable>{{user.email}}</span></p>
+            </mat-card-content>
+          </mat-card>
+        }
+
+        @case ('security') {
+          <h2 class="mat-headline-small">Sécurité</h2>
+          <mat-card>
+            <div class="card-header">
+              <h3 class="mat-title-large">Mot de passe</h3>
+              <button mat-icon-button aria-label="Modifier le mot de passe"><mat-icon>edit</mat-icon></button>
+            </div>
+            <mat-card-content>
+              Dernière modification : <span ngNonBindable>{{user.password_last_changed}}</span>.
+            </mat-card-content>
+          </mat-card>
+        }
+
+        @case ('classes') {
+          <h2 class="mat-headline-small">Mes classes</h2>
+          <mat-card>
+            <div class="card-header">
+              <h3 class="mat-title-large">
+                <span ngNonBindable>{{user.class_name}}</span>
+                —
+                <span ngNonBindable>{{user.academic_year}}</span>
+              </h3>
+              <button mat-button>Quitter</button>
+            </div>
+            <mat-card-content>
+              Rejointe le <span ngNonBindable>{{user.class_join_date}}</span>
+              · Prof : <span ngNonBindable>{{user.class_teacher}}</span>
+            </mat-card-content>
+          </mat-card>
+          <mat-card>
+            <div class="card-header full-padding">
+              <h3 class="mat-title-large">Rejoindre une classe</h3>
+              <button mat-flat-button color="primary"><mat-icon>add</mat-icon> Code</button>
+            </div>
+          </mat-card>
+        }
+
+        @case ('notifications') {
+          <h2 class="mat-headline-small">Notifications</h2>
+          <mat-card>
+            <mat-card-content>Préférences de notifications — à configurer.</mat-card-content>
+          </mat-card>
+        }
+
+        @case ('data') {
+          <h2 class="mat-headline-small">Mes données</h2>
+          <mat-card>
+            <div class="card-header">
+              <h3 class="mat-title-large">Exporter mes données</h3>
+              <button mat-icon-button aria-label="Télécharger"><mat-icon>download</mat-icon></button>
+            </div>
+            <mat-card-content>Reçois une copie de tes données au format JSON.</mat-card-content>
+          </mat-card>
+        }
+      }
+
+    </section>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/features/settings/settings.scss b/src/app/features/settings/settings.scss
index e69de29..e9c20b1 100644
--- a/src/app/features/settings/settings.scss
+++ b/src/app/features/settings/settings.scss
@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+.settings-container {
+  max-width: 960px;
+  padding: 1.5rem 2rem 3rem;
+
+  @media (max-width: 700px) {
+    padding: 1rem 1rem 2rem;
+  }
+}
+
+.settings-layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 2rem;
+
+  @media (max-width: 700px) {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+}
+
+.delete-account-item {
+  color: var(--mat-sys-error);
+
+  mat-icon {
+    color: var(--mat-sys-error);
+  }
+}
+
+.settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  .profile-avatar {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+  }
+
+  .profile-details {
+    flex: 1;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1rem 0;
+
+  h3 {
+    margin: 0;
+  }
+
+  &.full-padding {
+    padding: 1rem;
+  }
+}
diff --git a/src/app/features/settings/settings.ts b/src/app/features/settings/settings.ts
index 5d9f363..56e30dd 100755
--- a/src/app/features/settings/settings.ts
+++ b/src/app/features/settings/settings.ts
@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+
+type Tab = 'profile' | 'security' | 'classes' | 'notifications' | 'data';
 
 @Component({
   selector: 'app-settings',
-  imports: [],
+  imports: [MatButtonModule, MatCardModule, MatIconModule, MatListModule],
   templateUrl: './settings.html',
   styleUrl: './settings.scss',
 })
 export class Settings {
+  activeTab = signal<Tab>('profile');
 }