feat: enhance TagInput component with popular tags loading

- Added `loadPopularTags` function to fetch and display popular tags when the input is empty.
- Updated `TagInput` to show suggestions based on input focus and improved suggestion display with a grid layout.
- Adjusted styles for better visual clarity and user experience.

hooks/useTags.ts

@@ -214,10 +214,24 @@ export function useTagsAutocomplete() {
     setSuggestions([]);
   }, []);
 
+  const loadPopularTags = useCallback(async (limit: number = 20) => {
+    setLoading(true);
+    try {
+      const response = await tagsClient.getPopularTags(limit);
+      setSuggestions(response.data);
+    } catch (error) {
+      console.error('Erreur lors du chargement des tags populaires:', error);
+      setSuggestions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
   return {
     suggestions,
     loading,
     searchTags,
-    clearSuggestions
+    clearSuggestions,
+    loadPopularTags
   };
 }