Skip to content

Fix/UI web #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Netsbump merged 4 commits into from
Oct 23, 2025
Merged

Fix/UI web #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
40d93f6
🐛 fix: button display in hero card
Netsbump Oct 23, 2025
aa9ed35
💄 ui : updates detail panels
Netsbump Oct 23, 2025
65fba2f
🐛 fix: prevent infinite loop in workout creation page
Netsbump Oct 23, 2025
c55f700
💄 ui : updates workout form steps
Netsbump Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
377 changes: 191 additions & 186 deletions apps/web/src/features/complex/complex-detail.tsx
View file
Open in desktop

Large diffs are not rendered by default.

379 changes: 189 additions & 190 deletions apps/web/src/features/exercises/exercise-detail.tsx
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 10 additions & 14 deletions apps/web/src/features/workout/steps/workout-elements-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,17 +160,17 @@ export function WorkoutElementsStep({
</p>
</div>

<Card className="flex-1 flex flex-col min-h-0">
<Card className="flex-1 flex flex-col min-h-0 shadow-none">
<CardContent className="p-4 flex-1 flex flex-col min-h-0">
<div className="flex-1 flex flex-col min-h-0">
{/* Tabs List */}
<div className="grid w-full grid-cols-2 flex-shrink-0 mb-4">
<button
type="button"
onClick={() => setActiveTab('exercise')}
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
className={`px-4 py-2 text-sm font-medium rounded-sm transition-colors ${
activeTab === 'exercise'
? 'bg-primary text-primary-foreground'
? 'bg-secondary text-secondary-foreground'
: 'bg-muted text-muted-foreground hover:bg-muted/80'
}`}
>
Expand All @@ -179,9 +179,9 @@ export function WorkoutElementsStep({
<button
type="button"
onClick={() => setActiveTab('complex')}
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
className={`px-4 py-2 text-sm font-medium rounded-sm transition-colors ${
activeTab === 'complex'
? 'bg-primary text-primary-foreground'
? 'bg-secondary text-secondary-foreground'
: 'bg-muted text-muted-foreground hover:bg-muted/80'
}`}
>
Expand All @@ -203,19 +203,17 @@ export function WorkoutElementsStep({
/>
</div>

<div className="mb-3 flex-shrink-0">
<div className="mb-3 flex-shrink-0 pb-2">
<Button
type="button"
variant="outline"
size="sm"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setCreateExerciseModalOpen(true);
}}
className="w-full bg-primary/5 hover:bg-primary/10"
className="w-full h-10 text-sm"
>
<Plus className="h-4 w-4 mr-2" />
Créer un nouvel exercice
</Button>
</div>
Expand Down Expand Up @@ -267,19 +265,17 @@ export function WorkoutElementsStep({
/>
</div>

<div className="mb-3 flex-shrink-0">
<div className="mb-3 flex-shrink-0 pb-2">
<Button
type="button"
variant="outline"
size="sm"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setCreateComplexModalOpen(true);
}}
className="w-full bg-secondary hover:bg-secondary/80"
className="w-full h-10 text-sm"
>
<Plus className="h-4 w-4 mr-2" />
Créer un nouveau complexe
</Button>
</div>
Expand Down Expand Up @@ -342,7 +338,7 @@ export function WorkoutElementsStep({
</p>
</div>

<Card className="flex-1 flex flex-col min-h-0 relative">
<Card className="flex-1 flex flex-col min-h-0 relative shadow-none">
<CardContent className="p-4 flex-1 flex flex-col min-h-0">
{fields.length === 0 ? (
<div className="flex items-center justify-center h-32 border-2 border-dashed rounded-lg">
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/features/workout/steps/workout-info-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,15 +102,15 @@ export function WorkoutInfoStep({
</p>
</div>

<Card className="flex-1">
<Card className="flex-1 shadow-none">
<CardContent className="p-6 space-y-6">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Nom</FormLabel>
<FormControl className="bg-sidebar">
<FormControl>
<Input placeholder="Nom de l'entraînement" {...field} />
</FormControl>
<FormMessage />
Expand All @@ -124,7 +124,7 @@ export function WorkoutInfoStep({
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl className="bg-sidebar">
<FormControl>
<Textarea
placeholder="Description, commentaires de l'entraînement"
className="min-h-[120px]"
Expand All @@ -143,7 +143,7 @@ export function WorkoutInfoStep({
<FormItem>
<FormLabel>Catégorie</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl className="bg-sidebar">
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Sélectionner une catégorie" />
</SelectTrigger>
Expand Down Expand Up @@ -181,7 +181,7 @@ export function WorkoutInfoStep({
</div>
</div>

<Card className={`flex-1 flex flex-col min-h-0 ${!useTemplate ? 'opacity-50 pointer-events-none' : ''}`}>
<Card className={`flex-1 flex flex-col min-h-0 shadow-none ${!useTemplate ? 'opacity-50 pointer-events-none' : ''}`}>
<CardContent className="p-4 flex-1 flex flex-col min-h-0">
<div className="relative mb-3 flex-shrink-0 bg-sidebar">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/features/workout/steps/workout-planning-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function WorkoutPlanningStep({
</div>
</div>

<Card className={`flex-1 flex flex-col min-h-0 ${!isScheduled ? 'opacity-50 pointer-events-none' : ''}`}>
<Card className={`flex-1 flex flex-col min-h-0 shadow-none ${!isScheduled ? 'opacity-50 pointer-events-none' : ''}`}>
<CardContent className="p-6 flex-1 flex flex-col min-h-0">
{!isScheduled ? (
<div className="flex items-center justify-center h-32 text-center text-muted-foreground">
Expand All @@ -168,7 +168,7 @@ export function WorkoutPlanningStep({
render={({ field }) => (
<FormItem>
<FormLabel>Date de programmation</FormLabel>
<FormControl className="bg-sidebar">
<FormControl>
<Input
type="date"
placeholder="Sélectionner une date"
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/routes/__home.dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ function Dashboard() {
<p className="text-gray-500 text-md">Athlètes dans votre club</p>
<p className="font-bold text-gray-800 text-3xl">24</p>
</div>
<Button className="w-full text-md h-10 rounded-full">
<Button variant="outline" className="w-full text-md h-10 rounded-full">
Inviter un athlète
</Button>
</div>
Expand All @@ -85,7 +85,7 @@ function Dashboard() {
<p className="text-gray-500 text-md">Sessions programmées</p>
<p className="font-bold text-gray-800 text-3xl">12</p>
</div>
<Button className="w-full text-md h-10 rounded-full">
<Button variant="outline" className="w-full text-md h-10 rounded-full">
Ajouter une séance
</Button>
</div>
Expand All @@ -100,7 +100,7 @@ function Dashboard() {
<p className="text-gray-500 text-md">Entrainements programmés</p>
<p className="font-bold text-gray-800 text-3xl">12</p>
</div>
<Button className="w-full text-md h-10 rounded-full">
<Button variant="outline" className="w-full text-md h-10 rounded-full">
Créer un entraînement
</Button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/routes/__home.workouts.create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { usePageMeta } from '@/shared/hooks/use-page-meta';
import { CreateWorkout } from '@dropit/schemas';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { z } from 'zod';

const createWorkoutSearchSchema = z.object({
Expand Down Expand Up @@ -61,9 +61,9 @@ function CreateWorkoutPage() {
}
};

const handleCancel = () => {
const handleCancel = useCallback(() => {
navigate({ to: '/library/workouts' });
};
}, [navigate]);

// Update page meta with title, back button, and steps in the middle
useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/shared/components/ui/details-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function DetailsPanel({
<div
className={cn(
// Desktop: panel intégré dans le layout
'hidden lg:flex lg:w-[430px] lg:flex-shrink-0 lg:rounded-2xl lg:flex-col lg:h-full',
'hidden lg:flex lg:w-[430px] lg:flex-shrink-0 lg:rounded-2xl lg:flex-col lg:h-full p-2',
// Mobile: drawer fixe en bas
'lg:static fixed inset-x-0 bottom-0 top-16 z-50 rounded-t-xl border-t lg:border-t-0',
'flex flex-col',
Expand All @@ -51,7 +51,7 @@ export function DetailsPanel({
>
<div className="flex flex-col w-full h-full p-4">
<div className="flex items-center justify-between mb-4 flex-none">
<h2 className="text-lg font-semibold">{title}</h2>
<h2 className="text-lg text-gray-700">{title}</h2>
<Button variant="ghost" size="icon" onClick={onClose}>
<X className="h-4 w-4" />
</Button>
Expand Down
22 changes: 11 additions & 11 deletions apps/web/src/shared/components/ui/hero-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,17 +104,17 @@ export function HeroCard({

{/* Call to action optionnel */}
{stat.callToAction && (
<Button
variant="secondary"
size="sm"
onClick={stat.callToAction.onClick}
className="bg-white hover:bg-gray-50 text-gray-700 text-xs border h-12 py-1 px-4 flex items-center gap-3"
>
<span>{stat.callToAction.text}</span>
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 flex-shrink-0">
<Play className="h-3 w-3 text-white fill-white" />
</div>
</Button>
<Button
variant="secondary"
size="sm"
onClick={stat.callToAction.onClick}
className="bg-white hover:bg-gray-50 text-gray-700 text-xs border min-h-12 py-2 px-3 flex items-center gap-2 whitespace-normal rounded-xl max-w-[90%]"
>
<span className="text-center leading-snug flex-1">{stat.callToAction.text}</span>
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 flex-shrink-0">
<Play className="h-3 w-3 text-white fill-white" />
</div>
</Button>
)}
</div>
)}
Expand Down
9 changes: 5 additions & 4 deletions apps/web/src/shared/components/ui/steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { cn } from '@/lib/utils';
import { Check } from 'lucide-react';
import * as React from 'react';

interface Step {
id: string;
Expand All @@ -18,8 +19,8 @@ export function Steps({ steps, currentStep, onStepClick }: StepsProps) {
<nav aria-label="Progress" className="w-full">
<div className="flex items-center">
{steps.map((step, index) => (
<>
<div key={step.id} className="flex items-center">
<React.Fragment key={step.id}>
<div className="flex items-center">
<button
type="button"
onClick={() => onStepClick?.(index)}
Expand Down Expand Up @@ -56,7 +57,7 @@ export function Steps({ steps, currentStep, onStepClick }: StepsProps) {

{/* Trait de liaison */}
{index < steps.length - 1 && (
<div key={`line-${step.id}-${steps[index + 1].id}`} className="mx-3">
<div className="mx-3">
<div className={cn(
'h-0.5 w-8 transition-colors duration-200',
{
Expand All @@ -66,7 +67,7 @@ export function Steps({ steps, currentStep, onStepClick }: StepsProps) {
)} />
</div>
)}
</>
</React.Fragment>
))}
</div>
</nav>
Expand Down