diff --git a/src/app/sessions/WorkshopTabs.tsx b/src/app/sessions/WorkshopTabs.tsx index 9065f17..d99ed70 100644 --- a/src/app/sessions/WorkshopTabs.tsx +++ b/src/app/sessions/WorkshopTabs.tsx @@ -1,16 +1,24 @@ 'use client'; -import { useState, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useSearchParams, useRouter } from 'next/navigation'; import { CollaboratorDisplay } from '@/components/ui'; -import { type WorkshopTabType, WORKSHOPS, VALID_TAB_PARAMS } from '@/lib/workshops'; +import { type WorkshopTabType, VALID_TAB_PARAMS } from '@/lib/workshops'; import { useClickOutside } from '@/hooks/useClickOutside'; import { - type CardView, type SortCol, type WorkshopTabsProps, type AnySession, - TABLE_COLS, SORT_COLUMNS, TYPE_TABS, + type CardView, + type SortCol, + type WorkshopTabsProps, + type AnySession, + TABLE_COLS, + SORT_COLUMNS, + TYPE_TABS, } from './workshop-session-types'; import { - getResolvedCollaborator, groupByPerson, getMonthGroup, sortSessions, + getResolvedCollaborator, + groupByPerson, + getMonthGroup, + sortSessions, } from './workshop-session-helpers'; import { SessionCard } from './SessionCard'; @@ -33,7 +41,13 @@ function SectionHeader({ label, count }: { label: string; count: number }) { function SortIcon({ active, dir }: { active: boolean; dir: 'asc' | 'desc' }) { if (!active) { return ( - + @@ -72,27 +86,61 @@ function ViewToggle({ view, setView }: { view: CardView; setView: (v: CardView) return (
- {btn('grid', 'Grille', + {btn( + 'grid', + 'Grille', - - - + + + + + + + + + )} - {btn('list', 'Liste', - - + {btn( + 'list', + 'Liste', + + + + )} - {btn('table', 'Tableau', + {btn( + 'table', + 'Tableau', - - + + + + )} - {btn('timeline', 'Chronologique', - + {btn( + 'timeline', + 'Chronologique', + @@ -108,11 +156,23 @@ function ViewToggle({ view, setView }: { view: CardView; setView: (v: CardView) // ─── TabButton ──────────────────────────────────────────────────────────────── -function TabButton({ active, onClick, icon, label, count }: { - active: boolean; onClick: () => void; icon: string; label: string; count: number; +function TabButton({ + active, + onClick, + icon, + label, + count, +}: { + active: boolean; + onClick: () => void; + icon: string; + label: string; + count: number; }) { return ( - {icon} {label} - + {count} @@ -131,10 +193,17 @@ function TabButton({ active, onClick, icon, label, count }: { // ─── TypeFilterDropdown ─────────────────────────────────────────────────────── function TypeFilterDropdown({ - activeTab, setActiveTab, open, onOpenChange, counts, + activeTab, + setActiveTab, + open, + onOpenChange, + counts, }: { - activeTab: WorkshopTabType; setActiveTab: (t: WorkshopTabType) => void; - open: boolean; onOpenChange: (v: boolean) => void; counts: Record; + activeTab: WorkshopTabType; + setActiveTab: (t: WorkshopTabType) => void; + open: boolean; + onOpenChange: (v: boolean) => void; + counts: Record; }) { const typeTabs = TYPE_TABS.filter((t) => t.value !== 'all' && t.value !== 'team'); const current = TYPE_TABS.find((t) => t.value === activeTab) ?? TYPE_TABS[0]; @@ -156,25 +225,55 @@ function TypeFilterDropdown({ > {isTypeSelected ? current.icon : '🔖'} {isTypeSelected ? current.label : 'Type'} - + {isTypeSelected ? (counts[activeTab] ?? 0) : totalCount} - + {open && (
- {typeTabs.map((t) => ( - ))}
@@ -186,16 +285,25 @@ function TypeFilterDropdown({ // ─── SessionsGrid ───────────────────────────────────────────────────────────── function SessionsGrid({ - sessions, view, isTeamCollab = false, + sessions, + view, + isTeamCollab = false, }: { - sessions: AnySession[]; view: CardView; isTeamCollab?: boolean; + sessions: AnySession[]; + view: CardView; + isTeamCollab?: boolean; }) { if (view === 'table') { return (
-
+
{SORT_COLUMNS.map((col) => ( -
{col.label}
+
+ {col.label} +
))}
{sessions.map((s) => ( @@ -205,7 +313,11 @@ function SessionsGrid({ ); } return ( -
+
{sessions.map((s) => ( ))} @@ -216,7 +328,10 @@ function SessionsGrid({ // ─── SortableTableView ──────────────────────────────────────────────────────── function SortableTableView({ - sessions, sortCol, sortDir, onSort, + sessions, + sortCol, + sortDir, + onSort, }: { sessions: AnySession[]; sortCol: SortCol; @@ -228,7 +343,10 @@ function SortableTableView({ } return (
-
+
{SORT_COLUMNS.map((col) => (