fix(web): show notification count as menu badge and mark read on open

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/shared/ui/ui.module.css

@@ -420,6 +420,21 @@
   background: var(--hover);
 }
 
+.menuBadge {
+  margin-left: auto;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: var(--accent-fill);
+  color: var(--on-accent, #fff);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
 .menuDanger {
   color: var(--danger);
 }

apps/web/src/shared/ui/ui.tsx

@@ -204,7 +204,7 @@ export function Dialog({
   );
 }
 
-export type MenuItem = { label: string; icon?: string; danger?: boolean; onSelect: () => void };
+export type MenuItem = { label: string; icon?: string; danger?: boolean; badge?: number; onSelect: () => void };
 
 /** Выпадающее меню: открывается кнопкой-триггером, закрывается кликом снаружи и Esc. */
 export function Menu({
@@ -268,6 +268,7 @@ export function Menu({
         >
           {it.icon && <Icon src={it.icon} size={18} />}
           {it.label}
+          {it.badge ? <span className={s.menuBadge}>{it.badge > 99 ? '99+' : it.badge}</span> : null}
         </button>
       ))}
     </div>