Plan : Design mobile-friendly WebSearchTool avec cards

Status : IMPLEMENTEE

Fichier : connectors-front/src/components/tools/WebSearchTool.tsx

1. Fix autocomplete qui persiste

Problème : l'autocomplete peut réapparaître après le lancement de la recherche car le debounce (useVisibleTask$ ligne 276) continue de tourner.

Fix :

• Dans handleSearch : ajouter state.autocompleteSuggestions = [] en plus de autocompleteOpen.value = false
• Dans le debounce : ajouter un guard if (loading.value) return (déjà présent ligne 279, mais vérifier qu'il couvre bien le cas)

2. Refonte affichage résultats en cards mobile-friendly

Résultats "general" (actuellement : style Google classique, pas très mobile)

Avant : URL + titre link + description + meta en lignes séparées, pas de card, pas de padding mobile

Après : Cards DaisyUI card card-compact bg-base-200 avec :

┌─────────────────────────────────┐
│ 🌐 domaine.com                  │
│ Titre du résultat                │
│ Description du contenu sur 2-3  │
│ lignes max avec line-clamp...   │
│ 📅 12 jan 2026  google  brave   │
└─────────────────────────────────┘

• card card-compact bg-base-200 hover:bg-base-300 transition-colors
• card-body p-3 (compact sur mobile)
• Favicon + domaine en haut (petit, gris)
• Titre cliquable en text-primary font-semibold
• Description text-sm text-base-content/70 line-clamp-3
• Badges moteurs en bas
• Espacement space-y-3 entre les cards (au lieu de space-y-4)

Résultats "images" (déjà en grid, OK)

Garder le grid existant, juste ajuster grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 pour mobile.

Résultats "videos"

Cards avec thumbnail si disponible :

┌──────────┬──────────────────────┐
│ 🎬       │ Titre de la vidéo    │
│ thumbnail│ Description...       │
│          │ youtube  3 jan 2026  │
└──────────┴──────────────────────┘

• Layout horizontal sur desktop (flex), vertical sur mobile (flex-col sm:flex-row)
• Thumbnail w-full sm:w-40 aspect-video object-cover rounded

Résultats "news"

Cards compactes avec date mise en avant :

┌─────────────────────────────────┐
│ 📰 source.com · 12 jan 2026    │
│ Titre de l'article               │
│ Description...                   │
└─────────────────────────────────┘

Infobox (sidebar desktop → card inline mobile)

Actuellement hidden lg:block → invisible sur mobile. Changer en :

• Mobile : card pleine largeur au-dessus des résultats
• Desktop : sidebar à droite (comportement actuel)

Pagination

• Boutons plus gros sur mobile : btn-sm → btn-sm sm:btn-sm (OK)
• Centrage OK

Suggestions

• flex-wrap gap-2 → OK sur mobile, les chips wrappent naturellement

3. Responsive global

• Search bar : flex gap-2 → OK, input s'adapte
• Category chips : flex-wrap → OK
• Filtres : flex-wrap → OK
• Résultats : padding p-3 sm:p-4
• Stats line : text-xs sm:text-sm

Résumé des modifications

1 seul fichier modifié : WebSearchTool.tsx