style: update playlist switcher and header styles for improved UI/UX

Entire-Checkpoint: a0a3e00085b7

libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss

@@ -2,17 +2,37 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 2px 4px;
-    border-radius: 8px;
+    padding: 4px 8px 4px 4px;
+    border-radius: 10px;
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    background: transparent;
+    background: color-mix(in srgb, var(--app-on-surface) 5%, transparent);
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline-variant) 36%, transparent);
     app-region: no-drag;
 
     &:hover {
         background: color-mix(
             in srgb,
-            var(--app-on-surface) 8%,
+            var(--app-on-surface) 12%,
+            transparent
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--mat-sys-outline-variant) 64%,
+            transparent
+        );
+    }
+
+    &.is-open {
+        background: color-mix(
+            in srgb,
+            var(--app-on-surface) 12%,
+            transparent
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--mat-sys-outline-variant) 72%,
             transparent
         );
     }

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html

@@ -34,7 +34,6 @@
         <button
             type="button"
             class="command-trigger"
-            mat-icon-button
             (click)="onCommandPaletteRequested()"
             [matTooltip]="
                 'WORKSPACE.SHELL.COMMAND_PALETTE_SHORTCUT' | translate
@@ -43,7 +42,7 @@
                 'WORKSPACE.SHELL.OPEN_COMMAND_PALETTE' | translate
             "
         >
-            <mat-icon>keyboard_command_key</mat-icon>
+            {{ commandShortcutLabel }}
         </button>
     </label>
 

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss

@@ -23,6 +23,7 @@
 .search-field {
     flex: 1;
     min-width: 160px;
+    max-width: 560px;
     height: 36px;
     border-radius: 10px;
     border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
@@ -73,7 +74,8 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        flex-shrink: 0;
+        flex-shrink: 1;
+        min-width: 48px;
     }
 
     .search-chip--scope {
@@ -115,23 +117,47 @@
     }
 
     .command-trigger {
-        width: 28px;
-        height: 28px;
-        padding: 0;
-        margin-right: -4px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 22px;
+        min-width: 36px;
+        padding: 0 6px;
+        margin-right: -2px;
         color: var(--mat-sys-on-surface-variant);
-        border-radius: 8px;
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 76%,
+            transparent
+        );
+        border: 1px solid
+            color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
+        border-radius: 5px;
+        font-family: inherit;
+        font-size: 0.7rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        cursor: pointer;
         flex-shrink: 0;
+        transition:
+            color 0.15s ease,
+            background 0.15s ease,
+            border-color 0.15s ease;
 
         &:hover {
-            background: var(--mat-sys-surface-container-high);
+            background: var(--mat-sys-surface-container-highest);
             color: var(--mat-sys-on-surface);
+            border-color: color-mix(
+                in srgb,
+                var(--mat-sys-outline-variant) 100%,
+                transparent
+            );
         }
 
-        mat-icon {
-            font-size: 16px;
-            width: 16px;
-            height: 16px;
+        &:focus-visible {
+            outline: 2px solid var(--mat-sys-primary);
+            outline-offset: 1px;
         }
     }
 }
@@ -139,7 +165,7 @@
 .header-actions {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
     app-region: no-drag;
 
     button,

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts

@@ -25,6 +25,11 @@ import { WorkspaceHeaderAction } from '@iptvnator/portal/shared/util';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WorkspaceShellHeaderComponent {
+    readonly isMac =
+        typeof navigator !== 'undefined' &&
+        /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+    readonly commandShortcutLabel = this.isMac ? '⌘K' : 'Ctrl+K';
+
     readonly playlistTitle = input('');
     readonly playlistSubtitle = input('');
     readonly canOpenPlaylistInfo = input(false);