Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 import { atURI } from '../../utils.js';
3 import { UserListRecord } from '../../models/records.js';
4
5 let { list }: { list: UserListRecord } = $props();
6
7 function linkToList(list: UserListRecord) {
8 let { repo, rkey } = atURI(list.uri);
9 return `https://bsky.app/profile/${repo}/lists/${rkey}`;
10 }
11
12 function listType(list: UserListRecord) {
13 switch (list.purpose) {
14 case 'app.bsky.graph.defs#curatelist':
15 return "User list";
16 case 'app.bsky.graph.defs#modlist':
17 return "Mute list";
18 default:
19 return "List";
20 }
21 }
22</script>
23
24<a class="link-card record" href={linkToList(list)} target="_blank">
25 <div>
26 {#if list.avatar}
27 <img class="avatar" alt="Avatar" src={list.avatar}>
28 {/if}
29
30 <h2>{list.title} <span class="handle">• {listType(list)} by @{list.author.handle}</span></h2>
31
32 {#if list.description}
33 <p class="description">{list.description}</p>
34 {/if}
35 </div>
36</a>