83 lines
1.7 KiB
Svelte
83 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { Alert } from "$lib/api/types";
|
|
import Button from "../ui/Button.svelte";
|
|
import Icon from "../ui/Icon.svelte";
|
|
|
|
interface Props {
|
|
alerts: Alert[];
|
|
onseen: (alert: Alert) => void;
|
|
}
|
|
|
|
const { alerts, onseen }: Props = $props();
|
|
|
|
function text(alert: Alert): string {
|
|
const p = alert.payload;
|
|
const value = p.text ?? p.message ?? p.keyword;
|
|
return typeof value === "string" ? value : JSON.stringify(p);
|
|
}
|
|
</script>
|
|
|
|
<ul class="alert-list">
|
|
{#each alerts as alert (alert.id)}
|
|
<li class="alert-item" class:unseen={!alert.seen}>
|
|
<div class="alert-main">
|
|
<p class="alert-text">{text(alert)}</p>
|
|
<time class="alert-date">{new Date(alert.ts).toLocaleString()}</time>
|
|
</div>
|
|
{#if !alert.seen}
|
|
<Button
|
|
variant="translucent"
|
|
round
|
|
smaller
|
|
onclick={() => onseen(alert)}
|
|
aria-label="Отметить прочитанным"
|
|
>
|
|
<Icon name="check" />
|
|
</Button>
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<style lang="scss">
|
|
.alert-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.alert-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--color-borders);
|
|
border-radius: 0.75rem;
|
|
|
|
&.unseen {
|
|
border-color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.alert-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.alert-text {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.alert-date {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|