From b0a1d8da770ac5fec0570061efbd16e0d0a6fd1e Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 14 Mar 2026 23:42:43 +0100 Subject: [PATCH] feat(command-palette): add command icons and enhance search panel styling style(shell): update rail shortcut styles and improve hover effects --- .../lib/workspace-dashboard.component.scss | 4 +- .../workspace-command-palette.component.html | 62 +++++++++------- .../workspace-command-palette.component.scss | 72 +++++++++++++++++-- .../workspace-command-palette.component.ts | 19 +++++ .../workspace-shell.component.html | 2 +- .../workspace-shell.component.scss | 40 +++++++++++ .../workspace-shell.component.ts | 61 ++-------------- 7 files changed, 169 insertions(+), 91 deletions(-) diff --git a/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss b/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss index 02dcce14c..12a401b86 100644 --- a/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss +++ b/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss @@ -269,7 +269,7 @@ gap: var(--widget-grid-gap); align-items: stretch; position: relative; - padding: 12px; + //padding: 12px; min-width: 0; overflow-x: clip; } @@ -318,7 +318,7 @@ } .widget-slot:hover { - transform: translateY(-1px); + //transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-frame-border) 52%, transparent), 0 18px 28px -20px var(--dashboard-frame-glow); diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html index ba95c29c0..21c53ae68 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html @@ -4,24 +4,26 @@

{{ 'WORKSPACE.COMMAND_PALETTE.SUBTITLE' | translate }}

- +
+ +
@if (commandGroups().length === 0) { @@ -37,17 +39,29 @@ }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss index a60ae5d24..bbf7a29af 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss @@ -35,18 +35,37 @@ } } +.palette-search-panel { + margin: 0 -2px; + padding: 10px 12px 12px; + border: 1px solid var(--app-separator, var(--mat-sys-outline-variant)); + border-radius: 12px; + background: var( + --app-widget-header-bg, + var(--mat-sys-surface-container-high) + ); +} + .palette-search { + width: 100%; display: flex; align-items: center; gap: 8px; border-radius: 10px; - border: 1px solid var(--mat-sys-outline-variant); - background: var(--mat-sys-surface-container); - min-height: 38px; - padding: 0 10px; + border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant)); + background: var(--app-search-bg, var(--mat-sys-surface-container)); + min-height: 40px; + padding: 0 12px; + box-sizing: border-box; + transition: + border-color 0.15s ease, + background-color 0.15s ease, + box-shadow 0.15s ease; &:focus-within { border-color: var(--mat-sys-primary); + box-shadow: 0 0 0 3px + color-mix(in srgb, var(--mat-sys-primary) 12%, transparent); } mat-icon { @@ -58,12 +77,13 @@ } input { + flex: 1; border: none; outline: none; background: transparent; - color: inherit; + color: var(--mat-sys-on-surface); font: inherit; - font-size: 0.9rem; + font-size: 0.875rem; width: 100%; &::placeholder { @@ -76,11 +96,15 @@ .palette-search__hint { font-size: 0.72rem; color: var(--mat-sys-on-surface-variant); - border: 1px solid var(--mat-sys-outline-variant); + border: 1px solid var(--app-separator, var(--mat-sys-outline-variant)); border-radius: 6px; padding: 2px 6px; line-height: 1; flex-shrink: 0; + background: var( + --app-widget-header-bg, + var(--mat-sys-surface-container-high) + ); } .palette-results { @@ -139,6 +163,40 @@ } } +.palette-command--with-icon { + grid-template-columns: auto minmax(0, 1fr); + align-items: center; + gap: 10px; +} + +.palette-command__icon { + width: 30px; + height: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 9px; + background: color-mix( + in srgb, + var(--app-selection-surface-strong) 72%, + transparent + ); + color: var(--app-selection-color); + flex-shrink: 0; + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + } +} + +.palette-command__content { + min-width: 0; + display: grid; + gap: 1px; +} + .palette-command__label { font-size: 0.9rem; font-weight: 560; diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts index 76301d2fd..1520e37b6 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts +++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts @@ -228,4 +228,23 @@ export class WorkspaceCommandPaletteComponent implements AfterViewInit { } return 'WORKSPACE.COMMAND_PALETTE.GROUP_SECTION'; } + + getCommandIcon(command: WorkspaceCommandItem): string | null { + if (command.scope !== 'global') { + return null; + } + + switch (command.id) { + case 'global-search': + return 'search'; + case 'open-global-favorites': + return 'star'; + case 'open-downloads': + return 'download'; + case 'open-global-recent': + return 'history'; + default: + return 'bolt'; + } + } } diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html index 22c9b2ac5..095621760 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html @@ -41,7 +41,7 @@
- (!playlistId || item.playlistId === playlistId) && - (item.status === 'completed' || - item.status === 'failed' || - item.status === 'canceled') - ); - return { - icon: 'delete_sweep', - tooltip: isGlobalDownloads - ? this.translateText( - 'WORKSPACE.SHELL.CLEAR_COMPLETED_DOWNLOADS_ALL' - ) - : this.translateText( - 'WORKSPACE.SHELL.CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST' - ), - ariaLabel: isGlobalDownloads - ? this.translateText( - 'WORKSPACE.SHELL.CLEAR_COMPLETED_DOWNLOADS_ALL_ARIA' - ) - : this.translateText( - 'WORKSPACE.SHELL.CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST_ARIA' - ), - disabled: !hasClearable, - }; - } if (!context || !section) { return null; @@ -695,20 +656,6 @@ export class WorkspaceShellComponent { async runHeaderBulkAction(): Promise { const context = this.currentContext(); const section = this.currentSection(); - const isGlobalDownloads = this.isGlobalDownloadsRoute(); - - if ( - isGlobalDownloads || - (context && - (context.provider === 'xtreams' || - context.provider === 'stalker') && - section === 'downloads') - ) { - const playlistId = context?.playlistId; - await this.downloadsService.clearCompleted(playlistId); - await this.downloadsService.loadDownloads(playlistId); - return; - } if (!context || !section) { return;