style: update sidebar and channels view

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

@@ -8,15 +8,17 @@
                 </div>
             </ng-template>
             <div class="search-panel">
-                <input
-                    class="full-width search-bar"
-                    type="search"
-                    #search
-                    [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
-                    [(ngModel)]="searchTerm.name"
-                />
+                <mat-form-field class="search-bar">
+                    <input
+                        matInput
+                        class="full-width"
+                        type="search"
+                        #search
+                        [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
+                        [(ngModel)]="searchTerm.name"
+                    />
+                </mat-form-field>
             </div>
-            <mat-divider></mat-divider>
             <mat-nav-list style="overflow: hidden">
                 <cdk-virtual-scroll-viewport
                     itemSize="50"
@@ -39,7 +41,7 @@
                         [logo]="channel?.tvg?.logo"
                         (clicked)="selectChannel(channel)"
                         [selected]="selected?.id === channel?.id"
-                    ></app-channel-list-item>
+                    />
                 </cdk-virtual-scroll-viewport>
             </mat-nav-list>
         </mat-tab>

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

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .mat-list-base {
     padding-top: 0;
 }
@@ -7,14 +9,14 @@
 }
 
 .search-panel {
-    padding: 10px;
+    padding: 10px 0 0 0;
+    display: flex;
+    justify-content: center;
 }
 
 .search-bar {
-    padding: 8px;
-    background: #ddd;
-    border: none;
-    border-radius: 4px;
+    @include mat.form-field-density(-5);
+    width: 96%;
 }
 
 mat-nav-list {
@@ -23,25 +25,20 @@ mat-nav-list {
 }
 
 ::ng-deep {
+    .search-bar {
+        div {
+            border-radius: 20px;
+        }
+    }
+
+    div[matformfieldlineripple], .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+    }
+
     .mat-expansion-panel-body {
         padding: 0 !important;
     }
 
-    .dark-theme {
-        .search-bar {
-            background: #666;
-            color: #fff;
-        }
-
-        .search-bar::placeholder {
-            color: #ccc;
-        }
-    }
-
-    .mat-tab-label-content {
-        text-transform: uppercase;
-    }
-
     .mat-expansion-panel {
         border-radius: 0 !important;
     }

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

@@ -11,7 +11,9 @@ import {
 import { FormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -36,10 +38,12 @@ import { ChannelListItemComponent } from './channel-list-item/channel-list-item.
     imports: [
         CommonModule,
         ChannelListItemComponent,
-        MatExpansionModule,
         MatDividerModule,
-        MatListModule,
+        MatExpansionModule,
+        MatFormFieldModule,
         MatIconModule,
+        MatInputModule,
+        MatListModule,
         MatTabsModule,
         TranslateModule,
         TitleCasePipe,

src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss

@@ -1,11 +1,3 @@
-.channel-logo {
-    max-height: 48px;
-    overflow: hidden;
-    border-radius: 0;
-    margin-left: 10px;
-    margin-right: 5px;
-}
-
 .channel-name {
     overflow: hidden;
     text-overflow: ellipsis;

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

@@ -27,13 +27,14 @@ import { TranslateModule } from '@ngx-translate/core';
                 class="drag-icon"
                 >drag_indicator</mat-icon
             >
-            <div matListItemAvatar class="channel-logo" *ngIf="logo">
-                <img
-                    [src]="logo"
-                    width="48"
-                    onerror="this.style.display='none'"
-                />
-            </div>
+            <img
+                matListItemAvatar
+                class="channel-logo"
+                *ngIf="logo"
+                [src]="logo"
+                width="48"
+                onerror="this.style.display='none'"
+            />
             <p matListItemLine class="channel-name">
                 {{ name }}
             </p>
@@ -48,7 +49,7 @@ import { TranslateModule } from '@ngx-translate/core';
                 <mat-icon color="accent">star</mat-icon>
             </button>
         </mat-list-item>
-        <mat-divider></mat-divider>`,
+        <!-- <mat-divider /> -->`,
     imports: [
         CommonModule,
         DragDropModule,

src/app/player/components/video-player/sidebar/sidebar.component.html

@@ -34,7 +34,7 @@
         </button>
     </div>
 </div>
-<mat-divider />
+<!-- <mat-divider /> -->
 @if (sidebarView === 'CHANNELS') {
     <app-channel-list-container [channelList]="channels" />
 } @else {

src/app/player/components/video-player/sidebar/sidebar.component.scss

@@ -1,6 +1,4 @@
 #playlists-navigation {
-    background-color: #000;
-    color: #fff;
 
     .current-playlist {
         display: flex;
@@ -21,7 +19,6 @@
 
         .channels-count {
             font-size: 0.8em;
-            color: #ccc;
         }
     }
 }
@@ -30,7 +27,6 @@
     height: calc(100vh - 60px);
     overflow: auto;
     width: 100%;
-    display: block;
 }
 
 .electron {