{{
- (searchTerm()
+ (hasSearchQuery()
? 'CHANNELS.NO_SEARCH_RESULTS'
: 'CHANNELS.NO_VISIBLE_GROUPS'
) | translate
@@ -201,11 +252,13 @@
- {{ searchTerm() ? 'search_off' : 'visibility_off' }}
+ {{
+ hasSearchQuery() ? 'search_off' : 'visibility_off'
+ }}
{{
- (searchTerm()
+ (hasSearchQuery()
? 'CHANNELS.NO_SEARCH_RESULTS'
: 'CHANNELS.NO_VISIBLE_GROUPS'
) | translate
@@ -213,7 +266,7 @@
{{
- (searchTerm()
+ (hasSearchQuery()
? 'CHANNELS.TRY_DIFFERENT_SEARCH'
: 'CHANNELS.MANAGE_GROUPS_HINT'
) | translate
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
index e75154c7f..4c4623c15 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
@@ -44,6 +44,9 @@
.groups-nav-header {
padding: 4px 6px 12px;
flex-shrink: 0;
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
}
.groups-nav-header__content {
@@ -61,6 +64,96 @@
color: var(--mat-sys-on-surface);
}
+.groups-nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.groups-nav-action,
+.groups-nav-search {
+ @include mat.form-field-density(-5);
+}
+
+.groups-nav-action {
+ width: 28px;
+ height: 28px;
+ min-width: 28px;
+ padding: 0;
+ line-height: 28px;
+
+ mat-icon {
+ width: 18px;
+ height: 18px;
+ font-size: 18px;
+ }
+}
+
+.groups-nav-search {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 10px;
+ min-height: 36px;
+ border-radius: 10px;
+ border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+ background: var(--app-search-bg, var(--mat-sys-surface-container));
+ cursor: text;
+ transition:
+ border-color 0.15s ease,
+ box-shadow 0.15s ease;
+
+ &:focus-within {
+ border-color: var(--mat-sys-primary);
+ box-shadow: 0 0 0 3px
+ color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+ }
+}
+
+.groups-nav-search__icon {
+ width: 18px;
+ height: 18px;
+ font-size: 18px;
+ color: var(--mat-sys-on-surface-variant);
+ flex-shrink: 0;
+}
+
+.groups-nav-search input {
+ flex: 1;
+ min-width: 0;
+ width: 100%;
+ border: none;
+ outline: none;
+ background: transparent;
+ color: var(--mat-sys-on-surface);
+ font: inherit;
+ font-size: 0.84rem;
+
+ &::placeholder {
+ color: var(--mat-sys-on-surface-variant);
+ opacity: 0.6;
+ }
+
+ &::-webkit-search-cancel-button {
+ display: none;
+ }
+}
+
+.groups-nav-search__close {
+ width: 24px;
+ height: 24px;
+ min-width: 24px;
+ line-height: 24px;
+ flex-shrink: 0;
+ padding: 0;
+
+ mat-icon {
+ width: 16px;
+ height: 16px;
+ font-size: 16px;
+ }
+}
+
.groups-content-header {
@include panel.standard-panel-header();
border-top-left-radius: inherit;
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts
index a327daa9b..a6fd7e050 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts
@@ -402,6 +402,43 @@ describe('GroupsViewComponent', () => {
]);
});
+ it('toggles the inline group search from the header action and filters the visible groups', () => {
+ const searchButton = fixture.nativeElement.querySelector(
+ '.groups-nav-action--search'
+ ) as HTMLButtonElement;
+
+ searchButton.click();
+ fixture.detectChanges();
+
+ const searchInput = fixture.nativeElement.querySelector(
+ '.groups-nav-search input'
+ ) as HTMLInputElement | null;
+
+ expect(searchInput).not.toBeNull();
+
+ searchInput!.value = 'spo';
+ searchInput!.dispatchEvent(new Event('input'));
+ fixture.detectChanges();
+
+ expect(component.filteredGroups().map((group) => group.key)).toEqual([
+ 'Sports',
+ ]);
+ expect(component.selectedGroupKey()).toBe('Sports');
+
+ searchButton.click();
+ fixture.detectChanges();
+
+ expect(
+ fixture.nativeElement.querySelector('.groups-nav-search input')
+ ).toBeNull();
+ expect(component.filteredGroups().map((group) => group.key)).toEqual([
+ 'Movies',
+ 'News',
+ 'Series',
+ 'Sports',
+ ]);
+ });
+
it('emits channel and favorite events from the selected group pane', () => {
const channelSelected = jest.fn();
const favoriteToggled = jest.fn();
@@ -497,7 +534,7 @@ describe('GroupsViewComponent', () => {
'.groups-content-empty-state'
) as HTMLElement | null;
const manageButton = fixture.nativeElement.querySelector(
- '.groups-nav-header button'
+ '.groups-nav-action--manage'
) as HTMLButtonElement | null;
expect(layout).not.toBeNull();
@@ -531,7 +568,7 @@ describe('GroupsViewComponent', () => {
'.groups-content-empty-state'
) as HTMLElement | null;
const manageButton = fixture.nativeElement.querySelector(
- '.groups-nav-header button'
+ '.groups-nav-action--manage'
) as HTMLButtonElement | null;
expect(layout).not.toBeNull();
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts
index 28cb81cdd..571ef496d 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts
@@ -74,6 +74,8 @@ export class GroupsViewComponent {
readonly contextMenuTrigger =
viewChild.required
('contextMenuTrigger');
+ readonly groupSearchInput =
+ viewChild>('groupSearchInput');
/** Grouped channels object */
readonly groupedChannels = input.required<{ [key: string]: Channel[] }>();
@@ -114,6 +116,8 @@ export class GroupsViewComponent {
readonly sidebarWidthRequestEnded = output();
readonly hiddenGroupTitlesChanged = output();
+ readonly isGroupSearchOpen = signal(false);
+ readonly localGroupSearchTerm = signal('');
readonly selectedGroupKey = signal(null);
readonly groupChannelSortMode = signal(
restorePortalChannelSortMode(GROUP_CHANNEL_SORT_STORAGE_KEY)
@@ -121,6 +125,11 @@ export class GroupsViewComponent {
readonly groupChannelSortLabel = computed(() =>
getPortalChannelSortModeLabel(this.groupChannelSortMode())
);
+ readonly hasSearchQuery = computed(
+ () =>
+ this.searchTerm().trim().length > 0 ||
+ this.localGroupSearchTerm().trim().length > 0
+ );
readonly itemSize = computed(() => (this.shouldShowEpg() ? 68 : 48));
readonly contextMenuChannel = signal(null);
readonly contextMenuPosition = signal({
@@ -212,6 +221,16 @@ export class GroupsViewComponent {
});
});
});
+
+ effect(() => {
+ if (!this.isGroupSearchOpen()) {
+ return;
+ }
+
+ queueMicrotask(() => {
+ this.groupSearchInput()?.nativeElement.focus();
+ });
+ });
}
readonly allGroups = computed(() => {
@@ -234,7 +253,7 @@ export class GroupsViewComponent {
);
});
- readonly filteredGroups = computed(() => {
+ readonly workspaceFilteredGroups = computed(() => {
const term = this.searchTerm().trim().toLowerCase();
const groups = this.visibleGroups();
@@ -270,6 +289,17 @@ export class GroupsViewComponent {
}, []);
});
+ readonly filteredGroups = computed(() => {
+ const term = this.localGroupSearchTerm().trim().toLowerCase();
+ const groups = this.workspaceFilteredGroups();
+
+ if (!term) {
+ return groups;
+ }
+
+ return groups.filter((group) => group.key.toLowerCase().includes(term));
+ });
+
readonly hasAnyGroups = computed(() => this.allGroups().length > 0);
readonly selectedGroup = computed(() => {
@@ -326,6 +356,24 @@ export class GroupsViewComponent {
this.selectedGroupKey.set(groupKey);
}
+ closeGroupSearch(): void {
+ this.localGroupSearchTerm.set('');
+ this.isGroupSearchOpen.set(false);
+ }
+
+ toggleGroupSearch(): void {
+ if (this.isGroupSearchOpen()) {
+ this.closeGroupSearch();
+ return;
+ }
+
+ this.isGroupSearchOpen.set(true);
+ }
+
+ updateGroupSearchTerm(value: string): void {
+ this.localGroupSearchTerm.set(value);
+ }
+
openGroupManagement(): void {
const groups = this.allGroups().map(
({ key, count }) => ({