1  <script lang="ts">
 2    import type { BaseUrl, Comment } from "@http-client";
 3  
 4    import CommentComponent from "@app/components/Comment.svelte";
 5    import Icon from "./Icon.svelte";
 6  
 7    export let thread: {
 8      root: Comment;
 9      replies: Comment[];
10    };
11    export let rawPath: string;
12    export let baseUrl: BaseUrl;
13  
14    $: root = thread.root;
15    $: replies = thread.replies;
16  </script>
17  
18  <style>
19    .comments {
20      display: flex;
21      flex-direction: column;
22      box-shadow: 0 0 0 1px var(--color-border-hint);
23      border-radius: var(--border-radius-small);
24    }
25    .top-level-comment {
26      background-color: var(--color-background-float);
27      border-radius: var(--border-radius-small);
28    }
29    .has-replies {
30      border-bottom: 1px solid var(--color-fill-separator);
31      border-bottom-left-radius: 0;
32      border-bottom-right-radius: 0;
33    }
34    .replies {
35      margin-left: 1.25rem;
36    }
37    @media (max-width: 719.98px) {
38      .comments {
39        border-radius: 0;
40      }
41    }
42  </style>
43  
44  <div class="comments">
45    <div class="top-level-comment" class:has-replies={replies.length > 0}>
46      <CommentComponent
47        {baseUrl}
48        {rawPath}
49        id={root.id}
50        lastEdit={root.edits.length > 1 ? root.edits.at(-1) : undefined}
51        authorId={root.author.id}
52        authorAlias={root.author.alias}
53        location={root.location}
54        reactions={root.reactions}
55        timestamp={root.timestamp}
56        body={root.body}>
57        <Icon name="chat" slot="icon" />
58      </CommentComponent>
59    </div>
60    {#if replies.length > 0}
61      <div class="replies">
62        {#each replies as reply}
63          <CommentComponent
64            {baseUrl}
65            {rawPath}
66            lastEdit={reply.edits.length > 1 ? reply.edits.at(-1) : undefined}
67            id={reply.id}
68            authorId={reply.author.id}
69            authorAlias={reply.author.alias}
70            caption="replied"
71            isReply
72            isLastReply={replies[replies.length - 1] === reply}
73            reactions={reply.reactions}
74            timestamp={reply.timestamp}
75            body={reply.body} />
76        {/each}
77      </div>
78    {/if}
79  </div>