ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Massive Material 3 re-styling

Browse Source
This commit is contained in:
AG
2025-12-12 01:06:09 +02:00
parent 55d414da19
commit bc1b747ef4
13 changed files with 374 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
server/test.db
View File

Binary file not shown.

16
src/components/ExerciseModal.tsx
View File

@@ -7,6 +7,7 @@ import { generateId } from '../utils/uuid';
import FilledInput from './FilledInput';
import { SideSheet } from './ui/SideSheet';
import { Button } from './ui/Button';
import { Checkbox } from './ui/Checkbox';
interface ExerciseModalProps {
isOpen: boolean;
@@ -76,7 +77,7 @@ const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave,
{console.log('ExerciseModal Rendering. isOpen:', isOpen)}
<div className="space-y-6">
<div>
<GymFilledInput
<FilledInput
label={t('ex_name', lang)}
value={newName}
onChange={(e: any) => {
@@ -120,7 +121,7 @@ const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave,
</div>
{newType === ExerciseType.BODYWEIGHT && (
<GymFilledInput
<FilledInput
label={t('body_weight_percent', lang)}
value={newBwPercentage}
onChange={(e: any) => setNewBwPercentage(e.target.value)}
@@ -128,17 +129,12 @@ const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave,
/>
)}
<div className="flex items-center gap-3 px-1">
<input
type="checkbox"
id="isUnilateral"
<div className="flex items-center gap-3 px-1 pt-2">
<Checkbox
checked={isUnilateral}
onChange={(e) => setIsUnilateral(e.target.checked)}
className="w-5 h-5 rounded border-2 border-outline bg-surface-container-high checked:bg-primary checked:border-primary cursor-pointer"
label={t('unilateral_exercise', lang) || 'Unilateral exercise'}
/>
<label htmlFor="isUnilateral" className="text-sm text-on-surface cursor-pointer">
{t('unilateral_exercise', lang) || 'Unilateral exercise (separate left/right tracking)'}
</label>
</div>
<div className="flex justify-end mt-4 pt-4">

58
src/components/FilledInput.tsx
View File

@@ -16,9 +16,15 @@ interface FilledInputProps {
autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
autoComplete?: string;
rightElement?: React.ReactNode;
multiline?: boolean;
rows?: number;
}
const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onClear, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement }) => {
const FilledInput: React.FC<FilledInputProps> = ({
label, value, onChange, onClear, onFocus, onBlur, type = "number", icon,
autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement,
multiline = false, rows = 3
}) => {
const id = useId();
const handleClear = () => {
@@ -30,25 +36,41 @@ const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onCle
};
return (
<div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
<label htmlFor={id} className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
<div className="relative group bg-surface-container-high rounded-t-[4px] border-b border-on-surface-variant hover:bg-on-surface/10 focus-within:border-primary focus-within:border-b-2 transition-colors min-h-[56px]">
<label htmlFor={id} className="absolute top-2 left-4 text-label-sm font-medium text-on-surface-variant flex items-center gap-1 group-focus-within:text-primary">
{icon ? <>{icon} {label}</> : label}
</label>
<input
id={id}
type={type}
step={step}
inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
autoFocus={autoFocus}
className={`w-full pt-6 pb-2 pl-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
placeholder="0"
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
autoCapitalize={autocapitalize}
autoComplete={autoComplete}
/>
{!multiline ? (
<input
id={id}
type={type}
step={step}
inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
autoFocus={autoFocus}
className={`w-full h-[56px] pt-5 pb-1 pl-4 bg-transparent text-body-lg text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
placeholder=" "
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
autoCapitalize={autocapitalize}
autoComplete={autoComplete}
/>
) : (
<textarea
id={id}
rows={rows}
className={`w-full pt-6 pb-2 pl-4 bg-transparent text-body-lg text-on-surface focus:outline-none placeholder-transparent resize-none ${rightElement ? 'pr-20' : 'pr-10'}`}
placeholder=" "
value={value}
onChange={onChange as any}
onFocus={onFocus as any}
onBlur={onBlur as any}
autoCapitalize={autocapitalize}
/>
)}
{value !== '' && value !== 0 && (
<button
type="button"

71
src/components/History.tsx
View File

@@ -232,7 +232,7 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
size="icon"
className="text-on-surface-variant hover:text-primary"
>
<Pencil size={20} />
<Pencil size={24} />
</Button>
<Button
onClick={(e) => {
@@ -243,7 +243,7 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
size="icon"
className="text-on-surface-variant hover:text-error"
>
<Trash2 size={20} />
<Trash2 size={24} />
</Button>
</div>
</div>
@@ -300,9 +300,9 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
}}
variant="ghost"
size="icon"
className="h-8 w-8"
className="text-on-surface-variant hover:text-primary"
>
<Pencil size={16} />
<Pencil size={24} />
</Button>
<Button
onClick={() => {
@@ -314,9 +314,9 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
}}
variant="ghost"
size="icon"
className="h-8 w-8 text-error hover:text-error"
className="text-error hover:text-error"
>
<Trash2 size={16} />
<Trash2 size={24} />
</Button>
</div>
</Card>
@@ -372,38 +372,37 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
onClose={() => setEditingSession(null)}
title={t('edit', lang)}
width="lg"
footer={
<div className="flex justify-end">
<Button onClick={handleSaveEdit}>
<Save size={16} className="mr-2" />
{t('save', lang)}
</Button>
</div>
}
>
<div className="space-y-6">
{/* Meta Info */}
<div className="grid grid-cols-2 gap-4">
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
<label className="text-[10px] text-on-surface-variant font-bold block">{t('start_time', lang)}</label>
<input
type="datetime-local"
value={formatDateForInput(editingSession.startTime)}
onChange={(e) => setEditingSession({ ...editingSession, startTime: parseDateFromInput(e.target.value) })}
className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
/>
</div>
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
<label className="text-[10px] text-on-surface-variant font-bold block">{t('end_time', lang)}</label>
<input
type="datetime-local"
value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
onChange={(e) => setEditingSession({ ...editingSession, endTime: parseDateFromInput(e.target.value) })}
className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
/>
</div>
</div>
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
<label className="text-[10px] text-on-surface-variant font-bold block">{t('weight_kg', lang)}</label>
<input
type="number"
value={editingSession.userBodyWeight || ''}
onChange={(e) => setEditingSession({ ...editingSession, userBodyWeight: parseFloat(e.target.value) })}
className="w-full bg-transparent text-on-surface focus:outline-none text-lg mt-1"
<FilledInput
label={t('start_time', lang)}
type="datetime-local"
value={formatDateForInput(editingSession.startTime)}
onChange={(e: any) => setEditingSession({ ...editingSession, startTime: parseDateFromInput(e.target.value) })}
/>
<FilledInput
label={t('end_time', lang)}
type="datetime-local"
value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
onChange={(e: any) => setEditingSession({ ...editingSession, endTime: parseDateFromInput(e.target.value) })}
/>
</div>
<FilledInput
label={t('weight_kg', lang)}
type="number"
value={editingSession.userBodyWeight || ''}
onChange={(e: any) => setEditingSession({ ...editingSession, userBodyWeight: parseFloat(e.target.value) })}
/>
<div className="space-y-3">
<h3 className="text-sm font-medium text-primary ml-1">{t('sets_count', lang)} ({editingSession.sets.length})</h3>
@@ -443,12 +442,8 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
))}
</div>
<div className="flex justify-end pt-4 border-t border-outline-variant">
<Button onClick={handleSaveEdit}>
<Save size={16} className="mr-2" />
{t('save', lang)}
</Button>
</div>
</div>
</SideSheet>
)

20
src/components/Navbar.tsx
View File

@@ -36,11 +36,15 @@ const Navbar: React.FC<NavbarProps> = ({ lang }) => {
onClick={() => navigate(item.path)}
className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
>
<div className={`px-4 py-1 rounded-full transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
<div className={`w-[64px] h-[32px] rounded-full flex items-center justify-center transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
}`}>
<item.icon size={22} strokeWidth={isActive ? 2.5 : 2} />
<item.icon
size={24}
strokeWidth={isActive ? 2.5 : 2}
fill="none"
/>
</div>
<span className={`text-[10px] font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
<span className={`text-label-md font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
}`}>
{item.label}
</span>
@@ -61,11 +65,15 @@ const Navbar: React.FC<NavbarProps> = ({ lang }) => {
onClick={() => navigate(item.path)}
className="flex flex-col items-center gap-1 group w-full"
>
<div className={`w-14 h-8 rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
<div className={`w-[56px] h-[32px] rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
}`}>
<item.icon size={24} />
<item.icon
size={24}
strokeWidth={isActive ? 2.5 : 2}
fill="none"
/>
</div>
<span className={`text-[11px] font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
<span className={`text-label-md font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
}`}>
{item.label}
</span>

108
src/components/Plans.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Edit2, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical, Scale, Search } from 'lucide-react';
import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Pencil, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical, Scale, Search } from 'lucide-react';
import { WorkoutPlan, ExerciseDef, PlannedSet, Language, ExerciseType } from '../types';
import { getExercises, saveExercise } from '../services/storage';
import { t } from '../services/i18n';
@@ -14,6 +14,7 @@ import { Button } from './ui/Button';
import { Card } from './ui/Card';
import { Modal } from './ui/Modal';
import { SideSheet } from './ui/SideSheet';
import { Checkbox } from './ui/Checkbox';
interface PlansProps {
lang: Language;
@@ -213,15 +214,14 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
onBlur={() => setName(toTitleCase(name))}
/>
<div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-4 py-2">
<label className="text-[10px] text-on-surface-variant font-medium">{t('prep_title', lang)}</label>
<textarea
className="w-full bg-transparent text-base text-on-surface focus:outline-none pt-1 pb-2 min-h-[80px]"
placeholder={t('plan_desc_ph', lang)}
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
<FilledInput
label={t('prep_title', lang)}
value={description}
onChange={(e: any) => setDescription(e.target.value)}
multiline
rows={3}
type="text"
/>
<div className="space-y-3">
<div className="flex justify-between items-center px-2">
@@ -404,57 +404,59 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
<h2 className="text-2xl font-normal text-on-surface">{t('my_plans', lang)}</h2>
</div>
<div className="flex-1 p-4 overflow-y-auto space-y-4 pb-24">
<div className="flex-1 p-4 overflow-y-auto pb-24">
{plans.length === 0 ? (
<div className="text-center text-on-surface-variant mt-20 flex flex-col items-center">
<div className="w-16 h-16 bg-surface-container-high rounded-full flex items-center justify-center mb-4">
<List size={32} />
</div>
<p className="text-lg">{t('plans_empty', lang)}</p>
<p className="text-headline-sm">{t('plans_empty', lang)}</p>
</div>
) : (
plans.map(plan => (
<Card key={plan.id} className="relative overflow-hidden">
<div className="flex justify-between items-start mb-2">
<h3 className="text-xl font-normal text-on-surface">{plan.name}</h3>
<Button
onClick={(e) => handleDelete(plan.id, e)}
variant="ghost"
size="icon"
aria-label="Delete Plan"
className="text-on-surface-variant hover:text-error hover:bg-white/5"
>
<Trash2 size={20} />
</Button>
</div>
<div className="absolute top-4 right-14">
<Button
onClick={(e) => { e.stopPropagation(); handleEdit(plan); }}
variant="ghost"
size="icon"
aria-label="Edit Plan"
className="text-on-surface-variant hover:text-primary hover:bg-white/5"
>
<Edit2 size={20} />
</Button>
</div>
<p className="text-on-surface-variant text-sm line-clamp-2 mb-4 min-h-[1.25rem]">
{plan.description || t('prep_no_instructions', lang)}
</p>
<div className="flex items-center justify-between">
<div className="text-xs font-medium text-primary bg-primary-container/20 px-3 py-1 rounded-full">
{plan.steps.length} {t('exercises_count', lang)}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{plans.map(plan => (
<Card key={plan.id} className="relative overflow-hidden group">
<div className="flex justify-between items-start mb-2">
<h3 className="text-title-lg font-normal text-on-surface">{plan.name}</h3>
<div className="flex gap-1">
<Button
onClick={(e) => { e.stopPropagation(); handleEdit(plan); }}
variant="ghost"
size="icon"
aria-label="Edit Plan"
className="text-on-surface-variant hover:text-primary hover:bg-surface-container-high"
>
<Pencil size={20} />
</Button>
<Button
onClick={(e) => handleDelete(plan.id, e)}
variant="ghost"
size="icon"
aria-label="Delete Plan"
className="text-on-surface-variant hover:text-error hover:bg-error-container/10"
>
<Trash2 size={20} />
</Button>
</div>
</div>
<Button
onClick={() => handleStart(plan)}
className="flex items-center gap-2"
>
<PlayCircle size={18} />
{t('start', lang)}
</Button>
</div>
</Card>
))
<p className="text-on-surface-variant text-body-md line-clamp-2 mb-4 min-h-[1.5rem]">
{plan.description || t('prep_no_instructions', lang)}
</p>
<div className="flex items-center justify-between">
<div className="text-label-md font-medium text-primary bg-primary-container/20 px-3 py-1 rounded-full">
{plan.steps.length} {t('exercises_count', lang)}
</div>
<Button
onClick={() => handleStart(plan)}
className="flex items-center gap-2"
>
<PlayCircle size={18} />
{t('start', lang)}
</Button>
</div>
</Card>
))}
</div>
)}
</div>

18
src/components/Profile.tsx
View File

@@ -427,7 +427,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
</div>
<div className="flex items-center gap-1 shrink-0">
<button onClick={() => setEditingExercise(ex)} className="p-2 text-on-surface-variant hover:text-primary hover:bg-white/5 rounded-full" role="button" aria-label="Edit Exercise">
<Pencil size={16} />
<Pencil size={18} />
</button>
<button
onClick={() => handleArchiveExercise(ex, !ex.isArchived)}
@@ -436,7 +436,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
role="button"
aria-label={ex.isArchived ? 'Unarchive Exercise' : 'Archive Exercise'}
>
{ex.isArchived ? <ArchiveRestore size={16} /> : <Archive size={16} />}
{ex.isArchived ? <ArchiveRestore size={18} /> : <Archive size={18} />}
</button>
</div>
</div>
@@ -556,7 +556,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
title={u.isBlocked ? t('unblock', lang) : t('block', lang)}
aria-label={u.isBlocked ? t('unblock', lang) : t('block', lang)}
>
<Ban size={16} />
<Ban size={18} />
</button>
<button
onClick={() => handleAdminDeleteUser(u.id)}
@@ -564,7 +564,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
title={t('delete', lang)}
aria-label={t('delete', lang)}
>
<Trash2 size={16} />
<Trash2 size={18} />
</button>
</>
)}
@@ -607,6 +607,12 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
onClose={() => setEditingExercise(null)}
title={t('edit', lang)}
width="md"
footer={
<div className="flex justify-end gap-2">
<Button onClick={() => setEditingExercise(null)} variant="ghost">{t('cancel', lang)}</Button>
<Button onClick={handleSaveExerciseEdit}>{t('save', lang)}</Button>
</div>
}
>
<div className="space-y-4">
<div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-3 py-2">
@@ -628,10 +634,6 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
/>
</div>
)}
<div className="flex justify-end gap-2 pt-2">
<Button onClick={() => setEditingExercise(null)} variant="ghost">{t('cancel', lang)}</Button>
<Button onClick={handleSaveExerciseEdit}>{t('save', lang)}</Button>
</div>
</div>
</SideSheet>
)}

4
src/components/ui/Button.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Loader2 } from 'lucide-react';
import { Ripple } from './Ripple';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
@@ -35,10 +36,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return (
<button
ref={ref}
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className}`}
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className} relative overflow-hidden`}
disabled={disabled || loading}
{...props}
>
<Ripple color={variant === 'primary' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)'} />
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{children}
</button>

21
src/components/ui/Card.tsx
View File

@@ -1,17 +1,34 @@
import React from 'react';
import { Ripple } from './Ripple';
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
className?: string;
noPadding?: boolean;
variant?: 'elevated' | 'outlined' | 'filled';
}
export const Card: React.FC<CardProps> = ({ className = '', children, noPadding = false, ...props }) => {
export const Card: React.FC<CardProps> = ({ className = '', children, noPadding = false, variant = 'elevated', ...props }) => {
// M3 Card Variants
// Elevated: Surface Container Low + Shadow + No Border (Default)
// Outlined: Surface + Border + No Shadow
// Filled: Surface Container Highest + No Shadow + No Border
const variants = {
elevated: "bg-surface-container-low border-none shadow-elevation-1",
outlined: "bg-surface border border-outline-variant shadow-none",
filled: "bg-surface-container-high border-none shadow-none"
};
return (
<div
className={`bg-surface-container rounded-xl border border-outline-variant/20 shadow-elevation-1 overflow-hidden ${!noPadding ? 'p-4' : ''} ${className}`}
className={`rounded-xl overflow-hidden relative ${variants[variant]} ${!noPadding ? 'p-4' : ''} ${className}`}
{...props}
>
{props.onClick && <Ripple />}
{children}
</div>
);

44
src/components/ui/Checkbox.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { Check } from 'lucide-react';
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
label?: string; // Optional label text
checked: boolean;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export const Checkbox: React.FC<CheckboxProps> = ({ label, checked, onChange, className = '', ...props }) => {
return (
<label className={`flex items-center gap-2 cursor-pointer group ${className}`}>
<div className="relative flex items-center justify-center w-[48px] h-[48px] shrink-0">
{/* Real hidden input */}
<input
type="checkbox"
className="appearance-none peer absolute inset-0 w-full h-full cursor-pointer z-10 opacity-0"
checked={checked}
onChange={onChange}
{...props}
/>
{/* Visual Box */}
<div className="
w-[18px] h-[18px]
rounded-[2px]
border-2 border-on-surface-variant
peer-checked:bg-primary peer-checked:border-primary
peer-checked:text-on-primary
group-hover:bg-on-surface-variant/10
transition-all duration-200
flex items-center justify-center
">
<Check size={14} className={`opacity-0 peer-checked:opacity-100 transition-opacity duration-200 text-on-primary ${checked ? 'opacity-100' : ''}`} strokeWidth={3} />
</div>
{/* State Layer (Hover/Focus Halo) - handled by hover on parent usually, but M3 has a dedicated circle */}
<div className="absolute inset-0 rounded-full scale-0 group-hover:scale-100 bg-on-surface/10 transition-transform duration-200 -z-0 pointer-events-none" />
</div>
{label && <span className="text-body-md text-on-surface select-none">{label}</span>}
</label>
);
};

108
src/components/ui/Ripple.tsx Normal file
View File

@@ -0,0 +1,108 @@
import React, { useState, useLayoutEffect, useCallback } from 'react';
interface RippleProps {
color?: string;
duration?: number;
}
interface RippleState {
x: number;
y: number;
size: number;
key: number;
}
/**
* A Material 3 Ripple effect component.
* Usage: Place it inside a relatively positioned container.
* The parent container needs to handle the click event or you need to
* pass a ref to trigger it?
*
* Actually, to keep it simple and non-intrusive:
* This component just renders the ripples. The PARENT component (Button/Card)
* must call `addRipple(e)` which is exposed via Ref?
*
* OR easier:
* <Ripple /> automatically attaches a click listener to its parentNode?
* That's a bit "magical" but works well for drop-in.
*/
export const Ripple: React.FC<RippleProps> = ({ color = 'rgba(255, 255, 255, 0.3)', duration = 600 }) => {
const [ripples, setRipples] = useState<RippleState[]>([]);
const containerRef = React.useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
const container = containerRef.current?.parentElement;
if (!container) return;
const handleMouseDown = (e: MouseEvent | TouchEvent) => {
// Get coordinates
const rect = container.getBoundingClientRect();
let clientX, clientY;
if ('touches' in e) {
// Touch
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
} else {
// Mouse
clientX = (e as MouseEvent).clientX;
clientY = (e as MouseEvent).clientY;
}
const size = Math.max(container.offsetWidth, container.offsetHeight);
const x = clientX - rect.left;
const y = clientY - rect.top;
const newRipple = {
x,
y,
size,
key: Date.now()
};
setRipples(prev => [...prev, newRipple]);
};
// Attach listeners to parent
// 'mousedown' covers desktop. 'touchstart' might be needed for mobile/instant feedback but often conflicts with scrolling.
// Let's stick to mousedown for now, or click? Mousedown feels snappier.
container.addEventListener('mousedown', handleMouseDown);
// Ensure parent is relative and overflow hidden if possible?
// We shouldn't force styles that break layout, but user must know.
const style = window.getComputedStyle(container);
if (style.position === 'static') {
container.style.position = 'relative';
}
if (style.overflow !== 'hidden') {
container.style.overflow = 'hidden';
}
return () => {
container.removeEventListener('mousedown', handleMouseDown);
};
}, []);
return (
<div
ref={containerRef}
className="absolute inset-0 pointer-events-none z-0 rounded-[inherit]"
>
{ripples.map((ripple) => (
<span
key={ripple.key}
style={{
top: ripple.y,
left: ripple.x,
width: ripple.size,
height: ripple.size,
backgroundColor: color,
animationDuration: `${duration}ms`
}}
className="absolute rounded-full animate-ripple transform -translate-x-1/2 -translate-y-1/2 opacity-30"
onAnimationEnd={() => setRipples(prev => prev.filter(i => i.key !== ripple.key))}
/>
))}
</div>
);
};

14
src/components/ui/SideSheet.tsx
View File

@@ -9,9 +9,10 @@ interface SideSheetProps {
title?: string;
children: React.ReactNode;
width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
footer?: React.ReactNode;
}
export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, children, width = 'md' }) => {
export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, children, width = 'md', footer }) => {
const [isMounted, setIsMounted] = useState(false);
const [isVisible, setIsVisible] = useState(false);
@@ -24,7 +25,7 @@ export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, ch
setIsVisible(true);
document.body.style.overflow = 'hidden';
} else {
const timer = setTimeout(() => setIsVisible(false), 300); // Allow exit animation
const timer = setTimeout(() => setIsVisible(false), 500); // Allow exit animation
document.body.style.overflow = 'unset';
return () => clearTimeout(timer);
}
@@ -71,7 +72,7 @@ export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, ch
shadow-elevation-3
/* Animations */
transition-transform duration-300 ease-out
transition-transform duration-500 ease-[cubic-bezier(0.2,0.0,0,1.0)]
${isOpen
? 'translate-y-0 sm:translate-y-0 sm:translate-x-0'
: 'translate-y-full sm:translate-y-0 sm:translate-x-full'
@@ -100,6 +101,13 @@ export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, ch
<div className="flex-1 overflow-y-auto px-6 pb-6 pt-0">
{children}
</div>
{/* Footer */}
{footer && (
<div className="px-6 py-4 border-t border-outline-variant shrink-0 bg-surface-container">
{footer}
</div>
)}
</div>
</div>,
document.body

34
tailwind.config.js
View File

@@ -9,6 +9,23 @@ export default {
fontFamily: {
sans: ['Roboto', 'sans-serif'],
},
fontSize: {
'display-lg': ['57px', '64px'],
'display-md': ['45px', '52px'],
'display-sm': ['36px', '44px'],
'headline-lg': ['32px', '40px'],
'headline-md': ['28px', '36px'],
'headline-sm': ['24px', '32px'],
'title-lg': ['22px', '28px'],
'title-md': ['16px', '24px'],
'title-sm': ['14px', '20px'],
'label-lg': ['14px', '20px'],
'label-md': ['12px', '16px'],
'label-sm': ['11px', '16px'],
'body-lg': ['16px', '24px'],
'body-md': ['14px', '20px'],
'body-sm': ['12px', '16px'],
},
colors: {
// Material 3 Dark Theme approximation
'surface': '#141218', // Very dark background
@@ -40,9 +57,20 @@ export default {
'outline-variant': '#49454F'
},
boxShadow: {
'elevation-1': '0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
'elevation-2': '0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
'elevation-3': '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30)',
'elevation-1': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
'elevation-2': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
'elevation-3': '0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)',
'elevation-4': '0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)',
'elevation-5': '0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
},
keyframes: {
ripple: {
'0%': { transform: 'scale(0)', opacity: '0.4' },
'100%': { transform: 'scale(4)', opacity: '0' },
}
},
animation: {
ripple: 'ripple 600ms linear',
}
},
},