vigil/src/lib/FullPost.svelte

<script lang="ts">
    import { DateTime } from "luxon";

    import { RiEditLine, RiFlagLine, RiHistoryLine, RiHome2Line, RiUserLine } from "svelte-remixicon";
    import type { PostEntry } from "./backend";
    import SLayout from "./SLayout.svelte";
    import GuildAbout from "./GuildAbout.svelte";
    import UserAbout from "./UserAbout.svelte";
    import UserMenu from "./UserMenu.svelte";
    import PostMeta from "./PostMeta.svelte";
    import GuildMenu from "./GuildMenu.svelte";
    import { SvelteShowdown } from "svelte-showdown";
    import VoteButton from "./VoteButton.svelte";
    import { getMe } from "./globals.svelte";
    import CommentCount from "./CommentCount.svelte";
    import CommentSection from "./CommentSection.svelte";



let { post }: { post: PostEntry }  = $props();

let me = getMe();
let { title, id, content = '', to, votes, my_vote, comment_count } = post;
</script>

<SLayout title={to.display_name + (to.type === 'guild' ? ` (+${to.name})` : to.type === 'user' ? ` (@${to.username})` : '')}>
    <article class="card">
      <div class="post-frame" id={id}>
        <div class="post-body">
          <h1>{title}</h1>
          <PostMeta {post} />
          <!-- here go reports -->
          <!-- here goes removal message -->
          <div class="post-content">
            <SvelteShowdown content={ content || "" } />
            <!-- content, formatted as markdown -->
          </div>
        </div><!-- .post-body -->
        <aside class="message-stats">
          <!-- upvotes / downvotes -->
          <VoteButton score={votes} vote={my_vote} {id} />
          <CommentCount count={comment_count} />
        </aside>
        <ul class="message-options row">
          {#if me && me.id !== post.author?.id}
          <li><a href="/report/post/{id}"><RiFlagLine/> Report</a></li>
          {/if}
          {#if me && me.id === post.author?.id }
          <li><a href="/edit/={id}"><RiEditLine/> Edit</a></li>
          {/if}
        </ul>
      </div>
    </article>

    <CommentSection {post} />

    {#snippet left()}
      {#if to.type === 'guild'}
        <GuildMenu guild={to} />
      {:else if to.type == 'user'}
        <UserMenu user={to} />
      {/if}
    {/snippet}

    {#snippet right()}
        {#if to.type === 'guild'}
        <GuildAbout guild={to} />
        {:else if to.type === 'user'}
        <UserAbout user={to} />
        {/if}
    {/snippet}
</SLayout>

<style>
  .post-frame {
    position: relative;
  }
  .post-content {
    overflow-x: auto;
  }
  .post-body {
    margin-inline-start: 2em;
  }
  .message-stats {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 2em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
</style>