Ajoute un cache pour les couvertures

pmoapp/web/src/App.tsx

@@ -1,16 +1,17 @@
 // App.tsx
 import { useEffect, useState } from "react";
 import { Logs, type LogEntry } from "./Logs";
+import { Covers } from "./Covers";
 import "./App.css";
 
 export default function App() {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
   const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [view, setView] = useState<"logs" | "covers">("logs");
 
   const toggleTheme = () =>
     setTheme((prev) => (prev === "dark" ? "light" : "dark"));
 
-  // Fonction pour transformer le SSE en LogEntry
   const mapSSEToLogEntry = (sseData: any, index: number): LogEntry => ({
     id: sseData.time || `log-${index}`,
     level: sseData.level || "info",
@@ -37,17 +38,36 @@ export default function App() {
   }, []);
 
   return (
-    <div className={theme}>
-      <header className="flex items-center justify-between p-4 bg-neutral-800">
-        <h1 className="text-xl font-bold">PMO-Music logs</h1>
-        <button
-          className="px-4 py-2 bg-blue-600 rounded hover:bg-blue-500"
-          onClick={toggleTheme}
-        >
-          Theme: {theme}
-        </button>
+    <div className={theme === "dark" ? "dark bg-neutral-900 text-white" : "bg-neutral-50 text-black"}>
+      <header className="flex items-center justify-between p-4 bg-neutral-800 text-white">
+        <h1 className="text-xl font-bold">PMO-Music</h1>
+        <div className="flex gap-2">
+          <button
+            className="px-4 py-2 bg-blue-600 rounded hover:bg-blue-500"
+            onClick={toggleTheme}
+          >
+            Theme: {theme}
+          </button>
+          <button
+            className={`px-4 py-2 rounded ${
+              view === "logs" ? "bg-neutral-700" : "bg-neutral-600"
+            }`}
+            onClick={() => setView("logs")}
+          >
+            Logs
+          </button>
+          <button
+            className={`px-4 py-2 rounded ${
+              view === "covers" ? "bg-neutral-700" : "bg-neutral-600"
+            }`}
+            onClick={() => setView("covers")}
+          >
+            Covers
+          </button>
+        </div>
       </header>
-      <Logs logs={logs} theme={theme} />
+      {view === "logs" && <Logs logs={logs} theme={theme} />}
+      {view === "covers" && <Covers />}
     </div>
   );
 }

pmoapp/web/src/Covers.tsx

@@ -0,0 +1,46 @@
+// Covers.tsx
+import { useEffect, useState } from "react";
+
+type CoverEntry = {
+  pk: string;
+  source_url: string;
+  hits: number;
+};
+
+export function Covers() {
+  const [covers, setCovers] = useState<CoverEntry[]>([]);
+
+  useEffect(() => {
+    fetch("/covers/stats")
+      .then((res) => res.json())
+      .then((data) => {
+        setCovers(data.top_hits || []);
+      })
+      .catch((err) => console.error("Erreur stats covers:", err));
+  }, []);
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4 text-neutral-900 dark:text-neutral-100">
+        Top Covers
+      </h2>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
+        {covers.map((cover) => (
+          <div
+            key={cover.pk}
+            className="bg-white dark:bg-neutral-800 rounded-xl shadow p-3 flex flex-col items-center"
+          >
+            <img
+              src={`/covers/${cover.pk}/256`}
+              alt={cover.source_url}
+              className="w-32 h-32 object-cover rounded-lg shadow"
+            />
+            <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-300 truncate w-32 text-center">
+              {cover.hits} hits
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

pmoapp/web/src/Logs.tsx

@@ -13,21 +13,19 @@ type LogsProps = {
   theme: "light" | "dark";
 };
 
-
-
-export function Logs({ logs, theme }: LogsProps) {
+export function Logs({ logs }: LogsProps) {
   const levelClass = (level: LogEntry["level"]) => {
     switch (level) {
       case "info":
-        return "info";
+        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200";
       case "warn":
-        return "warning";
+        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
       case "error":
-        return "error";
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
       case "debug":
-        return "debug";
+        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
       default:
-        return "info";
+        return "bg-gray-100 dark:bg-gray-800";
     }
   };
 
@@ -38,19 +36,20 @@ export function Logs({ logs, theme }: LogsProps) {
   };
 
   return (
-    <div className={`log-container ${theme}`}>
+    <div className="p-4 space-y-2">
       {logs.map((log) => (
-        <div key={log.id} className={`log-entry ${levelClass(log.level)}`}>
+        <div
+          key={log.id}
+          className={`rounded-lg shadow p-3 ${levelClass(log.level)}`}
+        >
           <ReactMarkdown
             rehypePlugins={[rehypeRaw]}
             children={decodeMessage(log.message)}
             components={{
-              code({ node, className, children, ...props }) {
+              code({ className, children, ...props }) {
                 return (
                   <code
-                    className={`bg-gray-700 text-white px-1 py-0.5 rounded ${
-                      className || ""
-                    }`}
+                    className={`bg-black/20 px-1 py-0.5 rounded ${className || ""}`}
                     {...props}
                   >
                     {children}

pmoapp/web/src/index.css

@@ -54,7 +54,7 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
+/* @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
@@ -65,4 +65,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */