feat(ui): add app-region drag/no-drag and tweak styles

Add app-region: drag to container and header elements and app-region:
no-drag to interactive controls multiple components so the
Tauri window dragging behaves correctly while keeping buttons and form
controls clickable. Expand header search max width from 500px to 800px
to give more room on larger screens. Clean up and restyle video-player
toolbar toolbar primary colors and unify toolbar spacing.

Files changed include navigation, sidebar, header, main containers,
live-stream layout, navigation-bar, stalker container, and video-player
toolbar. These changes improve window drag UX on desktop and refine
toolbar/header appearance.

Author: 4gray

apps/web/src/app/shared/components/header/header.component.scss

@@ -227,7 +227,7 @@
 // Refined search field with elegant glass-morphism
 .search-container {
     flex: 1;
-    max-width: 500px;
+    max-width: 800px;
     margin: 0 24px;
     position: relative;
     display: flex;

apps/web/src/app/stalker/stalker-main-container.component.scss

@@ -31,9 +31,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    app-region: drag;
 
     button {
         @include mat.form-field-density(-5);
+        app-region: no-drag;
     }
 }
 

apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.scss

@@ -42,9 +42,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    app-region: drag;
 
     button {
         @include mat.form-field-density(-5);
+        app-region: no-drag;
     }
 }
 

apps/web/src/app/xtream-tauri/navigation/navigation.component.scss

@@ -5,6 +5,10 @@
     height: 100%;
 }
 
+.portal-status-container {
+    app-region: drag;
+}
+
 .mat-nav-list {
     padding-top: 0;
 }

apps/web/src/app/xtream-tauri/sidebar.scss

@@ -7,11 +7,16 @@
     .sidebar-header {
         padding: 16px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        app-region: drag;
 
         h2 {
             margin: 0;
             font-size: 1.2rem;
             font-weight: 500;
         }
+
+        button {
+            app-region: no-drag;
+        }
     }
 }

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

@@ -12,9 +12,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    app-region: drag;
 
     button {
         @include mat.form-field-density(-5);
+        app-region: no-drag;
     }
 }
 
@@ -28,6 +30,7 @@
 .content-header {
     padding: 16px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    app-region: drag;
 
     h2 {
         margin: 0;
@@ -37,6 +40,10 @@
         align-items: center;
         gap: 10px;
     }
+
+    button {
+        app-region: no-drag;
+    }
 }
 
 .scrollable-content {

apps/web/src/app/xtream/navigation-bar/navigation-bar.component.scss

@@ -11,6 +11,12 @@
     justify-content: space-between;
     align-items: center;
     padding: 0 10px;
+    app-region: drag;
+
+    button,
+    mat-button-toggle-group {
+        app-region: no-drag;
+    }
 }
 
 #sub-panel {

apps/web/src/styles.scss

@@ -30,20 +30,9 @@ html {
     }
 }
 
-.mat-toolbar.mat-primary {
-    background: #000;
-    color: #b8b8b8;
-}
-
 .full-width {
     width: 100%;
 }
-
-.mat-toolbar-row,
-.mat-toolbar-single-row {
-    height: 54px;
-}
-
 .mat-tab-label-active {
     opacity: 1 !important;
 }
@@ -55,13 +44,6 @@ textarea,
     outline: none;
 }
 
-/* .dark-theme .mat-expansion-panel,
-.dark-theme .mat-drawer,
-.dark-theme .mat-app-background,
-.dark-theme.mat-app-background {
-    background-color: #1d1d1d;
-} */
-
 .dark-theme {
     ::-webkit-scrollbar {
         overflow-y: scroll;

libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss

@@ -3,11 +3,16 @@
     align-items: center;
     padding: 8px;
     justify-content: space-between;
+    app-region: drag;
 
     .left {
         display: flex;
         gap: 5px;
     }
+
+    button {
+        app-region: no-drag;
+    }
 }
 
 .playlist-info {

libs/ui/components/src/lib/video-player/toolbar/toolbar.component.scss

@@ -1,9 +1,26 @@
+mat-toolbar {
+    app-region: drag;
+
+    button {
+        app-region: no-drag;
+    }
+}
+
 .spacer {
     flex: 1 1 auto;
 }
 
+.mat-toolbar.mat-primary {
+    background: var(--mdc-primary-100);
+    color: #ccc;
+
+    button {
+        color: #ccc;
+    }
+}
+
 @media only screen and (max-width: 599px) {
     .sidenav-toggle-button {
         display: none;
     }
-}
+}