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

frontend/src/lib/components/MainMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { DropdownMenu } from "bits-ui";
+  import AlertBadge from "#lib/components/alerts/AlertBadge.svelte";
   import AccountAvatar from "#lib/components/settings/AccountAvatar.svelte";
   import AddAccountDialog from "#lib/components/settings/AddAccountDialog.svelte";
   import Button from "#lib/components/ui/Button.svelte";
@@ -50,15 +51,18 @@
     {#snippet child({
       props,
     })}
-      <Button
-        {...props}
-        aria-label={t("menu.open")}
-        round
-        smaller
-        variant="translucent"
-      >
-        <Icon name="menu" />
-      </Button>
+      <span class="menu-trigger">
+        <Button
+          {...props}
+          aria-label={t("menu.open")}
+          round
+          smaller
+          variant="translucent"
+        >
+          <Icon name="menu" />
+        </Button>
+        <AlertBadge />
+      </span>
     {/snippet}
   </DropdownMenu.Trigger>
   <DropdownMenu.Portal>
@@ -105,7 +109,12 @@
           onSelect={() => ui.openPanel(entry.panel)}
         >
           <Icon name={entry.icon} size="1.125rem" />
-          {t(entry.label)}
+          {#if entry.panel === "alerts"}
+            <span class="account-name">{t(entry.label)}</span>
+            <AlertBadge inline />
+          {:else}
+            {t(entry.label)}
+          {/if}
         </DropdownMenu.Item>
       {/each}
       <DropdownMenu.Separator class="bg-menu-separator" />
@@ -127,6 +136,12 @@
 <AddAccountDialog bind:open={adding} />
 
 <style lang="scss">
+  .menu-trigger {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+  }
+
   :global(.main-menu) {
     width: 17rem;
     max-height: calc(100dvh - 5rem);