feat(search-results): enhance search input handling and layout adjustments

src/app/xtream-tauri/search-results/search-results.component.html

@@ -6,6 +6,7 @@
         <mat-form-field appearance="outline" class="search-field">
             <mat-label>Search content</mat-label>
             <input
+                #searchInput
                 matInput
                 spellcheck="false"
                 autofocus

src/app/xtream-tauri/search-results/search-results.component.scss

@@ -1,3 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
 .search-page {
     padding: 20px;
 }

src/app/xtream-tauri/search-results/search-results.component.ts

@@ -1,4 +1,10 @@
-import { Component, inject } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    inject,
+    ViewChild,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -23,7 +29,8 @@ import { XtreamStore } from '../xtream.store';
     templateUrl: './search-results.component.html',
     styleUrls: ['./search-results.component.scss'],
 })
-export class SearchResultsComponent {
+export class SearchResultsComponent implements AfterViewInit {
+    @ViewChild('searchInput') searchInput!: ElementRef;
     readonly xtreamStore = inject(XtreamStore);
     readonly router = inject(Router);
     readonly activatedRoute = inject(ActivatedRoute);
@@ -34,6 +41,13 @@ export class SearchResultsComponent {
         series: true,
     };
 
+    ngAfterViewInit() {
+        this.xtreamStore.setSelectedContentType(undefined);
+        setTimeout(() => {
+            this.searchInput.nativeElement.focus();
+        });
+    }
+
     onSearch() {
         if (this.searchTerm.length >= 3) {
             const types = Object.entries(this.filters)
@@ -50,12 +64,12 @@ export class SearchResultsComponent {
         this.xtreamStore.setSelectedContentType(type);
 
         if (item.type === 'live') {
-            this.router.navigate(['..', 'live'], {
+            this.router.navigate(['..', type, item.category_id], {
                 relativeTo: this.activatedRoute,
             });
         } else {
             this.router.navigate(
-                ['..', item.category_id, type, item.xtream_id],
+                ['..', type, item.category_id, item.xtream_id],
                 {
                     relativeTo: this.activatedRoute,
                 }