113 lines
2.6 KiB
Svelte
113 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import ago from '$lib/ago';
|
|
import { now } from '$lib/global-now';
|
|
|
|
import { linkStatus, type MastodonStatus } from '$lib/mastoapi/status';
|
|
|
|
import StatusContent from './StatusContent.svelte';
|
|
import StatusControls from './StatusControls.svelte';
|
|
|
|
export let status: MastodonStatus;
|
|
export let focused: boolean = false;
|
|
|
|
let createdDate = new Date(status.created_at);
|
|
</script>
|
|
|
|
<article class="status" class:focused>
|
|
<div class="status-content">
|
|
<aside class="status-author">
|
|
<a href={`/acc/${status.account.id}`}>
|
|
<img class="avatar" alt={status.account.acct} src={status.account.avatar_static} />
|
|
</a>
|
|
</aside>
|
|
|
|
<div class="status-main">
|
|
<section class="top-line">
|
|
<a href={`/acc/${status.account.id}`} class="author-link">
|
|
<strong class="author-display-name">{status.account.display_name}</strong>
|
|
<span class="author-handle">@{status.account.fqn}</span>
|
|
</a>
|
|
|
|
<a class="link-muted" href={linkStatus(status)}>
|
|
<time title={createdDate.toLocaleString()}>
|
|
{ago(createdDate, $now)}
|
|
</time>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="status-body">
|
|
{#if status.spoiler_text}
|
|
<p>[TODO: content warning <q>{status.spoiler_text}</q>]</p>
|
|
{/if}
|
|
|
|
<StatusContent {status} />
|
|
</section>
|
|
|
|
<section class="status-attachments">
|
|
{#each status.media_attachments as attachment}
|
|
<div>[TODO: attachment <q>{attachment.description || '(no description)'}</q>]</div>
|
|
{/each}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<StatusControls {status} />
|
|
</article>
|
|
|
|
<style>
|
|
.status {
|
|
background-color: var(--col-bg-1);
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.status.focused {
|
|
background-color: var(--col-bg-2);
|
|
}
|
|
|
|
.status-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.status aside {
|
|
width: 3em;
|
|
margin-inline-end: 0.75em;
|
|
}
|
|
|
|
.status .avatar {
|
|
border-radius: 4px;
|
|
max-width: 3em;
|
|
}
|
|
|
|
.status .author-link {
|
|
color: var(--col-fg-0);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.status .author-handle {
|
|
margin-inline-start: 0.5em;
|
|
color: var(--col-fg-1);
|
|
}
|
|
|
|
.status .status-main {
|
|
width: 100%;
|
|
}
|
|
|
|
.status .status-main .top-line {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.status .status-body {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
:global(.status-body > *:first-child, .status-body > .foreign-content > *:first-child) {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|