refactor(playlist): remove drag-and-drop functionality and clean up styles

src/app/home/recent-playlists/playlist-item/playlist-item.component.html

@@ -1,7 +1,4 @@
-<mat-list-item cdkDrag (click)="playlistClicked.emit(item._id)">
-    <mat-icon matListItemIcon cdkDragHandle class="drag-icon"
-        >drag_indicator</mat-icon
-    >
+<mat-list-item (click)="playlistClicked.emit(item._id)">
     <mat-icon
         matListItemIcon
         class="upload-type-icon"

src/app/home/recent-playlists/playlist-item/playlist-item.component.scss

@@ -33,7 +33,7 @@ mat-list-item {
 
 ::ng-deep {
     @media only screen and (max-width: 480px) {
-        .main-container {
+        .main-container {  
             .favorites-icon,
             .upload-type-icon,
             .refresh-btn,
@@ -53,12 +53,6 @@ mat-list-item {
     align-self: center !important;
 }
 
-@media (max-width: 599px) {
-    .drag-icon {
-        display: none;
-    }
-}
-
 .icon-container {
     position: relative;
     display: inline-flex;
@@ -89,3 +83,10 @@ mat-list-item {
 .status-unavailable {
     background-color: #444444;
 }
+
+@media only screen and (max-width: 480px) {
+    .upload-type-icon,
+    .icon-container {
+        display: none;
+    }
+}

src/app/home/recent-playlists/playlist-item/playlist-item.component.ts

@@ -1,4 +1,3 @@
-import { DragDropModule } from '@angular/cdk/drag-drop';
 import { DatePipe, NgIf } from '@angular/common';
 import {
     Component,
@@ -9,12 +8,15 @@ import {
     inject,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
+import { MatDivider } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
-import { DataService } from '../../../services/data.service';
+import {
+    PortalStatus,
+    PortalStatusService,
+} from '../../../services/portal-status.service';
 import { PlaylistMeta } from '../../../shared/playlist-meta.type';
 
 @Component({
@@ -24,9 +26,8 @@ import { PlaylistMeta } from '../../../shared/playlist-meta.type';
     styleUrls: ['./playlist-item.component.scss'],
     imports: [
         DatePipe,
-        DragDropModule,
         MatButtonModule,
-        MatDividerModule,
+        MatDivider,
         MatIconModule,
         MatListModule,
         MatTooltipModule,
@@ -43,9 +44,8 @@ export class PlaylistItemComponent implements OnInit {
     @Output() refreshClicked = new EventEmitter<PlaylistMeta>();
     @Output() removeClicked = new EventEmitter<string>();
 
-    portalStatus: 'active' | 'inactive' | 'expired' | 'unavailable' =
-        'unavailable';
-    private readonly dataService = inject(DataService);
+    portalStatus: PortalStatus = 'unavailable';
+    private readonly portalStatusService = inject(PortalStatusService);
 
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     async ngOnInit() {
@@ -56,28 +56,12 @@ export class PlaylistItemComponent implements OnInit {
 
     private async checkPortalStatus() {
         try {
-            const response = await this.dataService.fetchData(
-                `${this.item.serverUrl}/player_api.php`,
-                {
-                    username: this.item.username,
-                    password: this.item.password,
-                    action: 'get_account_info',
-                }
-            );
-
-            if (!response?.user_info?.status) {
-                this.portalStatus = 'unavailable';
-                return;
-            }
-
-            if (response.user_info.status === 'Active') {
-                const expDate = new Date(
-                    parseInt(response.user_info.exp_date) * 1000
+            this.portalStatus =
+                await this.portalStatusService.checkPortalStatus(
+                    this.item.serverUrl,
+                    this.item.username,
+                    this.item.password
                 );
-                this.portalStatus = expDate < new Date() ? 'expired' : 'active';
-            } else {
-                this.portalStatus = 'inactive';
-            }
         } catch (error) {
             console.error('Error checking portal status:', error);
             this.portalStatus = 'unavailable';
@@ -85,6 +69,10 @@ export class PlaylistItemComponent implements OnInit {
     }
 
     getStatusClass(): string {
-        return `status-${this.portalStatus}`;
+        return this.portalStatusService.getStatusClass(this.portalStatus);
+    }
+
+    getStatusIcon(): string {
+        return this.portalStatusService.getStatusIcon(this.portalStatus);
     }
 }

src/app/home/recent-playlists/recent-playlists.component.html

@@ -12,15 +12,13 @@
     /></mat-form-field>
     @defer {
         <mat-nav-list
-            cdkDropList
-            (cdkDropListDropped)="drop($event, playlists)"
             *ngIf="playlists$ | async as playlists"
             class="playlists-list"
         >
             <mat-list-item
                 *ngIf="playlists.length === 0; else playlistsTemplate"
             >
-                <mat-icon class="favorites-icon" matListItemIcon
+                <mat-icon matListItemIcon
                     >search</mat-icon
                 >
                 <div matListItemTitle>

src/app/home/recent-playlists/recent-playlists.component.scss

@@ -35,32 +35,8 @@
     .search-field > .mat-mdc-text-field-wrapper {
         border-radius: 30px;
     }
-    
-    .cdk-drag-preview .mat-list-item-content {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        box-sizing: border-box;
-        padding: 0 16px;
-        position: relative;
-        height: inherit;
-        width: 100%;
-        justify-content: space-between;
-
-        .mat-list-text {
-            display: flex;
-            flex-direction: column;
-            flex: auto;
-            box-sizing: border-box;
-            overflow: hidden;
-            padding-left: 16px;
-        }
-    }
 }
 
-.favorites-icon {
-    padding-left: 36px;
-}
 
 #skeleton-container {
     padding-top: 10px;
@@ -81,9 +57,10 @@
     }
 }
 
-@media (max-width: 599px) {
+@media only screen and (max-width: 480px) {
     .favorites-icon {
         padding-left: 0 !important;
+        display: none
     }
 
     .search-field {

src/app/home/recent-playlists/recent-playlists.component.ts

@@ -1,8 +1,4 @@
-import {
-    CdkDragDrop,
-    DragDropModule,
-    moveItemInArray,
-} from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import {
     Component,
@@ -57,7 +53,6 @@ import { PlaylistItemComponent } from './playlist-item/playlist-item.component';
     styleUrls: ['./recent-playlists.component.scss'],
     imports: [
         AsyncPipe,
-        DragDropModule,
         MatButtonModule,
         MatDividerModule,
         MatIconModule,