feat: add download functionality for licenses and enhance plugin detail view

src/pages/PluginDetail.jsx

@@ -1,8 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useSearchParams } from "react-router-dom";
 
 export default function PluginDetail() {
     const { owner, repo } = useParams();
+    const [searchParams] = useSearchParams();
+    const provider = (searchParams.get("provider") || "github").toLowerCase();
+    const baseUrl = searchParams.get("baseUrl") || "";
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -10,7 +13,17 @@ export default function PluginDetail() {
     useEffect(() => {
         async function loadDetail() {
             try {
-                const response = await fetch(`/api/plugins/${owner}/${repo}`);
+                const query = new URLSearchParams();
+                if (provider) {
+                    query.set("provider", provider);
+                }
+                if (baseUrl) {
+                    query.set("baseUrl", baseUrl);
+                }
+                const search = query.toString();
+                const response = await fetch(
+                    `/api/plugins/${owner}/${repo}${search.length > 0 ? `?${search}` : ""}`
+                );
                 if (!response.ok) {
                     throw new Error("Kon details niet laden");
                 }
@@ -24,13 +37,15 @@ export default function PluginDetail() {
         }
 
         loadDetail();
-    }, [owner, repo]);
+    }, [owner, repo, provider, baseUrl]);
 
     const manifest = data?.manifest;
     const displayName = manifest?.plugin_name || data?.name || repo;
     const description = manifest?.description || data?.description;
     const author = manifest?.author || "-";
     const version = manifest?.version || "-";
+    const repositoryLabel = data?.provider === "gitea" ? "Gitea" : "GitHub";
+    const latestDownload = data?.download;
 
     const releases = useMemo(() => data?.releases || [], [data]);
     const commits = useMemo(() => data?.commits || [], [data]);
@@ -46,8 +61,13 @@ export default function PluginDetail() {
                 <div className="detail-actions">
                     <Link className="ghost" to="/">← Terug</Link>
                     {data?.repoUrl && (
-                        <a className="cta" href={data.repoUrl} target="_blank" rel="noreferrer">
-                            GitHub
+                        <a className="ghost" href={data.repoUrl} target="_blank" rel="noreferrer">
+                            {repositoryLabel}
+                        </a>
+                    )}
+                    {latestDownload?.url && (
+                        <a className="cta" href={latestDownload.url} target="_blank" rel="noreferrer">
+                            Download {latestDownload.version}
                         </a>
                     )}
                 </div>
@@ -89,18 +109,28 @@ export default function PluginDetail() {
                         <h2>Releases</h2>
                         {releases.length === 0 && <p>Geen releases gevonden.</p>}
                         <ul className="list">
-                            {releases.map((release) => (
-                                <li key={release.tag}>
-                                    <a href={release.url} target="_blank" rel="noreferrer">
-                                        {release.name}
-                                    </a>
-                                    <span>
-                                        {release.publishedAt
-                                            ? new Date(release.publishedAt).toLocaleDateString("nl-NL")
-                                            : "-"}
-                                    </span>
-                                </li>
-                            ))}
+                            {releases.map((release) => {
+                                const key = release.tag || release.name || release.url;
+                                return (
+                                    <li key={key}>
+                                        <div>
+                                            <a href={release.url} target="_blank" rel="noreferrer">
+                                                {release.name}
+                                            </a>
+                                            <span>
+                                                {release.publishedAt
+                                                    ? new Date(release.publishedAt).toLocaleDateString("nl-NL")
+                                                    : "-"}
+                                            </span>
+                                        </div>
+                                        {release.downloadUrl && (
+                                            <a className="ghost" href={release.downloadUrl} target="_blank" rel="noreferrer">
+                                                Download
+                                            </a>
+                                        )}
+                                    </li>
+                                );
+                            })}
                         </ul>
                     </div>