From 820ef1145ab6dee0fb40098d7e6b82e8888f5e39 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Mon, 10 Mar 2025 22:32:13 +0100
Subject: [PATCH] fix: refactor sidebar component for improved layout and
 responsiveness

---
 .../sidebar/sidebar.component.html            | 64 +++++++++----------
 .../sidebar/sidebar.component.scss            | 48 ++++++--------
 .../video-player/sidebar/sidebar.component.ts | 38 ++++-------
 3 files changed, 66 insertions(+), 84 deletions(-)

diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.html b/src/app/player/components/video-player/sidebar/sidebar.component.html
index c9d209d97..ee13d5ec0 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.html
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.html
@@ -1,33 +1,35 @@
-<div id="playlists-navigation">
-    <div class="current-playlist">
-        <div class="left">
-            <button mat-icon-button matTooltip="Back" (click)="goBack()">
-                <mat-icon>arrow_back_ios</mat-icon>
-            </button>
-            <div class="playlist-info">
-                <div class="name">
-                    @if (sidebarView === 'CHANNELS') {
-                        {{ playlistTitle$ | async }}
-                    } @else {
-                        {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
-                    }
-                </div>
-                <div class="channels-count">
-                    {{
-                        sidebarView === 'CHANNELS'
-                            ? channels?.length +
-                              ' ' +
-                              ('HOME.PLAYLISTS.CHANNELS' | translate)
-                            : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE'
-                              | translate)
-                    }}
-                </div>
-            </div>
-        </div>
-
+<div class="current-playlist">
+    <div class="left">
+        <button
+            mat-icon-button
+            [matTooltip]="'SETTINGS.BACK_TO_HOME' | translate"
+            (click)="goBack()"
+        >
+            <mat-icon>arrow_back_ios</mat-icon>
+        </button>
+        <div class="playlist-info">
+            <div class="name">
+                @if (sidebarView === 'CHANNELS') {
+                    {{ playlistTitle$ | async }}
+                } @else {
+                    {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
+                }
+            </div>
+            <div class="channels-count">
+                {{
+                    sidebarView === 'CHANNELS'
+                        ? channels()?.length +
+                          ' ' +
+                          ('HOME.PLAYLISTS.CHANNELS' | translate)
+                        : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE' | translate)
+                }}
+            </div>
+        </div>
+    </div>
+
+    @if (sidebarView === 'CHANNELS') {
         <button
             mat-icon-button
-            *ngIf="sidebarView === 'CHANNELS'"
             routerLink="/"
             [matTooltip]="
                 'CHANNELS.UPLOAD_OR_SELECT_OTHER_PLAYLIST' | translate
@@ -35,16 +37,14 @@
         >
             <mat-icon>playlist_add</mat-icon>
         </button>
-    </div>
+    }
 </div>
-<!-- <mat-divider /> -->
 @if (sidebarView === 'CHANNELS') {
-    <app-channel-list-container [channelList]="channels" />
+    <app-channel-list-container [channelList]="channels()" />
 } @else {
     <app-recent-playlists
         class="recent-playlists"
         [sidebarMode]="true"
-        [class.electron]="dataService.isElectron"
         (playlistClicked)="selectPlaylist()"
     />
 }
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.scss b/src/app/player/components/video-player/sidebar/sidebar.component.scss
index da7946223..645e92e9e 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.scss
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.scss
@@ -1,32 +1,28 @@
-#playlists-navigation {
+.current-playlist {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    justify-content: space-between;
 
-    .current-playlist {
+    .left {
         display: flex;
-        align-items: center;
-        padding: 8px;
-        justify-content: space-between;
+        gap: 5px;
+    }
+}
 
-        .left {
-            display: flex;
-            gap: 5px;
-        }
+.playlist-info {
+    flex: 1;
+    max-width: 300px;
+
+    .name {
+        font-size: 1.1em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
-    .playlist-info {
-        flex: 1;
-        max-width: 300px;
-
-
-        .name {
-            font-size: 1.1em;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .channels-count {
-            font-size: 0.8em;
-        }
+    .channels-count {
+        font-size: 0.8em;
     }
 }
 
@@ -36,10 +32,6 @@
     width: 100%;
 }
 
-.electron {
-    height: calc(100vh - 85px) !important;
-}
-
 @media only screen and (max-width: 480px) {
     .playlist-info {
         .name {
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.ts b/src/app/player/components/video-player/sidebar/sidebar.component.ts
index 42df083c3..99d517a1a 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.ts
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.ts
@@ -1,15 +1,13 @@
-import { AsyncPipe, NgIf } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, input } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
 import { Router, RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslatePipe } from '@ngx-translate/core';
 import { Channel } from '../../../../../../shared/channel.interface';
 import { RecentPlaylistsComponent } from '../../../../home/recent-playlists/recent-playlists.component';
-import { DataService } from '../../../../services/data.service';
 import * as PlaylistActions from '../../../../state/actions';
 import { selectPlaylistTitle } from '../../../../state/selectors';
 import { SidebarView } from '../video-player.component';
@@ -21,32 +19,24 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch
     imports: [
         AsyncPipe,
         ChannelListContainerComponent,
-        MatButtonModule,
-        MatDividerModule,
-        MatIconModule,
-        MatTooltipModule,
-        NgIf,
+        MatIcon,
+        MatIconButton,
+        MatTooltip,
         RecentPlaylistsComponent,
-        TranslatePipe,
         RouterLink,
+        TranslatePipe,
     ],
 })
 export class SidebarComponent {
-    @Input() channels: Channel[] = [];
+    readonly channels = input<Channel[]>([]);
 
-    isElectron = this.dataService.isElectron;
-
-    playlistTitle$ = this.store.select(selectPlaylistTitle);
+    private readonly router = inject(Router);
+    private readonly store = inject(Store);
 
+    readonly playlistTitle$ = this.store.select(selectPlaylistTitle);
     sidebarView: SidebarView = 'CHANNELS';
 
-    constructor(
-        public dataService: DataService,
-        private router: Router,
-        private store: Store
-    ) {}
-
-    goBack(): void {
+    goBack() {
         if (this.sidebarView === 'PLAYLISTS') {
             this.store.dispatch(PlaylistActions.resetActiveChannel());
             this.router.navigate(['/']);