From 4e732d3e51b629825f2f9a435532e773f26b33b3 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 20 Jun 2026 12:30:24 +0200
Subject: [PATCH] Align sources header with panel style

---
 .../workspace-sources.component.html          |  2 +-
 .../workspace-sources.component.scss          | 47 +++++++++++--------
 .../workspace-sources.component.spec.ts       | 26 ++++++++++
 3 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.spec.ts

diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html
index 5dcd2bf30..4904f08bd 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html
@@ -4,7 +4,7 @@
 >
     @if (visibleSourcesCount() > 0) {
         <header class="sources-header">
-            <div class="sources-header__text">
+            <div class="sources-header__meta">
                 <h2 class="sources-title">{{ title() }}</h2>
                 <p class="sources-subtitle">{{ subtitle() }}</p>
             </div>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss
index f31555184..2f0f6ea1d 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../../../ui/styles/panel-header' as panel;
+
 :host {
     display: block;
     height: 100%;
@@ -14,32 +16,19 @@
 }
 
 .sources-header {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    padding: 20px 20px 8px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
+    @include panel.standard-panel-header($sticky: true);
 }
 
-.sources-header__text {
-    min-width: 0;
-    flex: 1;
+.sources-header__meta {
+    @include panel.standard-panel-meta();
 }
 
 .sources-title {
-    margin: 0;
-    font-size: 1.2rem;
-    font-weight: 650;
-    letter-spacing: -0.02em;
+    @include panel.standard-panel-title();
 }
 
 .sources-subtitle {
-    margin: 4px 0 0;
-    font-size: 0.875rem;
-    color: var(--mat-sys-on-surface-variant, rgba(255, 255, 255, 0.6));
+    @include panel.standard-panel-subtitle();
 }
 
 .sort-trigger {
@@ -47,6 +36,7 @@
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    app-region: no-drag;
 
     .sort-trigger__label {
         font-size: 0.85rem;
@@ -65,7 +55,7 @@
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 0 20px 20px;
+    padding: 16px 20px 20px;
 }
 
 .sources-content app-recent-playlists {
@@ -87,3 +77,22 @@
         display: flex;
     }
 }
+
+@media (max-width: 768px) {
+    .sources-header {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 10px 16px;
+        min-height: unset;
+    }
+
+    .sources-header__meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    .sources-content {
+        padding: 12px 16px 16px;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.spec.ts
new file mode 100644
index 000000000..561498b54
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.spec.ts
@@ -0,0 +1,26 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+describe('WorkspaceSourcesComponent styles', () => {
+    const html = readFileSync(
+        join(__dirname, 'workspace-sources.component.html'),
+        'utf8'
+    );
+    const scss = readFileSync(
+        join(__dirname, 'workspace-sources.component.scss'),
+        'utf8'
+    );
+
+    it('uses the shared panel header pattern for the sources toolbar', () => {
+        expect(html).toContain('class="sources-header__meta"');
+        expect(scss).toContain(
+            "@use '../../../../../../ui/styles/panel-header' as panel;"
+        );
+        expect(scss).toContain(
+            '@include panel.standard-panel-header($sticky: true);'
+        );
+        expect(scss).toContain('@include panel.standard-panel-meta();');
+        expect(scss).toContain('@include panel.standard-panel-title();');
+        expect(scss).toContain('@include panel.standard-panel-subtitle();');
+    });
+});