feat: add extensions browsing view

.gitignore

@@ -30,3 +30,6 @@ dist/
 
 # Zed Editor
 .zed/
+
+# intelij idea
+.idea/

README.md

@@ -2,7 +2,21 @@
 
 ## Development
 
-I assume you have installed Rust, Cargo, Tauri and Deno.
+I assume you have installed Rust, Cargo.
+
+### Install Deno
+
+```bash
+curl -fsSL https://deno.land/x/install/install.sh | sh
+```
+
+### Then install Tauri CLI
+
+```bash
+cargo install tauri-cli --version "^2.0.0" --locked
+```
+
+### Run the app
 
 ```bash
 cargo tauri dev

deno.json

@@ -9,7 +9,7 @@
   "tasks": {
     "dev": "deno run -A npm:vite dev",
     "build": "deno run -A npm:vite build",
-    "check": "deno check src-www/",
+    "check": "deno check src-www/  --unstable-sloppy-imports",
     "lint": "deno lint && deno fmt --check",
     "format": "deno lint --fix && deno fmt"
   },
@@ -20,16 +20,16 @@
     "lib": ["dom", "deno.ns"]
   },
   "imports": {
-    "@tauri-apps/api": "npm:@tauri-apps/api@^2.0.2",
-    "@tauri-apps/plugin-store": "npm:@tauri-apps/plugin-store@^2.1.0",
-    "@types/react": "npm:@types/react@^18.3.11",
-    "@types/react-dom": "npm:@types/react-dom@^18.3.1",
-    "@types/react-router-dom": "npm:@types/react-router-dom@^5.3.3",
-    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.2",
-    "react": "npm:react@^18.3.1",
-    "react-dom": "npm:react-dom@^18.3.1",
-    "react-router-dom": "npm:react-router-dom@^6.27.0",
-    "vite": "npm:vite@^5.4.9"
+    "@tauri-apps/api": "npm:@tauri-apps/[email protected]",
+    "@tauri-apps/plugin-store": "npm:@tauri-apps/[email protected]",
+    "@types/react": "npm:@types/[email protected]",
+    "@types/react-dom": "npm:@types/[email protected]",
+    "@types/react-router-dom": "npm:@types/[email protected]",
+    "@vitejs/plugin-react": "npm:@vitejs/[email protected]",
+    "react": "npm:[email protected]",
+    "react-dom": "npm:[email protected]",
+    "react-router-dom": "npm:[email protected]",
+    "vite": "npm:[email protected]"
   },
   "nodeModulesDir": "auto"
 }

src-www/App.tsx

@@ -1,16 +1,28 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import Browse from "./pages/Browse.tsx";
-import NavBar from "./components/NavBar.tsx";
-import NavItem from "./components/NavItem.tsx";
-import Extensions from "./pages/Extensions.tsx";
-import More from "./pages/More.tsx";
+import Browse from "./pages/Browse/Browse";
+import ExtensionBrowser from "./pages/Browse/ExtensionBrowse";
+import NavBar from "./components/NavBar";
+import NavItem from "./components/NavItem";
+import Extensions from "./pages/Extensions";
+import More from "./pages/More";
+import MangaDetails from "./pages/MangaDetails";
+
+import "./style/global.css";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Browse />,
   },
+  {
+    path: "/browse/:extensionId",
+    element: <ExtensionBrowser />,
+  },
+  {
+    path: "/browse/:extensionId/:mangaId",
+    element: <MangaDetails />,
+  },
   {
     path: "/extensions",
     element: <Extensions />,

src-www/components/MangaImage.tsx

@@ -0,0 +1,24 @@
+function MangaImage(
+  { src, alt, fallBackSrc = "/fallback-img.jpg" }: {
+    src: string;
+    alt: string;
+    fallBackSrc?: string;
+  },
+) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      style={{
+        width: "100%",
+        height: "280px",
+        objectFit: "cover",
+        borderRadius: "8px",
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+      }}
+      onError={(e) => (e.currentTarget.src = fallBackSrc)}
+    />
+  );
+}
+
+export default MangaImage;

src-www/index.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom/client";
 
-import App from "./App.tsx";
+import App from "./App";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

src-www/pages/Browse/Browse.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+
+import { Extension } from "../../types/extension";
+import { getIconUrl } from "../../services/extensions.service";
+import { getExtensions } from "../../services/tauri.service";
+import { Link } from "react-router-dom";
+
+export default function Browse() {
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+
+  useEffect(() => {
+    getExtensions().then(setExtensions);
+  }, []);
+
+  return (
+    <ul
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: "0 2rem",
+      }}
+    >
+      {extensions.map((extension: Extension) => {
+        return (
+          <li
+            key={extension.id}
+            style={{ display: "flex", alignItems: "center", gap: 12 }}
+          >
+            <img
+              src={getIconUrl(extension.iconPath)}
+              style={{ width: 48, height: 48 }}
+            />
+            <div>
+              <span style={{ display: "block", fontSize: 16 }}>
+                {extension.source.name}
+              </span>
+              <div style={{ opacity: 0.7, fontSize: 14 }}>
+                {extension.source.language}
+              </div>
+            </div>
+            <Link
+              to={`/browse/${extension.id}`}
+              style={{
+                marginLeft: "auto",
+              }}
+            >
+              Browse
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

src-www/pages/Browse/ExtensionBrowse.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useState } from "react";
+import { Extension } from "../../types/extension";
+import { Manga } from "../../types/manga";
+import { Link, useParams } from "react-router-dom";
+import {
+  getExtension,
+  getIconUrl,
+  getMangaList,
+} from "../../services/extensions.service";
+import "../../style/loader.css";
+import MangaImage from "../../components/MangaImage";
+
+export default function ExtensionBrowse() {
+  const { extensionId } = useParams();
+  const [extension, setExtension] = useState<Extension | null>(null);
+  const [mangas, setMangas] = useState<Array<Manga>>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [pagination, setPagination] = useState<number>(1);
+
+  // Charger l'extension une seule fois au démarrage
+  useEffect(() => {
+    if (!extensionId) return;
+    getExtension(extensionId)
+      .then(setExtension)
+      .catch(() => setError("Erreur lors du chargement de l'extension."));
+  }, [extensionId]);
+
+  // Charger la liste de mangas pour chaque pagination
+  useEffect(() => {
+    if (!extension) return;
+
+    setLoading(true); // Activer le chargement pendant la requête
+    getMangaList(extension.id, [], pagination)
+      .then((data) => setMangas([...mangas, ...data[0]]))
+      .catch(() => setError("Erreur lors du chargement des mangas."))
+      .finally(() => setLoading(false));
+  }, [extension, pagination]);
+
+  // Gestion du scroll infini
+  useEffect(() => {
+    const handleScroll = () => {
+      if (
+        document.body.scrollHeight - 300 <
+          globalThis.scrollY + globalThis.innerHeight
+      ) {
+        if (!loading) {
+          setPagination(pagination + 1);
+        }
+      }
+    };
+    globalThis.addEventListener("scroll", handleScroll);
+    return () => globalThis.removeEventListener("scroll", handleScroll);
+  }, [loading]);
+
+  // Afficher un message d'erreur si nécessaire
+  if (error) return <ErrorMessage error={error} />;
+
+  // Si l'extension est encore en chargement
+  if (!extension) return <Loader />;
+
+  return (
+    <div style={{ padding: "0 2rem" }}>
+      <ExtensionHeader extension={extension} />
+      <MangaGrid mangas={mangas} extensionId={extension.id} />
+      {loading && <Loader />}
+    </div>
+  );
+}
+
+// Composant de message d'erreur
+const ErrorMessage = ({ error }: { error: string }) => (
+  <div style={{ padding: "0 2rem" }}>
+    <p style={{ color: "red" }}>{error}</p>
+  </div>
+);
+
+// Composant de loader
+const Loader = () => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+    }}
+  >
+    <div style={{ textAlign: "center", padding: "20px 0" }}>Chargement...</div>
+    <div className="loader"></div>
+  </div>
+);
+
+// En-tête de l'extension avec le nom et l'icône
+const ExtensionHeader = ({ extension }: { extension: Extension }) => (
+  <div
+    style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}
+  >
+    <img
+      src={getIconUrl(extension.iconPath)}
+      alt={extension.source.name}
+      style={{ width: 48, height: 48 }}
+    />
+    <h2 style={{ fontSize: 24 }}>{extension.source.name}</h2>
+  </div>
+);
+
+// Grille de mangas
+const MangaGrid = (
+  { mangas, extensionId }: { mangas: Array<Manga>; extensionId: string },
+) => (
+  <ul
+    style={{
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(180px, 5fr))",
+      gap: "16px",
+      listStyle: "none",
+      padding: 0,
+    }}
+  >
+    {mangas.map((manga) => (
+      <li key={manga.id} style={{ textAlign: "center" }}>
+        <Link
+          to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
+          state={manga}
+        >
+          <MangaImage src={manga.coverUrl} alt={manga.title} />
+        </Link>
+        <a
+          href={manga.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ textDecoration: "none", color: "#333" }}
+        >
+          <p
+            style={{
+              marginTop: 8,
+              fontSize: 14,
+              fontWeight: "bold",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {manga.title}
+          </p>
+        </a>
+      </li>
+    ))}
+  </ul>
+);