feat(frontend): live unseen alerts badge on the menu button and in settings

frontend/src/lib/components/alerts/AlertBadge.svelte

@@ -0,0 +1,65 @@
+<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>