From 472ac6618562ad30696bf41fa5d1089be922b705 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Fri, 1 May 2026 23:26:15 +0200
Subject: [PATCH] fix(portal): align channel-list no-results placeholders with
 L4 pattern

The Xtream and Stalker portal channel-list panels both rendered their
"No channels found" empty state with a 64x64 gradient-tile wrapper
around a 32px icon, which was a one-off treatment that didn't match
the inline empty-state pattern used everywhere else at the same level
(EPG list, groups view, all-channels view): a bare 48px Material icon
at 0.5 opacity, 1.05rem title, 0.85rem 0.65-opacity hint.

Drop the .empty-icon-wrapper tile, switch to the canonical sizes, and
reuse the empty-state-icon / empty-state-title / empty-state-hint
class names so the visual is consistent across all panel-level empty
states.

Also replace the hardcoded EN string in the Stalker variant ("We
couldn't find anything matching ...") with the existing
CHANNELS.TRY_DIFFERENT_SEARCH i18n key, matching the Xtream branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: e3e3d80db476
---
 ...er-collection-channels-list.component.html | 12 +++---
 ...er-collection-channels-list.component.scss | 43 +++++++------------
 .../portal-channels-list.component.html       | 10 ++---
 .../portal-channels-list.component.scss       | 43 +++++++------------
 4 files changed, 44 insertions(+), 64 deletions(-)

diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html
index ef7b4e07f..4fd89ca7d 100644
--- a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html
@@ -32,11 +32,13 @@
         }
     } @else {
         <div class="empty-search-state">
-            <div class="empty-icon-wrapper">
-                <mat-icon>search_off</mat-icon>
-            </div>
-            <h3>{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}</h3>
-            <p>We couldn't find anything matching "{{ searchString() }}"</p>
+            <mat-icon class="empty-state-icon">search_off</mat-icon>
+            <h3 class="empty-state-title">
+                {{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
+            </h3>
+            <p class="empty-state-hint">
+                {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
+            </p>
         </div>
     }
 </div>
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
index 438a3a179..150929661 100644
--- a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
@@ -72,50 +72,39 @@
 }
 
 .empty-search-state {
+    flex: 1;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
-    padding: 32px 24px;
+    padding: 40px 24px;
     text-align: center;
+    color: var(--app-muted-color);
 
-    .empty-icon-wrapper {
-        width: 64px;
-        height: 64px;
-        border-radius: 20px;
-        background:
-            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
-            rgba(127, 127, 127, 0.1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 20px;
-        box-shadow:
-            0 8px 24px -8px rgba(0, 0, 0, 0.1),
-            inset 0 1px 1px rgba(255, 255, 255, 0.05);
-
-        mat-icon {
-            width: 32px;
-            height: 32px;
-            font-size: 32px;
-            opacity: 0.8;
-        }
+    .empty-state-icon {
+        width: 48px;
+        height: 48px;
+        font-size: 48px;
+        opacity: 0.5;
+        margin-bottom: 16px;
     }
 
-    h3 {
+    .empty-state-title {
         font-size: 1.05rem;
         font-weight: 520;
-        margin: 0 0 8px;
         letter-spacing: -0.01em;
+        margin: 0 0 8px;
+        text-wrap: balance;
     }
 
-    p {
+    .empty-state-hint {
         font-size: 0.85rem;
         margin: 0;
         opacity: 0.65;
         line-height: 1.4;
-        max-width: 260px;
+        max-width: 240px;
+        text-wrap: pretty;
     }
 }
 
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html
index 1eeaa248d..3b1e0dc9a 100644
--- a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html
@@ -46,12 +46,12 @@
         </cdk-virtual-scroll-viewport>
     } @else {
         <div class="empty-search-state">
-            <div class="empty-icon-wrapper">
-                <mat-icon>search_off</mat-icon>
-            </div>
-            <h3>{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}</h3>
+            <mat-icon class="empty-state-icon">search_off</mat-icon>
+            <h3 class="empty-state-title">
+                {{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
+            </h3>
             @if (searchTermInput()) {
-                <p>
+                <p class="empty-state-hint">
                     {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
                 </p>
             }
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
index 46aa52af1..3e0183e83 100644
--- a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
@@ -94,51 +94,40 @@
 }
 
 .empty-search-state {
+    flex: 1;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
-    padding: 32px 24px;
+    padding: 40px 24px;
     text-align: center;
+    color: var(--app-muted-color);
     animation: fade-in 0.3s ease-out;
 
-    .empty-icon-wrapper {
-        width: 64px;
-        height: 64px;
-        border-radius: 20px;
-        background:
-            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
-            rgba(127, 127, 127, 0.1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 20px;
-        box-shadow:
-            0 8px 24px -8px rgba(0, 0, 0, 0.1),
-            inset 0 1px 1px rgba(255, 255, 255, 0.05);
-
-        mat-icon {
-            width: 32px;
-            height: 32px;
-            font-size: 32px;
-            opacity: 0.8;
-        }
+    .empty-state-icon {
+        width: 48px;
+        height: 48px;
+        font-size: 48px;
+        opacity: 0.5;
+        margin-bottom: 16px;
     }
 
-    h3 {
+    .empty-state-title {
         font-size: 1.05rem;
         font-weight: 520;
-        margin: 0 0 8px;
         letter-spacing: -0.01em;
+        margin: 0 0 8px;
+        text-wrap: balance;
     }
 
-    p {
+    .empty-state-hint {
         font-size: 0.85rem;
         margin: 0;
         opacity: 0.65;
         line-height: 1.4;
-        max-width: 260px;
+        max-width: 240px;
+        text-wrap: pretty;
     }
 }