fix: group sorting logic

src/app/player/components/channel-list-container/channel-list-container.component.html

@@ -57,7 +57,7 @@
             </ng-template>
             <mat-nav-list id="groups-list">
                 <mat-accordion multi>
-                    @for (groups of groupedChannels | keyvalue; track $index) {
+                    @for (groups of groupedChannels | keyvalue: groupsComparator; track $index) {
                         @if (groups.value.length > 0) {
                             <mat-expansion-panel>
                                 <mat-expansion-panel-header>

src/app/player/components/channel-list-container/channel-list-container.component.ts

@@ -4,7 +4,7 @@ import {
     moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CommonModule, TitleCasePipe } from '@angular/common';
+import { CommonModule, TitleCasePipe, KeyValue } from '@angular/common';
 import {
     Component,
     ElementRef,
@@ -171,4 +171,15 @@ export class ChannelListContainerComponent {
     ngOnDestroy() {
         this.store.dispatch(PlaylistActions.setChannels({ channels: [] }));
     }
+
+    groupsComparator = (a: KeyValue<string, any[]>, b: KeyValue<string, any[]>): number => {
+        const numA = parseInt(a.key.replace(/\D/g, ''));
+        const numB = parseInt(b.key.replace(/\D/g, ''));
+
+        if (!isNaN(numA) && !isNaN(numB)) {
+            return numA - numB;
+        }
+
+        return a.key.localeCompare(b.key);
+    }
 }