billisdead/la-voix-du-peuple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize front page to make synthesized text scrollable

Browse Source 
Restructure the home page's right column to include a fixed header, a scrollable area for synthesized text with a fixed font size, and a fixed footer for metadata.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c440572c-6e87-4d40-846d-c503ee9e862c
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/RusmVRz
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
pironantoine
2026-04-04 06:52:24 +00:00
parent 93ba11905f
commit e2a0b6401d
1 changed files with 53 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/voix-du-peuple/src/pages/home.tsx
+31 -41
View File
@@ -305,79 +305,69 @@ export default function Home() {
}}
/>
<div className="p-6 md:p-12 flex-1 flex flex-col relative z-10 overflow-y-auto">
<div className="flex justify-between items-start mb-12">
{/* En-tête fixe */}
<div className="flex justify-between items-start px-6 md:px-10 py-5 border-b border-border/30 relative z-10 flex-shrink-0">
<div>
<h2 className="text-sm font-mono font-bold uppercase tracking-widest text-primary flex items-center gap-2">
<Users className="h-4 w-4" /> Synthèse des contributions
<h2 className="text-xs font-mono font-bold uppercase tracking-widest text-primary flex items-center gap-2">
<Users className="h-3.5 w-3.5" /> Synthèse des contributions
</h2>
<p className="text-xs font-mono text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-0.5">
Mise à jour à chaque nouvelle contribution
</p>
</div>
{stats && (
<div className="text-xs font-mono text-right" data-testid="text-stats">
<div className="flex flex-col">
<span className="text-muted-foreground">Contributions intégrées </span>
<span className="font-bold text-primary">{stats.accepted}</span>
</div>
</div>
)}
</div>
<div className="flex-1 flex flex-col justify-center max-w-2xl mx-auto w-full">
{/* Texte défilable */}
<ScrollArea className="flex-1 relative z-10">
<div className="px-6 md:px-10 py-8">
{isLoadingSynthesis ? (
<div className="flex flex-col items-center justify-center gap-4 text-muted-foreground">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<span className="font-mono text-sm uppercase tracking-widest">
Chargement…
</span>
<div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin text-primary" />
<span className="font-mono text-xs uppercase tracking-widest">Chargement…</span>
</div>
) : synthesis ? (
<div className="animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out space-y-8">
) : synthesis?.text ? (
<div
className="prose prose-lg prose-slate max-w-none text-2xl md:text-3xl lg:text-4xl leading-tight font-serif text-foreground"
className="animate-in fade-in slide-in-from-bottom-2 duration-700 ease-out text-sm md:text-base leading-relaxed text-foreground space-y-4 whitespace-pre-line"
data-testid="text-synthesis-content"
>
{synthesis.text ? (
<div>{synthesis.text}</div>
) : (
<p className="text-muted-foreground italic text-center text-xl">
{synthesis.text}
</div>
) : synthesis ? (
<p className="text-muted-foreground italic text-sm py-16 text-center">
Aucune contribution pour l'instant.
</p>
) : (
<div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
<AlertCircle className="h-6 w-6 text-destructive" />
<span className="font-mono text-xs uppercase tracking-widest">Impossible de récupérer la synthèse</span>
</div>
)}
</div>
</ScrollArea>
{synthesis.updatedAt && (
{/* Pied de page fixe */}
{synthesis?.updatedAt && (
<div
className="pt-8 border-t border-border/40 mt-12 flex justify-between items-center text-xs font-mono text-muted-foreground"
className="flex justify-between items-center px-6 md:px-10 py-3 border-t border-border/30 text-xs font-mono text-muted-foreground relative z-10 flex-shrink-0"
data-testid="text-synthesis-meta"
>
<span>
Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}
</span>
<span className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span>Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}</span>
<span className="flex items-center gap-1.5">
<span className="relative flex h-1.5 w-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
</span>
Mis à jour le {format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })}
{format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })}
</span>
</div>
)}
</div>
) : (
<div className="flex flex-col items-center justify-center gap-4 text-muted-foreground">
<AlertCircle className="h-8 w-8 text-destructive" />
<span className="font-mono text-sm uppercase tracking-widest">
Impossible de récupérer le manifeste
</span>
</div>
)}
</div>
</div>
</div>
</div>
</>
);