fix(notification-center): add infinite scroll, delete events and loading states (#DS-5164) (#1627)

Co-authored-by: lskramarov <9027254+lskramarov@users.noreply.github.com>

Author: lskramarov

packages/components-dev/notification-center/module.ts

@@ -23,6 +23,9 @@ import { NotificationCenterExamplesModule } from '../../docs-examples/components
         <notification-center-error-example />
         <br />
         <br />
+        <notification-center-infinite-scroll-example />
+        <br />
+        <br />
         <notification-center-popover-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush

packages/components/core/locales/en-US.ts

@@ -218,6 +218,7 @@ export const enUSLocaleData = {
         showPopUpNotifications: 'Show pop-up notifications',
         noNotifications: 'No notifications',
         failedToLoadNotifications: 'Failed to load notifications',
-        repeat: 'Repeat'
+        repeat: 'Repeat',
+        loadingMore: 'Loading more notifications'
     }
 };

packages/components/core/locales/es-LA.ts

@@ -217,6 +217,7 @@ export const esLALocaleData = {
         showPopUpNotifications: 'Mostrar notificaciones emergentes',
         noNotifications: 'Sin notificaciones',
         failedToLoadNotifications: 'Error al cargar las notificaciones',
-        repeat: 'Repetir'
+        repeat: 'Repetir',
+        loadingMore: 'Cargando más notificaciones'
     }
 };

packages/components/core/locales/pt-BR.ts

@@ -217,6 +217,7 @@ export const ptBRLocaleData = {
         showPopUpNotifications: 'Mostrar notificações pop-up',
         noNotifications: 'Sem notificações',
         failedToLoadNotifications: 'Falha ao carregar notificações',
-        repeat: 'Repetir'
+        repeat: 'Repetir',
+        loadingMore: 'Carregando mais notificações'
     }
 };

packages/components/core/locales/ru-RU.ts

@@ -232,6 +232,7 @@ export const ruRULocaleData = {
         showPopUpNotifications: 'Показывать всплывающие уведомления',
         noNotifications: 'Нет уведомлений',
         failedToLoadNotifications: 'Не удалось загрузить уведомления',
-        repeat: 'Повторить'
+        repeat: 'Повторить',
+        loadingMore: 'Загрузка уведомлений'
     }
 };

packages/components/core/locales/tk-TM.ts

@@ -218,6 +218,7 @@ export const tkTMLocaleData = {
         showPopUpNotifications: 'Açylýan bildirişleri görkeziň',
         noNotifications: 'Duýduryş ýok',
         failedToLoadNotifications: 'Duýduryşlary ýükläp bilmedi',
-        repeat: 'Gaýtalama'
+        repeat: 'Gaýtalama',
+        loadingMore: 'Duýduryşlar ýüklenýär'
     }
 };

packages/components/navbar/navbar-item.scss

@@ -20,6 +20,15 @@
         min-height: var(--kbq-size-l);
     }
 
+    // Filled fade-contrast only: its background is a semi-transparent tint, so the
+    // navbar icon shows through. Composite the tint over an opaque bg-tertiary substrate.
+    // The outline variant is intentionally left untouched — it stays a clean transparent outline.
+    & .kbq-badge-filled.kbq-badge_fade-contrast {
+        background:
+            linear-gradient(var(--kbq-background-contrast-fade), var(--kbq-background-contrast-fade)),
+            var(--kbq-background-bg-tertiary);
+    }
+
     & .kbq-button-icon {
         position: absolute;
         padding-left: var(--kbq-size-xs);

packages/components/notification-center/__screenshots__/01-dark.png

@@ -11,7 +11,8 @@
         }
     }
 
-    .kbq-notification-center-error-container {
+    .kbq-notification-center-error-container,
+    .kbq-notification-center-load-more-error {
         color: var(--kbq-foreground-error);
     }
 }