feat(xstream): clear selection and adjust layout

apps/web/src/app/xtream-tauri/xtream-main-container.component.html

@@ -13,21 +13,20 @@
 </div>
 
 <div class="main-content">
-    <div class="content-header">
-        <h2>
-            @if (xtreamStore.selectedItem()) {
-                <button mat-icon-button (click)="historyBack()">
-                    <mat-icon>chevron_left</mat-icon>
-                </button>
-            } @else {
+    @if (!xtreamStore.selectedItem()) {
+        <div class="content-header">
+            <h2>
                 <button mat-icon-button disabled>
                     <mat-icon>category</mat-icon>
                 </button>
-            }
-            {{ getContentLabel() }}
-        </h2>
-    </div>
-    <div class="scrollable-content">
+                {{ getContentLabel() }}
+            </h2>
+        </div>
+    }
+    <div
+        class="scrollable-content"
+        [class.no-header]="xtreamStore.selectedItem()"
+    >
         <router-outlet />
     </div>
     <!-- <app-mpv-player-bar /> -->

apps/web/src/app/xtream-tauri/xtream-main-container.component.scss

@@ -49,4 +49,9 @@
 .scrollable-content {
     flex: 1;
     overflow-y: auto;
+
+    &.no-header {
+        // When header is hidden, content starts from top
+        margin-top: 0;
+    }
 }

apps/web/src/app/xtream-tauri/xtream-main-container.component.ts

@@ -38,6 +38,10 @@ export class XtreamMainContainerComponent implements OnInit {
 
     categoryClicked(category: XtreamCategory) {
         const categoryId = (category as any).category_id ?? category.id;
+
+        // Clear any selected item when switching categories
+        this.xtreamStore.setSelectedItem(null);
+
         this.xtreamStore.setSelectedCategory(Number(categoryId));
 
         this.router.navigate([categoryId], {
@@ -58,7 +62,10 @@ export class XtreamMainContainerComponent implements OnInit {
                 : 'Category Content';
 
             // Show page number when viewing category content (not detail view)
-            if (!this.xtreamStore.selectedItem() && this.xtreamStore.getTotalPages() > 1) {
+            if (
+                !this.xtreamStore.selectedItem() &&
+                this.xtreamStore.getTotalPages() > 1
+            ) {
                 const currentPage = this.xtreamStore.page() + 1; // +1 because page is 0-indexed
                 const totalPages = this.xtreamStore.getTotalPages();
                 const pageLabel = this.translateService.instant('PORTALS.PAGE');