From fb4553c55f24025a32581ea488376bb3815b1141 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sun, 8 Mar 2026 11:24:14 +0100
Subject: [PATCH] refactor(styles): streamline style files by forwarding mixins
 for content grid, portal layout, and sidebar

---
 .../src/app/shared/styles/_content-grid.scss  | 121 +-----------------
 .../src/app/shared/styles/_portal-layout.scss |   3 +
 .../src/app/shared/styles/portal-sidebar.scss |  43 +------
 3 files changed, 9 insertions(+), 158 deletions(-)
 create mode 100644 apps/web/src/app/shared/styles/_portal-layout.scss

diff --git a/apps/web/src/app/shared/styles/_content-grid.scss b/apps/web/src/app/shared/styles/_content-grid.scss
index 4f1e7388c..9babd1776 100644
--- a/apps/web/src/app/shared/styles/_content-grid.scss
+++ b/apps/web/src/app/shared/styles/_content-grid.scss
@@ -1,118 +1,3 @@
-// Shared content grid and card styles
-// Usage: @use 'path/to/_content-grid.scss' as grid;
-//        @include grid.content-grid;
-//        @include grid.content-card;
-
-@mixin content-grid($min-width: 140px, $gap: 20px) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
-    gap: $gap;
-}
-
-@mixin content-card {
-    cursor: pointer;
-    border-radius: 8px;
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-    &:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-    }
-}
-
-@mixin thumbnail-wrapper {
-    position: relative;
-    border-radius: 8px;
-    overflow: hidden;
-
-    .poster {
-        width: 100%;
-        aspect-ratio: 2/3;
-        object-fit: cover;
-        display: block;
-    }
-
-    .poster-placeholder {
-        width: 100%;
-        aspect-ratio: 2/3;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(128, 128, 128, 0.1);
-
-        mat-icon {
-            font-size: 36px;
-            width: 36px;
-            height: 36px;
-            opacity: 0.25;
-        }
-    }
-}
-
-@mixin type-badge {
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    padding: 3px 6px;
-    border-radius: 4px;
-    font-size: 9px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    background: rgba(0, 0, 0, 0.85);
-    color: #fff;
-
-    &.live {
-        color: #ef5350;
-    }
-    &.movie {
-        color: #42a5f5;
-    }
-    &.series {
-        color: #66bb6a;
-    }
-}
-
-@mixin remove-button {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    z-index: 1;
-    background: rgba(0, 0, 0, 0.5);
-    width: 28px;
-    height: 28px;
-    padding: 0;
-
-    &:hover {
-        background: rgba(0, 0, 0, 0.8);
-    }
-
-    mat-icon {
-        color: white;
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
-    }
-}
-
-@mixin card-info {
-    padding: 8px 10px;
-
-    h3 {
-        margin: 0;
-        font-size: 0.8rem;
-        font-weight: 500;
-        line-height: 1.3;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-
-    .date-info {
-        margin: 4px 0 0;
-        font-size: 0.7rem;
-        opacity: 0.6;
-    }
-}
+// Canonical source: libs/ui/styles/_content-grid.scss
+// This stub forwards the mixins for components that @use this file directly.
+@forward '../../../../../../libs/ui/styles/content-grid';
diff --git a/apps/web/src/app/shared/styles/_portal-layout.scss b/apps/web/src/app/shared/styles/_portal-layout.scss
new file mode 100644
index 000000000..2425988ef
--- /dev/null
+++ b/apps/web/src/app/shared/styles/_portal-layout.scss
@@ -0,0 +1,3 @@
+// Canonical source: libs/ui/styles/_portal-layout.scss
+// This stub forwards the mixin for components that @use this file directly.
+@forward '../../../../../../libs/ui/styles/portal-layout';
diff --git a/apps/web/src/app/shared/styles/portal-sidebar.scss b/apps/web/src/app/shared/styles/portal-sidebar.scss
index 6161fd17b..0534acf3b 100644
--- a/apps/web/src/app/shared/styles/portal-sidebar.scss
+++ b/apps/web/src/app/shared/styles/portal-sidebar.scss
@@ -1,40 +1,3 @@
-.sidebar {
-    // Width is controlled by the resizable directive
-    // Default fallback if directive not applied
-    width: 400px;
-    min-width: 250px;
-    max-width: 600px;
-    border-right: 1px solid #333;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0; // Prevent sidebar from shrinking
-
-    .sidebar-header {
-        padding: 11px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-        app-region: drag;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        h2 {
-            margin: 0;
-            font-size: 1.2rem;
-            font-weight: 500;
-            flex: 1;
-        }
-
-        button {
-            app-region: no-drag;
-        }
-
-        .switcher {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .manage-categories-btn {
-            margin-left: auto;
-        }
-    }
-}
+// Canonical source: libs/ui/styles/_portal-sidebar.scss
+// This stub forwards the rules for components that @use this file directly.
+@forward '../../../../../../libs/ui/styles/portal-sidebar';