@rtsee/ngx 0.0.102 → 0.0.104

package/dist/ngx/src/lib/theme/messenger/messenger-header.scss

@@ -1,198 +1,285 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Header Component
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-.rtsee-messenger-header {
+.rts-messenger-header {
   position: relative;
   height: $rts-messenger-header-height;
   padding-left: $rts-messenger-header-height;
   padding-right: $rts-messenger-header-height;
-  overflow: hidden;
-  background-color: $rts-main-bg-color-light;
-  border-bottom: 1px solid $rts-new-secondary-bg-color-light;
+  background-color: var(--rts-bg-primary);
+  border-bottom: 1px solid var(--rts-border-dim);
+  backdrop-filter: $rtsu-glass-blur;
 
   -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 
-  &.rtsee-chat-header-unread {
-    padding-left: $rts-offset-lg + $rts-offset-md;
+  // ── Back button with unread count ──
+  &.rts-chat-header-unread {
+    padding-left: $rtsu-space-lg + $rtsu-space-md;
   }
 
-  &.rtsee-messenger-header-expanded {
+  &:not(.rts-messenger-header-expanded) {
+    .rts-messenger-profile {
+      display: none;
+    }
+  }
+
+  // ── Expanded Mode (profile / chat details) ──
+  &.rts-messenger-header-expanded {
     padding: 0;
     height: auto;
-    background-color: $ai-background-color;
-    margin-bottom: $rts-bottom-nav-height + $rts-offset-md;
+    background-color: var(--rts-bg-primary);
+    margin-bottom: $rtsu-bottom-nav-height + $rtsu-space-md;
 
-    .rtsee-messenger-header-center {
-      .rtsee-messenger-header-opened-chat-info {
-        padding: 0 $rts-offset-sm;
+    .rts-messenger-header-center {
+      .rts-messenger-header-opened-chat-info {
+        padding: 0 $rtsu-space-sm;
         height: auto;
       }
 
-      .rtsee-messenger-header-title {
+      .rts-messenger-header-title {
         display: none;
       }
     }
 
-    .rtsee-messenger-header-collapse-button {
+    .rts-messenger-header-collapse-button {
       display: block;
     }
   }
 
-  &.rtsee-messenger-header-my-profile-mode {
-    background-color: $ai-background-color;
-    border-bottom-color: rgba(255, 255, 255, 0.05);
+  // ── My Profile Mode ──
+  &.rts-messenger-header-my-profile-mode {
+    background-color: var(--rts-bg-primary);
+    border-bottom-color: var(--rts-border-dim);
 
-    .rtsee-messenger-header-center {
-      .rtsee-messenger-header-opened-chat-info {
-        .rtsee-messenger-profile-controls {
+    .rts-messenger-header-center {
+      .rts-messenger-header-opened-chat-info {
+        .rts-messenger-profile-controls {
           display: none;
         }
       }
     }
 
-    .rtsee-messenger-header-left {
+    .rts-messenger-header-left {
       width: 100%;
       height: auto;
       position: static;
 
-      .rtsee-messenger-header-avatar {
+      .rts-messenger-header-avatar {
         padding: 0;
 
-        .rtsee-messenger-header-avatar-image {
+        .rts-messenger-header-avatar-image {
           border-radius: 0;
         }
       }
     }
 
-    .rtsee-messenger-header-right {
+    .rts-messenger-header-right {
       display: none;
     }
   }
 
-  &.rtsee-messenger-header-chat-info-mode {
-    .rtsee-messenger-header-right {
+  // ── Create Chat Mode ──
+  &.rts-messenger-header-create-chat-mode {
+    .rts-messenger-header-left {
+      display: none;
+    }
+
+    .rts-messenger-header-right {
+      display: none;
+    }
+
+    .rts-messenger-header-center {
+      height: 100%;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+
+      .rts-messenger-header-create-chat-container {
+        padding: 0;
+      }
+    }
+  }
+
+  // ── Chat Info Mode ──
+  &.rts-messenger-header-chat-info-mode {
+    .rts-messenger-header-right {
       width: 100%;
       height: auto;
       position: static;
+      display: flex;
+      justify-content: center;
+      padding: $rtsu-space-lg $rtsu-space-md;
 
-      .rtsee-messenger-header-avatar {
+      .rts-messenger-header-avatar {
         padding: 0;
+        width: 120px;
+        height: 120px;
+        flex-shrink: 0;
 
-        .rtsee-messenger-header-avatar-image {
-          border-radius: 0;
+        .rts-messenger-header-avatar-image {
+          border-radius: 50%;
+          border: 2px solid var(--rts-border-med);
         }
       }
     }
 
-    .rtsee-messenger-header-left {
+    .rts-messenger-header-left {
       display: none;
     }
+
+    .rts-messenger-header-chat-title {
+      text-align: center;
+    }
   }
 
-  &.rtsee-messenger-header-chat-opened {
-    &.rtsee-messenger-header-expanded {
-      //height: 100%;
-      //padding: 0;
+  // ── Chat Image Expanded (full-width square on second click) ──
+  &.rts-messenger-header-chat-image-expanded {
+    .rts-messenger-header-right {
+      padding: 0;
+      display: block;
+
+      .rts-messenger-header-avatar {
+        width: 100%;
+        height: auto;
 
-      .rtsee-messenger-header-opened-chat-info {
+        .rts-messenger-header-avatar-image {
+          border-radius: 0;
+          border: none;
+        }
+      }
+    }
+  }
+
+  // ── Chat Opened ──
+  &.rts-messenger-header-chat-opened {
+    &.rts-messenger-header-expanded {
+      .rts-messenger-header-opened-chat-info {
         padding: 0;
       }
 
-      .rtsee-messenger-header-title {
+      .rts-messenger-header-title {
         display: none;
       }
     }
 
-    .rtsee-messenger-header-chat-title {
+    .rts-messenger-header-chat-title {
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      font-size: 16px;
-      font-weight: 600;
+      font-size: $rtsu-font-size-md;
+      font-weight: $rtsu-font-weight-semibold;
       margin: 0;
+      color: var(--rts-text-primary);
     }
   }
 
-  .rtsee-messenger-header-avatar {
-    padding: $rts-offset-sm;
-    overflow: hidden;
+  // ── Avatar ──
+  .rts-messenger-header-avatar {
+    padding: $rtsu-space-sm;
     cursor: pointer;
 
-    .rtsee-messenger-header-avatar-image {
+    .rts-messenger-header-avatar-image {
       width: 100%;
-      background-size: contain;
+      background-size: cover;
+      background-position: center;
       padding-top: 100%;
       border-radius: 50%;
-      transition: border-radius 0.2s;
+      transition: border-radius $rtsu-transition-fast;
 
       &:hover {
-        outline: 3px solid rgba(0, 0, 0, 0.1);
+        outline: 3px solid rgba(108, 92, 231, 0.3);
       }
     }
   }
 
-  .rtsee-messenger-header-collapse-button {
+  // ── Collapse Button ──
+  .rts-messenger-header-collapse-button {
     display: none;
     position: fixed;
-    left: $rts-offset-sm;
-    top: $rts-offset-sm;
+    left: $rtsu-space-sm;
+    top: $rtsu-space-sm;
     color: #fff;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.35);
+    backdrop-filter: $rtsu-glass-blur;
+    border: 1px solid var(--rts-border-dim);
     border-radius: 50%;
     cursor: pointer;
-    height: 51px;
-    width: 51px;
-    line-height: 51px;
+    height: 44px;
+    width: 44px;
+    line-height: 44px;
     text-align: center;
+    transition: background-color $rtsu-transition-fast,
+                transform $rtsu-transition-fast;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
   }
 
-  .rtsee-messenger-header-left {
+  // ── Left / Right Panels ──
+  .rts-messenger-header-left {
     position: absolute;
     top: 0;
     left: 0;
     width: $rts-messenger-header-height;
     height: $rts-messenger-header-height;
-    transition: width 0.2s, height 0.2s, border-radius 0.2s;
+    transition: width $rtsu-transition-fast,
+                height $rtsu-transition-fast;
   }
 
-  .rtsee-messenger-header-right {
+  .rts-messenger-header-right {
     position: absolute;
-    float: right; // needed for seamless animation
+    float: right;
     top: 0;
     right: 0;
     width: $rts-messenger-header-height;
     height: $rts-messenger-header-height;
-    transition: width 0.2s, height 0.2s, border-radius 0.2s;
+    transition: width $rtsu-transition-fast,
+                height $rtsu-transition-fast;
   }
 
-  .rtsee-messenger-header-center {
+  // ── Center Content ──
+  .rts-messenger-header-center {
     clear: both;
 
-    .rtsee-messenger-header-title {
+    .rts-messenger-header-title {
       margin: 0;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       line-height: $rts-messenger-header-height;
-      font-weight: 600;
+      font-weight: $rtsu-font-weight-semibold;
+      font-size: $rtsu-font-size-md;
+      color: var(--rts-text-primary);
     }
 
-    .rtsee-messenger-header-opened-chat-info {
+    .rts-messenger-header-opened-chat-info {
       position: relative;
       padding: 0;
       height: $rts-messenger-header-height;
-      line-height: $rts-messenger-header-height;
       overflow: hidden;
-      transition: height, padding-left 0.2s;
+      transition: height $rtsu-transition-fast,
+                  padding-left $rtsu-transition-fast;
+
+      .rts-messenger-profile-header-placeholder {
+        line-height: $rts-messenger-header-height;
+      }
+
+      .rts-messenger-profile-data-container {
+        line-height: normal;
+      }
     }
   }
 
-  .rtsee-messenger-close-chat {
+  // ── Close Chat Button ──
+  .rts-messenger-close-chat {
     position: absolute;
     left: 0;
     top: 0;
@@ -202,11 +289,12 @@
     border: none;
     background: transparent;
     outline: none;
-    font-size: 12px;
+    font-size: $rtsu-font-size-sm;
     display: flex;
     align-items: center;
-    color: $rts-new-primary-color;
+    color: var(--rts-accent-light, #a29bfe);
     cursor: pointer;
+    transition: opacity $rtsu-transition-fast;
 
     &:hover {
       opacity: 0.7;
@@ -215,23 +303,115 @@
     .unread-count {
       height: 21px;
       width: 21px;
-      background: $rts-new-primary-color;
+      background: var(--rts-accent-blue, #3b82f7);
       margin-left: 2px;
       border-radius: 50%;
       color: #ffffff;
       text-align: center;
       line-height: 21px;
+      font-size: $rtsu-font-size-2xs;
     }
   }
 
-  .rtsee-messenger-my-peer-data-container {
+  .rts-messenger-my-peer-data-container {
     opacity: 0;
     position: relative;
-    transition: opacity 0.2s;
+    transition: opacity $rtsu-transition-fast;
+  }
+
+  // ── Header Actions (add button + dropdown) ──
+  .rts-messenger-header-actions {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .rts-messenger-header-add-button {
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: linear-gradient(135deg, $rtsu-accent-purple 0%, $rtsu-accent-purple-light 100%);
+    color: #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform $rtsu-transition-fast;
+    box-shadow: $rtsu-shadow-accent-sm;
+
+    &:hover {
+      transform: scale(1.08);
+      box-shadow: $rtsu-shadow-accent-md;
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    .material-icons-outlined {
+      font-size: 20px;
+    }
+  }
+
+  // ── Dropdown ──
+  .rts-messenger-header-dropdown-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+  }
+
+  .rts-messenger-header-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 180px;
+    background: linear-gradient(
+      135deg,
+      var(--rts-card-bg-start) 0%,
+      var(--rts-card-bg-end) 100%
+    );
+    border: 1px solid var(--rts-border-med);
+    border-radius: $rtsu-radius-md;
+    backdrop-filter: $rtsu-glass-blur;
+    box-shadow: $rtsu-shadow-lg;
+    z-index: 100;
+    overflow: hidden;
+    animation: rts-slide-down 0.15s ease-out;
+  }
+
+  .rts-messenger-header-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: $rtsu-space-sm;
+    width: 100%;
+    padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: $rtsu-font-size-base;
+    font-family: $rtsu-font-family;
+    color: var(--rts-text-primary);
+    transition: background-color $rtsu-transition-fast;
+
+    &:hover {
+      background-color: var(--rts-bg-surface-hover);
+    }
+  }
+
+  .rts-messenger-header-dropdown-icon {
+    font-size: $rtsu-font-size-lg;
+    color: var(--rts-accent-highlight, #bf8bff);
   }
 
-  @media screen and (min-width: $rts-break-md) {
-    .rtsee-messenger-header-collapse-button {
+  // ── Tablet+ ──
+  @media screen and (min-width: $rtsu-break-md) {
+    .rts-messenger-header-collapse-button {
       position: absolute;
     }
   }

package/dist/ngx/src/lib/theme/messenger/messenger-search.scss

@@ -1,16 +1,31 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Search
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-$search-input-bg-color: #F8F8F8;
+.rts-messenger-search {
+  padding: $rtsu-space-xs $rtsu-space-sm;
 
-.rtsee-messenger-search {
-  .rtsee-messenger-search-input {
-    width: calc(100% - #{$rts-new-offset-sm * 2});
-    border: none;
-    font-size: 18px;
-    background: $search-input-bg-color;
-    padding: $rts-new-offset-sm;
-    margin: 0 $rts-new-offset-sm;
-    border-radius: $rts-new-border-radius-rounded;
+  .rts-messenger-search-input {
+    width: 100%;
+    border: 1px solid var(--rts-border-med);
+    font-size: $rtsu-font-size-md;
+    font-family: $rtsu-font-family;
+    background: var(--rts-bg-surface);
+    color: var(--rts-text-primary);
+    padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+    border-radius: $rtsu-radius-md;
+    outline: none;
+    transition: border-color $rtsu-transition-fast,
+                box-shadow $rtsu-transition-fast;
+
+    &::placeholder {
+      color: var(--rts-text-muted);
+    }
+
+    &:focus {
+      border-color: var(--rts-accent, #6c5ce7);
+      box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
+    }
   }
 }

package/dist/ngx/src/lib/theme/messenger/messenger.scss

@@ -1,87 +1,103 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Root Container
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
-
-$control-icon-size: 18px;
 
 * {
   box-sizing: border-box;
 }
 
-.rtsee-messenger {
+.rts-messenger {
   height: 100%;
   width: 100%;
   padding-top: $rts-messenger-header-height;
-  color: $rts-font-color-dark;
+  color: var(--rts-text-primary);
   position: relative;
-  background-color: $rts-main-bg-color-light;
+  background: var(--rts-bg-gradient);
+  background-color: var(--rts-bg-primary);
+  font-family: $rtsu-font-family;
 
-  .rtsee-manage-profile, .rtsee-payment-page-container {
+  // ── Overlay Panels (profile mgmt, payments) ──
+  .rts-manage-profile,
+  .rts-payment-page-container {
     position: fixed;
     inset: 0;
-    bottom: $rts-bottom-nav-height;
+    bottom: $rtsu-bottom-nav-height;
     overflow: auto;
     z-index: 10;
-    background-color: #ffffff;
+    background-color: var(--rts-bg-primary);
 
-    .rtsee-manage-profile-buttons {
+    .rts-manage-profile-buttons {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
     }
   }
 
-  &.rtsee-messenger-overlay-window {
-    .rtsee-messenger-header-container {
+  // ── Overlay Window (hides main body) ──
+  &.rts-messenger-overlay-window {
+    .rts-messenger-header-container {
       display: none;
     }
-    .rtsee-messenger-body-container {
+    .rts-messenger-body-container {
       display: none;
     }
   }
 
-  &.rtsee-messenger-header-expanded {
+  // ── Header Expanded (profile / chat details open) ──
+  &.rts-messenger-header-expanded {
     padding-top: 0;
-    background-color: $ai-background-color;
+    background: var(--rts-bg-primary);
 
-    .rtsee-messenger-header-container {
+    .rts-messenger-header-container {
       position: static;
       height: auto;
       padding: 0;
     }
 
-    .rtsee-messenger-body-container {
+    .rts-messenger-body-container {
       display: none;
     }
   }
 
-  .rtsee-messenger-header-container {
-    background-color: $ai-background-color;
-    position: absolute;
+  // ── Header Bar ──
+  .rts-messenger-header-container {
+    background-color: var(--rts-bg-primary);
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: $rts-messenger-header-height;
-    z-index: 1;
+    z-index: 5;
+    border-bottom: 1px solid var(--rts-border-dim);
+    backdrop-filter: $rtsu-glass-blur;
   }
 
-  .rtsee-messenger-body-container {
+  // ── Main Body ──
+  .rts-messenger-body-container {
     height: 100%;
     position: relative;
   }
 
-  @media screen and (min-width: $rts-break-md) {
+  // ── Tablet+ Overrides ──
+  @media screen and (min-width: $rtsu-break-md) {
     overflow: hidden;
 
-    &.rtsee-messenger-header-expanded {
+    .rts-messenger-header-container {
+      position: absolute;
+    }
+
+    &.rts-messenger-header-expanded {
       overflow: auto;
     }
 
-    .rtsee-manage-profile, .rtsee-payment-page-container {
+    .rts-manage-profile,
+    .rts-payment-page-container {
       position: absolute;
       bottom: 0;
     }
 
-    .rtsee-messenger-body-container {
+    .rts-messenger-body-container {
       overflow: auto;
       overscroll-behavior-y: contain;
     }