From f0ae526a9694c2a9b1950bc736b2fbb454768fe3 Mon Sep 17 00:00:00 2001
From: Kolkman <olaf@xolx.nl>
Date: Wed, 26 Aug 2026 12:11:12 +0200
Subject: [PATCH] Link from avatar to user

---
 VIBE/CHAT_LOG.md          |  6 ++++++
 VIBE/PROMPTS.md           |  1 +
 backend/tests/test_api.py |  1 +
 frontend/static/feed.js   | 13 +++++++++----
 frontend/static/style.css |  8 +++++++-
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/VIBE/CHAT_LOG.md b/VIBE/CHAT_LOG.md
index 48cddf5..f2003d0 100644
--- a/VIBE/CHAT_LOG.md
+++ b/VIBE/CHAT_LOG.md
@@ -226,6 +226,12 @@ Continue to log interactions to the VIBE directory.
 ### Assistant outcome
 Continued the append-only interaction logging convention by recording this prompt and outcome in both VIBE log files.
 
+### User
+On the home page, when clicking on the avatar or the user, show the profile information.
+
+### Assistant outcome
+Made each home-feed avatar and username link to the corresponding `/<username>/` profile page, added matching link layout styling, and added a regression assertion for the generated profile URL.
+
 ### User
 Show the avatar with each entry on the home page. On the specific /<user>/ page don't show the avatar and user name with each entry
 
diff --git a/VIBE/PROMPTS.md b/VIBE/PROMPTS.md
index 746e828..adab5a5 100644
--- a/VIBE/PROMPTS.md
+++ b/VIBE/PROMPTS.md
@@ -124,6 +124,7 @@
 117. Change that location to be immediately below the edit and delete button
 116. When the user is authorized and on its /<user>/ page show a Mastodon post button with logo; after posting keep it functional but change its color.
 117. Continue to log interactions to the VIBE directory.
+118. On the home page, when clicking on the avatar or the user, show the profile information.
 
 ## Future entries
 
diff --git a/backend/tests/test_api.py b/backend/tests/test_api.py
index c7d4353..f68147b 100644
--- a/backend/tests/test_api.py
+++ b/backend/tests/test_api.py
@@ -406,6 +406,7 @@ def test_public_and_admin_pages_render_html():
     assert 'postToMastodon(item, mastodonButton)' in feed_script
     assert 'tag.toLowerCase() === pref.tag.toLowerCase()' in feed_script
     assert 'return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()} - ${hours}:${minutes}`' in feed_script
+    assert 'profileLink.href = `/${encodeURIComponent(username)}/`' in feed_script
     assert 'edit-tag-options' in feed_script
     assert 'new_tags' in feed_script
     assert 'A link can have at most 10 tags.' in feed_script
diff --git a/frontend/static/feed.js b/frontend/static/feed.js
index f65e290..f093215 100644
--- a/frontend/static/feed.js
+++ b/frontend/static/feed.js
@@ -146,12 +146,17 @@ function renderFeed(items, showIdentity = true) {
     if (showIdentity) {
       const header = document.createElement('div');
       header.className = 'link-header';
-      header.appendChild(createAvatar(item.user));
-
+      const username = item.user?.username || 'unknown';
+      const profileLink = document.createElement('a');
+      profileLink.className = 'user-link';
+      profileLink.href = `/${encodeURIComponent(username)}/`;
+      profileLink.setAttribute('aria-label', `View ${username}'s profile`);
+      profileLink.appendChild(createAvatar(item.user));
       const userName = document.createElement('div');
       userName.className = 'user-name';
-      userName.textContent = item.user?.username || 'unknown';
-      header.appendChild(userName);
+      userName.textContent = username;
+      profileLink.appendChild(userName);
+      header.appendChild(profileLink);
       article.appendChild(header);
     }
     article.appendChild(title);
diff --git a/frontend/static/style.css b/frontend/static/style.css
index c107a53..52ddfe6 100644
--- a/frontend/static/style.css
+++ b/frontend/static/style.css
@@ -548,6 +548,12 @@ button:disabled {
   margin: 0 0 12px 18px;
 }
 
+.user-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .avatar {
   display: grid;
   width: 38px;
@@ -592,7 +598,7 @@ button:disabled {
 }
 
 .meta {
-  margin-top: 14px;
+  margin-top: 4px;
   color: var(--muted);
   font-size: 0.82rem;
 }