[AI][Feat]: Add QR-Code Button next to email on inbox

Using local and unminified qrcode.js for auditability <3

infrastructure/web/public/javascripts/utils.js

@@ -239,10 +239,54 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    function initQrModal() {
+        const qrBtn = document.getElementById('qrCodeBtn');
+        const qrModal = document.getElementById('qrModal');
+        const closeQr = document.getElementById('closeQr');
+        const qrContainer = document.getElementById('qrcode');
+        const copyAddress = document.getElementById('copyAddress');
+
+        if (!qrBtn || !qrModal || !qrContainer) return;
+
+        let qrGenerated = false;
+
+        qrBtn.onclick = function() {
+            qrModal.style.display = 'block';
+
+            // Generate QR code only once
+            if (!qrGenerated && copyAddress) {
+                const address = copyAddress.textContent.trim();
+                qrContainer.innerHTML = ''; // Clear any previous QR
+                new QRCode(qrContainer, {
+                    text: address,
+                    width: 256,
+                    height: 256,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.H
+                });
+                qrGenerated = true;
+            }
+        };
+
+        if (closeQr) {
+            closeQr.onclick = function() {
+                qrModal.style.display = 'none';
+            };
+        }
+
+        window.addEventListener('click', function(e) {
+            if (e.target === qrModal) {
+                qrModal.style.display = 'none';
+            }
+        });
+    }
+
     // Expose utilities and run them
-    window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers };
+    window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers, initQrModal };
     formatEmailDates();
     formatMailDate();
     initLockModals();
     initCopyAddress();
+    initQrModal();
 });

infrastructure/web/public/stylesheets/custom.css

@@ -339,6 +339,10 @@ label {
 .inbox-header {
     text-align: center;
     margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
 }
 
 .inbox-title {
@@ -348,7 +352,7 @@ label {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    margin: 0;
+    margin-bottom: 10px;
     text-shadow: 0 2px 10px var(--overlay-purple-30);
 }
 
@@ -788,3 +792,64 @@ label {
 .raw-mail.hidden {
     display: none;
 }
+
+
+/* QR Code Button and Modal */
+
+.qr-icon-btn {
+    background: var(--overlay-purple-20);
+    border: 1px solid var(--overlay-purple-30);
+    border-radius: 12px;
+    padding: 10px;
+    color: var(--color-accent-purple-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.qr-icon-btn:hover {
+    background: var(--overlay-purple-30);
+    border-color: var(--overlay-purple-40);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px var(--overlay-purple-25);
+}
+
+.qr-icon-btn svg {
+    width: 24px;
+    height: 24px;
+}
+
+.qr-icon {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.qr-modal-content {
+    max-width: 400px;
+    text-align: center;
+}
+
+.qr-modal-content h3 {
+    margin-bottom: 24px;
+}
+
+.qr-code-container {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    display: inline-block;
+    margin: 0 auto 20px;
+    border: 2px solid var(--color-accent-purple);
+    box-shadow: 0 8px 25px var(--overlay-purple-25);
+}
+
+.qr-address-label {
+    color: var(--color-text-light);
+    font-size: 1.2rem;
+    margin: 0;
+    word-break: break-all;
+}

infrastructure/web/views/inbox.twig

@@ -21,11 +21,20 @@
 {% endblock %}
 
 {% block body %}
+    <script src="/javascripts/qrcode.js"></script>
     <script src="/javascripts/utils.js" defer></script>
     <script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}"></script>
     <div class="inbox-container">
         <div class="inbox-header">
             <h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
+            <button id="qrCodeBtn" class="qr-icon-btn" title="Show QR Code" aria-label="Show QR Code">
+                <svg class="qr-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <rect x="3" y="3" width="7" height="7"/>
+                    <rect x="14" y="3" width="7" height="7"/>
+                    <rect x="14" y="14" width="7" height="7"/>
+                    <rect x="3" y="14" width="7" height="7"/>
+                </svg>
+            </button>
             <span id="copyFeedback">Copied!</span>
         </div>
 
@@ -136,4 +145,14 @@
     {# JS handled in /javascripts/lock-modals.js #}
     {% endif %}
 
+    <!-- QR Code Modal -->
+    <div id="qrModal" class="modal">
+        <div class="modal-content qr-modal-content">
+            <span class="close" id="closeQr">&times;</span>
+            <h3>Scan Email Address</h3>
+            <div id="qrcode" class="qr-code-container"></div>
+            <p class="qr-address-label">{{ address }}</p>
+        </div>
+    </div>
+
 {% endblock %}