Suite cohérence : contributors, App.tsx 404, onboarding, profil-edit

Author: BlackAngel242

src/components/onboarding/onboarding-stepper.tsx

@@ -73,9 +73,6 @@ export function OnboardingStepper() {
   const [techSearch, setTechSearch] = useState("");
 
 
-  // Initial form state — pulls from the saved draft first (so a network blip
-  // doesn't lose the user's input), then falls back to the existing profile,
-  // then to sane defaults. Hydration runs once.
   const draft = useMemo(() => (user ? loadDraft(user.id) : null), [user]);
 
   const DRAFT_KEY = `onboarding_draft_${user?.id}`;
@@ -158,7 +155,6 @@ export function OnboardingStepper() {
         metadata.preferred_username ||
         `user_${user.id.slice(0, 8)}`;
 
-      // upsert (not update) so a fresh user without a row still saves.
       await upsertProfile(user.id, {
         username,
         full_name: fullName.trim(),
@@ -176,7 +172,6 @@ export function OnboardingStepper() {
       if (refreshed) setProfile(refreshed);
       setIsNewUser(false);
 
-      // Nettoyer les brouillons dans localStorage
       localStorage.removeItem(`${DRAFT_KEY}_fullName`);
       localStorage.removeItem(`${DRAFT_KEY}_bio`);
       localStorage.removeItem(`${DRAFT_KEY}_city`);
@@ -186,8 +181,8 @@ export function OnboardingStepper() {
       localStorage.removeItem(`${DRAFT_KEY}_openToCollaboration`);
       localStorage.removeItem(`${DRAFT_KEY}_avatarUrl`);
 
-      toast.success("Bienvenue sur BisoMapTech Map !");
-      navigate("/");
+      toast.success("Bienvenue sur BisoMapTech !");
+      navigate(`/contributeurs/${username}`, { replace: true });
     } catch (error) {
       const message =
         error instanceof Error
@@ -211,7 +206,6 @@ export function OnboardingStepper() {
 
   return (
     <div className="flex min-h-screen">
-      {/* ---- LEFT BRANDING PANEL (desktop only) ---- */}
       <div className="relative hidden lg:flex lg:w-5/12 flex-col justify-between overflow-hidden border-r border-white/10 p-12">
         <div className="pointer-events-none absolute inset-0">
           <div className="absolute right-0 top-0 h-80 w-80 -translate-y-1/3 translate-x-1/3 rounded-full bg-primary/10 blur-[80px]" />
@@ -240,8 +234,7 @@ export function OnboardingStepper() {
             <span className="text-primary">Join the ecosystem.</span>
           </h1>
           <p className="mt-5 text-base leading-relaxed text-muted-foreground max-w-sm">
-            Positionnez-vous dans l'annuaire des développeurs de la République du Congo — dev, sysadmin,
-            cybersécurité, cloud, IA, mobile, embarqué, support IT et plus.
+            Positionnez-vous dans l'annuaire des développeurs de la République du Congo.
           </p>
         </div>
 
@@ -262,20 +255,17 @@ export function OnboardingStepper() {
         </div>
       </div>
 
-      {/* ---- RIGHT FORM PANEL ---- */}
       <div className="flex flex-1 items-start justify-center overflow-y-auto px-4 py-8 sm:px-8 lg:items-center">
         <div className="pointer-events-none fixed left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/5 blur-[100px]" />
 
         <div className="relative z-10 w-full max-w-xl">
-          {/* Mobile branding */}
           <div className="mb-8 flex items-center gap-2 text-primary lg:hidden">
             <MapPin className="h-5 w-5" />
             <span className="text-base font-bold tracking-tight text-foreground">
               BisoMapTech
             </span>
           </div>
 
-          {/* Form header */}
           <div className="mb-8">
             <h2 className="text-2xl font-bold tracking-tight text-foreground lg:text-3xl">
               Rejoindre <span className="text-primary">l'écosystème</span>
@@ -291,7 +281,6 @@ export function OnboardingStepper() {
           </div>
 
           <div className="glass-panel space-y-6 rounded-2xl border border-white/10 p-6 sm:p-8">
-            {/* Avatar — real upload */}
             {user && (
               <div className="flex flex-col items-center">
                 <AvatarUploader
@@ -307,7 +296,6 @@ export function OnboardingStepper() {
               </div>
             )}
 
-            {/* Full name */}
             <div className="space-y-1.5">
               <Label
                 htmlFor="onb-name"
@@ -324,7 +312,6 @@ export function OnboardingStepper() {
               />
             </div>
 
-            {/* Role — all 15 disciplines */}
             <div className="space-y-1.5">
               <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Rôle principal
@@ -348,7 +335,6 @@ export function OnboardingStepper() {
               </div>
             </div>
 
-            {/* City */}
             <div className="space-y-1.5">
               <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Localisation
@@ -367,7 +353,6 @@ export function OnboardingStepper() {
               </Select>
             </div>
 
-            {/* Bio */}
             <div className="space-y-1.5">
               <div className="flex items-center justify-between">
                 <Label
@@ -390,7 +375,6 @@ export function OnboardingStepper() {
               />
             </div>
 
-            {/* Tech stack */}
             <div className="space-y-3">
               <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Technologies
@@ -406,7 +390,6 @@ export function OnboardingStepper() {
                 />
               </div>
 
-              {/* Selected stack */}
               {techStack.length > 0 && (
                 <div className="flex flex-wrap gap-1.5">
                   {techStack.map((tech) => (
@@ -423,7 +406,6 @@ export function OnboardingStepper() {
                 </div>
               )}
 
-              {/* Tech chips — full taxonomy */}
               {filteredAllTechs ? (
                 <div className="flex max-h-40 flex-wrap gap-1.5 overflow-y-auto">
                   {filteredAllTechs.map((tech) => (
@@ -436,8 +418,7 @@ export function OnboardingStepper() {
                   ))}
                   {filteredAllTechs.length === 0 && (
                     <p className="text-xs text-muted-foreground/70">
-                      Aucune technologie trouvée. Sélectionnez "Autre" comme rôle pour
-                      les profils atypiques.
+                      Aucune technologie trouvée.
                     </p>
                   )}
                 </div>
@@ -464,7 +445,6 @@ export function OnboardingStepper() {
               )}
             </div>
 
-            {/* Experience */}
             <div className="space-y-2">
               <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Niveau d'expérience
@@ -488,7 +468,6 @@ export function OnboardingStepper() {
               </div>
             </div>
 
-            {/* Collaboration */}
             <button
               type="button"
               onClick={() => setOpenToCollaboration(!openToCollaboration)}
@@ -520,7 +499,6 @@ export function OnboardingStepper() {
               </div>
             </button>
 
-            {/* Validation summary — explicit so the user knows what's missing */}
             {!canSubmit && (
               <div className="rounded-lg border border-amber-500/25 bg-amber-500/5 px-3 py-2 text-[11px] text-amber-300">
                 {!fullName.trim() && <p>• Renseignez votre nom complet</p>}
@@ -531,7 +509,6 @@ export function OnboardingStepper() {
               </div>
             )}
 
-            {/* Submission error with retry */}
             {submitError && (
               <div
                 role="alert"
@@ -562,10 +539,8 @@ export function OnboardingStepper() {
               </div>
             )}
 
-            {/* Divider */}
             <div className="h-px bg-white/10" />
 
-            {/* Actions */}
             <div className="flex items-center justify-between">
               <button
                 type="button"

src/pages/contributors-page.tsx

@@ -29,13 +29,20 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { FilterPanel } from "@/components/filters/filter-panel";
 import { useFilteredProfiles } from "@/hooks/use-filtered-profiles";
 import { useFilterStore } from "@/store/filter-store";
-import { ROLE_TYPE_LABELS, EXPERIENCE_LABELS, CROSS_DOMAIN_TECHS } from "@/lib/constants";
+import { ROLE_TYPE_LABELS, EXPERIENCE_LABELS } from "@/lib/constants";
 import { cn } from "@/lib/utils";
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
 
-// Suggestions de compétences couvrant tous les métiers de l'informatique
-// (dev, systèmes, cybersécurité, support, data, design…), pas uniquement le dev web.
-const QUICK_FILTERS = CROSS_DOMAIN_TECHS;
+const QUICK_FILTERS = [
+  "React",
+  "JavaScript",
+  "Python",
+  "Flutter",
+  "Node.js",
+  "TypeScript",
+  "PHP",
+  "Vue.js",
+];
 
 function formatLastSeen(lastSeenAt?: string): string | null {
   if (!lastSeenAt) return null;
@@ -47,18 +54,15 @@ function formatLastSeen(lastSeenAt?: string): string | null {
   return null;
 }
 
-function ProfileCard({ profile }: { profile: Profile }) {
+const ProfileCard = React.memo(function ProfileCard({ profile }: { profile: Profile }) {
   const lastSeen = formatLastSeen(profile.last_seen_at);
 
   return (
     <Link to={`/contributeurs/${profile.username}`}>
       <article className="glass-panel group relative rounded-xl border border-white/10 p-5 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-[0_8px_24px_rgba(78,222,163,0.08)] active:scale-[0.99] cursor-pointer">
-        {/* Ambient glow */}
         <div className="pointer-events-none absolute right-0 top-0 h-20 w-20 rounded-bl-full bg-primary/6 blur-xl transition-colors group-hover:bg-primary/12" />
 
-        {/* Header */}
         <div className="mb-4 flex items-start justify-between gap-3">
-          {/* Avatar + badge disponible */}
           <div className="relative shrink-0">
             <Avatar className="h-14 w-14 border-2 border-white/15">
               <AvatarImage src={profile.avatar_url} alt={profile.full_name} />
@@ -76,7 +80,6 @@ function ProfileCard({ profile }: { profile: Profile }) {
             )}
           </div>
 
-          {/* Nom + rôle + ville */}
           <div className="flex-1 min-w-0">
             <h3 className="truncate text-sm font-bold leading-tight text-foreground group-hover:text-primary transition-colors">
               {profile.full_name}
@@ -88,15 +91,13 @@ function ProfileCard({ profile }: { profile: Profile }) {
               <MapPin className="h-3 w-3 shrink-0" />
               <span className="truncate">{profile.city || "Congo"}</span>
             </div>
-            {/* Badge Disponible visible en texte */}
             {profile.open_to_collaboration && (
               <span className="mt-1.5 inline-flex items-center gap-1 rounded-full bg-primary/10 border border-primary/25 px-2 py-0.5 text-[11px] font-medium text-primary">
                 Disponible
               </span>
             )}
           </div>
 
-          {/* Niveau d'expérience */}
           <Badge
             variant="outline"
             className="shrink-0 border-white/10 bg-white/5 text-xs text-muted-foreground"
@@ -105,7 +106,6 @@ function ProfileCard({ profile }: { profile: Profile }) {
           </Badge>
         </div>
 
-        {/* Techs + GitHub + activité */}
         <div className="flex flex-wrap items-center gap-1.5 border-t border-white/10 pt-3">
           {profile.tech_stack.slice(0, 3).map((tech) => (
             <span
@@ -143,13 +143,27 @@ function ProfileCard({ profile }: { profile: Profile }) {
       </article>
     </Link>
   );
-}
+});
 
 export function ContributorsPage() {
   const { profiles, isLoading, total, page, totalPages, setPage } =
     useFilteredProfiles({ pageSize: 18 });
   const { techStack, searchQuery, setTechStack, setSearchQuery } = useFilterStore();
   const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
+  const [localSearch, setLocalSearch] = useState(searchQuery);
+
+  useEffect(() => {
+    setLocalSearch(searchQuery);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      if (localSearch !== searchQuery) {
+        setSearchQuery(localSearch);
+      }
+    }, 300);
+    return () => clearTimeout(t);
+  }, [localSearch, searchQuery, setSearchQuery]);
 
   if (isLoading && page === 1) {
     return (
@@ -166,7 +180,6 @@ export function ContributorsPage() {
 
   return (
     <div className="mx-auto max-w-7xl px-4 pb-24 pt-6 md:pb-8">
-      {/* Page header */}
       <div className="mb-5 flex items-end justify-between">
         <div>
           <h1 className="text-2xl font-bold tracking-tight text-foreground md:text-3xl">
@@ -187,18 +200,16 @@ export function ContributorsPage() {
         </Button>
       </div>
 
-      {/* Search bar */}
       <div className="relative mb-4">
         <Search className="absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <Input
-          placeholder="Rechercher par nom, competence..."
+          placeholder="Rechercher par nom, compétence..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           className="bg-white/5 border-white/10 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-primary/30"
         />
       </div>
 
-      {/* Quick filter chips */}
       <div className="mb-6 flex flex-wrap gap-2">
         {QUICK_FILTERS.map((tech) => {
           const isActive = techStack.includes(tech);
@@ -225,7 +236,6 @@ export function ContributorsPage() {
         })}
       </div>
 
-      {/* Sidebar + grid */}
       <div className="grid gap-5 lg:grid-cols-[280px_1fr]">
         <aside className="hidden lg:block">
           <div className="sticky top-20">
@@ -234,7 +244,6 @@ export function ContributorsPage() {
         </aside>
 
         <div>
-          {/* Talent grid — large cards on desktop, list-style on mobile */}
           <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
             {profiles.map((profile) => (
               <ProfileCard key={profile.id} profile={profile} />
@@ -243,13 +252,12 @@ export function ContributorsPage() {
             {profiles.length === 0 && !isLoading && (
               <div className="col-span-full py-20 text-center">
                 <Handshake className="mx-auto mb-4 h-12 w-12 text-muted-foreground/30" />
-                <p className="font-semibold text-muted-foreground">Aucun contributeur trouve</p>
+                <p className="font-semibold text-muted-foreground">Aucun contributeur trouvé</p>
                 <p className="mt-1 text-sm text-muted-foreground/60">Essayez de modifier vos filtres</p>
               </div>
             )}
           </div>
 
-          {/* Pagination */}
           {totalPages > 1 && (
             <div className="mt-8 flex items-center justify-center gap-3">
               <Button
@@ -260,7 +268,7 @@ export function ContributorsPage() {
                 className="gap-1 border border-white/10 bg-white/5 hover:bg-white/8 disabled:opacity-30"
               >
                 <ChevronLeft className="h-4 w-4" />
-                Precedent
+                Précédent
               </Button>
               <span className="text-xs text-muted-foreground">
                 {page} / {totalPages}
@@ -280,7 +288,6 @@ export function ContributorsPage() {
         </div>
       </div>
 
-      {/* Mobile filter drawer */}
       {mobileFilterOpen && (
         <div className="fixed inset-0 z-[600] flex flex-col lg:hidden">
           <div className="flex-1" onClick={() => setMobileFilterOpen(false)} />
@@ -313,7 +320,7 @@ export function ContributorsPage() {
                 className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
                 onClick={() => setMobileFilterOpen(false)}
               >
-                Voir {profiles.length} resultat{profiles.length !== 1 ? "s" : ""}
+                Voir {profiles.length} résultat{profiles.length !== 1 ? "s" : ""}
               </Button>
             </div>
           </div>