interactive intro to open social
at-me.zzstoatzz.io
feat: add app logos and improve ux
- fetch app logos from reversed namespace handles (e.g., io.zzstoatzz -> zzstoatzz.io)
- group collections hierarchically by sub-namespace in detail panel
- fix load more button to only show when full page returned
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
authored by
Claude
and committed by
Tangled
af2c7acb
5f71d2e9
+92
-12
src/templates.rs
+92
-12
src/templates.rs
···
356
356
align-items: center;
357
357
justify-content: center;
358
358
transition: all 0.2s ease;
359
+
overflow: hidden;
360
+
}}
361
+
362
+
.app-logo {{
363
+
width: 100%;
364
+
height: 100%;
365
+
object-fit: cover;
359
366
}}
360
367
361
368
.app-view:hover .app-circle {{
···
650
657
let globalPds = null;
651
658
let globalHandle = null;
652
659
660
+
// Try to fetch app avatar from their bsky profile
661
+
async function fetchAppAvatar(namespace) {{
662
+
try {{
663
+
// Reverse namespace to get domain (e.g., io.zzstoatzz -> zzstoatzz.io)
664
+
const reversed = namespace.split('.').reverse().join('.');
665
+
// Try reversed domain, then reversed.bsky.social
666
+
const handles = [reversed, `${{reversed}}.bsky.social`];
667
+
668
+
for (const handle of handles) {{
669
+
try {{
670
+
const didRes = await fetch(`https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${{handle}}`);
671
+
if (!didRes.ok) continue;
672
+
673
+
const {{ did }} = await didRes.json();
674
+
const profileRes = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${{did}}`);
675
+
if (!profileRes.ok) continue;
676
+
677
+
const profile = await profileRes.json();
678
+
if (profile.avatar) {{
679
+
return profile.avatar;
680
+
}}
681
+
}} catch (e) {{
682
+
continue;
683
+
}}
684
+
}}
685
+
}} catch (e) {{
686
+
console.log('Could not fetch avatar for', namespace);
687
+
}}
688
+
return null;
689
+
}}
690
+
653
691
// Logout handler
654
692
document.getElementById('logoutBtn').addEventListener('click', (e) => {{
655
693
e.preventDefault();
···
767
805
const firstLetter = namespace.split('.')[1]?.[0]?.toUpperCase() || namespace[0].toUpperCase();
768
806
769
807
div.innerHTML = `
770
-
<div class="app-circle">${{firstLetter}}</div>
808
+
<div class="app-circle" data-namespace="${{namespace}}">${{firstLetter}}</div>
771
809
<div class="app-name">${{namespace}}</div>
772
810
`;
811
+
812
+
// Try to fetch and display avatar
813
+
fetchAppAvatar(namespace).then(avatarUrl => {{
814
+
if (avatarUrl) {{
815
+
const circle = div.querySelector('.app-circle');
816
+
circle.innerHTML = `<img src="${{avatarUrl}}" class="app-logo" alt="${{namespace}}" />`;
817
+
}}
818
+
}});
773
819
774
820
div.addEventListener('click', () => {{
775
821
const detail = document.getElementById('detail');
···
782
828
`;
783
829
784
830
if (collections && collections.length > 0) {{
785
-
collections.sort().forEach(lexicon => {{
786
-
const shortName = lexicon.split('.').slice(2).join('.') || lexicon;
787
-
html += `
788
-
<div class="tree-item" data-lexicon="${{lexicon}}">
789
-
<div class="tree-item-header">
790
-
<span>${{shortName}}</span>
791
-
<span class="tree-item-count">loading...</span>
831
+
// Group collections by sub-namespace (third segment)
832
+
const grouped = {{}};
833
+
collections.forEach(lexicon => {{
834
+
const parts = lexicon.split('.');
835
+
const subNamespace = parts.slice(2).join('.');
836
+
const firstPart = parts[2] || lexicon;
837
+
838
+
if (!grouped[firstPart]) grouped[firstPart] = [];
839
+
grouped[firstPart].push({{ lexicon, subNamespace }});
840
+
}});
841
+
842
+
// Sort and display grouped items
843
+
Object.keys(grouped).sort().forEach(group => {{
844
+
const items = grouped[group];
845
+
846
+
if (items.length === 1 && items[0].subNamespace === group) {{
847
+
// Single item with no further nesting
848
+
html += `
849
+
<div class="tree-item" data-lexicon="${{items[0].lexicon}}">
850
+
<div class="tree-item-header">
851
+
<span>${{group}}</span>
852
+
<span class="tree-item-count">loading...</span>
853
+
</div>
792
854
</div>
793
-
</div>
794
-
`;
855
+
`;
856
+
}} else {{
857
+
// Group header
858
+
html += `<div style="margin-bottom: 0.75rem;">`;
859
+
html += `<div style="font-size: 0.7rem; color: var(--text-light); margin-bottom: 0.4rem; font-weight: 500;">${{group}}</div>`;
860
+
861
+
// Items in group
862
+
items.sort((a, b) => a.subNamespace.localeCompare(b.subNamespace)).forEach(item => {{
863
+
const displayName = item.subNamespace.split('.').slice(1).join('.') || item.subNamespace;
864
+
html += `
865
+
<div class="tree-item" data-lexicon="${{item.lexicon}}" style="margin-left: 0.75rem;">
866
+
<div class="tree-item-header">
867
+
<span>${{displayName}}</span>
868
+
<span class="tree-item-count">loading...</span>
869
+
</div>
870
+
</div>
871
+
`;
872
+
}});
873
+
html += `</div>`;
874
+
}}
795
875
}});
796
876
}} else {{
797
877
html += `<div class="tree-item">no collections found</div>`;
···
868
948
`;
869
949
}});
870
950
871
-
if (data.cursor) {{
951
+
if (data.cursor && data.records.length === 5) {{
872
952
recordsHtml += `<button class="load-more" data-cursor="${{data.cursor}}" data-lexicon="${{lexicon}}">load more</button>`;
873
953
}}
874
954
···
931
1011
loadMoreBtn.remove();
932
1012
recordListDiv.insertAdjacentHTML('beforeend', moreHtml);
933
1013
934
-
if (moreData.cursor) {{
1014
+
if (moreData.cursor && moreData.records.length === 5) {{
935
1015
recordListDiv.insertAdjacentHTML('beforeend',
936
1016
`<button class="load-more" data-cursor="${{moreData.cursor}}" data-lexicon="${{lexicon}}">load more</button>`
937
1017
);