Amélioration affichage genre : 'Pop---Rock' -> 'Pop' ; 'Rock'

frontend/app/page.tsx

@@ -5,6 +5,15 @@ import { useQuery } from "@tanstack/react-query"
 import { getTracks, getStats } from "@/lib/api"
 import type { FilterParams } from "@/lib/types"
 
+// Helper function to format Discogs genre labels (e.g., "Pop---Ballad" -> ["Pop", "Ballad"])
+function formatGenre(genre: string): { category: string; subgenre: string } {
+  const parts = genre.split('---')
+  return {
+    category: parts[0] || genre,
+    subgenre: parts[1] || ''
+  }
+}
+
 export default function Home() {
   const [filters, setFilters] = useState<FilterParams>({})
   const [page, setPage] = useState(0)
@@ -79,9 +88,21 @@ export default function Home() {
 
                       {/* Primary metadata */}
                       <div className="mt-1 flex flex-wrap gap-2">
-                        <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">
+                        {(() => {
-                          {track.classification.genre.primary}
+                          const genre = formatGenre(track.classification.genre.primary)
+                          return (
+                            <>
+                              <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-semibold">
+                                {genre.category}
                               </span>
+                              {genre.subgenre && (
+                                <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-50 text-blue-700">
+                                  {genre.subgenre}
+                                </span>
+                              )}
+                            </>
+                          )
+                        })()}
                         <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-purple-100 text-purple-800">
                           {track.classification.mood.primary}
                         </span>
@@ -96,10 +117,25 @@ export default function Home() {
                         </span>
                       </div>
 
+                      {/* Secondary genres */}
+                      {track.classification.genre.secondary && track.classification.genre.secondary.length > 0 && (
+                        <div className="mt-2 flex flex-wrap gap-1">
+                          <span className="text-xs text-gray-400">Also:</span>
+                          {track.classification.genre.secondary.slice(0, 3).map((g, i) => {
+                            const genre = formatGenre(g)
+                            return (
+                              <span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600">
+                                {genre.category}{genre.subgenre && ` • ${genre.subgenre}`}
+                              </span>
+                            )
+                          })}
+                        </div>
+                      )}
+
                       {/* Secondary moods */}
                       {track.classification.mood.secondary && track.classification.mood.secondary.length > 0 && (
                         <div className="mt-2 flex flex-wrap gap-1">
-                          <span className="text-xs text-gray-400">Also:</span>
+                          <span className="text-xs text-gray-400">Moods:</span>
                           {track.classification.mood.secondary.map((mood, i) => (
                             <span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-purple-50 text-purple-600">
                               {mood}