feat: enhance dropdown components by integrating useClickOutside hook for improved user experience and accessibility in NewWorkshopDropdown and WorkshopTabs

src/app/sessions/NewWorkshopDropdown.tsx

@@ -1,21 +1,23 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';
 
 export function NewWorkshopDropdown() {
   const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => setOpen(false), open);
 
   return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
       <Button
         type="button"
         variant="outline"
         size="sm"
         onClick={() => setOpen(!open)}
-        onBlur={() => setTimeout(() => setOpen(false), 150)}
         className="gap-1.5"
       >
         Nouvel atelier

src/app/sessions/WorkshopTabs.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useState, useTransition, useRef } from 'react';
 import Link from 'next/link';
 import { useSearchParams, useRouter } from 'next/navigation';
 import {
@@ -25,6 +25,7 @@ import {
   getWorkshop,
   getSessionPath,
 } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';
 
 const TYPE_TABS = [
   { value: 'all' as const, icon: '📋', label: 'Tous' },
@@ -429,13 +430,14 @@ function TypeFilterDropdown({
   const current = TYPE_TABS.find((t) => t.value === activeTab) ?? TYPE_TABS[0];
   const isTypeSelected = activeTab !== 'all' && activeTab !== 'byPerson';
   const totalCount = typeTabs.reduce((s, t) => s + (counts[t.value] ?? 0), 0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => onOpenChange(false), open);
 
   return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
       <button
         type="button"
         onClick={() => onOpenChange(!open)}
-        onBlur={() => setTimeout(() => onOpenChange(false), 150)}
         className={`
           flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-colors
           ${isTypeSelected ? 'bg-primary text-primary-foreground' : 'text-muted hover:bg-card-hover hover:text-foreground'}