diff --git a/apps/web/src/app/home/video-player/video-player.component.scss b/apps/web/src/app/home/video-player/video-player.component.scss index e4448742f..01e92b02c 100644 --- a/apps/web/src/app/home/video-player/video-player.component.scss +++ b/apps/web/src/app/home/video-player/video-player.component.scss @@ -35,6 +35,7 @@ background: #000; color: #fff; overflow: hidden; + border-radius: 20px 0 0 0; } .mat-drawer { diff --git a/apps/web/src/app/workspace/workspace-context-panel.component.html b/apps/web/src/app/workspace/workspace-context-panel.component.html index 61bff7378..817c9b98d 100644 --- a/apps/web/src/app/workspace/workspace-context-panel.component.html +++ b/apps/web/src/app/workspace/workspace-context-panel.component.html @@ -13,9 +13,9 @@ } - @if (subtitle(); as text) { +
diff --git a/apps/web/src/app/workspace/workspace-context-panel.component.scss b/apps/web/src/app/workspace/workspace-context-panel.component.scss index 6393e49bb..220bc6eb6 100644 --- a/apps/web/src/app/workspace/workspace-context-panel.component.scss +++ b/apps/web/src/app/workspace/workspace-context-panel.component.scss @@ -37,6 +37,7 @@ button[mat-icon-button] { width: 32px; height: 32px; + padding: 0; line-height: 32px; border-radius: 8px; color: var(--mat-sys-on-surface-variant); diff --git a/apps/web/src/app/workspace/workspace-settings-context-panel.component.scss b/apps/web/src/app/workspace/workspace-settings-context-panel.component.scss new file mode 100644 index 000000000..f7fcb18e6 --- /dev/null +++ b/apps/web/src/app/workspace/workspace-settings-context-panel.component.scss @@ -0,0 +1,26 @@ +@import '../../nav-list.scss'; + +:host { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} + +.panel-title { + margin: 0; + padding: 16px 16px 0; + font-size: 20px; + font-weight: 500; + color: var(--mat-sys-on-surface); +} + +.panel-header { + padding: 16px 16px 10px; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + opacity: 0.6; + flex-shrink: 0; +} diff --git a/apps/web/src/app/workspace/workspace-settings-context-panel.component.ts b/apps/web/src/app/workspace/workspace-settings-context-panel.component.ts index 0d35cb29e..936a194b8 100644 --- a/apps/web/src/app/workspace/workspace-settings-context-panel.component.ts +++ b/apps/web/src/app/workspace/workspace-settings-context-panel.component.ts @@ -7,34 +7,7 @@ import { SettingsContextService } from './settings-context.service'; @Component({ selector: 'app-workspace-settings-context-panel', imports: [MatIconModule, TranslateModule], - styles: [ - ` - :host { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; - } - - .panel-title { - margin: 0; - padding: 16px 16px 0; - font-size: 20px; - font-weight: 500; - color: var(--mat-sys-on-surface); - } - - .panel-header { - padding: 16px 16px 10px; - font-size: 11px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.12em; - opacity: 0.6; - flex-shrink: 0; - } - `, - ], + styleUrls: ['./workspace-settings-context-panel.component.scss'], template: `

{{ 'SETTINGS.TITLE' | translate }}

diff --git a/apps/web/src/app/workspace/workspace-shell.component.html b/apps/web/src/app/workspace/workspace-shell.component.html index a65b66dea..7d37c298c 100644 --- a/apps/web/src/app/workspace/workspace-shell.component.html +++ b/apps/web/src/app/workspace/workspace-shell.component.html @@ -111,7 +111,7 @@ mat-icon-button [class.is-active]="isDownloadsView()" (click)="openDownloadsShortcut()" - [matTooltip]="'Downloads'" + [matTooltip]="'DOWNLOADS.TITLE' | translate" aria-label="Open downloads" > download @@ -134,7 +134,7 @@ mat-icon-button [class.is-active]="isFavoritesView()" (click)="toggleFavoritesShortcut()" - [matTooltip]="'Favorites only'" + [matTooltip]="'WORKSPACE.FAVORITES_ONLY' | translate" [disabled]="!currentContext()" aria-label="Toggle favorites only" > @@ -145,7 +145,10 @@ type="button" mat-icon-button [matMenuTriggerFor]="sortMenu" - [matTooltip]="'Sort: ' + contentSortLabel()" + [matTooltip]=" + ('WORKSPACE.SORT_LABEL' | translate) + + contentSortLabel() + " aria-label="Sorting options" > sort @@ -155,7 +158,9 @@ mat-menu-item (click)="setContentSortMode('date-desc')" > - Date Added (Latest First) + {{ + 'WORKSPACE.SORT_DATE_DESC' | translate + }} @if (contentSortMode() === 'date-desc') { check } @@ -164,7 +169,7 @@ mat-menu-item (click)="setContentSortMode('date-asc')" > - Date Added (Oldest First) + {{ 'WORKSPACE.SORT_DATE_ASC' | translate }} @if (contentSortMode() === 'date-asc') { check } @@ -173,7 +178,7 @@ mat-menu-item (click)="setContentSortMode('name-asc')" > - Name A-Z + {{ 'WORKSPACE.SORT_NAME_ASC' | translate }} @if (contentSortMode() === 'name-asc') { check } @@ -182,7 +187,9 @@ mat-menu-item (click)="setContentSortMode('name-desc')" > - Name Z-A + {{ + 'WORKSPACE.SORT_NAME_DESC' | translate + }} @if (contentSortMode() === 'name-desc') { check } diff --git a/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss b/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss index f48e08bc4..d6fa4d8ae 100644 --- a/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss +++ b/apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss @@ -1,3 +1,5 @@ +@import '../../nav-list.scss'; + :host { display: flex; flex-direction: column; @@ -55,6 +57,7 @@ min-height: 0; } + .option-list { overflow-y: auto; min-height: 0; @@ -69,4 +72,3 @@ letter-spacing: 0.04em; color: var(--mat-sys-on-surface-variant); } - diff --git a/apps/web/src/app/xtream-electron/category-view/category-view.component.scss b/apps/web/src/app/xtream-electron/category-view/category-view.component.scss index eaa46a231..da6536289 100644 --- a/apps/web/src/app/xtream-electron/category-view/category-view.component.scss +++ b/apps/web/src/app/xtream-electron/category-view/category-view.component.scss @@ -1,3 +1,5 @@ +@import '../../../nav-list.scss'; + :host { height: 100%; overflow-y: auto; diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss new file mode 100644 index 000000000..78d3d6ce6 --- /dev/null +++ b/apps/web/src/nav-list.scss @@ -0,0 +1,79 @@ +// ─── Shared List Navigation Styles ──────────────────────────────────────────── +.nav-list { + flex: 1; + overflow-y: auto; + padding: 0 8px 12px; + display: flex; + flex-direction: column; + gap: 2px; +} + +.nav-item { + width: 100%; + display: flex; + align-items: center; + gap: 10px; + padding: 6px 4px; + border: 1px solid transparent; + border-radius: 10px; + background: transparent; + color: var(--mat-sys-on-surface-variant); + text-align: left; + text-decoration: none; + cursor: pointer; + font-size: 0.875rem; + font-weight: 500; + box-sizing: border-box; + transition: + background 0.15s ease, + color 0.15s ease, + border-color 0.15s ease; + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + flex-shrink: 0; + } + + span, + .nav-item-label { + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 0; + } + + .nav-item-meta { + font-size: 0.8rem; + min-width: 2ch; + text-align: right; + flex-shrink: 0; + color: var(--mat-sys-on-surface-variant); + opacity: 0.7; + } + + &:hover { + background: var(--mat-sys-surface-container); + color: var(--mat-sys-on-surface); + } + + &.selected, + &.active { + background: var(--mat-sys-primary-container) !important; + color: var(--mat-sys-on-primary-container) !important; + border-color: transparent !important; + font-weight: 600; + + * { + color: var(--mat-sys-on-primary-container) !important; + } + + .nav-item-meta { + color: var(--mat-sys-on-primary-container) !important; + opacity: 0.85; + } + } +} diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss index 8eff31530..3e37858b2 100644 --- a/apps/web/src/styles.scss +++ b/apps/web/src/styles.scss @@ -13,7 +13,6 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); // ─── Shared Components ──────────────────────────────────────────────────────── -@import './nav-list.scss'; // ─── macOS specific: space for traffic lights ───────────────────────────────── app-root.macos-platform app-header .modern-header {