ordinarthur/freedge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign /recipes/new from scratch

Browse Source 
The page had 2 stacked headers (its own + MainLayout), was capped at
max-w-md which wasted desktop space, and had cheap-looking dashed amber
borders. Full rewrite with 4 clean states.

State machine: idle -> recording -> review -> processing

IDLE state:
- Brand pill 'Nouvelle recette' with Wand2 icon
- Big H1 with 'ton frigo' in warm-gradient
- Subtitle explaining the chef Antoine
- User preferences rendered as chips (vegan, allergies, max time,
  cuisine) loaded from /users/profile. Each chip is a Badge with
  backdrop-blur, + a 'Modifier' chip linking to /profile. Chips only
  appear if the user actually set preferences.
- Giant centered mic button (112-128px) with:
  - 3 concentric pulsing rings (border-2, staggered 0.6s delays)
  - Gradient from-orange-500 to-amber-500
  - shadow-2xl + orange glow
  - ring-4 ring-white for separation from background
  - Scale 1.04/0.94 on hover/tap
- Keyboard shortcut hint (Space) shown on md+
- Rotating tip card below with Lightbulb icon (4 tips cycling every 4.5s)

RECORDING state:
- Pulsing red dot + 'ENREGISTREMENT' label
- 7xl monospaced tabular timer
- Synthetic 20-bar waveform animating (each bar randomized
  height/duration for organic feel)
- Large red stop button (80px) with Square icon
- Keyboard shortcut hint

REVIEW state:
- Spring-animated green checkmark badge
- H2 'Tout est bon ?' + subtitle
- Audio player card with:
  - Circular play/pause button (brand gradient)
  - 32-bar static waveform (deterministic sin/cos pattern)
  - Trash button
  - Hidden <audio> controlled via id
  - File size in KB
- Two buttons: 'Recommencer' (outline) + 'Créer ma recette' (brand
  gradient, ChefHat icon that rotates -8deg on hover)

PROCESSING state: (kept from previous version, slightly enlarged to
60-72 and using the new gradient halo)

Bonus:
- Space bar shortcut: starts/stops recording when not focused on input
- Remove the duplicate sticky header
- 'Mes recettes' back button + 'Préférences' link in top bar
- max-w-3xl centered layout, works from mobile to desktop
- All imports cleaned up (no more KitchenIllustration, Sheet, Card,
  useMobile, cn, Info, showTips, isRecorderLoading)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ordinarthur 2026-04-08 13:36:16 +02:00
parent e7872df156
commit f4b3339fe4
1 changed files with 588 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

979
frontend/src/pages/Recipes/RecipeForm.tsx
View File

File diff suppressed because it is too large Load Diff