feat(planner): upgrade POI discovery with unified modern component PROBLEM: User feedback: "on cherche quoi ? A quelle endroit ? Comment ? Quand ?" POI search lacked clarity about search parameters (what/where/when/how). MobilePoiTray was too basic (simple list, no images, minimal UX). SOLUTION: Created POIDiscoveryPanel - unified component merging: - Modern visual design from POICardsPanel (Dashboard component) - Advanced AI logic from useMobilePoiDiscovery composable FEATURES: ✨ Contextual header - Eyebrow badge: "Autour de [Anchor stage]" - Title: "Découvrez des lieux uniques" - Counter: X suggestions IA - Timestamp: "Il y a X min" - Actions: Change anchor, refresh ✨ Visual filters - 8 category chips (viewpoint, activity, restaurant, museum, park, hotel, cafe, beach) - Interactive states (inactive/active with hover effects) - Material icons + labels - Radius slider (5-120 km) with dynamic label ✨ Modern card grid - Responsive grid (auto-fill 300px) - Cover images or icon placeholders - Overlay actions (add, preview) on hover - AI uniqueness badge (/100 score) - Category chip + title - Description (2-line ellipsis) - Meta chips (distance, rating, duration) - Tags (max 3) ✨ Animations - Hover: translateY(-6px) + shadow boost - Image zoom (scale 1.08) - Overlay fade-in with bounce ✨ States - Loading: 6 skeleton cards - Empty: Icon + message + refresh button - Success: Grid of suggestions DESIGN: - Glass morphism (backdrop-blur + color-mix) - Responsive (300px desktop → 280px tablet → 1fr mobile) - Dark theme compatible (CSS variables) - Border radius: 14-16px - Spacing: 18-20px gaps INTEGRATION: - Replaced MobilePoiTray in PlannerPage.web.vue POI tab - Replaced MobilePoiTray in PlannerPage.mobile.vue POI tab & dialog - Fixed prop names: categories → selected-categories - Fixed event names: @update-radius → @update:radius-km (v-model syntax) - Updated imports in both pages TECHNICAL: - Component: apps/web/src/modules/planner/components/POIDiscoveryPanel.vue - Props: suggestions, loading, anchorLabel, lastUpdatedLabel, selectedCategories, availableCategories, radiusKm - Events: refresh, add, preview, toggle-category, update:radiusKm, cycle-anchor - Methods: getCategoryIcon, formatCategory, formatDistance, formatDuration - Styles: SCSS scoped with deep targeting for Quasar components FILES CHANGED: - NEW: apps/web/src/modules/planner/components/POIDiscoveryPanel.vue (660 lines) - MOD: apps/web/src/modules/planner/pages/PlannerPage.web.vue (replaced MobilePoiTray) - MOD: apps/web/src/modules/planner/pages/PlannerPage.mobile.vue (replaced MobilePoiTray) TESTS: ✅ pnpm type-check (PASS) ✅ pnpm build (PASS - 1m17s) BENEFITS: ✅ Clear search context (what/where/when explicitly displayed) ✅ Modern visual appeal (images, glass morphism, animations) ✅ Better interactivity (hover states, quick actions) ✅ AI feedback (uniqueness badges, relevance scores) ✅ 1 component instead of 2 (MobilePoiTray + POICardsPanel partial merge) ✅ Responsive across all breakpoints NOTES: - MobilePoiTray.vue can now be removed (no longer used) - POICardsPanel.vue remains on Dashboard (different use case) - useMobilePoiDiscovery composable unchanged (reusable logic) - Future: Add real images API, favorites system, advanced filters --- Technical breakdown: - User request: "retravailler le composent de recherche des POIS" - Merged POICardsPanel visual design + MobilePoiTray search logic - Answers user's questions: "on cherche quoi ? où ? comment ? quand ?" - Category filters → What - Anchor label + radius → Where - AI suggestions + filters → How - Timestamp label → When