From 9aae4cadc03d54edb3e613ac89bda18e4616d8fb Mon Sep 17 00:00:00 2001
From: Christophe <christophe@jeannerot.fr>
Date: Wed, 15 Apr 2026 22:44:22 +0200
Subject: [PATCH] Condense la page utilisateur

---
 ChessCubing.App/Pages/UserPage.razor |  90 +++++++-------------
 styles.css                           | 119 +++++++++++++++++++++++++++
 2 files changed, 151 insertions(+), 58 deletions(-)

diff --git a/ChessCubing.App/Pages/UserPage.razor b/ChessCubing.App/Pages/UserPage.razor
index ac31037..b84f98b 100644
--- a/ChessCubing.App/Pages/UserPage.razor
+++ b/ChessCubing.App/Pages/UserPage.razor
@@ -103,81 +103,56 @@
         }
         else if (Profile is not null)
         {
-            <section class="panel panel-half">
-                <div class="section-heading">
+            <section class="panel panel-wide user-profile-panel">
+                <div class="section-heading user-profile-heading">
                     <div>
-                        <p class="eyebrow">Compte relie</p>
+                        <p class="eyebrow">Profil joueur</p>
                         <h2>@Profile.DisplayName</h2>
                     </div>
-                    <p class="section-copy">
-                        Le compte connecte pilote l'identite, et cette page ajoute les donnees metier du site.
-                    </p>
+
+                    <div class="user-profile-chips">
+                        <span class="mini-chip admin-chip-outline">@Profile.Username</span>
+
+                        @if (!string.IsNullOrWhiteSpace(Profile.Email))
+                        {
+                            <span class="mini-chip admin-chip-neutral">@Profile.Email</span>
+                        }
+                    </div>
                 </div>
 
-                <div class="profile-meta-grid">
-                    <article class="profile-meta-card">
-                        <span class="micro-label">Username</span>
-                        <strong>@Profile.Username</strong>
-                    </article>
-                    <article class="profile-meta-card">
-                        <span class="micro-label">Email</span>
-                        <strong>@(Profile.Email ?? "Non renseigne")</strong>
-                    </article>
-                    <article class="profile-meta-card">
-                        <span class="micro-label">Cree le</span>
+                <p class="user-profile-note">Compte Keycloak relie a une fiche site compacte stockee en MySQL.</p>
+
+                <div class="user-profile-summary-grid">
+                    <article class="user-summary-card">
+                        <span class="micro-label">Cree</span>
                         <strong>@FormatDate(Profile.CreatedUtc)</strong>
                     </article>
-                    <article class="profile-meta-card">
+                    <article class="user-summary-card">
                         <span class="micro-label">Mis a jour</span>
                         <strong>@FormatDate(Profile.UpdatedUtc)</strong>
                     </article>
-                </div>
-            </section>
-
-            <section class="panel panel-half">
-                <div class="section-heading">
-                    <div>
-                        <p class="eyebrow">Resume du profil</p>
-                        <h2>Informations visibles pour le site</h2>
-                    </div>
-                </div>
-
-                <div class="home-mini-grid two-columns profile-highlights">
-                    <article class="mini-panel">
+                    <article class="user-summary-card">
                         <span class="micro-label">Club</span>
                         <strong>@(Profile.Club ?? "A definir")</strong>
                     </article>
-                    <article class="mini-panel">
+                    <article class="user-summary-card">
                         <span class="micro-label">Ville</span>
                         <strong>@(Profile.City ?? "A definir")</strong>
                     </article>
-                    <article class="mini-panel">
-                        <span class="micro-label">Format prefere</span>
+                    <article class="user-summary-card">
+                        <span class="micro-label">Format</span>
                         <strong>@(Profile.PreferredFormat ?? "A definir")</strong>
                     </article>
-                    <article class="mini-panel">
+                    <article class="user-summary-card">
                         <span class="micro-label">Cube favori</span>
                         <strong>@(Profile.FavoriteCube ?? "A definir")</strong>
                     </article>
                 </div>
 
-                <div class="callout profile-callout">
+                <div class="callout user-profile-bio">
                     <span class="micro-label">Bio</span>
                     <p>@(Profile.Bio ?? "Aucune bio enregistree pour le moment.")</p>
                 </div>
-            </section>
-
-            <section class="panel panel-wide">
-                <div class="section-heading">
-                    <div>
-                        <p class="eyebrow">Edition</p>
-                        <h2>Mettre a jour le profil du site</h2>
-                    </div>
-                    <p class="section-copy">
-                        Les champs ci-dessous sont stockes dans MySQL et pourront ensuite
-                        servir a enrichir les pages, les inscriptions ou les statistiques.
-                    </p>
-                </div>
 
                 @if (!string.IsNullOrWhiteSpace(SaveError))
                 {
@@ -192,8 +167,8 @@
                 <EditForm Model="@Form" OnValidSubmit="SaveProfileAsync">
                     <DataAnnotationsValidator />
 
-                    <div class="profile-form-grid">
-                        <label class="field">
+                    <div class="profile-form-grid user-profile-form-grid">
+                        <label class="field user-span-2">
                             <span>Nom affiche</span>
                             <InputText @bind-Value="Form.DisplayName" />
                             <ValidationMessage For="@(() => Form.DisplayName)" />
@@ -222,24 +197,23 @@
                             <ValidationMessage For="@(() => Form.PreferredFormat)" />
                         </label>
 
-                        <label class="field span-2">
+                        <label class="field user-span-2">
                             <span>Cube favori</span>
                             <InputText @bind-Value="Form.FavoriteCube" />
                             <ValidationMessage For="@(() => Form.FavoriteCube)" />
                         </label>
 
-                        <label class="field span-2">
+                        <label class="field user-span-full">
                             <span>Bio</span>
-                            <InputTextArea @bind-Value="Form.Bio" />
+                            <InputTextArea @bind-Value="Form.Bio" rows="2" />
                             <ValidationMessage For="@(() => Form.Bio)" />
                         </label>
                     </div>
 
-                    <div class="profile-actions">
-                        <button class="button secondary" type="submit" disabled="@IsSaving">
-                            @(IsSaving ? "Enregistrement..." : "Enregistrer le profil")
+                    <div class="profile-actions user-profile-actions">
+                        <button class="button secondary small" type="submit" disabled="@IsSaving">
+                            @(IsSaving ? "Enregistrement..." : "Enregistrer")
                         </button>
-                        <p class="section-copy">Les champs vides restent facultatifs et peuvent etre completes plus tard.</p>
                     </div>
                 </EditForm>
             </section>
diff --git a/styles.css b/styles.css
index bb42609..999001f 100644
--- a/styles.css
+++ b/styles.css
@@ -1623,6 +1623,115 @@ body.site-menu-hidden .site-menu-shell {
   color: #ffd8de;
 }
 
+.user-profile-panel {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.user-profile-heading {
+  align-items: start;
+  gap: 0.6rem;
+  margin-bottom: 0;
+}
+
+.user-profile-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.user-profile-chips .mini-chip {
+  max-width: 100%;
+  justify-content: flex-start;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.88rem;
+}
+
+.user-profile-note {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.35;
+}
+
+.user-profile-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.55rem;
+}
+
+.user-summary-card {
+  display: grid;
+  gap: 0.12rem;
+  padding: 0.5rem 0.7rem;
+  border-radius: 14px;
+  border: 1px solid var(--panel-border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.user-summary-card .micro-label {
+  font-size: 0.66rem;
+  letter-spacing: 0.16em;
+}
+
+.user-summary-card strong {
+  font-size: 0.9rem;
+  line-height: 1.25;
+}
+
+.user-profile-bio {
+  min-height: 0;
+  margin: 0;
+  padding: 0.8rem 0.95rem;
+}
+
+.user-profile-bio p {
+  margin: 0.2rem 0 0;
+}
+
+.user-profile-form-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.55rem 0.65rem;
+}
+
+.user-profile-form-grid .field {
+  gap: 0.28rem;
+}
+
+.user-profile-form-grid .field > span {
+  font-size: 0.88rem;
+}
+
+.user-profile-panel input:not([type="radio"]):not([type="checkbox"]),
+.user-profile-panel select,
+.user-profile-panel textarea {
+  padding: 0.68rem 0.8rem;
+  border-radius: 14px;
+  font-size: 0.95rem;
+}
+
+.user-profile-panel textarea {
+  min-height: 3.3rem;
+}
+
+.user-profile-actions {
+  justify-content: flex-end;
+  gap: 0.55rem;
+  margin-top: 0.65rem;
+}
+
+.user-profile-actions .button {
+  padding: 0.72rem 0.95rem;
+}
+
+.user-profile-form-grid .user-span-2 {
+  grid-column: span 2;
+}
+
+.user-profile-form-grid .user-span-full {
+  grid-column: 1 / -1;
+}
+
 .admin-hero-stats {
   margin-top: 0.8rem;
 }
@@ -1956,6 +2065,7 @@ body.site-menu-hidden .site-menu-shell {
   }
 
   .admin-edit-summary-grid,
+  .user-profile-summary-grid,
   .profile-meta-grid,
   .profile-form-grid,
   .admin-toggle-grid,
@@ -1967,12 +2077,21 @@ body.site-menu-hidden .site-menu-shell {
     grid-template-columns: 1fr;
   }
 
+  .user-profile-form-grid {
+    grid-template-columns: 1fr;
+  }
+
   .admin-edit-form-grid .admin-edit-span-2,
   .admin-edit-form-grid .admin-edit-span-3,
   .admin-edit-form-grid .admin-edit-span-full {
     grid-column: 1 / -1;
   }
 
+  .user-profile-form-grid .user-span-2,
+  .user-profile-form-grid .user-span-full {
+    grid-column: 1 / -1;
+  }
+
   .phase-header {
     grid-template-columns: 1fr;
     text-align: center;