🔧 FIX: Absolute API URLs für funktionierendes UI (window.location.origin)

app/templates/index.html

@@ -8,9 +8,9 @@
         h1, h3 { color: #333; margin-top: 0; }
         .repo-card, .project-card { background: white; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
         .project-card { border-left: 4px solid #007bff; }
-        button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; margin-right: 5px; margin-top: 5px; }
-        .btn-subscribe { background: #007bff; color: white; border: none; font-size: 14px; padding: 8px 12px; cursor: pointer; }
-        .btn-unsubscribe { background: #dc3545; color: white; border: none; font-size: 14px; padding: 8px 12px; cursor: pointer; }
+        button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; margin-right: 5px; margin-top: 5px; font-size: 14px; }
+        .btn-subscribe { background: #007bff; color: white; }
+        .btn-unsubscribe { background: #dc3545; color: white; }
         .status-ok { color: #28a745; font-size: 13px; }
         .status-warn { color: #dc3545; font-size: 13px; }
         hr { border: none; border-top: 1px solid #ccc; margin: 20px 0; }
@@ -28,15 +28,18 @@
 <hr>
 
 <section id="repos-section">
-    <h3>Gitea Repositories (als Nicht-Abonnierte):</h3>
+    <h3>Gitea Repositories (nicht abonniert):</h3>
     <div id="repos"></div>
 </section>
 
 <script>
+//✅ WICHTIG: Nutze absolute URL für API-Calls!
+const API_BASE = window.location.origin;
+
 let subscribedNames = new Set();  // Cache für abonierte Namen!
 
 async function loadProjects() {
-    const res = await fetch("/api/projects");
+    const res = await fetch(`${API_BASE}/api/projects`);
     const data = await res.json();
     const container = document.getElementById("projects-list");
     container.innerHTML = "";
@@ -53,9 +56,9 @@ async function loadProjects() {
     const titles = document.querySelectorAll("h3");
     
     if (data.projects.length > 0) {
-        titles[0].innerHTML += ` (${data.projects.length})`;
+        titles[0].innerHTML = `Deine abonnierten Projekte (${data.projects.length})`;
     } else {
-        titles[0].innerHTML = "Deine abonnierten Projekte";
+        titles[0].textContent = "Deine abonnierten Projekte";
     }
 
     data.projects.forEach(proj => {
@@ -75,7 +78,7 @@ async function loadProjects() {
             ${proj.has_git ? '<span style="font-size:12px;color:#007bff;margin-top:5px;display:block">📦 Git Repository</span>' : ''}
             <div style="margin-top: 8px; font-size: 13px;">
                 <button class="btn-unsubscribe" onclick="unsubscribe('${proj.name}')">🗑️ Deabonieren</button>
-                <a href="/projects/${proj.name}" target="_blank"><button class="btn-check">📁 Öffnen</button></a>
+                <a href="${API_BASE}/projects/${proj.name}" target="_blank"><button class="btn-check">📁 Öffnen</button></a>
             </div>
         `;
 
@@ -88,7 +91,7 @@ async function loadProjects() {
 async function unsubscribe(name) {
     if (!confirm(`Möchtest du '${name}' wirklich deabonnieren?\nDer komplette Ordner wird geloescht!`)) return;
 
-    const res = await fetch("/api/unsubscribe", {
+    const res = await fetch(`${API_BASE}/api/unsubscribe`, {
         method: "POST",
         headers: {"Content-Type": "application/json"},
         body: JSON.stringify({project_name: name})
@@ -108,7 +111,7 @@ let allRepos = [];  // Globaler Cache für Repositories
 
 async function loadRepos() {
     try {
-        const res = await fetch("/api/repos");
+        const res = await fetch(`${API_BASE}/api/repos`);
         allRepos = await res.json();
         
         const container = document.getElementById("repos");
@@ -123,17 +126,17 @@ async function loadRepos() {
         
         if (allRepos.length === 0) {
             container.innerHTML = "<p style='color:#666; font-style:italic'>Keine Repositories verfügbar.</p>";
-            titleEl.innerHTML = "Gitea Repositories";
+            titleEl.textContent = "Gitea Repositories";
             return;
         }
 
-        titleEl.innerHTML += ` (${allRepos.length})`;
+        titleEl.innerHTML = `Gitea Repositories (${allRepos.length})`;
 
-        // Sortiere: Abonierte zuerst, dann nicht abonnierte
+        // Sortiere: Abonnierte zuerst, dann nicht abonnierte
         const subscribed = allRepos.filter(r => subscribedNames.has(r.name));
         const notSubscribed = allRepos.filter(r => !subscribedNames.has(r.name));
 
-        [...subscribed, ...notSubscribed].forEach((repo, idx) => {
+        [...subscribed, ...notSubscribed].forEach((repo) => {
             addRepoCard(repo, container);
         });
 
@@ -155,9 +158,7 @@ function addRepoCard(repo, container) {
     `;
 
     card.innerHTML += `
-        <button class="${alreadySubscribed ? 'btn-check' : 'btn-subscribe'}" 
-                onclick="subscribe(${JSON.stringify(repo).replace(/"/g, '&quot;')})"
-                style="${alreadySubscribed ? 'background:#28a745;cursor:default;opacity:0.6' : ''}">
+        <button class="${alreadySubscribed ? 'btn-check' : 'btn-subscribe'}" onclick="subscribe(${JSON.stringify(repo).replace(/"/g, '&quot;')})" style="${alreadySubscribed ? 'background:#28a745;cursor:default;opacity:0.6' : ''}">
             ${alreadySubscribed ? '✅ Abonniert' : '➕ Abonnieren'}
         </button>
     `;
@@ -171,7 +172,7 @@ async function subscribe(repo) {
     const target = prompt("Gewünschter Name (Standard: Repo-Name):") || repo.name;
 
     try {
-        await fetch("/api/subscribe", {
+        await fetch(`${API_BASE}/api/subscribe`, {
             method: "POST",
             headers: {"Content-Type": "application/json"},
             body: JSON.stringify({repo_url: repo.clone_url, target_name: target})
@@ -186,5 +187,8 @@ async function subscribe(repo) {
     }
 }
 
-// Starte beim Laden: ✅ OPTIMIERT MIT CACHING!
-loadProjects().then(() => loadRepos());
+// Starte beim Laden: ✅ MIT ABSOLUTEN URLS!
+loadProjects().then(() => loadRepos());</script>
+
+</body>
+</html>