feat(ui): refonte design "Chaleur professionnelle" + modèle crédits

[Tbeaumont79]

Objectif

Le design d'origine était jugé « vraiment moche ». Refonte visuelle complète vers une direction « Chaleur professionnelle » (réfs Resume.io / Teal / Notion), cible : chercheurs d'emploi tous secteurs. Intègre aussi le nouveau modèle économique (2 générations offertes puis crédits, sans abonnement déficitaire).

Fondations

• Plus Jakarta Sans réellement chargée via @nuxt/fonts (la police était déclarée mais jamais servie — cause n°1 du rendu générique).
• Palette refondue dans main.css : neutres chauds stone + accent indigo, échelles complètes 50→950, sémantiques, ombres multi-couches douces, radius généreux, animations.
• Icônes @lucide/vue partout (fin des émojis), favicon Teven, marque Teven appliquée partout (fini « CV Optimizer »).

Composants

• Button / Input / Textarea / Card / State remis à niveau (micro-interactions, ombres, focus, spinner).
• Nouveaux : UiToaster (+ useToast), UiDialog (confirmation, focus trap), UiSkeleton, UiBadge.

Pages

• Landing : hero avec mockup CV avant/après (badge « Match 87 % »), rythme varié, FAQ en accordéon animé, section garde-fou honnêteté mise en valeur, pricing packs de crédits.
• Shell : header sticky, nav contextuelle, menu compte + déconnexion, footer fini.
• Profil : toasts, confirmations avant suppression, gestion d'erreurs réseau, skeletons au chargement.
• Aperçu CV : chrome soigné — le template CV est intouché (parité PDF préservée).

Modèle économique

• FREE_TIER_QUOTAS.generation = 2, CREDIT_PACKS (5 €/5 crédits, 12 €/15 crédits), sans abonnement.

Fix inclus

• Client Better Auth créé avec une baseURL absolue en SSR (l'URL relative était rejetée et plantait toute page lisant la session).

A11y (revue adversariale)

• aria-live sur les erreurs de champ, aria-controls sur le menu compte, cibles tactiles ≥ 40px, contrastes, placeholders légaux non interactifs.

Validation

• ✅ lint · ✅ typecheck · ✅ 50/50 tests · ✅ build de prod
• Vérifié sur captures réelles (desktop + mobile) des pages /, /connexion, /profil, /cv/demo, /ui.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Introduced toast notifications for user feedback
  • Added confirmation dialogs for destructive actions
  • Switched pricing model from subscriptions to credit packs
  • Redesigned landing page with interactive CV mockup preview

• Design & UX

  • Comprehensive visual theme overhaul with new color palette, typography, and animations
  • Added Badge, Skeleton, and Dialog UI components
  • Enhanced form validation feedback with improved accessibility support
  • Enabled reduced-motion preferences for animations

• Updates

  • Adjusted free tier quota: 2 free generations, 4 free PDF exports
  • Improved profile management with preview workflows and confirmation flows
  • Enhanced authentication and error handling

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This pull request implements a comprehensive redesign of the landing page and application UI system. The changes introduce a new credit-pack pricing model, establish a cohesive design system with updated tokens and components, add a toast notification system, and refactor core user-facing pages (landing, profile, authentication) with modernized patterns including skeleton loading, confirmation dialogs, and preview flows.

Changes

App Redesign & Feature Expansion

Layer / File(s)	Summary
Design System: Tokens & UI Components apps/app/assets/css/main.css, apps/app/components/ui/Badge.vue, apps/app/components/ui/Dialog.vue, apps/app/components/ui/Skeleton.vue, apps/app/components/ui/Toaster.vue, apps/app/components/ui/State.vue, apps/app/components/ui/Input.vue, apps/app/components/ui/Textarea.vue, apps/app/components/ui/Card.vue, apps/app/components/ui/FormField.vue, apps/app/components/ui/button-classes.ts, apps/app/app.vue, apps/app/nuxt.config.ts	Expanded Tailwind theme tokens (color scales, shadows, animations, Plus Jakarta Sans font), new components (Badge, Dialog, Skeleton, Toaster with variant-driven icons), attribute forwarding for native input/textarea attributes, updated button base/variant styles, and global Toaster root integration.
Toast Notification System apps/app/composables/useToast.ts, apps/app/components/ui/Toaster.vue, apps/app/pages/connexion.vue, apps/app/pages/cv/demo.vue	New useToast composable manages global toast state with auto-dismissal scheduling (6s for errors, 4s default). Toaster component renders teleported fixed toast stack with icon/title/description per variant. Integration in connexion (magic link resend feedback) and demo (PDF export errors).
Pricing Model Migration: Plans to Credit Packs apps/app/config/pricing.ts, apps/app/composables/useLanding.ts, apps/app/i18n/fr.ts	Pricing configuration switches from monthly PLANS to one-time CREDIT_PACKS with per-pack euro price, credit amount, and featured flag. useLanding exposes packs and freeGenerations instead of plans, with interpolation support for {brand} and {freeGenerations} placeholders in i18n strings.
Landing Page: CvMockup, Pricing, & FAQ Accordion apps/app/components/landing/CvMockup.vue, apps/app/pages/index.vue	New CvMockup component renders decorative two-layer CV mockup with job/skill data. Landing page refactored to render packs with featured styling, per-CV pricing label (priceEur / credits), and accessible FAQ accordion using useId() for unique panel IDs, openFaq state, and toggle ARIA controls. Section icons added for steps and audience cards.
Authentication & Navigation: Layout & Connexion apps/app/layouts/default.vue, apps/app/pages/connexion.vue, apps/app/composables/useAuth.ts, apps/app/components/landing/MagicLinkForm.vue	Default layout now session-aware: subscribes to Better Auth atom for user email, computes user initial for dropdown button, handles outside-click and Escape to close menu, and sign-out navigates to /. Connexion page redesigned with UiCard, UiInput, UiButton, resend flow (calls signIn() again, shows success toast), and email-change action. useAuth sets server-only absolute baseURL from runtime config. MagicLinkForm uses useId() for DOM-safe field/error IDs.
Profile Page: Skeleton Loading, Confirmations & Import Preview apps/app/pages/profil.vue	Lazy profile fetch with skeleton UI during load, computed isLoading gate, and guarded header sync (watch checks headerSynced to prevent overwrite). Header save uses PUT /api/profile with savingHeader state and toasts. Deletion refactored to confirmation dialog (computed title/description, confirmDelete() dispatches correct endpoint by kind). Skills add includes years normalization (empty/null or number). Import redesigned as two-step: doParse() calls POST /api/profile/import-text (stores importResult for preview), applyImport() sequentially persists (PUT header, POST experiences/skills) then refreshes and syncs. All operations toast success/error.
Dependencies, Tests, & Feature Integration apps/app/package.json, packages/shared/src/usage.ts, apps/app/test/button-classes.spec.ts, apps/app/test/usage.spec.ts, apps/app/pages/cv/demo.vue, apps/app/pages/ui.vue	Added @lucide/vue (icons) and @nuxt/fonts dependencies. Free-tier quotas reduced: generation 5→2, export_pdf 5→4. Button test assertions updated to ring-border-strong (secondary) and bg-danger-600 (danger). Demo page adds toast error feedback for PDF export failures. UI design system page expanded with icon catalogue, Skeleton showcase, toast demo buttons, and Dialog confirmation demo.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐰 A rabbit hops through tokens bright,
New packs replace old plans in sight,
With toasts that pop and dialogs speak,
The landing page is now more sleek,
Profiles load with grace and care,
A redesign beyond compare!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: a complete design overhaul toward a 'Chaleur professionnelle' (professional warmth) direction plus a new credit-based economic model, which aligns perfectly with the extensive changes across UI components, pages, and configuration.
Description check	✅ Passed	The description provides comprehensive coverage of objectives, foundational changes, new components, page updates, economic model, accessibility considerations, and validation status. However, it does not explicitly address the PR size guideline (<400 lines) mentioned in the template checklist, and the code review effort appears substantial given the 1000+ line total changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/refonte-design-chaleur-pro

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for monumental-speculoos-a69398 ready!

Name	Link
🔨 Latest commit	f37360a
🔍 Latest deploy log	https://app.netlify.com/projects/monumental-speculoos-a69398/deploys/6a295b0cf9546d0008abed98
😎 Deploy Preview	https://deploy-preview-17--monumental-speculoos-a69398.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.