From ce4d659279cba85f77866dbf94572ab0126b65b6 Mon Sep 17 00:00:00 2001
From: Maciej Pienczyn <maciej.pienczyn@inpi.pl>
Date: Wed, 11 Mar 2026 17:30:10 +0100
Subject: [PATCH] feat(messages): add recipient profile preview card on compose
 form

---
 templates/messages/compose.html | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/templates/messages/compose.html b/templates/messages/compose.html
index 310a308..c5bdd13 100755
--- a/templates/messages/compose.html
+++ b/templates/messages/compose.html
@@ -328,6 +328,15 @@
                     </div>
                     <button type="button" class="selected-recipient-remove" onclick="clearRecipient()" title="Zmien odbiorcę">✕</button>
                 </div>
+            <div id="recipient-preview" style="display: none; margin-top: 8px; padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border-color);">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <div id="preview-avatar" style="width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px;"></div>
+                    <div>
+                        <div id="preview-name" style="font-weight: 600; color: var(--text-primary);"></div>
+                        <div id="preview-company" style="font-size: var(--font-size-sm); color: var(--text-secondary);"></div>
+                    </div>
+                </div>
+            </div>
                 <div id="recipient-autocomplete" class="recipient-autocomplete">
                     <input type="text" id="recipient_search" placeholder="Wpisz imie, nazwisko lub email..." autocomplete="off">
                     <div id="autocomplete-results" class="autocomplete-results"></div>
@@ -369,7 +378,7 @@
 (function() {
     var users = [
         {% for user in users %}
-        {id: {{ user.id }}, name: {{ (user.name or user.email.split('@')[0]) | tojson }}, email: {{ user.email | tojson }}, showEmail: {{ 'true' if user.privacy_show_email != False else 'false' }}}{{ ',' if not loop.last }}
+        {id: {{ user.id }}, name: {{ (user.name or user.email.split('@')[0]) | tojson }}, email: {{ user.email | tojson }}, showEmail: {{ 'true' if user.privacy_show_email != False else 'false' }}, companyName: {{ (user._company_name or '') | tojson }}, companySlug: {{ (user._company_slug or '') | tojson }}, position: {{ (user._position or '') | tojson }}}{{ ',' if not loop.last }}
         {% endfor %}
     ];
 
@@ -418,6 +427,26 @@
         autocompleteDiv.style.display = 'none';
         resultsDiv.classList.remove('visible');
         searchInput.value = '';
+        // Show recipient preview card
+        var user = users.find(function(u) { return u.id === id; });
+        var previewDiv = document.getElementById('recipient-preview');
+        if (user && (user.companyName)) {
+            document.getElementById('preview-avatar').textContent = (name || email)[0].toUpperCase();
+            document.getElementById('preview-name').textContent = name;
+            var companyHtml = '';
+            if (user.companyName) {
+                companyHtml = user.companySlug
+                    ? '<a href="/firma/' + user.companySlug + '" target="_blank" style="color: var(--primary); text-decoration: none;">' + user.companyName + '</a>'
+                    : user.companyName;
+            }
+            if (user.position) {
+                companyHtml = user.position + (companyHtml ? ' · ' + companyHtml : '');
+            }
+            document.getElementById('preview-company').innerHTML = companyHtml;
+            previewDiv.style.display = 'block';
+        } else {
+            previewDiv.style.display = 'none';
+        }
     }
 
     window.clearRecipient = function() {
@@ -426,6 +455,7 @@
         autocompleteDiv.style.display = 'block';
         searchInput.value = '';
         searchInput.focus();
+        document.getElementById('recipient-preview').style.display = 'none';
     };
 
     searchInput.addEventListener('input', function() {