66 lines
1.3 KiB
Svelte
66 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { t } from "#lib/i18n/locale.svelte.js";
|
|
import { accounts } from "#lib/stores/accounts.svelte.js";
|
|
import { alerts } from "#lib/stores/alerts.svelte.js";
|
|
|
|
interface Props {
|
|
inline?: boolean;
|
|
}
|
|
|
|
const { inline = false }: Props = $props();
|
|
|
|
const MAX_SHOWN = 99;
|
|
|
|
const count = $derived(alerts.unseen);
|
|
|
|
$effect(() => {
|
|
alerts.track(accounts.selectedId);
|
|
});
|
|
</script>
|
|
|
|
{#if count > 0}
|
|
<span class="alert-badge" title={t("alerts.badge", { count })} class:inline>
|
|
{count > MAX_SHOWN ? `${MAX_SHOWN}+` : count}
|
|
</span>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.alert-badge {
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: -0.125rem;
|
|
|
|
min-width: 1.125rem;
|
|
height: 1.125rem;
|
|
padding: 0 0.3125rem;
|
|
border-radius: 0.5625rem;
|
|
|
|
font-size: 0.6875rem;
|
|
font-weight: var(--font-weight-medium);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.125rem;
|
|
color: var(--color-white);
|
|
text-align: center;
|
|
|
|
background-color: var(--color-primary);
|
|
box-shadow: 0 0 0 2px var(--color-background);
|
|
|
|
&.inline {
|
|
position: static;
|
|
flex-shrink: 0;
|
|
|
|
min-width: 1.375rem;
|
|
height: 1.375rem;
|
|
padding: 0 0.4375rem;
|
|
border-radius: 0.6875rem;
|
|
|
|
font-size: 0.8125rem;
|
|
line-height: 1.375rem;
|
|
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|