From 312bc766a69d9c3e905dfa9a9e19df75b267e867 Mon Sep 17 00:00:00 2001
From: 4gray <fourgray@proton.me>
Date: Mon, 5 Jan 2026 21:56:35 +0100
Subject: [PATCH] feat(xstream): clear selection and adjust layout

---
 .../xtream-main-container.component.html      | 23 +++++++++----------
 .../xtream-main-container.component.scss      |  5 ++++
 .../xtream-main-container.component.ts        |  9 +++++++-
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/xtream-tauri/xtream-main-container.component.html b/apps/web/src/app/xtream-tauri/xtream-main-container.component.html
index 7b72c3881..c2298a3c1 100644
--- a/apps/web/src/app/xtream-tauri/xtream-main-container.component.html
+++ b/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 /> -->
diff --git a/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss b/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss
index 441671e33..fdda915f4 100644
--- a/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss
+++ b/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;
+    }
 }
diff --git a/apps/web/src/app/xtream-tauri/xtream-main-container.component.ts b/apps/web/src/app/xtream-tauri/xtream-main-container.component.ts
index 1306998a7..4f3c30429 100644
--- a/apps/web/src/app/xtream-tauri/xtream-main-container.component.ts
+++ b/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');