From 8be1483e1d206417c3405660808db117bb6a01b3 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Fri, 4 Sep 2026 19:58:46 +0000
Subject: [PATCH] Add rank badge to profile modal and user detail modal
 (readonly)

---
 index.html | 14 +++++++++-----
 js/main.js |  7 +++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 45191c7..ec82a97 100644
--- a/index.html
+++ b/index.html
@@ -134,12 +134,13 @@
       <h3 class="hide-en">Your Profile</h3>
       <div class="profile-form">
         <div class="form-group">
-          <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+          <div id="profile-rank-row" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
             <span id="profile-username-display" class="username-display" style="margin: 0;"></span>
-            <input type="checkbox" id="profile-publish" />
-            <label for="profile-publish" class="hide-de" style="display: inline; font-size: .85rem; font-weight: 600;">Veröffentlichen</label>
-            <label for="profile-publish" class="hide-en" style="display: inline; font-size: .85rem; font-weight: 600;">Publish</label>
+            <span id="profile-rank-badge" class="rank-badge" style="position: relative; top: auto; right: auto; box-shadow: none;"></span>
           </div>
+          <input type="checkbox" id="profile-publish" style="margin-top: 8px;" />
+          <label for="profile-publish" class="hide-de" style="display: inline; font-size: .85rem; font-weight: 600;">Veröffentlichen</label>
+          <label for="profile-publish" class="hide-en" style="display: inline; font-size: .85rem; font-weight: 600;">Publish</label>
         </div>
         <div id="profile-edit-fields" class="hidden">
           <div class="form-group">
@@ -188,7 +189,10 @@
           <span class="user-avatar-text" id="user-detail-initial">?</span>
         </div>
         <div>
-          <h2 id="user-detail-username">@username</h2>
+          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
+            <h2 id="user-detail-username" style="margin:0;">@username</h2>
+            <span id="user-detail-rank-badge" class="rank-badge" style="position:relative;top:auto;right:auto;box-shadow:none;font-size:.6rem;"></span>
+          </div>
           <p id="user-detail-company">Company</p>
         </div>
       </div>
diff --git a/js/main.js b/js/main.js
index 2982807..47fece7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -304,6 +304,9 @@ async function openProfileModal() {
     if (response.ok) {
       const user = await response.json();
       document.getElementById('profile-username-display').textContent = user.username || '';
+      const rank = getRank(user.posts || 0);
+      document.getElementById('profile-rank-badge').className = 'rank-badge rank-' + rank.level;
+      document.getElementById('profile-rank-badge').innerHTML = rank.emoji + ' ' + rank.title;
       document.getElementById('profile-company').value = user.company || '';
       document.getElementById('profile-email').value = user.email || '';
       document.getElementById('profile-homepage').value = user.homepage || '';
@@ -337,6 +340,10 @@ function openUserDetailModal(user) {
   }
 
   document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown');
+  const userRank = getRank(user.posts || 0);
+  const rankBadge = document.getElementById('user-detail-rank-badge');
+  rankBadge.className = 'rank-badge rank-' + userRank.level;
+  rankBadge.innerHTML = userRank.emoji + ' ' + userRank.title;
   document.getElementById('user-detail-company').textContent = user.company || '';
   const emailEl = document.getElementById('user-detail-email');
   emailEl.innerHTML = user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : '-';