refactor(ui): tidy imports, simplify cleanup, and format styles

apps/web/src/index.html

@@ -25,6 +25,10 @@
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
             rel="stylesheet"
         />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap"
+            rel="stylesheet"
+        />
         <link
             href="https://fonts.googleapis.com/css2?family=Material+Icons"
             rel="stylesheet"

libs/ui/components/src/lib/channel-list-container/channel-list-container.component.ts

@@ -34,14 +34,7 @@ import {
     selectActivePlaylistId,
     selectFavorites,
 } from 'm3u-state';
-import {
-    BehaviorSubject,
-    combineLatest,
-    map,
-    skipWhile,
-    Subject,
-    takeUntil,
-} from 'rxjs';
+import { BehaviorSubject, combineLatest, map, skipWhile } from 'rxjs';
 import { EpgService } from 'services';
 import { Channel, EpgProgram, Settings, STORE_KEY } from 'shared-interfaces';
 import { ChannelListItemComponent } from './channel-list-item/channel-list-item.component';
@@ -80,8 +73,6 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
     /** Interval for refreshing EPG data */
     private epgRefreshInterval?: number;
 
-    private destroy$ = new Subject<void>();
-
     /** Whether to show EPG data in channel items (false in PWA mode or when EPG is not configured) */
     shouldShowEpg = false;
 
@@ -245,8 +236,6 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
             clearInterval(this.epgRefreshInterval);
         }
 
-        this.destroy$.next();
-        this.destroy$.complete();
         // Clean up BehaviorSubject
         this.channelList$.complete();
     }
@@ -268,7 +257,6 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
         // Batch fetch EPG programs
         this.epgService
             .getCurrentProgramsForChannels(channelIds)
-            .pipe(takeUntil(this.destroy$))
             .subscribe((epgMap) => {
                 this.channelEpgMap = epgMap;
             });

libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss

@@ -1,6 +1,3 @@
-// Import refined fonts (same as info-overlay)
-@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap');
-
 // Main channel list item container
 .channel-list-item {
     display: flex;
@@ -95,7 +92,9 @@
 
 // EPG title (program name)
 .epg-title {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Arial, sans-serif;
     font-size: 0.8rem;
     font-weight: 500;
     opacity: 0.85;

libs/ui/components/src/lib/info-overlay/info-overlay.component.scss

@@ -1,6 +1,3 @@
-// Import refined fonts
-@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap');
-
 .channel-overlay {
     position: absolute;
     bottom: 35px;
@@ -23,11 +20,22 @@
         inset: 0;
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
-        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.8) 60%, black 100%);
-        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.8) 60%, black 100%);
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0%,
+            rgba(0, 0, 0, 0.3) 20%,
+            rgba(0, 0, 0, 0.8) 60%,
+            black 100%
+        );
+        -webkit-mask-image: linear-gradient(
+            to bottom,
+            transparent 0%,
+            rgba(0, 0, 0, 0.3) 20%,
+            rgba(0, 0, 0, 0.8) 60%,
+            black 100%
+        );
         z-index: -1;
     }
-
 }
 
 // EPG Layout with data
@@ -161,7 +169,12 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
+        background: linear-gradient(
+            90deg,
+            transparent 0%,
+            rgba(255, 255, 255, 0.3) 50%,
+            transparent 100%
+        );
         animation: shimmer 2s ease-in-out infinite;
     }
 }
@@ -204,7 +217,9 @@
 .hidden {
     visibility: hidden;
     opacity: 0;
-    transition: visibility 0s 2s, opacity 2s linear;
+    transition:
+        visibility 0s 2s,
+        opacity 2s linear;
 }
 
 // No EPG state variations