@rtsee/ngx 0.0.111 → 0.0.113

package/dist/ngx/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, ElementRef, EventEmitter, OnDestroy, ChangeDetectorRef, OutputEmitterRef, ViewContainerRef, ComponentFactoryResolver, OnChanges, SimpleChanges, Type } from '@angular/core';
+import { OnInit, AfterViewInit, ElementRef, EventEmitter, OnDestroy, ChangeDetectorRef, OutputEmitterRef, OnChanges, SimpleChanges, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
 import { RTSeeConference, RTSeePeerConnection } from '@rtsee/conference';
 import { RTSeeMessenger, RTSeeMessengerSearch, RTSeeMessage, RTSeeChat, RTSeeChatMember, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete, OzzyClientTask } from '@rtsee/messenger';
 import { IPeer, RTSeeTextLabelKeys, IRTSeeCall } from '@rtsee/core';
@@ -111,6 +111,16 @@ declare class ProfileComponent {
     messenger: RTSeeMessenger;
     peer?: IPeer;
     constructor(authService: RTSeeAuthService, router: Router);
+    get targetPeer(): {
+        id: string;
+        name?: string;
+        imageUrl?: string;
+    } | undefined;
+    get isOtherUser(): boolean;
+    get displayName(): string;
+    get displayInitials(): string;
+    get displayImageUrl(): string | undefined;
+    get displaySubtitle(): string;
     setLanguage(): void;
     call(): void;
     videoCall(): void;
@@ -139,6 +149,7 @@ declare class PaymentProductSnippetComponent {
 
 declare class RtseeEventsDashboardComponent {
     eventsDashboard: RTSeeEventsDashboard;
+    loadMore(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtseeEventsDashboardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RtseeEventsDashboardComponent, "rtsee-events-dashboard", never, { "eventsDashboard": { "alias": "eventsDashboard"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -511,10 +522,21 @@ declare class TimeFormatHelperService {
     static ɵprov: i0.ɵɵInjectableDeclaration<TimeFormatHelperService>;
 }
 
-declare class RtseeEventsDashboardSessionComponent {
+declare class RtseeEventsDashboardSessionComponent implements OnInit, OnChanges, OnDestroy {
     timeFormatService: TimeFormatHelperService;
+    private cd;
     session: RTSeeDashboardClientSession;
-    constructor(timeFormatService: TimeFormatHelperService);
+    durationText: string;
+    visibleEventsCount: number;
+    private timerInterval;
+    constructor(timeFormatService: TimeFormatHelperService, cd: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    loadMoreEvents(): void;
+    private initTimer;
+    private stopTimer;
+    private updateDuration;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtseeEventsDashboardSessionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RtseeEventsDashboardSessionComponent, "rtsee-rtsee-events-dashboard-session", never, { "session": { "alias": "session"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -544,21 +566,24 @@ declare class EventsWidgetsService {
     static ɵprov: i0.ɵɵInjectableDeclaration<EventsWidgetsService>;
 }
 
-declare class EventThumbnailComponent implements OnInit, AfterViewInit {
+declare class EventThumbnailComponent implements OnInit, OnChanges, AfterViewInit {
     private widgetsService;
     private componentFactoryResolver;
     timeFormatService: TimeFormatHelperService;
     private cd;
     tooltip?: string;
     timeInAgoFormat: string;
+    private componentRef?;
     event: RTSeeDashboardEvent;
+    session?: RTSeeDashboardClientSession;
     widgetHost: WidgetDirective;
     constructor(widgetsService: EventsWidgetsService, componentFactoryResolver: ComponentFactoryResolver, timeFormatService: TimeFormatHelperService, cd: ChangeDetectorRef);
     ngOnInit(): void;
     generateTooltip(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EventThumbnailComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EventThumbnailComponent, "rtsee-event-thumbnail", never, { "event": { "alias": "event"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EventThumbnailComponent, "rtsee-event-thumbnail", never, { "event": { "alias": "event"; "required": false; }; "session": { "alias": "session"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class ShaveDirective implements AfterViewInit {
@@ -593,11 +618,22 @@ declare class ManageChatComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ManageChatComponent, "rtsee-manage-chat", never, { "messenger": { "alias": "messenger"; "required": false; }; "menuState": { "alias": "menuState"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+interface ICallPresentMember {
+    id: string;
+    name: string;
+    imageUrl?: string;
+    initials: string;
+}
 declare class CallWidgetComponent implements OnInit {
     message: RTSeeMessage<IRTSeeCall>;
     messenger: RTSeeMessenger;
     chat: RTSeeChat;
     ngOnInit(): void;
+    get roomId(): string | null;
+    get callerName(): string;
+    get isUserInCall(): boolean;
+    get presentMembers(): ICallPresentMember[];
+    private getInitials;
     joinCall(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CallWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CallWidgetComponent, "ngx-call-widget", never, { "message": { "alias": "message"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; "chat": { "alias": "chat"; "required": false; }; }, {}, never, never, true, never>;
@@ -670,6 +706,9 @@ declare class ChatComponent implements OnInit, OnDestroy {
     chatData?: IRTSeeChat;
     entity?: RTSeeEntity;
     messenger: RTSeeMessenger;
+    showInvite: boolean;
+    get isSoleAdmin(): boolean;
+    toggleInvite(): void;
     onInViewPortChange(value: boolean): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -702,7 +741,7 @@ interface IRTSeeMessageGroup {
     senderVisible: boolean;
     messages: RTSeeMessage[];
 }
-declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit {
+declare class MessagesListComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit {
     private timeFormatService;
     private scroller;
     private document;
@@ -711,19 +750,33 @@ declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit
     messagesGroups: IRTSeeMessageGroup[];
     firstGroupedMessage: RTSeeMessage | null;
     lastGroupedMessage: RTSeeMessage | null;
+    shouldStickToBottom: boolean;
+    private resizeObserver;
+    private onMediaCapture;
+    private initialScrollInterval;
     chat: RTSeeChat;
     messenger: RTSeeMessenger;
     scrollContainer: ElementRef<HTMLDivElement>;
+    contentBlock: ElementRef<HTMLDivElement>;
+    bottomAnchor: ElementRef<HTMLDivElement>;
     constructor(timeFormatService: TimeFormatHelperService, scroller: ViewportScroller, document: Document);
     onWindowScroll(event: Event): void;
+    onWindowResize(): void;
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     onMessageSent(): void;
     ngOnDestroy(): void;
+    onContainerScroll(event: Event): void;
     onScrolledToTop(): void;
     onScroll(): void;
-    scrollToBottom(): void;
+    scrollToBottom(immediate?: boolean): void;
     formatDate(message: RTSeeMessage): string;
+    private checkScrollPosition;
+    private isAtBottom;
+    private enforceInitialScroll;
+    private bindChatEvents;
+    private unbindChatEvents;
     private groupMessages;
     private saveFirstAndLastGroupedMessages;
     protected readonly RTSeeChatTypes: typeof RTSeeChatTypes;
@@ -769,6 +822,7 @@ declare class ChatInputComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     get isGroupChat(): boolean;
+    startVideoCall(): void;
     sendMessage(): void;
     get anyAutocompleteVisible(): boolean;
     onKeyDown(event: KeyboardEvent): void;
@@ -809,7 +863,8 @@ declare class MessengerHeaderComponent {
     defaultImagesService: DefaultImagesService;
     messenger: RTSeeMessenger;
     isDropdownOpen: boolean;
-    chatImageExpanded: boolean;
+    imageExpandedToSquare: boolean;
+    private lastSquareToggleTime;
     constructor(defaultImagesService: DefaultImagesService);
     openProfile(id: string): void;
     toggleDropdown(): void;
@@ -817,9 +872,15 @@ declare class MessengerHeaderComponent {
     openNewChatDialog(): void;
     closeManageChatDialog(): void;
     onChatSaved(chat: IRTSeeChat): void;
+    onMyAvatarClick(): void;
+    onMyAvatarDblClick(): void;
     onChatImageClick(): void;
+    onChatImageDblClick(): void;
     collapseInfo(): void;
     get isGroupOrChannelChat(): boolean;
+    get headerTitle(): string;
+    get myProfileImageUrl(): string;
+    get chatImageUrl(): string;
     protected readonly RTSeeTextLabelKeys: typeof RTSeeTextLabelKeys;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessengerHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessengerHeaderComponent, "rtsee-messenger-header", never, { "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;
@@ -948,23 +1009,6 @@ declare class GtagService {
     static ɵprov: i0.ɵɵInjectableDeclaration<GtagService>;
 }
 
-interface IWorkflowStepWidget {
-    /** matches IOzzyWorkflowStepDefinition.widget */
-    name: string;
-    /** standalone component with `step`, `workflow`, `chat`, `messenger` inputs */
-    component: Type<unknown>;
-}
-/**
- * Registry of the components which render workflow steps inside the rts-workflow widget.
- */
-declare class WorkflowStepsService {
-    stepsMap: IWorkflowStepWidget[];
-    register(widget: IWorkflowStepWidget): void;
-    getStepComponentByName(name?: string): Type<unknown> | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WorkflowStepsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<WorkflowStepsService>;
-}
-
 /**
  * Default client-side representation of a server-side OzzyTask.
  * Can be used directly (`[task]`) or as a message widget (`message.data.taskId`).
@@ -1002,5 +1046,60 @@ declare class RTSeeTaskComponent implements OnInit, OnChanges, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<RTSeeTaskComponent, "rtsee-task", never, { "task": { "alias": "task"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; "chat": { "alias": "chat"; "required": false; }; "allowExecute": { "alias": "allowExecute"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, StoryElementsSectionComponent, WorkflowStepsService };
-export type { IAccordionItem, IWorkflowStepWidget, RTSeeTagForm, RTSeeTagGroupForm };
+declare abstract class BaseEventWidgetComponent implements OnInit, OnChanges, OnDestroy {
+    protected cd: ChangeDetectorRef;
+    private _event;
+    set event(value: RTSeeDashboardEvent);
+    get event(): RTSeeDashboardEvent;
+    private _session?;
+    set session(value: RTSeeDashboardClientSession | undefined);
+    get session(): RTSeeDashboardClientSession | undefined;
+    durationText: string;
+    totalSeconds: number;
+    isLive: boolean;
+    private intervalId;
+    constructor(cd: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    protected initCounter(): void;
+    protected stopCounter(): void;
+    updateDuration(): void;
+    protected formatSeconds(seconds: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseEventWidgetComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseEventWidgetComponent, never, never, { "event": { "alias": "event"; "required": false; }; "session": { "alias": "session"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class StoryDetailsOpenedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd: ChangeDetectorRef);
+    get storyName(): string;
+    get storyUrl(): string | null;
+    get imageUrl(): string | null;
+    get description(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StoryDetailsOpenedWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StoryDetailsOpenedWidgetComponent, "rtsee-story-details-opened-widget", never, {}, {}, never, never, true, never>;
+}
+
+declare class StoryReadingStartedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd: ChangeDetectorRef);
+    get storyName(): string;
+    get storyUrl(): string | null;
+    get imageUrl(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StoryReadingStartedWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StoryReadingStartedWidgetComponent, "rtsee-story-reading-started-widget", never, {}, {}, never, never, true, never>;
+}
+
+declare class SlideNumberChangedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd: ChangeDetectorRef);
+    get slideNumber(): number | string;
+    get totalSlides(): number | null;
+    get slideText(): string;
+    get storyName(): string | null;
+    get storyUrl(): string | null;
+    get imageUrl(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlideNumberChangedWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlideNumberChangedWidgetComponent, "rtsee-slide-number-changed-widget", never, {}, {}, never, never, true, never>;
+}
+
+export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent };
+export type { IAccordionItem, RTSeeTagForm, RTSeeTagGroupForm };

package/dist/ngx/src/lib/theme/auth/auth-container.scss

@@ -98,7 +98,7 @@
   .auth-logo {
     width: $rtsee-auth-logo-size;
     height: $rtsee-auth-logo-size;
-    padding: $rtsee-auth-logo-padding;
+    padding: 0; // $rtsee-auth-logo-padding;
     box-sizing: border-box;
     margin-bottom: $rtsu-space-md;
     border-radius: $rtsu-radius-lg;

package/dist/ngx/src/lib/theme/containers/nav.scss

@@ -14,6 +14,8 @@
         display: block;
         width: $nav-item-width;
         height: $nav-item-height;
+        border-radius: 9px;
+        overflow: hidden;
 
         img {
           width: 100%;

package/dist/ngx/src/lib/theme/containers/shell.scss

@@ -25,12 +25,11 @@
       }
     }
 
-    &.rtsee-shell-messenger-active {
-      .rtsee-messenger-container {
-        .rts-messenger {
-          .rts-messenger-header-container {
-            top: $video-container-height;
-          }
+
+    .rtsee-messenger-container {
+      .rts-messenger {
+        .rts-messenger-header-container {
+          top: $video-container-height;
         }
       }
     }
@@ -38,6 +37,14 @@
     @media screen and (min-width: $rts-break-md) {
       padding-top: 0;
 
+      .rtsee-messenger-container {
+        .rts-messenger {
+          .rts-messenger-header-container {
+            top: 0;
+          }
+        }
+      }
+
       .rtsee-presentation-settings {
         top: 0;
         right: $video-container-width;
@@ -161,6 +168,10 @@
   @media screen and (min-width: $rts-break-md) {
     $rts-divider-style: 2px solid rgba(0, 0, 0, 0.9);
 
+    .rtsee-events-dashboard-container {
+      padding-bottom: $rts-bottom-nav-height + $rts-offset-md;
+    }
+
     .rtsee-nav-block {
       position: fixed;
       height: 100%;

package/dist/ngx/src/lib/theme/containers/variables.scss

@@ -10,7 +10,7 @@ $rts-sidenav-expanded-width: $video-container-width;
 
 
 
-$sidenav-bg-color: #fff;
+$sidenav-bg-color: #000;
 $default-border-color: #e8e8e8;
 $primary-blue: #5b7a9f;
 $sidenav-collapsed-width: $rts-header-height;

package/dist/ngx/src/lib/theme/events-manager/client-thumbnail.scss

@@ -1,15 +1,35 @@
 @import "../common-variables";
+@import "./variables";
 
-$live-indicator-d: 15px;
-$engage-button-border-thickness: 2px;
+$live-indicator-d: 13px;
+$engage-button-border-thickness: 1px;
 
 .rtsee-dashboard-client-thumbnail {
   position: relative;
+  background: linear-gradient(
+    135deg,
+    rgba(24, 24, 38, 0.85) 0%,
+    rgba(16, 16, 26, 0.95) 100%
+  );
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(16px);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.14);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+  }
 
   .rtsee-dashboard-client-header {
     position: relative;
-    padding-left: $rts-user-avatar-d-sm + $rts-offset-sm;
+    padding-left: $rts-user-avatar-d-sm + $rts-offset-md;
     height: $rts-user-avatar-d-sm;
+    display: flex;
+    align-items: center;
 
     .rtsee-dashboard-client-header-photo {
       position: absolute;
@@ -24,16 +44,23 @@ $engage-button-border-thickness: 2px;
         border-radius: 50%;
         overflow: hidden;
         background-size: cover;
+        background-position: center;
+        background-color: rgba(255, 255, 255, 0.05);
+        border: 2px solid rgba(255, 255, 255, 0.12);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
       }
 
       .rtsee-dashboard-client-live-indicator {
         position: absolute;
-        bottom: -1px;
-        right: -1px;
+        bottom: 0;
+        right: 0;
         width: $live-indicator-d;
         height: $live-indicator-d;
         border-radius: 50%;
-        background: $rts-live-color;
+        background: #2ecc71;
+        border: 2px solid #161622;
+        box-shadow: 0 0 10px #2ecc71;
+        animation: pulseGreen 2s infinite ease-in-out;
       }
     }
 
@@ -45,8 +72,10 @@ $engage-button-border-thickness: 2px;
       font-weight: 600;
       padding-right: $rts-user-avatar-d-sm + $rts-offset-sm;
       position: relative;
-      display: inline-block;
-      max-width: 100%;
+      width: 100%;
+      color: $rts-rates-text-primary;
+      display: flex;
+      align-items: center;
 
       .rtsee-dashboard-client-name-text {
         width: 100%;
@@ -54,27 +83,38 @@ $engage-button-border-thickness: 2px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: inline-block;
+        letter-spacing: -0.2px;
       }
 
       .rtsee-dashboard-client-engage {
         position: absolute;
-        width: $rts-user-avatar-d-sm;
-        height: $rts-user-avatar-d-sm;
+        width: 36px;
+        height: 36px;
         right: 0;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
         outline: none;
-        border: $engage-button-border-thickness solid $rts-font-color-light;
-        background-color: transparent;
+        border: $engage-button-border-thickness solid rgba(162, 155, 254, 0.3);
+        background: rgba(108, 92, 231, 0.15);
+        color: #a29bfe;
         cursor: pointer;
-        border-radius: $rts-default-border-radius;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
         &:hover {
-          opacity: 0.7;
+          background: rgba(108, 92, 231, 0.3);
+          border-color: rgba(162, 155, 254, 0.6);
+          color: #ffffff;
+          box-shadow: 0 0 12px rgba(108, 92, 231, 0.4);
+          transform: translateY(-50%) scale(1.05);
         }
 
         .rtsee-dashboard-client-engage-icon {
-          font-size: 23px;
-          line-height: $rts-user-avatar-d-sm - $engage-button-border-thickness * 2;
+          font-size: 18px;
+          line-height: 1;
         }
       }
     }
@@ -84,15 +124,58 @@ $engage-button-border-thickness: 2px;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
-    padding-top: $rts-offset-sm;
+    padding-top: $rts-offset-md;
+    padding-bottom: 6px;
+    margin-top: $rts-offset-sm;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+
+    /* Sleek custom scrollbar */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.25);
+      }
+    }
 
     .rtsee-dashboard-sessions-container {
       display: inline-block;
-      width: 320px;
-      margin-right: $rts-offset-sm;
+      width: 330px;
+      margin-right: $rts-offset-md;
       vertical-align: top;
+      white-space: normal;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
     }
   }
 
+  @media screen and (min-width: $rtsu-break-md) {
+    border-radius: 14px;
+  }
+}
 
+@keyframes pulseGreen {
+  0% {
+    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(46, 204, 113, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
+  }
 }

package/dist/ngx/src/lib/theme/events-manager/event-thumbnail.scss

@@ -1,47 +1,74 @@
 @import "../common-variables";
 
-
 .rtsee-events-dashboard-event-thumbnail {
+  width: 100%;
 
   .rtsee-events-dashboard-default-event-thumbnail {
     display: flex;
+    align-items: center;
     justify-content: space-between;
-    height: $rts-user-avatar-d-sm;
-    background-color: $rts-slightly-active-color;
-    padding: 0 $rts-offset-sm;
-    border-radius: $rts-default-border-radius;
+    min-height: 38px;
+    background: linear-gradient(
+      135deg,
+      rgba(28, 28, 42, 0.85) 0%,
+      rgba(18, 18, 30, 0.95) 100%
+    );
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 6px 12px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: rgba(162, 155, 254, 0.3);
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+      transform: translateY(-1px);
+    }
+
+    &.rtsee-events-dashboard-default-event-thumbnail-with-data {
+      border-left: 3px solid #6c5ce7;
+    }
 
     .rtsee-events-dashboard-default-event-thumbnail-name {
-      font-size: 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: $rts-rates-text-primary;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      line-height: $rts-user-avatar-d-sm;
+      flex: 1;
+      padding-right: 8px;
     }
 
-    .rtsee-events-dashboard-default-event-thumbnail-info  {
+    .rtsee-events-dashboard-default-event-thumbnail-info {
       display: flex;
-      justify-content: flex-end;
-
-      .rtsee-events-dashboard-default-event-thumbnail-time {
-        padding-left: $rts-offset-sm;
-        font-size: 12px;
-        font-weight: 300;
-        color: $rts-font-color-light;
-        line-height: $rts-user-avatar-d-sm;
-      }
-
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
 
       .rtsee-events-dashboard-default-event-thumbnail-details {
-        height: $rts-user-avatar-d-sm;
-        line-height: $rts-user-avatar-d-sm;
+        display: flex;
+        align-items: center;
+        color: #a29bfe;
+        cursor: pointer;
 
         .rtsee-events-dashboard-default-event-thumbnail-details-icon {
-          height: 100%;
-          font-size: 24px;
-          line-height: $rts-user-avatar-d-sm;
+          font-size: 16px;
+          line-height: 1;
+          transition: transform 0.15s ease;
+
+          &:hover {
+            transform: scale(1.15);
+          }
         }
       }
+
+      .rtsee-events-dashboard-default-event-thumbnail-time {
+        font-size: 11px;
+        font-weight: 400;
+        color: $rts-rates-text-muted;
+        white-space: nowrap;
+      }
     }
   }
 }