zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
fix critical mobile ux: add close buttons and personalize identity info
- add close button (×) to detail panel, visible on all devices
- make close button larger on mobile (40px) for better touch targets
- personalize identity explanation with actual user handle and pds
- change generic text to: "your data lives at bsky.social. apps like bluesky write to and read from this server. you control @yourhandle..."
- fixes mobile bug where panel couldn't be closed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+52
-1
+52
-1
src/templates.rs
+52
-1
src/templates.rs
···
393
393
line-height: 1.4;
394
394
}}
395
395
396
+
.detail-close {{
397
+
position: absolute;
398
+
top: 1.5rem;
399
+
right: 1.5rem;
400
+
width: 32px;
401
+
height: 32px;
402
+
border: 1px solid var(--border);
403
+
background: var(--bg);
404
+
color: var(--text-light);
405
+
cursor: pointer;
406
+
display: flex;
407
+
align-items: center;
408
+
justify-content: center;
409
+
font-size: 1.2rem;
410
+
line-height: 1;
411
+
transition: all 0.2s ease;
412
+
border-radius: 2px;
413
+
-webkit-tap-highlight-color: transparent;
414
+
}}
415
+
416
+
.detail-close:hover, .detail-close:active {{
417
+
background: var(--surface-hover);
418
+
border-color: var(--text-light);
419
+
color: var(--text);
420
+
}}
421
+
422
+
@media (max-width: 768px) {{
423
+
.detail-close {{
424
+
top: 1rem;
425
+
right: 1rem;
426
+
width: 40px;
427
+
height: 40px;
428
+
font-size: 1.4rem;
429
+
}}
430
+
}}
431
+
396
432
.tree-item {{
397
433
padding: 0.65rem 0.75rem;
398
434
font-size: 0.75rem;
···
590
626
// Add identity click handler to show PDS info
591
627
document.querySelector('.identity').addEventListener('click', () => {{
592
628
const detail = document.getElementById('detail');
629
+
const pdsHost = pds.replace('https://', '').replace('http://', '');
593
630
detail.innerHTML = `
631
+
<button class="detail-close" id="detailClose">×</button>
594
632
<h3>your identity</h3>
595
633
<div class="subtitle">decentralized identifier & storage</div>
596
634
<div class="tree-item">
···
612
650
</div>
613
651
</div>
614
652
<div style="margin-top: 1rem; padding: 0.6rem; background: var(--bg); border-radius: 4px; font-size: 0.65rem; line-height: 1.5; color: var(--text-lighter);">
615
-
your data lives in your personal data server. third-party apps write to and read from your pds using the atproto protocol. you control your identity and can move to a different pds anytime.
653
+
your data lives at <strong style="color: var(--text);">${{pdsHost}}</strong>. apps like bluesky write to and read from this server. you control @<strong style="color: var(--text);">${{handle}}</strong> and can move it to a different server anytime.
616
654
</div>
617
655
`;
618
656
detail.classList.add('visible');
657
+
658
+
// Add close button handler
659
+
document.getElementById('detailClose').addEventListener('click', (e) => {{
660
+
e.stopPropagation();
661
+
detail.classList.remove('visible');
662
+
}});
619
663
}});
620
664
621
665
// Get all collections from PDS
···
667
711
const collections = apps[namespace];
668
712
669
713
let html = `
714
+
<button class="detail-close" id="detailClose">×</button>
670
715
<h3>${{namespace}}</h3>
671
716
<div class="subtitle">records stored in your pds:</div>
672
717
`;
···
689
734
690
735
detail.innerHTML = html;
691
736
detail.classList.add('visible');
737
+
738
+
// Add close button handler
739
+
document.getElementById('detailClose').addEventListener('click', (e) => {{
740
+
e.stopPropagation();
741
+
detail.classList.remove('visible');
742
+
}});
692
743
693
744
// Fetch record counts for each collection
694
745
if (collections && collections.length > 0) {{