Files
tribunal-app/src/app/profile/page.tsx
T
Valentin ROBIN 9f4e58019b Refonte visuelle : direction artistique Grèce antique
Remplace le thème générique (tokens navy/gold/ivory re-thématisables par
édition) par une direction artistique fixe et codée en dur : tribunal
égéen de nuit — marbre, or, mer sombre, sceaux de cire.

Fondations (globals.css, layout.tsx) :
- Polices next/font/google : Cinzel (titres, tracking large), Cormorant
  Garamond (citations italiques), Manrope (interface).
- Nouveaux tokens couleur : ink/ink-2 (fond mer de nuit), marble/marble-2
  (surfaces claires), gold/gold-bright (accents), oxblood (blâmes/erreurs),
  olive (honneurs/succès), sea, text-marble/text-mut (texte sur marbre —
  jamais de doré en texte courant, contraste insuffisant).
- Classes utilitaires : .marble-surface (texture par dégradés, pas
  d'image de bruit), .meander-divider (frise à méandre grecque en SVG
  data-URI).

Composants d'ornement (aucune image bitmap) :
- components/laurel-wreath.tsx : couronne de laurier calculée par
  trigonométrie (deux arcs symétriques de feuilles), réutilisée en logo,
  favicon (icon.svg régénéré avec les mêmes coordonnées) et couronne du
  rang 1 du podium.
- components/diamond-divider.tsx : séparateur ◆ avec filets dégradés.

Header global (components/header.tsx, remplace nav-bar.tsx) :
- Logo laurier + "LE TRIBUNAL" à gauche (cliquable vers le leaderboard).
- Chip utilisateur à droite : avatar (bordure dorée), pseudo, badge de
  rôle (Archonte/Citoyen), points de gloire, menu déroulant (Mon profil,
  Le Conseil des Archontes si juge, Se déconnecter).
- Onglets L'Agora / Le Crieur, frise à méandre en séparateur.
- Responsive : nom du site et pseudo masqués sous le breakpoint sm,
  l'avatar reste toujours visible.

Vocabulaire diégétique (toujours avec le terme fonctionnel à côté) :
juges → Archontes, membres → Citoyens, leaderboard → L'Agora, journal →
Le Crieur (décrets avec sceau de cire oxblood), points positifs/négatifs
→ Honneurs/Blâmes, points → gloires, section admin → Le Conseil des
Archontes.

Avatar : bordure dorée, couleur de fallback dérivée d'un hash du pseudo
(au lieu d'une couleur fixe).

Toutes les pages (login, signup, leaderboard/podium, journal, admin,
profil) sont passées sur les nouveaux tokens/polices/vocabulaire.

README.md et CLAUDE.md : section "Ré-thématisation" remplacée par
"Direction artistique" documentant la palette, les polices et les
ornements ; toute mention du système de re-thème par édition retirée.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-12 13:13:54 +02:00

50 lines
1.5 KiB
TypeScript

import { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
import { ProfileForm } from "./profile-form";
export default async function ProfilePage() {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
redirect("/login");
}
const { data: profile } = await supabase
.from("profiles")
.select("pseudo, avatar_url, pseudo_locked, role")
.eq("id", user.id)
.single();
const isJudge = profile?.role === "judge";
return (
<div className="mx-auto w-full max-w-sm px-4 py-8">
<div className="mb-6 text-center">
<h1 className="font-heading text-2xl tracking-[0.1em] text-gold-bright uppercase">
Mon profil
</h1>
<span
className={`mt-1 inline-block font-heading text-xs tracking-wide uppercase ${
isJudge ? "text-gold-bright" : "text-marble/50"
}`}
>
{isJudge ? "⚜ Archonte" : "Citoyen"}
</span>
</div>
<div className="marble-surface rounded-2xl border border-gold/40 p-6 shadow-xl sm:p-8">
<p className="mb-4 text-sm text-text-mut">{user.email}</p>
<ProfileForm
userId={user.id}
isJudge={isJudge}
initialPseudo={profile?.pseudo ?? ""}
initialAvatarUrl={profile?.avatar_url ?? null}
initialPseudoLocked={profile?.pseudo_locked ?? false}
/>
</div>
</div>
);
}