From 7713ea0a3c7a4e2dc35bc4ced7810cee04ed2cb0 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 7 Jan 2026 18:37:06 +0100
Subject: [PATCH] Add Instagram metadata display to EntryPage

---
 client/src/pages/EntryPage.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/client/src/pages/EntryPage.tsx b/client/src/pages/EntryPage.tsx
index eb98fa5..9d101a4 100644
--- a/client/src/pages/EntryPage.tsx
+++ b/client/src/pages/EntryPage.tsx
@@ -38,6 +38,9 @@ export default function EntryPage() {
 
   const counts = entry.counts || { grammar: 0, vocab: 0, key_phrases: 0, conversation: 0, quiz: 0 };
   const quizLink = `/quiz?mode=entry&id=${encodeURIComponent(entry.id)}`;
+  const ig = entry.ig_meta;
+  const profileUrl = ig?.profile_url || (ig?.username ? `https://www.instagram.com/${ig.username}/` : undefined);
+  const postDate = ig?.post_date ? new Date(ig.post_date).toLocaleString() : undefined;
 
   return (
     <div className="entry-page">
@@ -63,6 +66,31 @@ export default function EntryPage() {
       </div>
 
       <VideoPlayer src={entry.video_url} />
+      {ig && (
+        <div className="ig-block">
+          {ig.profile_pic_url ? (
+            <a href={profileUrl || '#'} target="_blank" rel="noreferrer">
+              <img className="ig-avatar" src={ig.profile_pic_url} alt={ig.username || 'profile'} />
+            </a>
+          ) : (
+            <div className="ig-avatar placeholder" />
+          )}
+          <div className="ig-body">
+            <div className="ig-row">
+              {ig.username ? (
+                <a className="ig-name" href={profileUrl || '#'} target="_blank" rel="noreferrer">
+                  {ig.username}
+                </a>
+              ) : (
+                <span className="ig-name">Instagram</span>
+              )}
+              {ig.full_name && <span className="muted"> · {ig.full_name}</span>}
+            </div>
+            <div className="muted">{postDate || ig.post_date || 'Date unknown'}</div>
+            {ig.description && <p className="ig-desc">{ig.description}</p>}
+          </div>
+        </div>
+      )}
 
       <div className="meta-box">
         <div>