refactor: add SessionPageHeader and apply to all 6 session detail pages

- Create SessionPageHeader component (breadcrumb + editable title + collaborator + badges + date)
- Embed UPDATE_FN map internally, keyed by workshopType — no prop drilling
- Replace duplicated header blocks in sessions, motivators, year-review, weather, weekly-checkin, gif-mood

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-03 14:15:43 +01:00
parent b1ba43fd30
commit 09a849279b
9 changed files with 191 additions and 281 deletions

View File

@@ -1,13 +1,10 @@
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { auth } from '@/lib/auth';
import { getWorkshop, getSessionsTabUrl } from '@/lib/workshops';
import { getSessionById } from '@/services/sessions';
import { getUserTeams } from '@/services/teams';
import { SwotBoard } from '@/components/swot/SwotBoard';
import { SessionLiveWrapper } from '@/components/collaboration';
import { EditableSessionTitle } from '@/components/ui';
import { Badge, CollaboratorDisplay } from '@/components/ui';
import { Badge, SessionPageHeader } from '@/components/ui';
interface SessionPageProps {
params: Promise<{ id: string }>;
@@ -32,49 +29,20 @@ export default async function SessionPage({ params }: SessionPageProps) {
return (
<main className="mx-auto max-w-7xl px-4">
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-2 text-sm text-muted mb-2">
<Link href={getSessionsTabUrl('swot')} className="hover:text-foreground">
{getWorkshop('swot').labelShort}
</Link>
<span>/</span>
<span className="text-foreground">{session.title}</span>
{!session.isOwner && (
<Badge variant="accent" className="ml-2">
Partagé par {session.user.name || session.user.email}
</Badge>
)}
</div>
<div className="flex items-start justify-between">
<div>
<EditableSessionTitle
sessionId={session.id}
initialTitle={session.title}
canEdit={session.canEdit}
/>
<div className="mt-2">
<CollaboratorDisplay
collaborator={session.resolvedCollaborator}
size="lg"
showEmail
/>
</div>
</div>
<div className="flex items-center gap-3">
<Badge variant="primary">{session.items.length} items</Badge>
<Badge variant="success">{session.actions.length} actions</Badge>
<span className="text-sm text-muted">
{new Date(session.date).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</span>
</div>
</div>
</div>
<SessionPageHeader
workshopType="swot"
sessionId={session.id}
sessionTitle={session.title}
isOwner={session.isOwner}
canEdit={session.canEdit}
ownerUser={session.user}
date={session.date}
collaborator={session.resolvedCollaborator}
badges={<>
<Badge variant="primary">{session.items.length} items</Badge>
<Badge variant="success">{session.actions.length} actions</Badge>
</>}
/>
{/* Live Session Wrapper */}
<SessionLiveWrapper