111 lines
2.4 KiB
Svelte
111 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { ReplyView } from "$lib/api/types";
|
|
import { mediaKindLabel } from "$lib/format/media";
|
|
import { peerColorIndex, peerName } from "$lib/format/peer";
|
|
import { peers } from "$lib/stores/peers.svelte";
|
|
|
|
interface Props {
|
|
onjump?: (messageId: number) => void;
|
|
reply: ReplyView;
|
|
}
|
|
|
|
let { reply, onjump }: Props = $props();
|
|
|
|
const sender = $derived(
|
|
reply.sender_id === null ? undefined : peers.get(reply.sender_id)
|
|
);
|
|
const name = $derived(
|
|
sender
|
|
? peerName(sender)
|
|
: (reply.sender_name ?? (reply.sender_id ? String(reply.sender_id) : ""))
|
|
);
|
|
const colorIndex = $derived(peerColorIndex(reply.sender_id ?? 0));
|
|
const preview = $derived(
|
|
reply.text || mediaKindLabel(reply.media_kind) || ""
|
|
);
|
|
const mediaOnly = $derived(!reply.text && reply.media_kind !== null);
|
|
const canJump = $derived(reply.message_id !== null && onjump !== undefined);
|
|
|
|
function jump() {
|
|
if (reply.message_id !== null) {
|
|
onjump?.(reply.message_id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
class="ReplyHeader peer-color-{colorIndex}"
|
|
disabled={!canJump}
|
|
onclick={jump}
|
|
type="button"
|
|
class:clickable={canJump}
|
|
>
|
|
<span class="bar"></span>
|
|
<span class="body">
|
|
<span class="title">{name || "Reply"}</span>
|
|
<span class="preview" class:media={mediaOnly}>{preview}</span>
|
|
</span>
|
|
</button>
|
|
|
|
<style lang="scss">
|
|
.ReplyHeader {
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: stretch;
|
|
|
|
width: 100%;
|
|
margin-bottom: 0.1875rem;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
|
|
text-align: left;
|
|
|
|
background-color: var(--color-primary-tint);
|
|
|
|
&.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.clickable:hover {
|
|
background-color: var(--color-primary-opacity);
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
flex-shrink: 0;
|
|
width: 0.1875rem;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
.body {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.0625rem 0.375rem;
|
|
}
|
|
|
|
.title {
|
|
overflow: hidden;
|
|
|
|
font-size: 0.875rem;
|
|
font-weight: var(--font-weight-medium);
|
|
color: currentColor;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.preview {
|
|
overflow: hidden;
|
|
|
|
font-size: 0.875rem;
|
|
color: var(--color-text);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
&.media {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
</style>
|