Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 import { Post, BlockedPost, DetachedQuotePost } from '../../models/posts.js';
3
4 import BlockedPostView from './BlockedPostView.svelte';
5 import MissingPostView from './MissingPostView.svelte';
6 import PostComponent from './PostComponent.svelte';
7
8 /**
9 Contexts:
10 - thread - a post in the thread tree
11 - parent - parent reference above the thread root
12 - quote - a quote embed
13 - quotes - a post on the quotes page
14 - feed - a post on the hashtag feed page
15 */
16
17 let { post, placement }: { post: AnyPost, placement: PostPlacement } = $props();
18</script>
19
20{#if post instanceof Post}
21 <PostComponent {post} {placement} />
22{:else}
23 <div class="post post-{placement} blocked">
24 {#if post instanceof BlockedPost}
25 <BlockedPostView {post} {placement} reason="Blocked post" />
26 {:else if post instanceof DetachedQuotePost}
27 <BlockedPostView {post} {placement} reason="Hidden quote" />
28 {:else}
29 <MissingPostView {post} />
30 {/if}
31 </div>
32{/if}
33
34<style>
35 .post.blocked :global {
36 p, a {
37 font-size: 11pt;
38 color: #666;
39 }
40
41 @media (prefers-color-scheme: dark) {
42 p, a { color: #aaa; }
43 }
44 }
45
46 :global {
47 .post p {
48 margin-top: 10px;
49 }
50
51 .post .blocked-header i {
52 margin-right: 2px;
53 }
54
55 .post h2 .separator, .post .blocked-header .separator, .blocked-header .separator {
56 color: #888;
57 font-weight: normal;
58 font-size: 11pt;
59 vertical-align: text-top;
60 }
61
62 .post h2 .action, .post .blocked-header .action, .blocked-header .action {
63 color: #888;
64 font-weight: normal;
65 font-size: 10pt;
66 vertical-align: text-top;
67 }
68
69 .post h2 .action:hover, .post .blocked-header .action:hover, .blocked-header .action:hover {
70 color: #444;
71 }
72 }
73</style>