From 2821b8566e3867b088f0081dbbc0335546aa82f8 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Thu, 7 May 2026 12:56:37 +0200
Subject: [PATCH] feat: Scorecards in Share-Block sichtbar + Instagram-Button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Frage: 'Wo kann ich jetzt die Cards angucken? Vielleicht verbunden
mit einem Instagram Sharing Button?'

Endpoints existieren laengst (#179):
- /v2/scorecard?format=og     → 1200×630 LinkedIn/Twitter-Card
- /v2/scorecard?format=square → 1080×1080 Instagram
- /api/assessment/scorecard.png?format=square&scale=2 → PNG

In der Share-Row jetzt drei neue Eintraege:

1. '📷 Instagram' — oeffnet Square-PNG (1080×1080) im neuen Tab,
   legt Begleittext in die Zwischenablage. Instagram hat keinen
   Web-Share-Endpoint, daher: Bild speichern + Text einfuegen.
2. '📊 Scorecard ansehen' — oeffnet die OG-Format-Vorschau (1200×630)
   im neuen Tab, der User sieht wie die Card auf LinkedIn/Twitter
   aussehen wird.
3. '🖼 Stock-Bild' — alter Magnific-Stockphoto-Knopf, jetzt klar
   gelabelt damit er nicht mit der Scorecard verwechselt wird.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/templates/v2/screens/antrag_detail.html | 41 ++++++++++++++++++++-
 app/templates/v3/screens/antrag_detail.html |  4 +-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/app/templates/v2/screens/antrag_detail.html b/app/templates/v2/screens/antrag_detail.html
index 749b2b1..49aa463 100644
--- a/app/templates/v2/screens/antrag_detail.html
+++ b/app/templates/v2/screens/antrag_detail.html
@@ -504,13 +504,22 @@
                 style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
           LinkedIn
         </button>
+        <button onclick="v2DetailShareInstagram()"
+                style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
+          📷 Instagram
+        </button>
         <button onclick="v2DetailShareEmail()"
                 style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
           📧 E-Mail
         </button>
-        <button onclick="v2DetailShareImage()"
+        <button onclick="v2DetailShareScorecard()"
                 style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
-          🖼 Bild
+          📊 Scorecard ansehen
+        </button>
+        <button onclick="v2DetailShareImage()"
+                title="Stockphoto-Suche bei Magnific zum Antragsthema"
+                style="padding:5px 10px;border:1px solid var(--hairline);border-radius:4px;background:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
+          🖼 Stock-Bild
         </button>
       </div>
     </div>
@@ -925,6 +934,34 @@ window.v2ShowMatrixFieldInfo = function(field) {
     window.location.href = 'mailto:?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
   };
 
+  /* Scorecard-Preview im OG-Format (1200×630) — nutzt /v2/scorecard. */
+  window.v2DetailShareScorecard = function() {
+    var url = '/v2/scorecard?drucksache=' + encodeURIComponent(DRS)
+            + '&bundesland=' + encodeURIComponent(BL || 'NRW')
+            + '&format=og';
+    window.open(url, '_blank', 'noopener');
+  };
+
+  /* Instagram-Sharing: oeffnet das Square-PNG (1080×1080) in neuem Tab,
+     legt den Begleittext in die Zwischenablage. Instagram hat keinen
+     Web-Share-Endpoint — User muss das Bild lokal speichern und in der
+     Instagram-App posten, der Text liegt dann zum Einfuegen bereit. */
+  window.v2DetailShareInstagram = function() {
+    var url = '/api/assessment/scorecard.png?drucksache=' + encodeURIComponent(DRS)
+            + '&bundesland=' + encodeURIComponent(BL || 'NRW')
+            + '&format=square&scale=2';
+    var win = window.open(url, '_blank', 'noopener');
+    var body = buildLongShareText();
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(body).then(function() {
+        v2ShareToast('Square-Bild öffnet — Bild speichern, in Instagram posten. Text liegt in der Zwischenablage.');
+      }, function() {
+        v2ShareToast('Square-Bild öffnet. Text-Kopieren manuell.');
+      });
+    }
+    if (!win) v2ShareToast('Bitte Pop-up-Blocker prüfen.');
+  };
+
   window.v2DetailShareImage = function() {
     var topics = (window.ANTRAG_TOPICS || []).slice(0, 2).join(' ');
     var query  = (topics || TITLE.substring(0, 40)) + ' Politik';
diff --git a/app/templates/v3/screens/antrag_detail.html b/app/templates/v3/screens/antrag_detail.html
index c3b7d9d..a663328 100644
--- a/app/templates/v3/screens/antrag_detail.html
+++ b/app/templates/v3/screens/antrag_detail.html
@@ -373,8 +373,10 @@
         <button onclick="v2DetailShare('threads')" class="v3-action-btn">Threads</button>
         <button onclick="v2DetailShareMastodon()" class="v3-action-btn">Mastodon</button>
         <button onclick="v2DetailShare('linkedin')" class="v3-action-btn">LinkedIn</button>
+        <button onclick="v2DetailShareInstagram()" class="v3-action-btn">📷 Instagram</button>
         <button onclick="v2DetailShareEmail()" class="v3-action-btn">📧 E-Mail</button>
-        <button onclick="v2DetailShareImage()" class="v3-action-btn">🖼 Bild</button>
+        <button onclick="v2DetailShareScorecard()" class="v3-action-btn">📊 Scorecard ansehen</button>
+        <button onclick="v2DetailShareImage()" class="v3-action-btn" title="Stockphoto-Suche bei Magnific zum Antragsthema">🖼 Stock-Bild</button>
       </div>
     </div>