x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-11 11:06:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): unify the three side-by-side empty states in m3u groups view

Browse Source 
Three placeholders were rendering at once when a search filter cleared
both the groups rail and the channel list, and they each used a
different visual treatment:

1. Groups rail (.groups-nav-empty) was bare 0.82rem muted text with no
   icon and no hint, and routed through CHANNELS.NO_SEARCH_RESULTS
   ("No channels found") which is wrong copy for the *groups* column.
2. Channel list (.groups-content-empty-state) was the canonical L4
   icon + title + hint pattern (correct).
3. Player area (<app-portal-empty-state>) was a 72px icon at 0.2
   opacity, which read as ghosted on dark theme.

Bring the groups rail into the L4 family scaled down for the narrow
column: 28px search_off / folder_off icon at 0.5 opacity, 0.85rem
title, 0.78rem hint at 0.65 opacity, centered. Add a CHANNELS.NO_GROUPS_FOUND
i18n key so the copy reflects the column ("No groups found").

Bump portal-empty-state's icon opacity from 0.2 -> 0.35 and title
opacity from 0.5 -> 0.6 so the player-area placeholder feels present
rather than abandoned.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: 6719280e397b
This commit is contained in:
4grayandClaude Opus 4.7 committed 2026-05-01 23:43:36 +02:00
1 parent 42bbbe71d8
commit 94a0756424
4 files changed
+51 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/assets/i18n/en.json
+1
View File
@@ -377,6 +377,7 @@
"LOADING_MORE": "Loading more...",
"NO_SEARCH_RESULTS": "No channels found",
"NO_CHANNELS_FOUND": "No channels found",
"NO_GROUPS_FOUND": "No groups found",
"TRY_DIFFERENT_SEARCH": "Try a different search term",
"DETAILS_DIALOG": {
"TITLE": "Channel details",
libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss
+2 -2
View File
@@ -21,7 +21,7 @@
width: 72px;
height: 72px;
margin-bottom: 24px;
opacity: 0.2;
opacity: 0.35;
animation: portal-empty-state-float 2.8s ease-in-out infinite;
}
@@ -30,7 +30,7 @@
font-weight: 520;
letter-spacing: -0.01em;
margin: 0;
opacity: 0.5;
opacity: 0.6;
}
@keyframes portal-empty-state-fade-in {
libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
+20 -6
View File
@@ -137,12 +137,26 @@
}
} @else {
<div class="groups-nav-empty">
{{
(hasSearchQuery()
? 'CHANNELS.NO_SEARCH_RESULTS'
: 'CHANNELS.NO_VISIBLE_GROUPS'
) | translate
}}
<mat-icon class="groups-nav-empty__icon">
{{
hasSearchQuery() ? 'search_off' : 'folder_off'
}}
</mat-icon>
<div class="groups-nav-empty__title">
{{
(hasSearchQuery()
? 'CHANNELS.NO_GROUPS_FOUND'
: 'CHANNELS.NO_VISIBLE_GROUPS'
) | translate
}}
</div>
@if (hasSearchQuery()) {
<div class="groups-nav-empty__hint">
{{
'CHANNELS.TRY_DIFFERENT_SEARCH' | translate
}}
</div>
}
</div>
}
</div>
libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
+28 -3
View File
@@ -183,10 +183,35 @@
}
.groups-nav-empty {
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 12px;
color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
font-size: 0.82rem;
line-height: 1.4;
&__icon {
width: 28px;
height: 28px;
font-size: 28px;
opacity: 0.5;
margin-bottom: 10px;
}
&__title {
font-size: 0.85rem;
font-weight: 520;
letter-spacing: -0.01em;
margin-bottom: 4px;
text-wrap: balance;
}
&__hint {
font-size: 0.78rem;
line-height: 1.4;
opacity: 0.65;
text-wrap: pretty;
}
}
.group-nav-item {