From e2d1bb5400ccdf1c1c5debc10471db1e486900f4 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 11 Apr 2026 23:30:38 +0200 Subject: [PATCH] feat(m3u): add inline search functionality for group filtering and enhance group management UI Entire-Checkpoint: 21b9b9f90f23 --- apps/web/src/assets/i18n/de.json | 1 + apps/web/src/assets/i18n/en.json | 1 + docs/architecture/m3u-playlist-module.md | 3 + .../groups-view/groups-view.component.html | 81 +++++++++++++--- .../groups-view/groups-view.component.scss | 93 +++++++++++++++++++ .../groups-view/groups-view.component.spec.ts | 41 +++++++- .../groups-view/groups-view.component.ts | 50 +++++++++- 7 files changed, 253 insertions(+), 17 deletions(-) diff --git a/apps/web/src/assets/i18n/de.json b/apps/web/src/assets/i18n/de.json index d17436f67..80c1e8dcc 100644 --- a/apps/web/src/assets/i18n/de.json +++ b/apps/web/src/assets/i18n/de.json @@ -9,6 +9,7 @@ "MANAGE_GROUPS_HINT": "Verwenden Sie \"Gruppen verwalten\", um Gruppen wieder einzublenden.", "NO_FAVORITES": "Keine Favoriten", "NO_VISIBLE_GROUPS": "Keine sichtbaren Gruppen", + "SEARCH_GROUPS": "Gruppen suchen", "REMOVE_FAVORITE": "Aus Favoritenliste entfernen", "SEARCH_CHANNEL": "Nach Sender suchen", "UNGROUPED": "Ohne Gruppe", diff --git a/apps/web/src/assets/i18n/en.json b/apps/web/src/assets/i18n/en.json index 922117448..673abfeb6 100644 --- a/apps/web/src/assets/i18n/en.json +++ b/apps/web/src/assets/i18n/en.json @@ -275,6 +275,7 @@ "MANAGE_GROUPS": "Manage groups", "MANAGE_GROUPS_HINT": "Use manage groups to show groups again.", "NO_VISIBLE_GROUPS": "No visible groups", + "SEARCH_GROUPS": "Search groups", "UNGROUPED": "Ungrouped", "UNNAMED_CHANNEL": "Unnamed Channel", "FAVORITES": "Favorites", diff --git a/docs/architecture/m3u-playlist-module.md b/docs/architecture/m3u-playlist-module.md index 08e2174d3..758330f85 100644 --- a/docs/architecture/m3u-playlist-module.md +++ b/docs/architecture/m3u-playlist-module.md @@ -190,6 +190,9 @@ channel-list-container/ - `GroupsViewComponent` owns the M3U-only "Manage groups" action and dialog in `libs/ui/components/src/lib/channel-list-container/groups-view/`. +- The groups rail header also owns an inline search toggle that filters the + currently visible groups without mutating the workspace-level route search + term used by the broader channel views. - The dialog operates on the full grouped dataset, while the left rail and channel pane render only groups whose titles are not listed in `hiddenGroupTitles`. diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html index ada4c952f..8f43d2177 100644 --- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html +++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html @@ -39,17 +39,68 @@

{{ 'CHANNELS.GROUPS' | translate }}

- +
+ + +
+ + @if (isGroupSearchOpen()) { + + }
@@ -87,7 +138,7 @@ } @else {
{{ - (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 }) => ({