From aa6a753aa53d13970d6ebc090b04f117426309c6 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 25 Feb 2026 07:46:28 +0100
Subject: [PATCH] style: enhance grid list component with loading skeletons and
 type safety

- Updated GridListComponent to use a skeleton loading UI during data fetching.
- Introduced GridListItem interface for better type safety on items input.
- Improved paginator integration with proper type definitions.
- Refactored loading state handling to utilize computed properties.

feat: Improve portal rail links with accessibility features

- Added aria-current attribute to indicate active links.
- Enhanced styling for active links with new CSS variables for selection colors.

style: Refactor styles for portal rail links and context panels

- Updated SCSS for portal rail links to improve hover and active states.
- Introduced new styles for context skeletons in workspace context panel.

feat: Implement skeleton loaders in stalker main container and workspace context panel

- Replaced ngx-skeleton-loader with custom skeleton components for better control.
- Added skeleton loading states for categories in stalker main container.

style: Refine recently added component styles and interactions

- Enhanced section styling with active state indicators and transitions.
- Improved layout and visual feedback for recently added items.

fix: Correctly handle section activation in recently added component

- Added logic to determine active sections based on selected content type.

refactor: Update XtreamShellComponent to improve import overlay handling

- Changed isImporting check to showImportOverlay for better clarity.
- Refactored section handling to use signals for state management.

style: Introduce new selection colors and effects across the application

- Added new CSS variables for selection colors and effects to enhance UI consistency.
- Updated various components to utilize new selection styles for better user experience.
---
 .../src/app/settings/settings.component.html  | 38 ++++++--
 .../src/app/settings/settings.component.scss  | 28 ++++++
 .../favorites-layout.component.html           |  8 +-
 .../favorites-layout.component.scss           | 18 ++++
 .../grid-list/grid-list.component.scss        | 95 ++++++++++++++++++-
 .../grid-list/grid-list.component.ts          | 56 +++++++++--
 .../portal-rail-links.component.html          |  4 +
 .../portal-rail-links.component.scss          | 60 ++++++++----
 .../stalker-main-container.component.html     | 20 ++--
 .../stalker-main-container.component.scss     | 82 ++++++++++++++++
 .../stalker-main-container.component.ts       |  9 +-
 .../workspace-context-panel.component.html    | 20 ++--
 .../workspace-context-panel.component.scss    | 89 ++++++++++++++++-
 .../workspace-context-panel.component.ts      | 12 ++-
 .../workspace/workspace-shell.component.html  |  3 +
 .../workspace/workspace-shell.component.scss  | 46 ++++++---
 .../workspace/workspace-shell.component.ts    |  4 +-
 ...space-sources-filters-panel.component.scss | 29 +++++-
 .../category-view.component.html              |  2 +
 .../category-view.component.scss              |  5 +
 .../recently-added.component.html             |  9 +-
 .../recently-added.component.scss             | 40 +++++++-
 .../recently-added.component.ts               |  5 +
 .../xtream-shell/xtream-shell.component.html  |  2 +-
 .../xtream-shell/xtream-shell.component.ts    | 76 ++++++++++-----
 apps/web/src/m3-theme.scss                    | 44 +++++++++
 apps/web/src/nav-list.scss                    | 37 ++++++--
 27 files changed, 719 insertions(+), 122 deletions(-)

diff --git a/apps/web/src/app/settings/settings.component.html b/apps/web/src/app/settings/settings.component.html
index 99abc24da..da00a9a3b 100644
--- a/apps/web/src/app/settings/settings.component.html
+++ b/apps/web/src/app/settings/settings.component.html
@@ -14,7 +14,11 @@
         novalidate
     >
         <div class="settings-content">
-            <section class="settings-group" id="general">
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'general'"
+                id="general"
+            >
                 <header class="settings-group__header">
                     <div class="settings-group__header-icon">
                         <mat-icon>settings</mat-icon>
@@ -105,7 +109,11 @@
                 </div>
             </section>
 
-            <section class="settings-group" id="playback">
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'playback'"
+                id="playback"
+            >
                 <header class="settings-group__header">
                     <div class="settings-group__header-icon">
                         <mat-icon>play_circle</mat-icon>
@@ -269,7 +277,11 @@
             </section>
 
             @if (isDesktop) {
-                <section class="settings-group" id="epg">
+                <section
+                    class="settings-group"
+                    [class.settings-group--active]="activeSection() === 'epg'"
+                    id="epg"
+                >
                     <header class="settings-group__header">
                         <div class="settings-group__header-icon">
                             <mat-icon>list_alt</mat-icon>
@@ -369,7 +381,13 @@
             }
 
             @if (isDesktop) {
-                <section class="settings-group" id="remote-control">
+                <section
+                    class="settings-group"
+                    [class.settings-group--active]="
+                        activeSection() === 'remote-control'
+                    "
+                    id="remote-control"
+                >
                     <header class="settings-group__header">
                         <div class="settings-group__header-icon">
                             <mat-icon>settings_remote</mat-icon>
@@ -546,7 +564,11 @@
                 </section>
             }
 
-            <section class="settings-group" id="data">
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'data'"
+                id="data"
+            >
                 <header class="settings-group__header">
                     <div class="settings-group__header-icon">
                         <mat-icon>sync_alt</mat-icon>
@@ -631,7 +653,11 @@
                 }
             </section>
 
-            <section class="settings-group" id="about">
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'about'"
+                id="about"
+            >
                 <header class="settings-group__header">
                     <div class="settings-group__header-icon">
                         <mat-icon>info</mat-icon>
diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
index b3ed398d7..290ab29a3 100644
--- a/apps/web/src/app/settings/settings.component.scss
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -33,17 +33,45 @@
 }
 
 .settings-group {
+    position: relative;
     background: transparent;
     overflow: hidden;
     scroll-margin-top: 24px;
     padding-bottom: 24px;
     border-bottom: 1px solid var(--mat-sys-outline-variant);
+    border-radius: 18px;
+    transition:
+        background 0.2s ease,
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
 
     &:last-child {
         border-bottom: none;
     }
 }
 
+.settings-group--active {
+    background: linear-gradient(
+        145deg,
+        var(--app-selection-surface),
+        color-mix(in srgb, var(--app-selection-color) 6%, transparent)
+    );
+    border-color: var(--app-selection-border);
+    box-shadow:
+        inset 0 0 0 1px var(--app-selection-border),
+        0 16px 28px -24px var(--app-selection-glow);
+
+    .settings-group__header-icon {
+        background: var(--app-selection-surface-strong);
+        color: var(--app-selection-color);
+        box-shadow: inset 0 0 0 1px var(--app-selection-border);
+    }
+
+    .settings-group__header-text h3 {
+        color: var(--app-selection-color);
+    }
+}
+
 .settings-group__header {
     display: flex;
     align-items: center;
diff --git a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html
index 060d97c55..9e111799f 100644
--- a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html
+++ b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html
@@ -25,12 +25,8 @@
 <div class="main-content">
     <div class="content-header">
         <h2>
-            {{
-                (titleTranslationString() | translate) +
-                    ' (' +
-                    selectedCategoryId() +
-                    ')'
-            }}
+            {{ titleTranslationString() | translate }}
+            <span class="selected-category-pill">{{ selectedCategoryId() }}</span>
         </h2>
         @if (showHeaderAction() && !isWorkspaceLayout) {
             <button
diff --git a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.scss b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.scss
index 6fccda148..98d18ec99 100644
--- a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.scss
+++ b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.scss
@@ -33,6 +33,24 @@
         align-items: center;
         gap: 10px;
     }
+
+    .selected-category-pill {
+        padding: 4px 10px;
+        border-radius: 999px;
+        font-size: 0.76rem;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        color: var(--app-selection-color);
+        background: linear-gradient(
+            145deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 10px 16px -18px var(--app-selection-glow);
+    }
 }
 
 .scrollable-content {
diff --git a/apps/web/src/app/shared/components/grid-list/grid-list.component.scss b/apps/web/src/app/shared/components/grid-list/grid-list.component.scss
index d4e65bbdf..8548abcc9 100644
--- a/apps/web/src/app/shared/components/grid-list/grid-list.component.scss
+++ b/apps/web/src/app/shared/components/grid-list/grid-list.component.scss
@@ -17,7 +17,6 @@ mat-card:hover {
 
 // ─── Grid layout ─────────────────────────────────────────────────────────────
 .grid {
-
     mat-card {
         cursor: pointer;
         width: 100%;
@@ -108,3 +107,97 @@ mat-card:hover {
         width: 14px;
     }
 }
+
+.grid-skeleton-card {
+    width: 100%;
+}
+
+.grid-skeleton-thumb {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    border-radius: 10px;
+    overflow: hidden;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 84%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 16%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 94%,
+            transparent
+        );
+}
+
+.grid-skeleton-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 34px;
+    height: 14px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 56%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 44%
+    );
+}
+
+.grid-skeleton-title {
+    margin-top: 10px;
+    padding: 0 3px;
+    display: grid;
+    gap: 6px;
+}
+
+.grid-skeleton-line {
+    height: 9px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
+    );
+
+    &--primary {
+        width: 92%;
+    }
+
+    &--secondary {
+        width: 68%;
+    }
+}
+
+.grid-skeleton-thumb,
+.grid-skeleton-badge,
+.grid-skeleton-line {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 10%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 20%,
+                    transparent
+                )
+                46%,
+            transparent 76%
+        );
+        transform: translateX(-120%);
+        animation: grid-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
+}
+
+@keyframes grid-skeleton-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
diff --git a/apps/web/src/app/shared/components/grid-list/grid-list.component.ts b/apps/web/src/app/shared/components/grid-list/grid-list.component.ts
index b09770071..a2b618e46 100644
--- a/apps/web/src/app/shared/components/grid-list/grid-list.component.ts
+++ b/apps/web/src/app/shared/components/grid-list/grid-list.component.ts
@@ -1,23 +1,54 @@
-import { Component, input, output } from '@angular/core';
+import { Component, computed, input, output } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatTooltip } from '@angular/material/tooltip';
 import { TranslatePipe } from '@ngx-translate/core';
 import { PlaylistErrorViewComponent } from '../../../xtream-electron/playlist-error-view/playlist-error-view.component';
 import { ProgressCapsuleComponent } from '../../../xtream-electron/shared/progress-capsule/progress-capsule.component';
 import { WatchedBadgeComponent } from '../../../xtream-electron/shared/watched-badge/watched-badge.component';
 
+interface GridListItem {
+    id?: number | string;
+    is_series?: number | string | boolean;
+    xtream_id?: number | string;
+    series_id?: number | string;
+    stream_id?: number | string;
+    category_id?: number | string;
+    poster_url?: string;
+    cover?: string;
+    title?: string;
+    o_name?: string;
+    name?: string;
+    rating?: string | number;
+    rating_imdb?: string | number;
+    progress?: number;
+    isWatched?: boolean;
+    hasSeriesProgress?: boolean;
+    [key: string]: unknown;
+}
+
 @Component({
     selector: 'app-grid-list',
     template: `<div
             class="grid grid-cols-[repeat(auto-fill,minmax(148px,1fr))] gap-4"
         >
             @if (isLoading()) {
-                <div class="flex justify-center items-center p-8">
-                    <mat-spinner diameter="50"></mat-spinner>
-                </div>
+                @for (row of skeletonRows(); track row) {
+                    <div class="grid-skeleton-card" aria-hidden="true">
+                        <div class="grid-skeleton-thumb">
+                            <span class="grid-skeleton-badge"></span>
+                        </div>
+                        <div class="grid-skeleton-title">
+                            <span
+                                class="grid-skeleton-line grid-skeleton-line--primary"
+                            ></span>
+                            <span
+                                class="grid-skeleton-line grid-skeleton-line--secondary"
+                            ></span>
+                        </div>
+                    </div>
+                }
             } @else {
                 @for (item of items(); track $index) {
                     @let i = $any(item);
@@ -100,7 +131,6 @@ import { WatchedBadgeComponent } from '../../../xtream-electron/shared/watched-b
         PlaylistErrorViewComponent,
         MatCardModule,
         MatIcon,
-        MatProgressSpinner,
         MatTooltip,
         MatPaginatorModule,
         ProgressCapsuleComponent,
@@ -108,14 +138,20 @@ import { WatchedBadgeComponent } from '../../../xtream-electron/shared/watched-b
     ],
 })
 export class GridListComponent {
-    readonly items = input<any[]>();
+    readonly items = input<GridListItem[]>();
     readonly isLoading = input<boolean>();
     readonly showPaginator = input(true);
-    readonly itemClicked = output<any>();
-    readonly pageChange = output<any>();
+    readonly itemClicked = output<GridListItem>();
+    readonly pageChange = output<PageEvent>();
 
     readonly pageIndex = input<number>();
     readonly totalPages = input<number>();
     readonly limit = input<number>();
     readonly pageSizeOptions = input<number[]>();
+
+    readonly skeletonRows = computed(() => {
+        const preferredCount = this.limit() ?? 12;
+        const count = Math.max(8, Math.min(18, preferredCount));
+        return Array.from({ length: count }, (_, index) => index);
+    });
 }
diff --git a/apps/web/src/app/shared/navigation/portal-rail-links.component.html b/apps/web/src/app/shared/navigation/portal-rail-links.component.html
index 8b9cbaec3..6426a77c6 100644
--- a/apps/web/src/app/shared/navigation/portal-rail-links.component.html
+++ b/apps/web/src/app/shared/navigation/portal-rail-links.component.html
@@ -2,6 +2,7 @@
     <mat-nav-list class="p-0 m-0">
         @for (link of links(); track link.path.join('/')) {
             <a
+                class="portal-rail-link"
                 mat-list-item
                 [routerLink]="link.path"
                 [routerLinkActive]="activeClass()"
@@ -9,6 +10,7 @@
                 [matTooltip]="link.tooltip"
                 matTooltipPosition="right"
                 [attr.aria-label]="link.tooltip"
+                [attr.aria-current]="isActive(link) ? 'page' : null"
                 [class.active]="activeClass() === 'active' && isActive(link)"
                 [class.is-active]="
                     activeClass() === 'is-active' && isActive(link)
@@ -22,12 +24,14 @@
     <nav class="flex flex-col items-center gap-2 w-full">
         @for (link of links(); track link.path.join('/')) {
             <a
+                class="portal-rail-link"
                 [routerLink]="link.path"
                 [routerLinkActive]="activeClass()"
                 [routerLinkActiveOptions]="{ exact: link.exact ?? false }"
                 [matTooltip]="link.tooltip"
                 [matTooltipPosition]="'right'"
                 [attr.aria-label]="link.tooltip"
+                [attr.aria-current]="isActive(link) ? 'page' : null"
                 [class.active]="activeClass() === 'active' && isActive(link)"
                 [class.is-active]="
                     activeClass() === 'is-active' && isActive(link)
diff --git a/apps/web/src/app/shared/navigation/portal-rail-links.component.scss b/apps/web/src/app/shared/navigation/portal-rail-links.component.scss
index 5e2770b61..ee1eb06c6 100644
--- a/apps/web/src/app/shared/navigation/portal-rail-links.component.scss
+++ b/apps/web/src/app/shared/navigation/portal-rail-links.component.scss
@@ -4,25 +4,29 @@
     --rail-link-color: var(--mat-sys-on-surface-variant);
     --rail-link-hover-color: var(--mat-sys-on-surface);
     --rail-link-hover-bg: var(--mat-sys-surface-container);
-    /* Keep consistent with category-item.selected tone */
-    --rail-link-active-bg: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
-    --rail-link-active-color: var(--mat-sys-primary);
-    --rail-link-active-icon: var(--mat-sys-primary);
-    --rail-link-active-border: color-mix(in srgb, var(--mat-sys-primary) 42%, transparent);
-    --rail-link-active-glow: color-mix(in srgb, var(--mat-sys-primary) 24%, transparent);
+    --rail-link-active-bg: var(--app-selection-surface);
+    --rail-link-active-bg-strong: var(--app-selection-surface-strong);
+    --rail-link-active-color: var(--app-selection-color);
+    --rail-link-active-icon: var(--app-selection-color);
+    --rail-link-active-border: var(--app-selection-border);
+    --rail-link-active-glow: var(--app-selection-glow);
 }
 
 .p-0.m-0 {
-
     .mdc-list-item {
         min-height: 28px;
         height: 28px;
         padding: 0 !important;
-        border-radius: 4px;
+        border-radius: 10px;
         margin: 2px 0;
         display: flex;
         justify-content: center;
         color: var(--rail-link-color);
+        transition:
+            background 0.2s ease,
+            color 0.2s ease,
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
 
         .mdc-list-item__start {
             margin-inline-end: 0 !important;
@@ -43,11 +47,16 @@
 
     .mdc-list-item.active,
     .mdc-list-item.is-active {
-        background: var(--rail-link-active-bg);
+        background: linear-gradient(
+            145deg,
+            var(--rail-link-active-bg-strong),
+            var(--rail-link-active-bg)
+        );
         color: var(--rail-link-active-color);
         box-shadow:
             inset 0 0 0 1px var(--rail-link-active-border),
             0 8px 18px -14px var(--rail-link-active-glow);
+        transform: translateY(-1px);
 
         mat-icon {
             color: var(--rail-link-active-icon);
@@ -55,7 +64,7 @@
     }
 }
 
-nav.flex a {
+nav.flex .portal-rail-link {
     width: 44px;
     height: 44px;
     border-radius: 14px;
@@ -65,38 +74,47 @@ nav.flex a {
     justify-content: center;
     color: var(--rail-link-color);
     text-decoration: none;
-    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
     app-region: no-drag;
 }
 
-nav.flex a:hover {
+nav.flex .portal-rail-link:hover {
     color: var(--rail-link-hover-color);
     background: var(--rail-link-hover-bg);
 }
 
-nav.flex a.is-active,
-nav.flex a.active {
+nav.flex .portal-rail-link.is-active,
+nav.flex .portal-rail-link.active {
     color: var(--rail-link-active-color);
-    background: var(--rail-link-active-bg);
+    background: linear-gradient(
+        145deg,
+        var(--rail-link-active-bg-strong),
+        var(--rail-link-active-bg)
+    );
     box-shadow:
         inset 0 0 0 1px var(--rail-link-active-border),
         0 10px 20px -16px var(--rail-link-active-glow);
+    transform: translateY(-1px);
 }
 
-nav.flex a.is-active mat-icon,
-nav.flex a.active mat-icon {
+nav.flex .portal-rail-link.is-active mat-icon,
+nav.flex .portal-rail-link.active mat-icon {
     color: var(--rail-link-active-icon);
 }
 
-nav.flex a.is-active::after,
-nav.flex a.active::after {
+nav.flex .portal-rail-link.is-active::after,
+nav.flex .portal-rail-link.active::after {
     content: '';
     position: absolute;
     right: -4px;
     top: 50%;
     transform: translateY(-50%);
-    width: 3px;
-    height: 18px;
+    width: 4px;
+    height: 20px;
     border-radius: 999px;
     background: var(--rail-link-active-icon);
     box-shadow: 0 0 10px var(--rail-link-active-glow);
diff --git a/apps/web/src/app/stalker/stalker-main-container.component.html b/apps/web/src/app/stalker/stalker-main-container.component.html
index 6f43d19d5..de3ca7c0d 100644
--- a/apps/web/src/app/stalker/stalker-main-container.component.html
+++ b/apps/web/src/app/stalker/stalker-main-container.component.html
@@ -17,14 +17,18 @@
             </div>
         }
         @if (isCategoryLoading()) {
-            <ngx-skeleton-loader
-                count="20"
-                [theme]="{
-                    width: '95%',
-                    height: '48px',
-                    borderRadius: '40px',
-                }"
-            />
+            <div class="category-skeleton" aria-hidden="true">
+                @for (row of skeletonRows; track row) {
+                    <div class="category-skeleton__row">
+                        <span class="category-skeleton__dot"></span>
+                        <span
+                            class="category-skeleton__label"
+                            [style.width.%]="skeletonLabelWidths[row]"
+                        ></span>
+                        <span class="category-skeleton__count"></span>
+                    </div>
+                }
+            </div>
         } @else if (isCategoryFailed()) {
             <app-playlist-error-view
                 [title]="'PORTALS.ERROR_VIEW.UNKNOWN_ERROR.TITLE' | translate"
diff --git a/apps/web/src/app/stalker/stalker-main-container.component.scss b/apps/web/src/app/stalker/stalker-main-container.component.scss
index 313c1148b..0fd124370 100644
--- a/apps/web/src/app/stalker/stalker-main-container.component.scss
+++ b/apps/web/src/app/stalker/stalker-main-container.component.scss
@@ -45,3 +45,85 @@
     flex-direction: column;
     overflow: hidden;
 }
+
+.category-skeleton {
+    display: grid;
+    gap: 10px;
+    padding: 12px 8px 10px;
+}
+
+.category-skeleton__row {
+    display: grid;
+    grid-template-columns: 14px minmax(0, 1fr) 34px;
+    align-items: center;
+    gap: 12px;
+    min-height: 40px;
+    padding: 0 12px;
+    border-radius: 14px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 84%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 16%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 92%,
+            transparent
+        );
+}
+
+.category-skeleton__dot,
+.category-skeleton__label,
+.category-skeleton__count {
+    position: relative;
+    overflow: hidden;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 55%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 45%
+    );
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 8%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 22%,
+                    transparent
+                )
+                44%,
+            transparent 74%
+        );
+        transform: translateX(-120%);
+        animation: category-skeleton-shimmer 1.25s ease-in-out infinite;
+    }
+}
+
+.category-skeleton__dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 999px;
+}
+
+.category-skeleton__label {
+    height: 10px;
+    border-radius: 999px;
+}
+
+.category-skeleton__count {
+    justify-self: end;
+    width: 26px;
+    height: 10px;
+    border-radius: 999px;
+}
+
+@keyframes category-skeleton-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
diff --git a/apps/web/src/app/stalker/stalker-main-container.component.ts b/apps/web/src/app/stalker/stalker-main-container.component.ts
index 874c6d443..63788180b 100644
--- a/apps/web/src/app/stalker/stalker-main-container.component.ts
+++ b/apps/web/src/app/stalker/stalker-main-container.component.ts
@@ -4,7 +4,6 @@ import { MatIcon } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { PlaylistSwitcherComponent, ResizableDirective } from 'components';
 import { CategoryViewComponent } from '../xtream-electron/category-view/category-view.component';
 import { PlaylistErrorViewComponent } from '../xtream-electron/playlist-error-view/playlist-error-view.component';
@@ -23,7 +22,6 @@ import { StalkerStore } from './stalker.store';
         MatIcon,
         MatIconButton,
         MatPaginatorModule,
-        NgxSkeletonLoaderModule,
         PlaylistErrorViewComponent,
         PlaylistSwitcherComponent,
         ResizableDirective,
@@ -56,6 +54,10 @@ export class StalkerMainContainerComponent {
     /** content items */
     readonly contentItems = this.stalkerStore.getPaginatedContent;
     readonly isContentLoading = this.stalkerStore.isPaginatedContentLoading;
+    readonly skeletonRows = Array.from({ length: 12 }, (_, index) => index);
+    readonly skeletonLabelWidths = [
+        82, 70, 77, 66, 86, 73, 79, 62, 84, 68, 76, 71,
+    ];
 
     constructor() {
         // reset category title after changing content type
@@ -98,7 +100,8 @@ export class StalkerMainContainerComponent {
         const selectedTypeLabel =
             typeLabelByContentType[selectedContentType] ?? '';
 
-        const selectedCategoryName = this.stalkerStore.getSelectedCategoryName();
+        const selectedCategoryName =
+            this.stalkerStore.getSelectedCategoryName();
         let categoryName = selectedCategoryName;
 
         // For implicit "All" view, show a type-specific title so switching
diff --git a/apps/web/src/app/workspace/workspace-context-panel.component.html b/apps/web/src/app/workspace/workspace-context-panel.component.html
index 817c9b98d..c6c4d139f 100644
--- a/apps/web/src/app/workspace/workspace-context-panel.component.html
+++ b/apps/web/src/app/workspace/workspace-context-panel.component.html
@@ -30,14 +30,18 @@
         />
     } @else if (isStalkerCategories()) {
         @if (isStalkerCategoryLoading()) {
-            <ngx-skeleton-loader
-                count="18"
-                [theme]="{
-                    width: '95%',
-                    height: '36px',
-                    borderRadius: '8px',
-                }"
-            />
+            <div class="context-skeleton" aria-hidden="true">
+                @for (row of skeletonRows; track row) {
+                    <div class="context-skeleton__row">
+                        <span class="context-skeleton__dot"></span>
+                        <span
+                            class="context-skeleton__label"
+                            [style.width.%]="skeletonLabelWidths[row]"
+                        ></span>
+                        <span class="context-skeleton__count"></span>
+                    </div>
+                }
+            </div>
         } @else if (isStalkerCategoryFailed()) {
             <app-playlist-error-view
                 [title]="'Unable to load categories'"
diff --git a/apps/web/src/app/workspace/workspace-context-panel.component.scss b/apps/web/src/app/workspace/workspace-context-panel.component.scss
index 220bc6eb6..23367ec5c 100644
--- a/apps/web/src/app/workspace/workspace-context-panel.component.scss
+++ b/apps/web/src/app/workspace/workspace-context-panel.component.scss
@@ -41,7 +41,9 @@
         line-height: 32px;
         border-radius: 8px;
         color: var(--mat-sys-on-surface-variant);
-        transition: background 0.15s ease, color 0.15s ease;
+        transition:
+            background 0.15s ease,
+            color 0.15s ease;
 
         &:hover {
             background: var(--mat-sys-surface-container);
@@ -61,7 +63,7 @@
     align-items: center;
     gap: 4px;
     margin-top: 5px;
-    padding: 2px 8px;
+    padding: 2px 0;
     border-radius: 999px;
     background: var(--mat-sys-surface-container);
     color: var(--mat-sys-on-surface-variant);
@@ -98,3 +100,86 @@ app-category-view {
     scrollbar-width: thin;
     scrollbar-color: var(--mat-sys-outline-variant) transparent;
 }
+
+.context-skeleton {
+    display: grid;
+    gap: 8px;
+    padding: 4px 6px 2px;
+    overflow: hidden;
+}
+
+.context-skeleton__row {
+    display: grid;
+    grid-template-columns: 12px minmax(0, 1fr) 28px;
+    align-items: center;
+    gap: 10px;
+    min-height: 36px;
+    padding: 0 10px;
+    border-radius: 12px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 12%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 96%,
+            transparent
+        );
+}
+
+.context-skeleton__dot,
+.context-skeleton__label,
+.context-skeleton__count {
+    position: relative;
+    overflow: hidden;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
+    );
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 8%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 18%,
+                    transparent
+                )
+                44%,
+            transparent 74%
+        );
+        transform: translateX(-120%);
+        animation: context-skeleton-shimmer 1.15s ease-in-out infinite;
+    }
+}
+
+.context-skeleton__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 999px;
+}
+
+.context-skeleton__label {
+    height: 9px;
+    border-radius: 999px;
+}
+
+.context-skeleton__count {
+    justify-self: end;
+    width: 22px;
+    height: 9px;
+    border-radius: 999px;
+}
+
+@keyframes context-skeleton-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
diff --git a/apps/web/src/app/workspace/workspace-context-panel.component.ts b/apps/web/src/app/workspace/workspace-context-panel.component.ts
index c96c8474a..6553c9ee0 100644
--- a/apps/web/src/app/workspace/workspace-context-panel.component.ts
+++ b/apps/web/src/app/workspace/workspace-context-panel.component.ts
@@ -4,7 +4,6 @@ import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { Router } from '@angular/router';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { PlaylistErrorViewComponent } from '../xtream-electron/playlist-error-view/playlist-error-view.component';
 import {
     CategoryManagementDialogComponent,
@@ -33,7 +32,6 @@ interface XtreamCategoryLike {
         MatIcon,
         MatIconButton,
         MatTooltip,
-        NgxSkeletonLoaderModule,
         PlaylistErrorViewComponent,
     ],
     templateUrl: './workspace-context-panel.component.html',
@@ -69,8 +67,14 @@ export class WorkspaceContextPanelComponent {
 
     readonly stalkerCategories = this.stalkerStore.getCategoryResource;
     readonly stalkerSelectedCategoryId = this.stalkerStore.selectedCategoryId;
-    readonly isStalkerCategoryLoading = this.stalkerStore.isCategoryResourceLoading;
-    readonly isStalkerCategoryFailed = this.stalkerStore.isCategoryResourceFailed;
+    readonly isStalkerCategoryLoading =
+        this.stalkerStore.isCategoryResourceLoading;
+    readonly isStalkerCategoryFailed =
+        this.stalkerStore.isCategoryResourceFailed;
+    readonly skeletonRows = Array.from({ length: 14 }, (_, index) => index);
+    readonly skeletonLabelWidths = [
+        78, 66, 74, 59, 83, 69, 76, 62, 81, 64, 72, 67, 79, 61,
+    ];
 
     readonly title = computed(() => {
         if (this.isXtreamCategories()) {
diff --git a/apps/web/src/app/workspace/workspace-shell.component.html b/apps/web/src/app/workspace/workspace-shell.component.html
index 47a0e19b4..4f1374610 100644
--- a/apps/web/src/app/workspace/workspace-shell.component.html
+++ b/apps/web/src/app/workspace/workspace-shell.component.html
@@ -38,6 +38,7 @@
 
         <div class="rail-footer">
             <a
+                class="rail-shortcut"
                 routerLink="/workspace/settings"
                 [class.is-active]="isSettingsRoute()"
                 matTooltip="Settings"
@@ -108,6 +109,7 @@
             @if (downloadsContext()) {
                 <button
                     type="button"
+                    class="header-shortcut"
                     mat-icon-button
                     [class.is-active]="isDownloadsView()"
                     (click)="openDownloadsShortcut()"
@@ -131,6 +133,7 @@
             }
             <button
                 type="button"
+                class="header-shortcut"
                 mat-icon-button
                 [class.is-active]="isFavoritesView()"
                 (click)="toggleFavoritesShortcut()"
diff --git a/apps/web/src/app/workspace/workspace-shell.component.scss b/apps/web/src/app/workspace/workspace-shell.component.scss
index c1519fd33..31809b508 100644
--- a/apps/web/src/app/workspace/workspace-shell.component.scss
+++ b/apps/web/src/app/workspace/workspace-shell.component.scss
@@ -47,11 +47,12 @@
     --rail-link-color: var(--mat-sys-on-surface-variant);
     --rail-link-hover-color: var(--mat-sys-on-surface);
     --rail-link-hover-bg: var(--mat-sys-surface-container);
-    --rail-link-active-bg: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
-    --rail-link-active-color: var(--mat-sys-primary);
-    --rail-link-active-icon: var(--mat-sys-primary);
-    --rail-link-active-border: color-mix(in srgb, var(--mat-sys-primary) 42%, transparent);
-    --rail-link-active-glow: color-mix(in srgb, var(--mat-sys-primary) 24%, transparent);
+    --rail-link-active-bg: var(--app-selection-surface);
+    --rail-link-active-bg-strong: var(--app-selection-surface-strong);
+    --rail-link-active-color: var(--app-selection-color);
+    --rail-link-active-icon: var(--app-selection-color);
+    --rail-link-active-border: var(--app-selection-border);
+    --rail-link-active-glow: var(--app-selection-glow);
 }
 
 .app-rail a {
@@ -64,7 +65,11 @@
     justify-content: center;
     color: var(--rail-link-color);
     text-decoration: none;
-    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
     app-region: no-drag;
 
     mat-icon {
@@ -82,10 +87,15 @@
 .app-rail a.is-active,
 .app-rail a.active {
     color: var(--rail-link-active-color);
-    background: var(--rail-link-active-bg);
+    background: linear-gradient(
+        145deg,
+        var(--rail-link-active-bg-strong),
+        var(--rail-link-active-bg)
+    );
     box-shadow:
         inset 0 0 0 1px var(--rail-link-active-border),
         0 10px 20px -16px var(--rail-link-active-glow);
+    transform: translateY(-1px);
 
     mat-icon {
         color: var(--rail-link-active-icon);
@@ -237,8 +247,15 @@
         }
 
         &.is-active {
-            color: var(--mat-sys-on-primary-container);
-            background: var(--mat-sys-primary-container);
+            color: var(--app-selection-color);
+            background: linear-gradient(
+                145deg,
+                var(--app-selection-surface-strong),
+                var(--app-selection-surface)
+            );
+            box-shadow:
+                inset 0 0 0 1px var(--app-selection-border),
+                0 10px 20px -16px var(--app-selection-glow);
         }
     }
 }
@@ -336,9 +353,14 @@
     }
 
     &.is-active {
-        border-color: transparent;
-        color: var(--mat-sys-on-primary-container);
-        background: var(--mat-sys-primary-container);
+        border-color: var(--app-selection-border);
+        color: var(--app-selection-color);
+        background: linear-gradient(
+            145deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        box-shadow: 0 10px 20px -18px var(--app-selection-glow);
         font-weight: 500;
     }
 }
diff --git a/apps/web/src/app/workspace/workspace-shell.component.ts b/apps/web/src/app/workspace/workspace-shell.component.ts
index ee8f32b80..16aed5e49 100644
--- a/apps/web/src/app/workspace/workspace-shell.component.ts
+++ b/apps/web/src/app/workspace/workspace-shell.component.ts
@@ -209,7 +209,9 @@ export class WorkspaceShellComponent {
         return (
             (context.provider === 'xtreams' ||
                 context.provider === 'stalker') &&
-            (section === 'favorites' || section === 'recent')
+            (section === 'favorites' ||
+                section === 'recent' ||
+                section === 'downloads')
         );
     });
     readonly showContextPanel = computed(
diff --git a/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss b/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss
index d6fa4d8ae..75c9e9c62 100644
--- a/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss
+++ b/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss
@@ -57,12 +57,39 @@
     min-height: 0;
 }
 
-
 .option-list {
     overflow-y: auto;
     min-height: 0;
 }
 
+.option-row {
+    border-radius: 12px;
+    transition:
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
+
+    .option-label,
+    .option-meta,
+    mat-icon {
+        transition: color 0.18s ease, opacity 0.18s ease;
+    }
+
+    &.selected {
+        box-shadow: 0 10px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+
+        .option-label,
+        .option-meta,
+        mat-icon {
+            color: var(--app-selection-color) !important;
+        }
+
+        .option-meta {
+            opacity: 0.95;
+        }
+    }
+}
+
 .panel-section-title {
     margin: 0;
     padding: 10px 10px 6px;
diff --git a/apps/web/src/app/xtream-electron/category-view/category-view.component.html b/apps/web/src/app/xtream-electron/category-view/category-view.component.html
index 393f8cd3c..ed44697dc 100644
--- a/apps/web/src/app/xtream-electron/category-view/category-view.component.html
+++ b/apps/web/src/app/xtream-electron/category-view/category-view.component.html
@@ -5,6 +5,8 @@
                 class="nav-item category-item"
                 [attr.data-category-id]="$any(item).category_id ?? item.id"
                 [class.selected]="isSelected(item)"
+                [class.category-item--selected]="isSelected(item)"
+                [attr.aria-current]="isSelected(item) ? 'true' : null"
                 (click)="categoryClicked.emit(item)"
             >
                 <span class="nav-item-label">
diff --git a/apps/web/src/app/xtream-electron/category-view/category-view.component.scss b/apps/web/src/app/xtream-electron/category-view/category-view.component.scss
index da6536289..8db71b2ea 100644
--- a/apps/web/src/app/xtream-electron/category-view/category-view.component.scss
+++ b/apps/web/src/app/xtream-electron/category-view/category-view.component.scss
@@ -20,6 +20,11 @@
     }
 }
 
+.category-item--selected .item-count {
+    color: var(--app-selection-color) !important;
+    opacity: 0.95;
+}
+
 mat-card-content {
     overflow-wrap: break-word;
     padding: 12px;
diff --git a/apps/web/src/app/xtream-electron/recently-added/recently-added.component.html b/apps/web/src/app/xtream-electron/recently-added/recently-added.component.html
index b5db4263c..ff480f9c6 100644
--- a/apps/web/src/app/xtream-electron/recently-added/recently-added.component.html
+++ b/apps/web/src/app/xtream-electron/recently-added/recently-added.component.html
@@ -2,7 +2,7 @@
     <h2>{{ 'PORTALS.SIDEBAR.RECENTLY_ADDED' | translate }}</h2>
 
     @if (recentlyAddedVod().length > 0) {
-        <div class="section">
+        <div class="section" [class.section--active]="isSectionActive('vod')">
             <h3>{{ 'PORTALS.SIDEBAR.MOVIES' | translate }}</h3>
             <div class="carousel">
                 @for (item of recentlyAddedVod(); track item.xtream_id) {
@@ -20,7 +20,10 @@
     }
 
     @if (recentlyAddedSeries().length > 0) {
-        <div class="section">
+        <div
+            class="section"
+            [class.section--active]="isSectionActive('series')"
+        >
             <h3>{{ 'PORTALS.SIDEBAR.SERIES' | translate }}</h3>
             <div class="carousel">
                 @for (item of recentlyAddedSeries(); track item.xtream_id) {
@@ -38,7 +41,7 @@
     }
 
     @if (recentlyAddedLive().length > 0) {
-        <div class="section">
+        <div class="section" [class.section--active]="isSectionActive('live')">
             <h3>{{ 'PORTALS.SIDEBAR.LIVE_TV' | translate }}</h3>
             <div class="carousel">
                 @for (item of recentlyAddedLive(); track item.xtream_id) {
diff --git a/apps/web/src/app/xtream-electron/recently-added/recently-added.component.scss b/apps/web/src/app/xtream-electron/recently-added/recently-added.component.scss
index a1e88cdfe..05d9519f6 100644
--- a/apps/web/src/app/xtream-electron/recently-added/recently-added.component.scss
+++ b/apps/web/src/app/xtream-electron/recently-added/recently-added.component.scss
@@ -13,22 +13,58 @@ h2 {
 }
 
 .section {
+    padding: 12px 14px 0;
+    border: 1px solid transparent;
+    border-radius: 16px;
     margin-bottom: 32px;
+    transition:
+        background 0.2s ease,
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
 
     h3 {
+        display: flex;
+        align-items: center;
+        gap: 8px;
         margin-bottom: 16px;
         opacity: 0.8;
     }
 }
 
+.section.section--active {
+    border-color: var(--app-selection-border);
+    background: linear-gradient(
+        145deg,
+        var(--app-selection-surface),
+        color-mix(in srgb, var(--app-selection-color) 6%, transparent)
+    );
+    box-shadow:
+        inset 0 0 0 1px var(--app-selection-border),
+        0 14px 24px -22px var(--app-selection-glow);
+
+    h3 {
+        color: var(--app-selection-color);
+        opacity: 1;
+
+        &::after {
+            content: '';
+            width: 7px;
+            height: 7px;
+            border-radius: 999px;
+            background: var(--app-selection-color);
+            box-shadow: 0 0 10px var(--app-selection-glow);
+        }
+    }
+}
+
 .carousel {
     display: flex;
     overflow-x: auto;
     gap: 16px;
     padding-bottom: 16px;
-    
+
     scrollbar-width: thin;
-    
+
     .carousel-item {
         min-width: 160px;
         width: 160px;
diff --git a/apps/web/src/app/xtream-electron/recently-added/recently-added.component.ts b/apps/web/src/app/xtream-electron/recently-added/recently-added.component.ts
index b1a076dd7..ca046f63f 100644
--- a/apps/web/src/app/xtream-electron/recently-added/recently-added.component.ts
+++ b/apps/web/src/app/xtream-electron/recently-added/recently-added.component.ts
@@ -25,6 +25,7 @@ export class RecentlyAddedComponent {
     readonly recentlyAddedSeries = computed(() =>
         this.getRecentlyAdded(this.xtreamStore.serialStreams(), true)
     );
+    readonly selectedContentType = this.xtreamStore.selectedContentType;
 
     private getRecentlyAdded(items: any[], isSeries = false) {
         return [...items]
@@ -43,6 +44,10 @@ export class RecentlyAddedComponent {
         return parseInt(timestamp) * 1000;
     }
 
+    isSectionActive(type: ContentType): boolean {
+        return this.selectedContentType() === type;
+    }
+
     openItem(item: any, type: ContentType) {
         this.xtreamStore.setSelectedContentType(type);
 
diff --git a/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.html b/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.html
index adcfa1dbb..1bb71c201 100644
--- a/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.html
+++ b/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.html
@@ -1,4 +1,4 @@
-@if (isImporting()) {
+@if (showImportOverlay()) {
     <app-loading-overlay
         [current]="getImportCount()"
         [total]="itemsToImport()"
diff --git a/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.ts b/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.ts
index e46b08fc5..ae4814807 100644
--- a/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.ts
+++ b/apps/web/src/app/xtream-electron/xtream-shell/xtream-shell.component.ts
@@ -1,4 +1,4 @@
-import { Component, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
     ActivatedRoute,
@@ -36,40 +36,49 @@ export class XtreamShellComponent {
     readonly portalStatus = this.xtreamStore.portalStatus;
     readonly isWorkspaceLayout =
         this.route.snapshot.data['layout'] === 'workspace';
+    readonly showImportOverlay = computed(() => {
+        const section = this.currentSection();
+        return this.isImporting() && this.isContentSection(section);
+    });
 
     private currentPlaylistId: string | null = null;
-    private currentSection: string | null = null;
+    private readonly currentSection = signal<string | null>(null);
 
     constructor() {
         // Subscribe to route params to handle switching between playlists
-        this.route.params.pipe(takeUntilDestroyed()).subscribe(async (params) => {
-            const newPlaylistId = params['id'];
+        this.route.params
+            .pipe(takeUntilDestroyed())
+            .subscribe(async (params) => {
+                const newPlaylistId = params['id'];
 
-            // Skip if playlist ID hasn't changed
-            if (this.currentPlaylistId === newPlaylistId) {
-                return;
-            }
+                // Skip if playlist ID hasn't changed
+                if (this.currentPlaylistId === newPlaylistId) {
+                    return;
+                }
 
-            // Always reset the store when playlist changes to prevent stale data
-            // from previous sessions showing up (the store is a singleton)
-            this.xtreamStore.resetStore(newPlaylistId);
-            this.currentPlaylistId = newPlaylistId;
+                // Always reset the store when playlist changes to prevent stale data
+                // from previous sessions showing up (the store is a singleton)
+                this.xtreamStore.resetStore(newPlaylistId);
+                this.currentPlaylistId = newPlaylistId;
 
-            this.store.dispatch(
-                PlaylistActions.setActivePlaylist({
-                    playlistId: newPlaylistId,
-                })
-            );
+                this.store.dispatch(
+                    PlaylistActions.setActivePlaylist({
+                        playlistId: newPlaylistId,
+                    })
+                );
 
-            // Must await fetchXtreamPlaylist before checking status
-            // because checkPortalStatus needs currentPlaylist to be set
-            await this.xtreamStore.fetchXtreamPlaylist();
-            await this.xtreamStore.checkPortalStatus();
-        });
+                // Must await fetchXtreamPlaylist before checking status
+                // because checkPortalStatus needs currentPlaylist to be set
+                await this.xtreamStore.fetchXtreamPlaylist();
+                await this.xtreamStore.checkPortalStatus();
+            });
 
         this.router.events
             .pipe(
-                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
                 takeUntilDestroyed()
             )
             .subscribe(() => {
@@ -81,11 +90,16 @@ export class XtreamShellComponent {
         effect(() => {
             const playlist = this.xtreamStore.currentPlaylist();
             const playlistId = this.xtreamStore.playlistId();
+            const section = this.currentSection();
+
+            if (!this.isContentSection(section)) {
+                return;
+            }
 
             // Only initialize content when playlist is loaded AND matches the current playlistId
             // This prevents stale data from a previous session from being used
             if (playlist !== null && playlist.id === playlistId) {
-                this.xtreamStore.initializeContent();
+                void this.xtreamStore.initializeContent();
             }
         });
     }
@@ -96,11 +110,11 @@ export class XtreamShellComponent {
         const sectionFromUrl = this.getSectionFromUrl(this.router.url);
         const section = sectionFromSnapshot ?? sectionFromUrl;
 
-        if (!section || section === this.currentSection) {
+        if (!section || section === this.currentSection()) {
             return;
         }
 
-        this.currentSection = section;
+        this.currentSection.set(section);
 
         if (section === 'vod' || section === 'live' || section === 'series') {
             this.xtreamStore.setSelectedContentType(section);
@@ -116,4 +130,14 @@ export class XtreamShellComponent {
         );
         return match?.[1] ?? null;
     }
+
+    private isContentSection(section: string | null): boolean {
+        return (
+            section === 'vod' ||
+            section === 'live' ||
+            section === 'series' ||
+            section === 'search' ||
+            section === 'recently-added'
+        );
+    }
 }
diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss
index 57ce4decc..bfd80d50a 100644
--- a/apps/web/src/m3-theme.scss
+++ b/apps/web/src/m3-theme.scss
@@ -52,6 +52,28 @@ html {
     --app-rail-border: rgba(0, 0, 0, 0.08);
     --app-search-bg: rgba(255, 255, 255, 0.7);
     --app-search-border: rgba(0, 0, 0, 0.1);
+    --app-selection-color: #2f7bff;
+    --app-selection-on-color: #eef4ff;
+    --app-selection-surface: color-mix(
+        in srgb,
+        var(--app-selection-color) 14%,
+        transparent
+    );
+    --app-selection-surface-strong: color-mix(
+        in srgb,
+        var(--app-selection-color) 22%,
+        transparent
+    );
+    --app-selection-border: color-mix(
+        in srgb,
+        var(--app-selection-color) 52%,
+        transparent
+    );
+    --app-selection-glow: color-mix(
+        in srgb,
+        var(--app-selection-color) 34%,
+        transparent
+    );
 
     // Widget surfaces — no borders, layered backgrounds
     --app-widget-bg: #ffffff;
@@ -96,6 +118,28 @@ html {
         --app-rail-border: rgba(255, 255, 255, 0.05);
         --app-search-bg: rgba(255, 255, 255, 0.05);
         --app-search-border: rgba(255, 255, 255, 0.09);
+        --app-selection-color: #78adff;
+        --app-selection-on-color: #071225;
+        --app-selection-surface: color-mix(
+            in srgb,
+            var(--app-selection-color) 18%,
+            transparent
+        );
+        --app-selection-surface-strong: color-mix(
+            in srgb,
+            var(--app-selection-color) 28%,
+            transparent
+        );
+        --app-selection-border: color-mix(
+            in srgb,
+            var(--app-selection-color) 62%,
+            transparent
+        );
+        --app-selection-glow: color-mix(
+            in srgb,
+            var(--app-selection-color) 44%,
+            transparent
+        );
 
         // Widget surfaces — NO border, surface contrast does the work
         // Widgets sit on content-bg (#161a22), so widget-bg is notably lighter
diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss
index 78d3d6ce6..5b0fba1ba 100644
--- a/apps/web/src/nav-list.scss
+++ b/apps/web/src/nav-list.scss
@@ -9,6 +9,7 @@
 }
 
 .nav-item {
+    position: relative;
     width: 100%;
     display: flex;
     align-items: center;
@@ -27,7 +28,9 @@
     transition:
         background 0.15s ease,
         color 0.15s ease,
-        border-color 0.15s ease;
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
 
     mat-icon {
         font-size: 18px;
@@ -62,18 +65,38 @@
 
     &.selected,
     &.active {
-        background: var(--mat-sys-primary-container) !important;
-        color: var(--mat-sys-on-primary-container) !important;
-        border-color: transparent !important;
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        ) !important;
+        color: var(--app-selection-color) !important;
+        border-color: var(--app-selection-border) !important;
         font-weight: 600;
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
 
         * {
-            color: var(--mat-sys-on-primary-container) !important;
+            color: var(--app-selection-color) !important;
         }
 
         .nav-item-meta {
-            color: var(--mat-sys-on-primary-container) !important;
-            opacity: 0.85;
+            color: var(--app-selection-color) !important;
+            opacity: 0.92;
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset-inline-start: 6px;
+            top: 7px;
+            bottom: 7px;
+            width: 3px;
+            border-radius: 999px;
+            background: var(--app-selection-color);
+            box-shadow: 0 0 10px var(--app-selection-glow);
         }
     }
 }