ptr.pet
1<script lang="ts">
2 import type { AtpClient } from '$lib/at/client';
3 import { AppBskyFeedPost } from '@atcute/bluesky';
4 import type { ActorIdentifier, RecordKey } from '@atcute/lexicons';
5 import { theme } from '$lib/theme.svelte';
6 import { map, ok } from '$lib/result';
7 import { generateColorForDid } from '$lib/accounts';
8
9 interface Props {
10 client: AtpClient;
11 identifier: ActorIdentifier;
12 rkey: RecordKey;
13 // replyBacklinks?: Backlinks;
14 record?: AppBskyFeedPost.Main;
15 mini?: boolean;
16 }
17
18 const { client, identifier, rkey, record, mini /* replyBacklinks */ }: Props = $props();
19
20 const color = generateColorForDid(identifier) ?? theme.accent2;
21
22 let handle = $state(identifier);
23 client
24 .resolveDidDoc(identifier)
25 .then((res) => map(res, (data) => data.handle))
26 .then((res) => {
27 if (res.ok) handle = res.value;
28 });
29 const post = record
30 ? Promise.resolve(ok(record))
31 : client.getRecord(AppBskyFeedPost.mainSchema, identifier, rkey);
32 // const replies = replyBacklinks
33 // ? Promise.resolve(ok(replyBacklinks))
34 // : client.getBacklinks(
35 // identifier,
36 // 'app.bsky.feed.post',
37 // rkey,
38 // 'app.bsky.feed.post:reply.parent.uri'
39 // );
40
41 const getEmbedText = (embedType: string) => {
42 switch (embedType) {
43 case 'app.bsky.embed.external':
44 return '🔗 has external link';
45 case 'app.bsky.embed.record':
46 return '💬 has quote';
47 case 'app.bsky.embed.images':
48 return '🖼️ has images';
49 case 'app.bsky.embed.video':
50 return '🎥 has video';
51 case 'app.bsky.embed.recordWithMedia':
52 return '📎 has quote with media';
53 default:
54 return '❓ has unknown embed';
55 }
56 };
57
58 const getRelativeTime = (date: Date) => {
59 const now = new Date();
60 const diff = now.getTime() - date.getTime();
61 const seconds = Math.floor(diff / 1000);
62 const minutes = Math.floor(seconds / 60);
63 const hours = Math.floor(minutes / 60);
64 const days = Math.floor(hours / 24);
65 const months = Math.floor(days / 30);
66 const years = Math.floor(months / 12);
67
68 if (years > 0) return `${years} year${years > 1 ? 's' : ''} ago`;
69 if (months > 0) return `${months} month${months > 1 ? 's' : ''} ago`;
70 if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
71 if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
72 if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
73 if (seconds > 0) return `${seconds} second${seconds > 1 ? 's' : ''} ago`;
74 return 'just now';
75 };
76</script>
77
78{#snippet embedBadge(record: AppBskyFeedPost.Main)}
79 {#if record.embed}
80 <span
81 class="rounded-full px-2.5 py-0.5 text-xs font-medium"
82 style="background: {mini ? theme.fg : color}22; color: {mini ? theme.fg : color};"
83 >
84 {getEmbedText(record.embed.$type)}
85 </span>
86 {/if}
87{/snippet}
88
89{#if mini}
90 <div
91 class="overflow-hidden text-sm text-nowrap overflow-ellipsis opacity-60"
92 style="color: {theme.fg};"
93 >
94 {#await post}
95 loading...
96 {:then post}
97 {#if post.ok}
98 {@const record = post.value}
99 <span style="color: {color};">@{handle}</span>: {@render embedBadge(record)}
100 {record.text}
101 {:else}
102 {post.error}
103 {/if}
104 {/await}
105 </div>
106{:else}
107 {#await post}
108 <div
109 class="rounded-sm border-2 p-3 text-center backdrop-blur-sm"
110 style="background: {color}18; border-color: {color}66;"
111 >
112 <div
113 class="inline-block h-6 w-6 animate-spin rounded-full border-3"
114 style="border-color: {theme.accent}; border-left-color: transparent;"
115 ></div>
116 <p class="mt-3 text-sm font-medium opacity-60" style="color: {theme.fg};">loading post...</p>
117 </div>
118 {:then post}
119 {#if post.ok}
120 {@const record = post.value}
121 <div
122 class="rounded-sm border-2 p-3 shadow-lg backdrop-blur-sm transition-all hover:scale-[1.01]"
123 style="background: {color}18; border-color: {color}66;"
124 >
125 <div class="mb-3 flex items-center gap-1.5">
126 <span class="font-bold" style="color: {color};">
127 @{handle}
128 </span>
129 <!-- <span>·</span>
130 {#await replies}
131 <span style="color: {theme.fg}aa;">… replies</span>
132 {:then replies}
133 {#if replies.ok}
134 {@const repliesValue = replies.value}
135 <span style="color: {theme.fg}aa;">
136 {#if repliesValue.total > 0}
137 {repliesValue.total}
138 {repliesValue.total > 1 ? 'replies' : 'reply'}
139 {:else}
140 no replies
141 {/if}
142 </span>
143 {:else}
144 <span
145 title={`${replies.error}`}
146 class="max-w-[32ch] overflow-hidden text-nowrap"
147 style="color: {theme.fg}aa;">{replies.error}</span
148 >
149 {/if}
150 {/await} -->
151 <span>·</span>
152 <span style="color: {theme.fg}aa;">{getRelativeTime(new Date(record.createdAt))}</span>
153 </div>
154 <p class="leading-relaxed text-wrap" style="color: {theme.fg};">
155 {record.text}
156 {@render embedBadge(record)}
157 </p>
158 </div>
159 {:else}
160 <div class="rounded-xl border-2 p-4" style="background: #ef444422; border-color: #ef4444;">
161 <p class="text-sm font-medium" style="color: #fca5a5;">error: {post.error}</p>
162 </div>
163 {/if}
164 {/await}
165{/if}