From b20f717288875e533466ad32ba4930f35015c655 Mon Sep 17 00:00:00 2001
From: zzstoatzz <thrast36@gmail.com>
Date: Mon, 6 Oct 2025 12:17:33 -0500
Subject: [PATCH] feat: improve mobile ux and record display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fix @ symbol positioning: larger (1.2rem) and better aligned with handle
- add structured record display with headers and content sections
- add copy button to each record with visual feedback
- improve mobile responsiveness for identity circle and records

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/templates.rs | 127 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 114 insertions(+), 13 deletions(-)

diff --git a/src/templates.rs b/src/templates.rs
index 2f825a3..d31179c 100644
--- a/src/templates.rs
+++ b/src/templates.rs
@@ -297,18 +297,29 @@ pub fn app_page(did: &str) -> String {
         }}
 
         .identity-label {{
-            font-size: 0.45rem;
-            color: var(--text-lighter);
-            letter-spacing: 0.1em;
+            font-size: 1.2rem;
+            color: var(--text);
+            font-weight: 600;
+            line-height: 1;
         }}
 
         .identity-value {{
-            font-size: 0.75rem;
-            color: var(--text);
+            font-size: 0.7rem;
+            color: var(--text-lighter);
             text-align: center;
             word-break: break-word;
             max-width: 100px;
-            font-weight: 500;
+            font-weight: 400;
+        }}
+
+        @media (max-width: 768px) {{
+            .identity-label {{
+                font-size: 1.1rem;
+            }}
+
+            .identity-value {{
+                font-size: 0.65rem;
+            }}
         }}
 
         .identity-hint {{
@@ -485,7 +496,6 @@ pub fn app_page(did: &str) -> String {
         }}
 
         .record {{
-            padding: 0.6rem;
             margin-bottom: 0.5rem;
             background: var(--bg);
             border: 1px solid var(--border);
@@ -493,6 +503,7 @@ pub fn app_page(did: &str) -> String {
             font-size: 0.65rem;
             color: var(--text-light);
             transition: all 0.15s ease;
+            overflow: hidden;
         }}
 
         .record:hover {{
@@ -504,11 +515,55 @@ pub fn app_page(did: &str) -> String {
             margin-bottom: 0;
         }}
 
-        .record pre {{
+        .record-header {{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 0.6rem;
+            background: var(--surface);
+            border-bottom: 1px solid var(--border);
+        }}
+
+        .record-label {{
+            font-size: 0.6rem;
+            color: var(--text-lighter);
+            font-weight: 500;
+        }}
+
+        .copy-btn {{
+            background: var(--bg);
+            border: 1px solid var(--border);
+            color: var(--text-light);
+            font-family: inherit;
+            font-size: 0.55rem;
+            padding: 0.2rem 0.5rem;
+            cursor: pointer;
+            transition: all 0.15s ease;
+            border-radius: 2px;
+            -webkit-tap-highlight-color: transparent;
+        }}
+
+        .copy-btn:hover, .copy-btn:active {{
+            background: var(--surface-hover);
+            border-color: var(--text-light);
+            color: var(--text);
+        }}
+
+        .copy-btn.copied {{
+            color: var(--text);
+            border-color: var(--text);
+        }}
+
+        .record-content {{
+            padding: 0.6rem;
+        }}
+
+        .record-content pre {{
             margin: 0;
             white-space: pre-wrap;
             word-break: break-word;
             line-height: 1.5;
+            font-size: 0.625rem;
         }}
 
         .load-more {{
@@ -797,9 +852,20 @@ pub fn app_page(did: &str) -> String {
                                     .then(data => {{
                                         if (data.records && data.records.length > 0) {{
                                             let recordsHtml = '';
-                                            data.records.forEach(record => {{
+                                            data.records.forEach((record, idx) => {{
                                                 const json = JSON.stringify(record.value, null, 2);
-                                                recordsHtml += `<div class="record"><pre>${{json}}</pre></div>`;
+                                                const recordId = `record-${{Date.now()}}-${{idx}}`;
+                                                recordsHtml += `
+                                                    <div class="record">
+                                                        <div class="record-header">
+                                                            <span class="record-label">record</span>
+                                                            <button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>
+                                                        </div>
+                                                        <div class="record-content">
+                                                            <pre>${{json}}</pre>
+                                                        </div>
+                                                    </div>
+                                                `;
                                             }});
 
                                             if (data.cursor) {{
@@ -808,8 +874,32 @@ pub fn app_page(did: &str) -> String {
 
                                             recordListDiv.innerHTML = recordsHtml;
 
-                                            // Use event delegation for load more buttons
+                                            // Use event delegation for copy and load more buttons
                                             recordListDiv.addEventListener('click', (e) => {{
+                                                // Handle copy button
+                                                if (e.target.classList.contains('copy-btn')) {{
+                                                    e.stopPropagation();
+                                                    const copyBtn = e.target;
+                                                    const content = decodeURIComponent(copyBtn.dataset.content);
+
+                                                    navigator.clipboard.writeText(content).then(() => {{
+                                                        const originalText = copyBtn.textContent;
+                                                        copyBtn.textContent = 'copied!';
+                                                        copyBtn.classList.add('copied');
+                                                        setTimeout(() => {{
+                                                            copyBtn.textContent = originalText;
+                                                            copyBtn.classList.remove('copied');
+                                                        }}, 1500);
+                                                    }}).catch(err => {{
+                                                        console.error('Failed to copy:', err);
+                                                        copyBtn.textContent = 'error';
+                                                        setTimeout(() => {{
+                                                            copyBtn.textContent = 'copy';
+                                                        }}, 1500);
+                                                    }});
+                                                }}
+
+                                                // Handle load more button
                                                 if (e.target.classList.contains('load-more')) {{
                                                     e.stopPropagation();
                                                     const loadMoreBtn = e.target;
@@ -822,9 +912,20 @@ pub fn app_page(did: &str) -> String {
                                                         .then(r => r.json())
                                                         .then(moreData => {{
                                                             let moreHtml = '';
-                                                            moreData.records.forEach(record => {{
+                                                            moreData.records.forEach((record, idx) => {{
                                                                 const json = JSON.stringify(record.value, null, 2);
-                                                                moreHtml += `<div class="record"><pre>${{json}}</pre></div>`;
+                                                                const recordId = `record-more-${{Date.now()}}-${{idx}}`;
+                                                                moreHtml += `
+                                                                    <div class="record">
+                                                                        <div class="record-header">
+                                                                            <span class="record-label">record</span>
+                                                                            <button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>
+                                                                        </div>
+                                                                        <div class="record-content">
+                                                                            <pre>${{json}}</pre>
+                                                                        </div>
+                                                                    </div>
+                                                                `;
                                                             }});
 
                                                             loadMoreBtn.remove();
-- 
2.43.0