mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-10-29 08:10:59 +08:00
79 lines
2.0 KiB
Svelte
79 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import type { BaseUrl, Comment } from "@http-client";
|
|
|
|
import CommentComponent from "@app/components/Comment.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
|
|
export let thread: {
|
|
root: Comment;
|
|
replies: Comment[];
|
|
};
|
|
export let rawPath: string;
|
|
export let baseUrl: BaseUrl;
|
|
|
|
$: root = thread.root;
|
|
$: replies = thread.replies;
|
|
</script>
|
|
|
|
<style>
|
|
.comments {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 0 0 1px var(--color-border-hint);
|
|
border-radius: var(--border-radius-small);
|
|
}
|
|
.top-level-comment {
|
|
background-color: var(--color-background-float);
|
|
border-radius: var(--border-radius-small);
|
|
}
|
|
.has-replies {
|
|
border-bottom: 1px solid var(--color-fill-separator);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.replies {
|
|
margin-left: 1.25rem;
|
|
}
|
|
@media (max-width: 719.98px) {
|
|
.comments {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="comments">
|
|
<div class="top-level-comment" class:has-replies={replies.length > 0}>
|
|
<CommentComponent
|
|
{baseUrl}
|
|
{rawPath}
|
|
id={root.id}
|
|
lastEdit={root.edits.length > 1 ? root.edits.pop() : undefined}
|
|
authorId={root.author.id}
|
|
authorAlias={root.author.alias}
|
|
reactions={root.reactions}
|
|
timestamp={root.timestamp}
|
|
body={root.body}>
|
|
<Icon name="chat" slot="icon" />
|
|
</CommentComponent>
|
|
</div>
|
|
{#if replies.length > 0}
|
|
<div class="replies">
|
|
{#each replies as reply}
|
|
<CommentComponent
|
|
{baseUrl}
|
|
{rawPath}
|
|
lastEdit={reply.edits.length > 1 ? reply.edits.pop() : undefined}
|
|
id={reply.id}
|
|
authorId={reply.author.id}
|
|
authorAlias={reply.author.alias}
|
|
caption="replied"
|
|
isReply
|
|
isLastReply={replies[replies.length - 1] === reply}
|
|
reactions={reply.reactions}
|
|
timestamp={reply.timestamp}
|
|
body={reply.body} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|